@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,400;1,500&family=Playfair+Display:wght@600;700&display=swap");

/* ==================================================================
   HUMANÓMETRO DE ESPERA — elpuntodeespera.com
   Lienzo de referencia: 1024 × 416 px
   1 px de referencia = calc(100cqw / 1024)
   ================================================================== */

.hm {
  --hp: calc(100cqw / 1024);

  container-type: inline-size;
  container-name: hm;
  position: relative;
  display: block;
  width: 100%;
  max-width: 1024px;
  aspect-ratio: 1024 / 416;
  margin: 0 auto;
  overflow: hidden;

  background-color: #f7e9de;
  background-image: url("/hm/paper.webp");
  background-repeat: repeat;
  background-position: top left;

  color: #180601;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hm *,
.hm *::before,
.hm *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- */
/* hoja / rama decorativa                                            */
/* ---------------------------------------------------------------- */

.hm-leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--hp) * 100);
  height: calc(var(--hp) * 120);
  object-fit: contain;
  object-position: top left;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ---------------------------------------------------------------- */
/* cabecera                                                          */
/* ---------------------------------------------------------------- */

.hm-head {
  position: absolute;
  left: calc(var(--hp) * 110);
  top: calc(var(--hp) * 37);
  display: flex;
  align-items: baseline;
  margin: 0;
  z-index: 3;
  white-space: nowrap;
}

.hm-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: calc(var(--hp) * 51);
  line-height: 1;
  letter-spacing: 0;
  color: #1e0a02;
}

.hm-dot {
  color: #8d3106;
}

.hm-sub {
  margin-left: calc(var(--hp) * 16);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: calc(var(--hp) * 26);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8d3106;
}

/* ---------------------------------------------------------------- */
/* cuerpo / columnas                                                 */
/* ---------------------------------------------------------------- */

.hm-body {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hm-left {
  position: absolute;
  left: calc(var(--hp) * 45);
  top: calc(var(--hp) * 113);
  width: calc(var(--hp) * 540);
}

.hm-right {
  position: absolute;
  left: calc(var(--hp) * 615);
  top: calc(var(--hp) * 113);
  width: calc(var(--hp) * 375);
}

.hm-vrule {
  position: absolute;
  left: calc(var(--hp) * 600);
  top: calc(var(--hp) * 118);
  width: 1px;
  height: calc(var(--hp) * 220);
  background: rgba(143, 65, 29, 0.7);
}

/* divisor corto de fila */
.hm-div {
  display: block;
  width: 1px;
  height: calc(var(--hp) * 28);
  background: rgba(143, 65, 29, 0.7);
  justify-self: center;
}

/* ---------------------------------------------------------------- */
/* filas izquierdas                                                  */
/* ---------------------------------------------------------------- */

.hm-row {
  position: relative;
  display: grid;
  grid-template-columns:
    calc(var(--hp) * 85)
    calc(var(--hp) * 159)
    calc(var(--hp) * 1)
    calc(var(--hp) * 82)
    calc(var(--hp) * 168)
    minmax(0, 1fr);
  align-items: center;
  height: calc(var(--hp) * 56);
  border-bottom: 1px solid #cdb5a1;
}

.hm-icon {
  display: block;
  width: calc(var(--hp) * 68);
  height: auto;
  justify-self: center;
  align-self: center;
  user-select: none;
}

/* ---------------------------------------------------------------- */
/* filas derechas                                                    */
/* ---------------------------------------------------------------- */

.hm-mrow {
  position: relative;
  display: grid;
  grid-template-columns:
    calc(var(--hp) * 92)
    calc(var(--hp) * 1)
    calc(var(--hp) * 135)
    calc(var(--hp) * 135)
    minmax(0, 1fr);
  align-items: center;
  height: calc(var(--hp) * 75);
  border-bottom: 1px solid #cdb5a1;
}

.hm-micon {
  display: block;
  width: calc(var(--hp) * 86);
  height: auto;
  justify-self: center;
  align-self: center;
  user-select: none;
}

/* ---------------------------------------------------------------- */
/* etiquetas                                                         */
/* ---------------------------------------------------------------- */

.hm-label {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--hp) * 17);
  line-height: 1.08;
  color: #180601;
}

