/* ============================================================================
 * iShop · css/04-componentes.css — piezas sobre vidrio
 * ========================================================================== */

@layer componentes {

  /* ======================================================================
   * Botones — cápsulas
   * ==================================================================== */
  .boton {
    --bt-fondo: var(--surface-2);
    --bt-tinta: var(--ink);
    --bt-borde: var(--line);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.7em 1.4em;
    border: 1px solid var(--bt-borde);
    border-radius: var(--radius-pill);
    background: var(--bt-fondo);
    color: var(--bt-tinta);
    font-family: var(--font-text);
    font-size: var(--step-0);
    font-weight: 700;
    letter-spacing: -0.008em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: background var(--dur-1) var(--ease-standard),
                scale var(--dur-2) var(--ease-spring);
  }

  .boton:hover  { --bt-fondo: var(--surface-3); }
  .boton:active { scale: 0.96; }

  .boton--acento {
    --bt-fondo: var(--accent);
    --bt-tinta: var(--accent-ink);
    --bt-borde: transparent;
  }

  .boton--claro { --bt-fondo: var(--ink); --bt-tinta: var(--ink-inv); --bt-borde: transparent; }
  .boton--contorno { --bt-fondo: transparent; --bt-borde: var(--line-strong); }
  .boton--fantasma { --bt-fondo: transparent; --bt-borde: transparent; --bt-tinta: var(--ink-2); }
  .boton--fantasma:hover { --bt-tinta: var(--ink); --bt-fondo: var(--surface-1); }
  .boton--peligro { --bt-fondo: var(--danger); --bt-tinta: #fff; --bt-borde: transparent; }

  .boton--sm { padding: 0.5em 1em; font-size: var(--step--1); }
  .boton--lg { padding: 0.85em 1.75em; font-size: var(--step-1); }
  .boton--bloque { inline-size: 100%; }

  .boton[disabled], .boton[aria-disabled='true'] {
    opacity: 0.4; cursor: not-allowed; pointer-events: none;
  }

  /* ======================================================================
   * Tarjeta de vidrio
   * ==================================================================== */
  .tarjeta {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
    padding: var(--space-5);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-satura));
    -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-satura));
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tarjeta { background: rgb(24 20 40 / 0.9); }
  }

  .tarjeta--plana { background: transparent; border-color: transparent; box-shadow: none; padding-inline: 0; backdrop-filter: none; }
  .tarjeta--elevada { box-shadow: var(--shadow-2); }

  .tarjeta__titulo {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-block-end: var(--space-2);
  }

  .tarjeta__texto { color: var(--ink-2); font-size: var(--step-0); }

  /* ======================================================================
   * Pastilla
   * ==================================================================== */
  .pastilla {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.3em 0.8em 0.3em 0.65em;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--tono, var(--idle)) 22%, transparent);
    border: 1px solid color-mix(in oklab, var(--tono, var(--idle)) 34%, transparent);
    color: color-mix(in oklab, var(--tono, var(--idle)) 55%, var(--ink));
    font-size: var(--step--1);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
  }

  .pastilla::before {
    content: '';
    inline-size: 0.5em;
    block-size: 0.5em;
    border-radius: 50%;
    background: var(--tono, var(--idle));
    box-shadow: 0 0 8px color-mix(in oklab, var(--tono, var(--idle)) 70%, transparent);
    flex: none;
  }

  .pastilla--liso::before { display: none; padding-inline-start: 0.8em; }

  .punto {
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    border-radius: 50%;
    background: var(--tono, var(--idle));
    box-shadow: 0 0 8px color-mix(in oklab, var(--tono, var(--idle)) 60%, transparent);
    vertical-align: 0.06em;
    margin-inline-end: 0.5em;
    flex: none;
  }

  /* ======================================================================
   * Datos
   * ==================================================================== */
  .dato { display: flex; flex-direction: column; gap: 0.15em; }
  .dato__etiqueta { font-size: var(--step--1); color: var(--ink-3); }

  .dato__valor {
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .dato--grande .dato__valor {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .dato--fila {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: 0.55em;
    border-block-end: 1px solid var(--line);
  }

  .dato--fila:last-child { border-block-end: 0; }

  /* ======================================================================
   * Tabla
   * ==================================================================== */
  .tabla { inline-size: 100%; font-size: var(--step--1); font-variant-numeric: tabular-nums; }

  .tabla th {
    font-weight: 700;
    color: var(--ink-3);
    font-size: var(--step--1);
    letter-spacing: 0.03em;
    padding: 0 var(--space-3) var(--space-3);
    border-block-end: 1px solid var(--line-strong);
    white-space: nowrap;
    text-align: start;
  }

  .tabla td {
    padding: var(--space-3);
    border-block-end: 1px solid var(--line);
    vertical-align: middle;
  }

  .tabla tbody tr:last-child td { border-block-end: 0; }
  .tabla tbody tr:hover { background: var(--surface-1); }
  .tabla :is(th, td):first-child { padding-inline-start: 0; }
  .tabla :is(th, td):last-child { padding-inline-end: 0; text-align: end; }
  .tabla .num { text-align: end; }

  .tabla-env { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }

  /* ======================================================================
   * Aviso
   * ==================================================================== */
  .aviso {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-2);
    background: color-mix(in oklab, var(--tono, var(--idle)) 16%, transparent);
    border: 1px solid color-mix(in oklab, var(--tono, var(--idle)) 32%, transparent);
  }

  .aviso__marca {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--tono, var(--idle));
    box-shadow: 0 0 10px var(--tono, var(--idle));
    margin-block-start: 0.5em;
  }

  .aviso__titulo {
    font-weight: 700;
    font-size: var(--step-0);
    color: color-mix(in oklab, var(--tono) 45%, var(--ink));
  }

  .aviso__texto {
    grid-column: 2;
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.5;
    max-inline-size: 54ch;
  }

  .aviso__codigo {
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-3);
  }

  /* ======================================================================
   * Medidor
   * ==================================================================== */
  .medidor {
    block-size: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    overflow: hidden;
  }

  .medidor__valor {
    block-size: 100%;
    border-radius: inherit;
    background: var(--tono, var(--accent));
    box-shadow: 0 0 10px color-mix(in oklab, var(--tono, var(--accent)) 60%, transparent);
    inline-size: calc(var(--avance, 0) * 100%);
    transition: inline-size var(--dur-3) var(--ease-out);
  }

  /* ======================================================================
   * KPI
   * ==================================================================== */
  .kpi {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
  }

  .kpi__etiqueta { font-size: var(--step--1); color: var(--ink-3); line-height: 1.3; }

  .kpi__valor {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, var(--tono, var(--ink)) 30%, var(--ink));
  }

  .kpi__pie {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--step--1);
    color: var(--ink-3);
    flex-wrap: wrap;
  }

  .kpi__meta {
    color: color-mix(in oklab, var(--tono, var(--idle)) 50%, var(--ink));
    font-weight: 600;
    white-space: nowrap;
  }

  /* ======================================================================
   * CONTROL SEGMENTADO — la afordancia por defecto de las decisiones binarias
   * El indicador se desliza con un muelle; es el gesto táctil por excelencia.
   * ==================================================================== */
  .segmentado {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    border: 1px solid var(--line);
    isolation: isolate;
  }

  .segmentado__op {
    position: relative;
    z-index: 1;
    padding: 0.55em 0.9em;
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--ink-3);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-2) var(--ease-standard);
  }

  .segmentado__op[aria-checked='true'] { color: var(--ink-inv); }

  /* El pulgar: una sola pieza que se mueve, no un fondo por opción. */
  .segmentado__pulgar {
    position: absolute;
    z-index: 0;
    inset-block: 3px;
    inline-size: calc((100% - 6px - (var(--n) - 1) * 2px) / var(--n));
    inset-inline-start: 3px;
    translate: calc((100% + 2px) * var(--i)) 0;
    border-radius: var(--radius-pill);
    background: var(--ink);
    box-shadow: var(--shadow-1);
    transition: translate var(--dur-3) var(--ease-spring);
  }

  /* ======================================================================
   * Opciones en lista (cuando no cabe un segmentado)
   * ==================================================================== */
  .opciones { display: grid; gap: var(--space-2); }
  .opciones--fila { grid-auto-flow: column; grid-auto-columns: 1fr; }

  .opcion {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    inline-size: 100%;
    padding: var(--space-4);
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
    text-align: start;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-standard),
                border-color var(--dur-1) var(--ease-standard),
                scale var(--dur-2) var(--ease-spring);
  }

  .opcion:hover { background: var(--surface-2); }
  .opcion:active { scale: 0.985; }

  .opcion[aria-checked='true'] {
    border-color: var(--ink);
    background: var(--surface-2);
  }

  .opcion__titulo { font-weight: 700; font-size: var(--step-0); }
  .opcion__nota { grid-column: 1; font-size: var(--step--1); color: var(--ink-3); line-height: 1.4; }

  .opcion__valor {
    grid-row: 1;
    grid-column: 2;
    font-size: var(--step--1);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }

  .opcion[disabled] { opacity: 0.4; cursor: not-allowed; }

  @media (max-width: 46rem) {
    .opciones--fila { grid-auto-flow: row; }
  }

  .grupo { border: 0; padding: 0; margin: 0; }
  .grupo__leyenda {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4); inline-size: 100%; padding: 0 0 var(--space-3);
  }

  /* ======================================================================
   * EL DISPOSITIVO — losa flotante con bloom de color detrás
   * ==================================================================== */
  .dispositivo {
    position: relative;
    aspect-ratio: 440 / 900;
    inline-size: 100%;
    container-type: inline-size;
    filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.35))
            drop-shadow(0 40px 70px rgb(0 0 0 / 0.5));
  }

  /* Bloom: un halo del color del acabado detrás del aparato. Es lo que lo
     integra en la malla en lugar de dejarlo pegado encima. */
  .dispositivo::before {
    content: '';
    position: absolute;
    inset: 8% -14%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
      color-mix(in oklab, var(--dev-metal-b) 70%, transparent), transparent 68%);
    filter: blur(48px);
    opacity: 0.8;
    pointer-events: none;
  }

  .dispositivo .dev-svg {
    position: absolute; inset: 0;
    inline-size: 100%; block-size: 100%;
    overflow: visible;
  }

  .dispositivo .dev-cristal { fill: var(--dev-glass); }
  .dispositivo .dev-filete-luz { stroke: rgb(255 255 255 / 0.72); stroke-width: 1.4; }
  .dispositivo .dev-filete-sombra { stroke: rgb(0 0 0 / 0.42); stroke-width: 1.4; }
  .dispositivo .dev-boton { fill: var(--dev-metal-b); }

  .dispositivo__pantalla {
    position: absolute;
    inset: 1.222% 2.5%;
    border-radius: 12.7cqi;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(70% 50% at 20% 0%, oklch(0.55 0.18 320 / 0.55), transparent 70%),
      radial-gradient(60% 50% at 90% 100%, oklch(0.60 0.16 210 / 0.45), transparent 70%),
      var(--dev-glass);
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 3.4cqi;
    line-height: 1.45;
  }

  /* La isla del propio aparato (distinta de la isla global de la página). */
  .dispositivo__isla {
    position: absolute;
    inset-block-start: 2.6cqi;
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 3;
    background: #000;
    border-radius: var(--radius-pill);
    block-size: 7.2cqi;
    inline-size: 26cqi;
    transition: inline-size var(--dur-3) var(--ease-spring),
                block-size var(--dur-3) var(--ease-spring);
  }

  .dispositivo__isla[data-isla='expandida'] { inline-size: 78cqi; block-size: 19cqi; }

  /* ======================================================================
   * Pantalla viva
   * ==================================================================== */
  .pant {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    padding: 12cqi 6cqi 6cqi;
    gap: 3cqi;
  }

  .pant__barra {
    display: flex;
    justify-content: space-between;
    font-size: 3cqi;
    color: rgb(255 255 255 / 0.55);
    font-variant-numeric: tabular-nums;
  }

  .pant__titulo {
    font-family: var(--font-display);
    font-size: 6.4cqi;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
  }

  .pant__sub { font-size: 3.4cqi; color: rgb(255 255 255 / 0.68); }

  .pant__pasos { display: flex; flex-direction: column; gap: 2.4cqi; margin-block-start: auto; }

  .pant__paso {
    display: flex;
    align-items: center;
    gap: 2.6cqi;
    font-size: 3.4cqi;
    color: rgb(255 255 255 / 0.45);
    padding: 1.6cqi 2.6cqi;
    border-radius: 4cqi;
    transition: background var(--dur-2) var(--ease-standard),
                color var(--dur-2) var(--ease-standard);
  }

  .pant__paso::before {
    content: '';
    inline-size: 2.2cqi;
    block-size: 2.2cqi;
    border-radius: 50%;
    background: currentColor;
    flex: none;
  }

  .pant__paso[data-estado='completado'] { color: rgb(255 255 255 / 0.75); }

  .pant__paso[data-estado='actual'] {
    color: #fff;
    font-weight: 700;
    background: rgb(255 255 255 / 0.14);
  }

  .pant__paso[data-estado='actual']::before {
    background: var(--tono, #fff);
    box-shadow: 0 0 2.6cqi var(--tono, #fff);
  }

  .pant__contador {
    font-family: var(--font-display);
    font-size: 13cqi;
    font-weight: 800;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  /* ======================================================================
   * Intervalos de confianza
   * ==================================================================== */
  .ic-grafico {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr max-content;
    align-items: center;
    column-gap: var(--space-4);
  }

  .ic { display: contents; }
  .ic > * { padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
  .ic-grafico > .ic:last-of-type > * { border-block-end: 0; }

  .ic__pista {
    position: relative;
    block-size: 1.75rem;
    background: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 10%);
    border-radius: var(--radius-pill);
  }

  .ic__rango {
    position: absolute;
    inset-block: 50%;
    block-size: 6px;
    translate: 0 -50%;
    inset-inline-start: calc(var(--inf) * 100%);
    inline-size: calc((var(--sup) - var(--inf)) * 100%);
    background: color-mix(in oklab, var(--tono, var(--accent)) 42%, transparent);
    border-radius: var(--radius-pill);
  }

  .ic__punto {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--p) * 100%);
    translate: -50% -50%;
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    background: var(--tono, var(--accent));
    box-shadow: 0 0 12px var(--tono, var(--accent));
  }

  .ic__cifra {
    font-weight: 700;
    font-size: var(--step-0);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ic__etiqueta { font-size: var(--step--1); }
  .ic__n { color: var(--ink-3); font-size: var(--step--1); }
}

/* ============================================================================
 * Distintivo de origen de los datos
 * ----------------------------------------------------------------------------
 * Solo se pinta cuando la interfaz trabaja con datos simulados. No se puede
 * cerrar, y es deliberado: la mesa de control es una pantalla con la que
 * alguien decide, y confundir un ensayo con un drop real es el peor fallo que
 * puede tener esta interfaz. Cuando los datos vienen del back no hay nada que
 * advertir y este elemento no existe en el DOM.
 *
 * Va anclado abajo a la izquierda para no taparle el sitio a la isla del
 * portal ni al kill switch de la mesa de control, que son lo que hay que poder
 * alcanzar sin pensar.
 * ========================================================================== */
@layer componentes {
  .aviso-origen {
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline-start: var(--space-4);
    z-index: 90;

    display: flex;
    flex-direction: column;
    gap: 2px;
    max-inline-size: 22rem;
    padding: var(--space-3) var(--space-4);

    background: var(--overlay);
    backdrop-filter: blur(14px);
    border: 1px solid var(--tono, var(--warn));
    border-inline-start-width: 3px;
    border-radius: var(--radius-1);
    box-shadow: 0 8px 28px rgb(0 0 0 / 0.35);

    font-size: var(--step--1);
    line-height: 1.35;
    color: var(--ink-2);
  }

  .aviso-origen strong {
    color: var(--tono, var(--warn));
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: var(--step--2, 0.75rem);
  }

  /* El detalle explica POR QUÉ no hay datos reales. Sin el motivo, el aviso
     obliga a adivinar si el back se cayó o si nunca se levantó. */
  .aviso-origen span { color: var(--ink-3); }

  @media (max-width: 40rem) {
    .aviso-origen {
      inset-inline: var(--space-3);
      max-inline-size: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .aviso-origen { animation: aviso-origen-entra 240ms ease-out both; }
  }

  @keyframes aviso-origen-entra {
    from { opacity: 0; translate: 0 8px; }
    to   { opacity: 1; translate: 0 0; }
  }
}