.hm-mrow .hm-label {
  padding-left: calc(var(--hp) * 14);
  font-size: calc(var(--hp) * 17.5);
}

.hm-row[data-key="redaccion"] .hm-label,
.hm-row[data-key="supervision"] .hm-label {
  font-size: calc(var(--hp) * 21);
}

/* ---------------------------------------------------------------- */
/* "Humano" / "IA"                                                   */
/* ---------------------------------------------------------------- */

.hm-end {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--hp) * 16);
  line-height: 1;
  color: #180601;
  white-space: nowrap;
}

.hm-end-h {
  padding-left: calc(var(--hp) * 18);
}

.hm-end-ia {
  padding-left: calc(var(--hp) * 17);
}

/* ---------------------------------------------------------------- */
/* pista + pomo                                                      */
/* ---------------------------------------------------------------- */

.hm-track {
  position: relative;
  width: calc(var(--hp) * 168);
  height: calc(var(--hp) * 18);
  padding: 0 calc(var(--hp) * 11);
  border: calc(var(--hp) * 1.6) solid #180200;
  border-radius: calc(var(--hp) * 9);
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hm-track:active,
.hm-track.hm-dragging,
.hm-track.is-dragging,
.hm-track.dragging {
  cursor: grabbing;
}

.hm-track:focus {
  outline: none;
}

.hm-track:focus-visible {
  outline: max(1px, calc(var(--hp) * 2)) solid rgba(141, 49, 6, 0.45);
  outline-offset: calc(var(--hp) * 3);
}

.hm-rail {
  position: absolute;
  left: calc(var(--hp) * 11);
  right: calc(var(--hp) * 11);
  top: 0;
  bottom: 0;
}

/* ---- relleno bicolor de la pista: Humano | IA ---- */
/* La frontera coincide exactamente con el centro del pomo:
   centro = 11px + (100% − 22px) * valor/10   (--hm-v = valor/10)  */

.hm-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

/* tramo "Humano": del borde izquierdo al centro del pomo */
.hm-fill-h {
  left: 0;
  width: calc(var(--hp) * 11 + (100% - var(--hp) * 22) * var(--hm-v, 0.5));
  border-radius: calc(var(--hp) * 7.4) 0 0 calc(var(--hp) * 7.4);
  background-color: rgba(138, 148, 112, 0.85);
}

/* tramo "IA": del centro del pomo al borde derecho */
.hm-fill-ia {
  left: calc(var(--hp) * 11 + (100% - var(--hp) * 22) * var(--hm-v, 0.5));
  right: 0;
  border-radius: 0 calc(var(--hp) * 7.4) calc(var(--hp) * 7.4) 0;
  background-color: rgba(181, 86, 43, 0.85);
}

.hm-pct {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--hp) * 11);
  line-height: 1;
  color: #fbf0e6;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

/* si un tramo es más estrecho que ~34px, se oculta su porcentaje */
/* glue: ocultar % en tramos estrechos lo hace el JS (.hm-pct-off) */
.hm-pct.hm-pct-off { visibility: hidden; }

.hm-knob {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: calc(var(--hp) * 22);
  height: calc(var(--hp) * 22);
  border: calc(var(--hp) * 1.6) solid #180200;
  border-radius: 50%;
  background: #fbf0e6;
  pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* cápsulas de texto                                                 */
/* ---------------------------------------------------------------- */

.hm-cap {
  display: block;
  width: calc(var(--hp) * 135);
  height: calc(var(--hp) * 28);
  padding: 0 calc(var(--hp) * 10);
  border: calc(var(--hp) * 1.6) solid #180200;
  border-radius: calc(var(--hp) * 14);
  background: transparent;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--hp) * 16);
  line-height: 1;
  color: #180601;
  text-align: center;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  justify-self: start;
}

.hm-cap:focus {
  border-color: #8d3106;
  box-shadow: 0 0 calc(var(--hp) * 5) rgba(141, 49, 6, 0.18);
}

.hm-cap::placeholder {
  color: rgba(24, 6, 1, 0.35);
  font-style: italic;
}

.hm-cap[readonly] {
  cursor: default;
}

/* ---------------------------------------------------------------- */
/* guardado (fuera del lienzo)                                       */
/* ---------------------------------------------------------------- */

.hm-save {
  display: block;
  max-width: 1024px;
  margin: 8px auto 0;
  padding-left: 45px;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(24, 6, 1, 0.6);
  text-align: left;
  min-height: 1.5em;
}

.hm-save-status {
  color: inherit;
}

.hm-save-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(24, 6, 1, 0.3);
  cursor: pointer;
}

.hm-save-link:hover {
  color: #8d3106;
  border-bottom-color: rgba(141, 49, 6, 0.5);
}

.hm-pw {
  width: 130px;
  padding: 2px 4px;
  margin: 0 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(24, 6, 1, 0.35);
  border-radius: 0;
  font-family: inherit;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: rgba(24, 6, 1, 0.8);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.hm-pw:focus {
  border-bottom-color: rgba(141, 49, 6, 0.7);
}

.hm-ok {
  padding: 2px 4px;
  margin-left: 4px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: rgba(24, 6, 1, 0.6);
  text-decoration: underline;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hm-ok:hover,
.hm-ok:focus-visible {
  color: #8d3106;
  outline: none;
}

/* ==================================================================
   RESPONSIVE < 760px — columnas apiladas
   ================================================================== */

@media (max-width: 759px) {
  .hm {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    padding-bottom: 10px;
  }
}

@container (max-width: 759px) {
  .hm-leaf {
    width: 64px;
    height: 77px;
  }

  /* ---- cabecera en dos líneas ---- */
  .hm-head {
    position: static;
    display: block;
    padding: 76px 18px 14px;
    white-space: normal;
  }

  .hm-title {
    font-size: 40px;
    line-height: 1;
  }

  .hm-sub {
    display: block;
    margin: 7px 0 0 0;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0.2em;
  }

  /* ---- columnas apiladas ---- */
  .hm-body {
    position: static;
  }

  .hm-vrule {
    display: none;
  }

  .hm-left,
  .hm-right {
    position: static;
    width: auto;
    padding: 0 18px;
  }

  .hm-right {
    margin-top: 6px;
  }

  /* ---- filas izquierdas ---- */
  .hm-row {
    grid-template-columns: 40px minmax(0, 1fr) auto minmax(88px, 1.1fr) auto;
    column-gap: 8px;
    height: auto;
    min-height: 58px;
    padding: 8px 0;
  }

  .hm-icon {
    width: 40px;
  }

  .hm-label {
    font-size: 17px;
  }

  .hm-mrow .hm-label {
    font-size: 17px;
  }

  .hm-row[data-key="redaccion"] .hm-label,
  .hm-row[data-key="supervision"] .hm-label {
    font-size: 17px;
  }

  .hm-div {
    display: none;
  }

  .hm-end {
    font-size: 13px;
  }

  .hm-end-h {
    padding-left: 0;
    text-align: right;
  }

  .hm-end-ia {
    padding-left: 0;
  }

  .hm-track {
    width: 100%;
    height: 18px;
    padding: 0 11px;
    border-width: 1.6px;
    border-radius: 9px;
  }

  .hm-rail {
    left: 11px;
    right: 11px;
  }

  .hm-knob {
    width: 22px;
    height: 22px;
    border-width: 1.6px;
  }

  /* ---- relleno bicolor (mismas medidas que .hm-rail) ---- */
  .hm-fill-h {
    left: 11px;
    width: calc((100% - 22px) * var(--hm-v, 0.5));
    border-radius: 7px 0 0 7px;
  }

  .hm-fill-ia {
    left: calc(11px + (100% - 22px) * var(--hm-v, 0.5));
    right: 11px;
    border-radius: 0 7px 7px 0;
  }

  /* ---- filas derechas ---- */
  .hm-mrow {
    grid-template-columns: 48px minmax(0, 1fr) 118px;
    column-gap: 10px;
    height: auto;
    min-height: 66px;
    padding: 8px 0;
  }

  .hm-micon {
    width: 48px;
  }

  .hm-mrow .hm-label {
    padding-left: 0;
  }

  .hm-cap {
    width: 100%;
    height: 28px;
    padding: 0 10px;
    border-width: 1.6px;
    border-radius: 14px;
    font-size: 15px;
    justify-self: stretch;
  }
}

/* el porcentaje de los tramos deja de escalar en el layout apilado
   (consulta nombrada: .hm-pct vive dentro de un contenedor propio) */
@container hm (max-width: 759px) {
  .hm-pct {
    font-size: 11px;
  }
}

/* === pasada móvil (DeepSeek) === */
@container (max-width: 759px) {
  .hm-leaf {
    left: 0;
    top: 0;
    width: 70px;
    height: 84px;
  }

  /* ---- cabecera en dos líneas ---- */
  .hm-head {
    position: static;
    display: block;
    padding: 84px 16px 14px;
    white-space: normal;
  }

  .hm-title {
    display: block;
    margin: 0;
    font-size: 38px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .hm-dot {
    display: inline;
    white-space: nowrap;
  }

  .hm-sub {
    display: block;
    margin: 8px 0 0 0;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.18em;
  }

  /* ---- columnas apiladas ---- */
  .hm-body {
    position: static;
  }

  .hm-vrule {
    display: none;
  }

  .hm-left,
  .hm-right {
    position: static;
    width: auto;
    max-width: none;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .hm-right {
    margin-top: 8px;
  }

  /* ---- filas izquierdas: 2 líneas con CSS grid ---- */
  .hm-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 8px;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 10px 0;
    border-bottom: 1px solid #cdb5a1;
  }

  .hm-icon {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: auto;
    justify-self: start;
    align-self: center;
  }

  .hm-label {
    grid-column: 2 / 4;
    grid-row: 1;
    font-size: 17px;
    line-height: 1.08;
    align-self: center;
  }

  .hm-row[data-key="redaccion"] .hm-label,
  .hm-row[data-key="supervision"] .hm-label {
    font-size: 17px;
  }

  .hm-div {
    display: none;
  }

  .hm-end {
    font-size: 14px;
    line-height: 1;
    padding: 0;
  }

  .hm-end-h {
    grid-column: 1;
    grid-row: 2;
    padding-left: 0;
    justify-self: start;
    align-self: center;
  }

  .hm-end-ia {
    grid-column: 3;
    grid-row: 2;
    padding-left: 0;
    justify-self: end;
    align-self: center;
  }

  /* ---- pista + pomo ---- */
  .hm-track {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: 24px;
    padding: 0 13px;
    border-width: 1.6px;
    border-radius: 12px;
    justify-self: stretch;
  }

  .hm-rail {
    left: 13px;
    right: 13px;
  }

  .hm-knob {
    width: 26px;
    height: 26px;
    border-width: 1.6px;
  }

  .hm-fill-h {
    left: 0;
    width: calc(13px + (100% - 26px) * var(--hm-v, 0.5));
    border-radius: 10px 0 0 10px;
  }

  .hm-fill-ia {
    left: calc(13px + (100% - 26px) * var(--hm-v, 0.5));
    right: 0;
    border-radius: 0 10px 10px 0;
  }

  .hm-pct {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fbf0e6;
  }

  /* ---- filas derechas ---- */
  .hm-mrow {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 120px;
    column-gap: 10px;
    height: auto;
    min-height: 0;
    padding: 10px 0;
    align-items: center;
    border-bottom: 1px solid #cdb5a1;
  }

  .hm-micon {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    width: 52px;
    height: auto;
    justify-self: start;
    align-self: center;
  }

  .hm-mrow .hm-div {
    display: none;
  }

  .hm-mrow .hm-label {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    font-size: 17px;
    line-height: 1.08;
    padding-left: 0;
    align-self: center;
  }

  .hm-cap {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    margin: 0;
    grid-column: 3;
    grid-row: 1;
    width: 120px;
    height: 32px;
    padding: 0 10px;
    border-width: 1.6px;
    border-radius: 16px;
    font-size: 15px;
    justify-self: end;
    align-self: center;
  }
}
/* === pasada escritorio (DeepSeek) === */
/* ==================================================================
   ESCRITORIO ≥ 760px — layout horizontal de la referencia
   (pistas más anchas, pomo de 24px, % legibles, cursores de arrastre)
   Se añade al final; no toca el resto del CSS.
   ================================================================== */

@container (min-width: 760px) {

  /* ---- 4. el punto del título siempre visible, en terracota ---- */
  .hm-dot {
    display: inline;
    color: #8d3106;
  }

  /* ---- 1. filas izquierdas: hueco etiqueta → "Humano" más corto
     y pista de ~200px de referencia (x 352 → 552) ---- */
  .hm-row {
    grid-template-columns:
      calc(var(--hp) * 85)      /* icono (68px centrado) */
      calc(var(--hp) * 146)     /* glue: 154→146; etiqueta: x 130 → 284 */
      calc(var(--hp) * 1)       /* divisor corto: x ≈ 284 */
      calc(var(--hp) * 75)      /* glue: 67→75; "Humano": x 296 */
      calc(var(--hp) * 200)     /* pista: x 352 → 552 */
      minmax(0, 1fr);           /* "IA": x 560 */
  }

  .hm-end-h {
    padding-left: calc(var(--hp) * 11);
  }

  .hm-end-ia {
    padding-left: calc(var(--hp) * 8);
  }

  .hm-track {
    width: calc(var(--hp) * 200);
    height: calc(var(--hp) * 22);
    padding: 0 calc(var(--hp) * 12);
    border-radius: calc(var(--hp) * 11);
    justify-self: start;
    cursor: pointer;
  }

  .hm-rail {
    left: calc(var(--hp) * 12);
    right: calc(var(--hp) * 12);
  }

  /* relleno bicolor: mismas medidas que la pista (padding 12px / pomo 24px),
     la frontera sigue cayendo en el centro exacto del pomo */
  .hm-fill-h {
    left: 0;
    width: calc(var(--hp) * 12 + (100% - var(--hp) * 24) * var(--hm-v, 0.5));
    border-radius: calc(var(--hp) * 9.4) 0 0 calc(var(--hp) * 9.4);
  }

  .hm-fill-ia {
    left: calc(var(--hp) * 12 + (100% - var(--hp) * 24) * var(--hm-v, 0.5));
    right: 0;
    border-radius: 0 calc(var(--hp) * 9.4) calc(var(--hp) * 9.4) 0;
  }

  .hm-knob {
    width: calc(var(--hp) * 24);
    height: calc(var(--hp) * 24);
    pointer-events: auto;
    cursor: grab;
  }

  /* ---- 2. porcentajes de los tramos ---- */
  .hm-pct {
    font-size: max(12px, calc(var(--hp) * 12.5));
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fbf0e6;
  }

  /* ---- 3. "Humano" / "IA" ---- */
  .hm-end {
    font-size: max(14px, calc(var(--hp) * 16));
  }

  /* ---- 5. cursores de arrastre ---- */
  .hm-track:active,
  .hm-track.is-dragging,
  .hm-track.hm-dragging {
    cursor: grabbing;
  }

  .hm-track:active .hm-knob,
  .hm-track.is-dragging .hm-knob,
  .hm-track.hm-dragging .hm-knob {
    cursor: grabbing;
  }
}