/* ==========================================================================
   MantePro — App de técnicos (una sola página para celular, tablet y PC)

   Conceptos del curso aplicados (busca la etiqueta [tema] en los comentarios):
   [cascada]     @layer para ordenar estilos y :where() para no subir especificidad
   [cajas]       box-sizing, padding/border/margin, gap (no margin entre ítems)
   [grid-areas]  esqueleto de la página con grid-template-areas
   [grid]        repeat(auto-fill, minmax()) y fr; [flex] filas de botones y badges
   [responsive]  mobile-first, breakpoints con sintaxis de rango, clamp() fluido
   [container]   container queries: la orden se acomoda al espacio de su panel
   [color]       light-dark(), color-mix() y variables
   [property]    @property para animar el anillo de cumplimiento y la barra de avance del checklist
   [scope]       @scope (.orden) to (.cta): estilos solo dentro de la tarjeta, sin tocar el botón
   [color-rel]   colores relativos: rgb(from var(--x) r g b / .15) para fondos de los chips
   [texto]       text-wrap: balance / pretty, field-sizing: content en el textarea
   [rendimiento] content-visibility: auto en la lista larga, scrollbar-gutter: stable
   [mascaras]    mask + conic-gradient para dibujar el anillo
   [position]    sticky, fixed y absolute
   [animacion]   transition, @starting-style, @keyframes, animación por scroll y View Transitions
   [condicional] @supports, prefers-color-scheme, prefers-reduced-motion, any-hover
   Sistema de diseño "Field Utility Modern" (Stitch), sin frameworks:
   capas (@layer), variables, nesting, light-dark(), grid/flex,
   container queries y @starting-style.
   ========================================================================== */

@layer reset, base, layout, componentes, vistas, utilidades;

/* ---------- Tipografía propia (Inter, licencia OFL, servida desde nuestro dominio) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* [property] tipo registrado para poder animar el porcentaje del anillo */
/* [property] avance del checklist en cada tarjeta (se hereda a la barra para poder animarla) */
@property --avance {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --pct {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ---------- Variables (tema claro / oscuro) ---------- */
:root {
  color-scheme: light dark;

  --verde: light-dark(#059669, #10b981);
  --verde-oscuro: light-dark(#047857, #059669);
  --verde-suave: light-dark(#ecfdf5, #062a20);
  --verde-borde: light-dark(#a7f3d0, #065f46);
  --verde-texto: light-dark(#065f46, #34d399);

  --fondo: light-dark(#f4f6f5, #0b0f12);
  --superficie: light-dark(#ffffff, #161e22);
  --superficie-2: light-dark(#f3f4f6, #1f2930);
  --borde: light-dark(#e5e7eb, #2d3748);
  --borde-fuerte: light-dark(#d1d5db, #3b4757);
  --texto: light-dark(#111827, #f9fafb);
  --texto-suave: light-dark(#4b5563, #9ca3af);

  /* Estados y prioridades: texto / fondo / borde */
  --gris: light-dark(#4b5563, #9ca3af);
  --gris-fondo: light-dark(#f3f4f6, #1f2937);
  --gris-borde: light-dark(#d1d5db, #374151);
  --ambar: light-dark(#92400e, #fbbf24);
  --ambar-fondo: light-dark(#fef3c7, #3a2706);
  --ambar-borde: light-dark(#f59e0b, #b45309);
  --rojo: light-dark(#b91c1c, #f87171);
  --rojo-fondo: light-dark(#fee2e2, #3b1212);
  --rojo-borde: light-dark(#f87171, #b91c1c);
  --rojo-fuerte: light-dark(#dc2626, #dc2626);
  --azul: light-dark(#1d4ed8, #60a5fa);
  --azul-fondo: light-dark(#dbeafe, #142450);
  --azul-borde: light-dark(#93c5fd, #2563eb);
  --naranja: light-dark(#c2410c, #fb923c);
  --naranja-fondo: light-dark(#ffedd5, #3b1a08);
  --naranja-borde: light-dark(#fdba74, #c2410c);
  --ok: light-dark(#065f46, #34d399);
  --ok-fondo: light-dark(#def7ec, #06352a);
  --ok-borde: light-dark(#31c48d, #059669);

  --radio: 14px;
  --radio-sm: 10px;
  --sombra: 0 2px 4px rgb(17 24 39 / .05);
  --sombra-2: 0 4px 12px -2px rgb(17 24 39 / .08);
  --sombra-3: 0 12px 24px -4px rgb(17 24 39 / .16);
  --espacio: 1rem;
  --ancho-max: 960px;
  --lateral: 248px;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* [color] tema elegido a mano: basta cambiar color-scheme y todos los light-dark() se voltean */
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="oscuro"] { color-scheme: dark; }

/* [responsive] tablet horizontal / laptop pequeña: el menú lateral se angosta.
   Va fuera de las capas, igual que :root, porque [cascada] lo que no está en una capa
   le gana a cualquier capa. */
@media (1024px <= width < 1280px) {
  :root { --lateral: 76px; }
}

/* ---------- Reset ---------- */
/* [cascada] el reset va en la capa más baja y con :where() (especificidad 0):
   cualquier regla de las demás capas lo sobrescribe sin pelear */
@layer reset {
  :where(*, *::before, *::after) { box-sizing: border-box; }     /* [cajas] el ancho incluye padding y borde */
  :where(*) { margin: 0; }
  :where(img, svg, canvas, video) { display: block; max-width: 100%; }
  :where(input, button, textarea, select) { font: inherit; color: inherit; }
  :where(button) { cursor: pointer; }
  :where(ul[class], ol[class]) { list-style: none; padding: 0; }
  [hidden] { display: none !important; }   /* única excepción: "oculto" siempre gana */
}

/* ---------- Base ---------- */
@layer base {
  html { -webkit-text-size-adjust: 100%; }

  body {
    font-family: var(--fuente);
    font-weight: 500;                     /* 500: se lee mejor bajo el sol */
    background: var(--fondo);
    color: var(--texto);
    line-height: 1.45;
    min-height: 100dvh;
    font-feature-settings: "cv05" on;
    -webkit-tap-highlight-color: transparent;
  }

  /* [responsive] tipografía fluida: crece con la pantalla sin media queries */
  h1 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
  h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
  h3 { font-size: .95rem; font-weight: 700; }
  a { color: var(--verde-texto); }
  strong { font-weight: 700; }

  :focus-visible { outline: 3px solid color-mix(in srgb, var(--verde) 55%, transparent); outline-offset: 2px; }

  /* Íconos en línea (js/icons.js) */
  .ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }
  .ico-xl { width: 2.6rem; height: 2.6rem; margin-inline: auto; color: var(--texto-suave); }
}

/* ---------- Layout: barra superior + menú inferior (celular) · menú lateral (PC) ---------- */
@layer layout {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio);
    padding: calc(.55rem + env(safe-area-inset-top)) var(--espacio) .55rem;
    background: var(--verde-oscuro);
    color: #fff;
    box-shadow: var(--sombra-2);

    .marca {
      display: flex;
      align-items: center;
      gap: .6rem;
      color: inherit;
      text-decoration: none;

      img { border-radius: 9px; box-shadow: 0 0 0 2px rgb(255 255 255 / .25); }
      span { display: grid; line-height: 1.1; }
      strong { font-size: 1.1rem; font-weight: 800; }
      small { font-size: .72rem; font-weight: 700; opacity: .8; }
    }

    .avatar { background: rgb(255 255 255 / .18); color: #fff; }
  }

  .topbar-acciones { display: flex; align-items: center; gap: .5rem; }

  main {
    width: min(100% - 2 * var(--espacio), var(--ancho-max));
    margin-inline: auto;
    padding-block: var(--espacio) 3rem;
    view-transition-name: contenido;
  }

  .offline {
    background: var(--ambar-fondo);
    color: var(--ambar);
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    padding: .45rem var(--espacio);

    /* Con señal pero aún mandando lo guardado sin conexión */
    &.enviando { background: var(--azul-fondo); color: var(--azul); }
  }

  /* Menú inferior: celular y tablet vertical */
  .menu-inferior {
    position: fixed;
    inset: auto 0 0;
    z-index: 15;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--superficie) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--borde);

    a {
      display: grid;
      justify-items: center;
      gap: .2rem;
      padding: .55rem .2rem .5rem;
      min-height: 58px;
      color: var(--texto-suave);
      text-decoration: none;
      font-size: .72rem;
      font-weight: 700;

      .ico { width: 1.45rem; height: 1.45rem; }

      &[aria-current="page"] {
        color: var(--verde-texto);
        .ico { stroke-width: 2.4; }
      }
    }
  }

  /* Menú lateral y barra superior de escritorio: solo en pantallas grandes */
  .sidebar, .barra-app { display: none; }

  @media (width >= 1024px) {
    .topbar, .menu-inferior { display: none !important; }
    .barra-app:not([hidden]) { display: flex; }

    .sidebar {
      z-index: 20;
      width: var(--lateral);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      padding: 1.1rem .8rem;
      background: linear-gradient(180deg, #047857, #065f46);
      color: #fff;

      &[hidden] { display: none; }
    }

    .sidebar-marca {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .3rem .4rem;
      color: inherit;
      text-decoration: none;

      img { border-radius: 10px; background: #fff; }
      span { display: grid; line-height: 1.15; }
      strong { font-size: 1.15rem; font-weight: 800; }
      small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
    }

    .sidebar-nav {
      display: grid;
      gap: .2rem;

      a {
        display: flex;
        align-items: center;
        gap: .75rem;
        min-height: 46px;
        padding: .55rem .8rem;
        border-radius: var(--radio-sm);
        color: rgb(255 255 255 / .88);
        text-decoration: none;
        font-weight: 700;
        transition: background .15s;

        &:hover { background: rgb(255 255 255 / .1); }
        &[aria-current="page"] { background: rgb(255 255 255 / .18); color: #fff; }
      }
    }

    .sidebar-pie {
      margin-top: auto;
      display: grid;
      gap: .4rem;
      padding-top: .8rem;
      border-top: 1px solid rgb(255 255 255 / .18);

      .btn-texto { color: #fff; justify-self: start; }
    }

    .sidebar-usuario {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .4rem;
      border-radius: var(--radio-sm);
      color: inherit;
      text-decoration: none;

      &:hover { background: rgb(255 255 255 / .1); }
      .avatar { background: #fff; color: var(--verde-oscuro); }
      span:last-child { display: grid; line-height: 1.2; min-width: 0; }
      strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      small { font-size: .74rem; opacity: .8; }
    }

    /* Barra superior de escritorio [flex] */
    .barra-app {
      position: sticky;            /* [position] */
      top: 0;
      z-index: 12;
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .7rem clamp(1rem, 2vw, 2rem);
      background: color-mix(in srgb, var(--fondo) 85%, transparent);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--borde);

      .chip-lugar, .chip-estado, .dato-mini {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 36px;
        padding: .3rem .8rem;
        border: 1px solid var(--borde);
        border-radius: 999px;
        background: var(--superficie);
        font-size: .82rem;
        font-weight: 700;
        white-space: nowrap;
      }
      .chip-estado { font-size: .76rem; color: var(--texto-suave); }
      .chip-estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 25%, transparent); }
      .chip-estado.sin-red i { background: var(--ambar-borde); }
      .barra-app-datos { display: flex; gap: .5rem; margin-left: auto; }
      .dato-mini { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }
      .dato-mini b { font-size: 1rem; color: var(--verde-texto); font-variant-numeric: tabular-nums; }
    }

    .btn-redondo {
      display: inline-grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid var(--borde);
      border-radius: 50%;
      background: var(--superficie);
      color: var(--texto);
      text-decoration: none;
    }

    /* [grid-areas] esqueleto de la página: menú a la izquierda, contenido a la derecha.
       El menú inferior y el toast son position: fixed y quedan fuera de la cuadrícula. */
    body.con-menu {
      display: grid;
      grid-template-columns: var(--lateral) minmax(0, 1fr);
      grid-template-areas: "menu contenido";
      min-height: 100dvh;
    }
    body.con-menu .sidebar { grid-area: menu; position: sticky; top: 0; height: 100dvh; }   /* [position] sticky */
    body.con-menu .principal { grid-area: contenido; min-width: 0; }
    body.con-menu main { width: auto; max-width: none; margin: 0; padding: 1.5rem clamp(1rem, 2vw, 2rem); }
  }

  /* Tablet horizontal / laptop pequeña: menú lateral solo con íconos */
  @media (1024px <= width < 1280px) {
    .sidebar-marca span, .sidebar-nav a span, .sidebar-usuario span:last-child, .sidebar-pie .btn-texto { display: none; }
    .sidebar-nav a, .sidebar-marca, .sidebar-usuario { justify-content: center; }
  }
}

/* ---------- Componentes ---------- */
@layer componentes {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .7rem 1.2rem;
    border: 1.5px solid transparent;
    border-radius: var(--radio-sm);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .01em;
    text-decoration: none;
    background: var(--superficie-2);
    color: var(--texto);
    transition: background .15s, border-color .15s, transform .1s, opacity .2s;

    &:active { transform: scale(.98); }
    &:disabled { opacity: .55; cursor: not-allowed; }

    &.primario { background: var(--verde); color: #fff; &:hover:not(:disabled) { background: var(--verde-oscuro); } }
    &.ambar { background: var(--ambar-fondo); color: var(--ambar); border-color: var(--ambar-borde); }
    &.borde { background: var(--superficie); border-color: var(--borde); &:hover { border-color: var(--borde-fuerte); } }
    &.peligro { background: var(--superficie); color: var(--rojo); border-color: var(--rojo-borde); }
    &.bloque { width: 100%; }
  }

  .btn.btn-rojo { background: var(--rojo-fuerte); color: #fff; }

  .btn-texto {
    border: 0;
    background: none;
    padding: .4rem .2rem;
    min-height: 40px;
    font-weight: 700;
    color: var(--verde-texto);
  }

  .btn-icono {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: .8rem;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .16);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;

    &:hover { background: rgb(255 255 255 / .26); }
  }

  .avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    text-decoration: none;
  }

  .avatar-grande { width: 52px; height: 52px; font-size: 1.1rem; }

  .tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: var(--espacio);
  }

  .tarjeta h2 { display: flex; align-items: center; gap: .5rem; }
  .tarjeta h2 > .ico { color: var(--verde); }

  .contador-gris {
    margin-left: auto;
    padding: .05rem .55rem;
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: .78rem;
    font-weight: 700;
  }

  .campo {
    display: grid;
    gap: .35rem;

    label { font-weight: 700; font-size: .88rem; }

    input, textarea, select {
      width: 100%;
      min-height: 48px;
      padding: .7rem .85rem;
      border: 1.5px solid var(--borde-fuerte);
      border-radius: var(--radio-sm);
      background: var(--superficie);
      font-size: 1rem;              /* 16px: evita el zoom automático en iPhone */
      font-weight: 500;

      &:focus { border-color: var(--verde); outline: 3px solid color-mix(in srgb, var(--verde) 28%, transparent); }
    }

    textarea { min-height: 110px; resize: vertical; }
    .etiqueta { font-weight: 700; font-size: .88rem; }
    .ayuda { font-size: .8rem; color: var(--texto-suave); }
    .error { font-size: .85rem; color: var(--rojo); font-weight: 700; }
  }

  fieldset.campo { border: 0; padding: 0; min-width: 0; }

  /* Etiquetas de estado y prioridad: píldora con borde, en mayúsculas */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 22px;
    padding: .1rem .55rem;
    border: 1px solid var(--gris-borde);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--gris-fondo);
    color: var(--gris);

    .ico { width: 12px; height: 12px; }

    &.en_progreso, &.correctivo { background: var(--ambar-fondo); color: var(--ambar); border-color: var(--ambar-borde); }
    &.completada, &.rev-aprobada, &.inspeccion { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
    &.urgente, &.rev-devuelta { background: var(--rojo-fondo); color: var(--rojo); border-color: var(--rojo-borde); }
    &.vencida { background: var(--rojo-fuerte); color: #fff; border-color: var(--rojo-fuerte); }
    &.alta { background: var(--naranja-fondo); color: var(--naranja); border-color: var(--naranja-borde); }
    &.normal, &.preventivo, &.rev-pendiente { background: var(--azul-fondo); color: var(--azul); border-color: var(--azul-borde); }
    &.origen { background: var(--superficie); }
  }

  /* Control segmentado */
  .pestanas {
    display: flex;
    gap: .25rem;
    padding: .3rem;
    border-radius: 12px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    overflow-x: auto;
    scrollbar-width: none;

    button {
      flex: 1 1 auto;
      min-height: 42px;
      padding: .4rem .45rem;
      border: 0;
      border-radius: 9px;
      background: transparent;
      font-weight: 700;
      font-size: .86rem;
      white-space: nowrap;
      color: var(--texto-suave);
      transition: background .2s, color .2s;

      &[aria-selected="true"] { background: var(--superficie); color: var(--verde-texto); box-shadow: var(--sombra-2); }
      .n {
        display: inline-block;
        min-width: 1.4em;
        margin-left: .2rem;
        padding: 0 .35rem;
        border-radius: 999px;
        background: color-mix(in srgb, currentColor 14%, transparent);
        font-size: .74rem;
      }
    }
  }

  .alerta {
    padding: .75rem 1rem;
    border-radius: var(--radio-sm);
    background: var(--ambar-fondo);
    color: var(--ambar);
    font-size: .9rem;
    font-weight: 700;

    &.error { background: var(--rojo-fondo); color: var(--rojo); }
  }

  .vacio {
    display: grid;
    gap: .5rem;
    justify-items: center;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--texto-suave);

    .emoji { font-size: 2.2rem; }
  }

  .cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 3rem 1rem;
    color: var(--texto-suave);
  }

  .spinner {
    width: 22px;
    aspect-ratio: 1;
    border: 3px solid var(--borde);
    border-top-color: var(--verde);
    border-radius: 50%;
    animation: girar .8s linear infinite;
  }

  @keyframes girar { to { rotate: 1turn; } }

  .toast {
    position: fixed;
    inset-inline: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 50;
    max-width: 480px;
    margin-inline: auto;
    padding: .85rem 1rem;
    border-radius: var(--radio-sm);
    background: #111827;
    color: #fff;
    font-weight: 700;
    box-shadow: var(--sombra-3);
    opacity: 1;
    translate: 0 0;
    transition: opacity .25s, translate .25s;

    &.error { background: #991b1b; }
    &.ok { background: #047857; }

    @starting-style { opacity: 0; translate: 0 1rem; }
  }

  /* Ventana modal nativa (<dialog>): hoja inferior en celular, centrada en PC */
  dialog.modal {
    width: min(100% - 1rem, 560px);
    max-height: calc(100dvh - 1rem);
    margin: auto auto 0;
    padding: 0;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio) var(--radio) 0 0;
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-3);
    opacity: 1;
    translate: 0 0;
    transition: opacity .25s, translate .25s, display .25s allow-discrete, overlay .25s allow-discrete;

    &::backdrop { background: rgb(0 0 0 / .45); }

    @starting-style { opacity: 0; translate: 0 40px; }

    .modal-cuerpo { display: grid; gap: 1rem; padding: 1.1rem; }
    .modal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

    @media (width >= 640px) { margin: auto; border-radius: var(--radio); }
  }

  dialog.modal.modal-chico {
    width: min(100% - 2rem, 380px);
    margin: auto;
    border-radius: var(--radio);
  }

  .fila-botones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;

    &.entre { justify-content: space-between; }
    &.centro { justify-content: center; }
    &.dos { display: grid; grid-template-columns: 1fr 1fr; }
  }

  .pila-chica { display: grid; gap: .3rem; }

  .btn.deshabilitado { opacity: .5; pointer-events: none; }

  /* Botones segmentados (Sí / No / N/A, prioridad) */
  .opciones {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;

    .opcion {
      flex: 1;
      min-width: 64px;
      position: relative;

      input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

      span {
        display: grid;
        place-items: center;
        min-height: 46px;
        padding: .4rem .7rem;
        border: 1.5px solid var(--borde-fuerte);
        border-radius: var(--radio-sm);
        background: var(--superficie);
        font-weight: 700;
        font-size: .9rem;
        transition: background .15s, color .15s, border-color .15s;
      }

      input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--verde) 50%, transparent); outline-offset: 2px; }
      input:checked + span { background: var(--verde); border-color: var(--verde); color: #fff; }
      &.no input:checked + span { background: var(--rojo-fuerte); border-color: var(--rojo-fuerte); }
      &.na input:checked + span { background: var(--gris); border-color: var(--gris); color: var(--superficie); }
    }
  }

  .check {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    font-weight: 700;

    input { width: 22px; height: 22px; accent-color: var(--verde); }
  }

  /* Autocompletar (equipos, materiales) */
  .buscador { position: relative; }

  .sugerencias {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 20;
    margin-top: .25rem;
    padding: .3rem;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    box-shadow: var(--sombra-3);

    li {
      display: grid;
      gap: .1rem;
      padding: .6rem .7rem;
      border-radius: 8px;
      cursor: pointer;

      &:hover { background: var(--verde-suave); }
      &.sin-resultados { cursor: default; color: var(--texto-suave); font-size: .9rem; &:hover { background: none; } }
    }
  }

  .fila-buscar {
    display: flex;
    gap: .5rem;

    input { flex: 1; min-width: 0; }
    .btn { flex: none; }
  }

  .chip {
    min-height: 40px;
    padding: .35rem .8rem;
    border: 1.5px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--superficie);
    font-size: .85rem;
    font-weight: 700;

    &:hover { border-color: var(--verde); }
  }

  .icono-redondo {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--superficie);
    color: var(--verde-texto);
    border: 1px solid var(--verde-borde);
  }
}

/* ---------- Vistas ---------- */
@layer vistas {
  /* Login */
  .login {
    display: grid;
    place-items: center;
    min-height: calc(100dvh - 4rem);

    .tarjeta { width: min(100%, 420px); display: grid; gap: 1.2rem; padding: 1.7rem; box-shadow: var(--sombra-3); }

    .logo {
      display: grid;
      justify-items: center;
      gap: .5rem;
      text-align: center;

      img { width: 76px; border-radius: 20px; box-shadow: var(--sombra-2); }
      p { color: var(--texto-suave); font-size: .9rem; }
    }

    form { display: grid; gap: 1rem; }
  }

  /* ---------- Inicio: Mis órdenes ---------- */
  .inicio { display: grid; gap: 1rem; }

  .saludo {
    display: flex;
    align-items: center;
    gap: .8rem;

    .avatar { display: none; }      /* en celular el avatar ya está arriba */
    p { color: var(--texto-suave); font-size: .9rem; }
  }

  .aviso-push {
    display: grid;
    gap: .8rem;
    background: var(--verde-suave);
    border-color: var(--verde-borde);

    .aviso-push-texto { display: flex; gap: .75rem; align-items: flex-start; }
    p { font-size: .88rem; color: var(--texto-suave); }
    p strong { display: block; color: var(--texto); font-size: .95rem; }
    > .btn-texto { justify-self: end; }
  }

  .alerta-devuelta {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--rojo-borde);
    border-left: 4px solid var(--rojo-fuerte);
    border-radius: var(--radio-sm);
    background: var(--rojo-fondo);
    color: var(--rojo);
    text-align: start;
    font-weight: 700;
    font-size: .9rem;

    .alerta-texto { flex: 1; }
    .alerta-cta { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
  }

  .alerta-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rojo-fuerte);
    color: #fff;
  }

  /* Indicadores */
  .resumen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;

    @media (width >= 640px) { grid-template-columns: repeat(4, 1fr); }

    .dato {
      display: grid;
      gap: .35rem;
      padding: .8rem .9rem;
      border-radius: var(--radio);
      background: var(--superficie);
      border: 1px solid var(--borde);
      box-shadow: var(--sombra);

      &.ambar .dato-titulo { color: var(--ambar); }
      &.rojo .dato-titulo, &.rojo strong { color: var(--rojo); }
    }

    .dato-titulo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .3rem;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--texto-suave);

      .ico { width: 18px; height: 18px; }
    }

    .dato-valor { display: flex; align-items: baseline; gap: .35rem; }
    strong { font-size: 1.9rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
    small { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }

    .cumplimiento {
      grid-template-columns: 1fr auto;
      align-items: center;

      > div { display: grid; gap: .35rem; }
      strong { color: var(--verde-texto); }
    }
  }

  /* [property] --pct es un número "de verdad": el navegador puede animarlo.
     [mascaras] el conic-gradient pinta un pastel y la máscara radial le abre el hueco del centro.
     [animacion] @starting-style hace que arranque en 0 y suba hasta el valor al aparecer. */
  .anillo {
    --grosor: 6px;
    width: 52px;
    aspect-ratio: 1;
    flex: none;
    border-radius: 50%;
    background: conic-gradient(var(--verde) calc(var(--pct) * 1%), var(--borde) 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--grosor)), #000 calc(100% - var(--grosor) + 1px));
    transition: --pct 1s ease-out;

    @starting-style { --pct: 0; }
  }

  .barra-filtros { display: grid; gap: .6rem; }

  .buscar {
    position: relative;

    > .ico { position: absolute; left: .85rem; top: 50%; translate: 0 -50%; color: var(--texto-suave); pointer-events: none; }
    input { min-height: 46px; padding-left: 2.6rem; }
  }

  /* Lista de órdenes */
  .lista-ordenes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: .8rem;
  }

  .orden {
    container: orden / inline-size;
    display: grid;
    gap: .5rem;
    align-content: start;
    color: inherit;
    text-decoration: none;
    border-left: 4px solid var(--gris-borde);
    transition: transform .15s, box-shadow .15s, border-color .15s;

    /* [condicional] el efecto hover solo en equipos con mouse (en celular se queda "pegado") */
    @media (any-hover: hover) { &:hover { box-shadow: var(--sombra-2); translate: 0 -2px; } }
    &.en_progreso { border-left-color: var(--ambar-borde); }
    &.completada { border-left-color: var(--ok-borde); }
    &.vencida { border-left-color: var(--rojo-fuerte); }
    &.seleccionada { outline: 2px solid var(--verde); outline-offset: -1px; box-shadow: var(--sombra-2); }

    .orden-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    .orden-fecha { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--texto-suave); white-space: nowrap; }
    .orden-lugar { display: flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--texto-suave); .ico { width: 15px; height: 15px; } }
    .orden-pie { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    .orden-alerta { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; font-size: .76rem; font-weight: 800; color: var(--rojo); .ico { width: 14px; height: 14px; } }
    .numero { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
    .badges { display: flex; gap: .3rem; flex-wrap: wrap; }
    .orden-titulo { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }

    .chip-mas {
      justify-self: start;
      padding: .1rem .55rem;
      border-radius: 6px;
      background: var(--verde-suave);
      color: var(--verde-texto);
      font-size: .76rem;
      font-weight: 700;
    }

    .meta {
      display: flex;
      align-items: center;
      gap: .4rem .9rem;
      flex-wrap: wrap;
      font-size: .8rem;
      color: var(--texto-suave);

      > span:not(.badge) { display: inline-flex; align-items: center; gap: .3rem; }
      .ico { width: 15px; height: 15px; }
    }

    .cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      min-height: 46px;
      margin-top: .3rem;
      border-radius: var(--radio-sm);
      font-weight: 700;
      font-size: .92rem;

      &.cta-rojo { background: var(--rojo-fuerte); color: #fff; }
      &.cta-verde { background: var(--verde); color: #fff; }
      &.cta-suave { background: var(--verde-suave); color: var(--verde-texto); }
    }

    @container orden (width < 300px) {
      .meta { flex-direction: column; align-items: flex-start; gap: .15rem; }
    }
  }

  /* ---------- Escritorio: lista y detalle lado a lado ---------- */
  /* [grid] dos columnas: la lista crece con la pantalla (clamp) y el detalle toma el resto (1fr) */
  .dividida {
    display: grid;
    grid-template-columns: clamp(340px, 26vw, 480px) minmax(0, 1fr);
    gap: clamp(1rem, 1.5vw, 2rem);
    height: calc(100dvh - 3rem - 58px);         /* menos la barra superior */
    /* [grid-areas] franja de atención arriba, lista y detalle abajo */
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "alerta alerta"
      "lista  detalle";

    .banner-atencion { grid-area: alerta; }
    .panel-lista { grid-area: lista; }
    .panel-detalle { grid-area: detalle; }

    > section { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }

    /* [container] la lista también se mide a sí misma */
    .panel-lista {
      container: lista / inline-size;

      .saludo {
        padding: .9rem;
        border: 1px solid var(--borde);
        border-radius: var(--radio);
        background: var(--superficie);
        .avatar { display: inline-grid; }
        h1 { font-size: 1.15rem; }
      }
      .resumen { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
      .resumen .dato { padding: .55rem .5rem; gap: .2rem; text-align: center; }
      .resumen .dato-titulo { justify-content: center; font-size: .6rem; .ico { display: none; } }
      .resumen .dato-valor { justify-content: center; }
      .resumen strong { font-size: 1.4rem; }
      .resumen small, .resumen .anillo { display: none; }
      .resumen .cumplimiento { grid-template-columns: 1fr; }
      .lista-ordenes { grid-template-columns: 1fr; gap: .6rem; }
      .orden .cta { display: none; }
      .alerta-devuelta { display: none; }     /* en escritorio se muestra la franja de arriba */
    }

    /* Lista angosta (laptop): indicadores en 2 × 2 para que los títulos no se partan */
    @container lista (width < 420px) {
      .panel-lista .resumen { grid-template-columns: repeat(2, 1fr); }
      .panel-lista .pestanas button { font-size: .8rem; padding-inline: .3rem; }
    }

    .panel-detalle {
      .detalle { max-width: 1280px; margin-inline: auto; }
      .volver { display: none; }
      .migas { display: flex; }
      .accion-cabecera { display: inline-flex; }
      .acciones-fijas { display: none; }       /* la acción principal va arriba, en la cabecera */
    }
  }

  .vacio-detalle { height: 100%; align-content: center; }

  .banner-atencion {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem;
    border: 1px solid var(--rojo-borde);
    border-left: 5px solid var(--rojo-fuerte);
    border-radius: var(--radio);
    background: var(--rojo-fondo);
    color: var(--rojo);

    .alerta-icono { border-radius: var(--radio-sm); }
    .banner-texto { display: grid; gap: .1rem; flex: 1; min-width: 0; }
    strong { font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
    .banner-texto span { font-size: .85rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .btn { min-height: 40px; white-space: nowrap; }
  }

  /* Cabecera del detalle: ruta a la izquierda, acciones a la derecha [flex] + wrap */
  .barra-detalle {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;

    .migas {
      display: none;
      align-items: center;
      gap: .4rem;
      font-size: .85rem;
      color: var(--texto-suave);

      a { color: inherit; text-decoration: none; }
      strong { color: var(--texto); }
    }
    .barra-acciones { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
    .barra-acciones .btn { min-height: 42px; padding-inline: .9rem; }
    .accion-cabecera { display: none; }
  }

  /* ---------- Detalle de la orden ---------- */
  /* [container] la orden mide su propio espacio: en el panel de escritorio, en una tablet
     o en el celular decide sola si va a una o a dos columnas */
  .detalle {
    container: detalle / inline-size;
    display: grid;
    gap: 1rem;

    .cabecera {
      display: grid;
      gap: .55rem;

      .badges { display: flex; gap: .35rem; flex-wrap: wrap; }
      h1 { font-size: 1.6rem; }
      .titulo-equipo { font-weight: 800; }
      .descripcion { color: var(--texto-suave); font-size: 1rem; }
    }

    .texto-largo { white-space: pre-wrap; }
  }

  /* Celular: una columna. Las columnas "desaparecen" (display: contents) y cada tarjeta
     se ordena con order: equipos, trabajo, fotos, materiales, hallazgos, firma. */
  .detalle-cuerpo {
    display: grid;
    gap: 1rem;

    .col-principal, .col-lateral { display: contents; }
    .area-equipos { order: 1; }
    .area-trabajo { order: 2; }
    .area-fotos { order: 3; }
    .area-materiales, .area-repuestos { order: 4; }
    .area-hallazgos { order: 5; }
    .area-firma { order: 6; }
  }

  /* Con espacio: trabajo y checklist a la izquierda; equipos, fotos y materiales a la derecha */
  @container detalle (width >= 720px) {
    .detalle-cuerpo {
      grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
      align-items: start;

      .col-principal, .col-lateral { display: grid; gap: 1rem; }
    }
    .cabecera h1 { font-size: 2rem; }
  }

  .nota-supervisor {
    display: flex;
    gap: .8rem;
    padding: .9rem;
    border: 1px solid var(--rojo-borde);
    border-radius: var(--radio);
    background: var(--rojo-fondo);
    color: var(--rojo);

    > div { display: grid; gap: .45rem; flex: 1; }
    blockquote {
      padding: .65rem .8rem;
      border-radius: var(--radio-sm);
      background: var(--superficie);
      color: var(--texto);
      font-style: italic;
      font-weight: 500;
    }
  }

  .datos-ot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem;
  }

  .dato-ot {
    display: grid;
    gap: .2rem;
    align-content: start;
    padding: .7rem .8rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    font-weight: 700;
    font-size: .92rem;

    .etiqueta-dato {
      display: flex;
      align-items: center;
      gap: .3rem;
      font-size: .66rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--texto-suave);

      .ico { width: 14px; height: 14px; }
    }
  }

  .lista-equipos { display: grid; gap: .6rem; }

  @media (width >= 1280px) {
    .lista-equipos:has(> :nth-child(2)) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  }

  .equipo {
    display: flex;
    gap: .75rem;
    padding: .8rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--superficie-2);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s;

    &:hover { border-color: var(--verde); }

    .equipo-icono {
      display: grid;
      place-items: center;
      flex: none;
      width: 44px;
      height: 44px;
      border-radius: var(--radio-sm);
      background: var(--verde-suave);
      color: var(--verde-texto);
    }
    .equipo-cuerpo { display: grid; gap: .3rem; min-width: 0; }
    .nombre { font-weight: 700; }
    .codigo { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--texto-suave); }
    .specs { display: flex; flex-wrap: wrap; gap: .3rem; }
    .specs span {
      padding: .05rem .5rem;
      border: 1px solid var(--borde);
      border-radius: 999px;
      background: var(--superficie);
      font-size: .74rem;
      color: var(--texto-suave);
    }
    .ver-mas { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; font-weight: 700; color: var(--verde-texto); }
  }

  .nota-equipo {
    display: flex;
    gap: .4rem;
    font-size: .85rem;
    padding: .5rem .65rem;
    border-radius: 8px;
    background: var(--ambar-fondo);
    color: var(--texto);
    white-space: pre-wrap;

    &.tarjeta { display: grid; padding: var(--espacio); border-color: var(--ambar-borde); }
    h2 { font-size: 1rem; }
  }

  /* Checklist */
  .checklist {
    display: grid;
    gap: .7rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--borde);

    h3 { display: flex; align-items: center; gap: .5rem; .ico { color: var(--verde); } }

    .contador {
      margin-left: auto;
      font-size: .76rem;
      padding: .1rem .6rem;
      border-radius: 999px;
      border: 1px solid var(--ambar-borde);
      background: var(--ambar-fondo);
      color: var(--ambar);

      &.listo { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
    }

    .req { color: var(--rojo); }

    .punto {
      padding: .7rem;
      border: 1px solid var(--borde);
      border-radius: var(--radio-sm);
      background: var(--superficie-2);
      transition: box-shadow .3s;

      &.resaltar { box-shadow: 0 0 0 3px var(--rojo-fuerte); }
    }
  }

  .numero-con-unidad {
    display: flex;
    align-items: center;
    gap: .5rem;

    input { max-width: 160px; font-variant-numeric: tabular-nums; }
    span { font-weight: 700; color: var(--texto-suave); }
  }

  .checklist-leido {
    display: grid;

    div {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: .5rem 0;
      border-bottom: 1px solid var(--borde);
      font-size: .9rem;
    }
    dd { font-weight: 700; text-align: end; }
  }

  /* Fotos */
  .botones-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5rem;
  }

  .galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));   /* [grid] responsive en una línea */
    gap: .6rem;

    img, .mini {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: var(--radio-sm);
      background: var(--superficie-2);
    }

    .mini { position: relative; }

    /* Cuadros para tomar o adjuntar foto, del mismo tamaño que las fotos [cajas] */
    .tile-foto {
      display: grid;
      place-content: center;
      justify-items: center;
      gap: .2rem;
      aspect-ratio: 1;
      padding: .5rem;
      border: 2px dashed var(--borde-fuerte);
      border-radius: var(--radio-sm);
      background: var(--superficie-2);
      text-align: center;
      cursor: pointer;
      transition: border-color .15s, background .15s;

      .ico { width: 1.6rem; height: 1.6rem; color: var(--verde); }
      strong { font-size: .8rem; }
      small { font-size: .72rem; color: var(--texto-suave); }

      @media (any-hover: hover) { &:hover { border-color: var(--verde); background: var(--verde-suave); } }
      &.deshabilitado { opacity: .5; pointer-events: none; }
    }
    .quitar {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 30px;
      height: 30px;
      border: 0;
      border-radius: 50%;
      background: rgb(0 0 0 / .65);
      color: #fff;
      font-weight: 700;
    }
  }

  /* Fotos tomadas sin señal: aún en el celular */
  .galeria .foto-pendiente {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ambar-fondo);
    color: var(--ambar);
    border: 1px solid var(--ambar-borde);
    svg { width: 16px; height: 16px; }
  }

  /* [property] Cronómetro: el punto "late" mientras corre el tiempo */
  .cronometro {
    display: inline-flex;
    width: fit-content;
    justify-self: start;
    align-self: start;
    align-items: center;
    gap: .55rem;
    margin-top: .5rem;
    padding: .4rem .85rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--superficie);
    font-size: .85rem;
    color: var(--texto-suave);

    b {
      font-variant-numeric: tabular-nums;
      font-size: 1.05rem;
      color: var(--texto);
      letter-spacing: .02em;
    }
    svg { width: 18px; height: 18px; }

    &.corriendo { border-color: var(--verde-borde); background: var(--verde-suave); }
    &.corriendo svg { color: var(--verde-texto); animation: latido 1.6s ease-in-out infinite; }
    &.en-pausa { border-color: var(--ambar-borde); background: var(--ambar-fondo); color: var(--ambar); }
    &.en-pausa b { color: var(--ambar); }

    @media (prefers-reduced-motion: reduce) { &.corriendo svg { animation: none; } }
  }

  @keyframes latido { 50% { opacity: .35; } }

  .aviso-sin-enviar {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .5rem;
    padding: .45rem .75rem;
    border-radius: var(--radio-sm);
    background: var(--ambar-fondo);
    color: var(--ambar);
    font-size: .85rem;
    font-weight: 700;
    svg { width: 16px; height: 16px; flex: none; }
  }

  /* Repuestos (órdenes de compra de la OT) */
  .lista-repuestos {
    display: grid;
    gap: .5rem;
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      padding: .6rem .75rem;
      border: 1px solid var(--borde);
      border-radius: var(--radio-sm);
      background: var(--superficie);
    }
    li > div { display: grid; min-width: 0; }
    li span.suave { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .badge { flex: none; }
  }
  .aviso-llego {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .75rem;
    border-radius: var(--radio-sm);
    background: var(--verde-suave);
    color: var(--verde-texto);
    font-weight: 700;
    font-size: .88rem;
    svg { width: 18px; height: 18px; flex: none; }
  }

  .chips-motivo {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    .chip { flex: 1 1 calc(50% - .5rem); min-height: 48px; }
  }

  .firma-img { max-height: 140px; background: #fff; border-radius: var(--radio-sm); padding: .4rem; border: 1px solid var(--borde); }

  .acciones-fijas {
    position: sticky;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    z-index: 5;
    display: flex;
    gap: .6rem;
    padding: .6rem;
    border-radius: var(--radio);
    background: color-mix(in srgb, var(--superficie) 90%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--borde-fuerte);
    box-shadow: var(--sombra-3);

    .btn { flex: 1; }
  }

  /* Firma con el dedo */
  .firma {
    display: grid;
    gap: .4rem;

    label { font-weight: 700; font-size: .88rem; }

    canvas {
      width: 100%;
      height: 170px;
      border: 2px dashed var(--borde-fuerte);
      border-radius: var(--radio-sm);
      background: #fff;          /* siempre blanco: la firma se guarda en tinta oscura */
      touch-action: none;        /* que el dedo dibuje y no haga scroll */
    }

    .fila { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--texto-suave); }
  }

  /* Materiales */
  .lista-materiales {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .3rem;

    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      padding: .45rem .7rem;
      border-radius: 8px;
      background: var(--superficie-2);
      font-size: .9rem;
    }
  }

  .agregar-material {
    display: grid;
    gap: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--borde);
  }

  .fila-material {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: .6rem;
  }

  /* Hallazgos */
  .hallazgos {
    border-style: dashed;
    .btn { justify-self: start; }
  }

  .lista-hallazgos {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .3rem;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .5rem;
      padding: .45rem .7rem;
      border-radius: 8px;
      background: var(--superficie-2);
      font-size: .88rem;
    }
    a { color: inherit; text-decoration: none; }
  }

  /* Ficha del equipo */
  .ficha-equipo .codigo-grande { font: 700 .9rem ui-monospace, monospace; color: var(--verde-texto); }

  .info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;

    dt { font-size: .68rem; font-weight: 800; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
    dd { font-weight: 700; }
  }

  .historial { display: grid; gap: .5rem; }

  .item-historial {
    display: grid;
    gap: .3rem;
    padding: .75rem .9rem;
    color: inherit;
    text-decoration: none;
    border-left: 4px solid var(--ok-borde);

    &.pendiente { border-left-color: var(--gris-borde); }
    &.en_progreso { border-left-color: var(--ambar-borde); }
    .fila { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
    .badges { display: flex; gap: .3rem; }
  }

  a.item-historial:hover { border-color: var(--verde); }

  .recorte {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
  }

  /* Reportar */
  .reportar, .escanear { max-width: 720px; }
  .reportar .volver, .escanear .volver, .ficha-equipo .volver { justify-self: start; }
  .reportar form { gap: 1rem; }

  @media (width >= 1024px) {
    .reportar form { grid-template-columns: 1fr 1fr; align-items: start; }
    .reportar form > :is(.campo:has(textarea), fieldset, .campo:has(.botones-fotos), .alerta, .btn) { grid-column: 1 / -1; }
    .ficha-equipo { max-width: 960px; }
  }

  .opciones.prioridades {
    .prioridad-alta input:checked + span { background: #ea580c; border-color: #ea580c; color: #fff; }
    .prioridad-urgente input:checked + span { background: var(--rojo-fuerte); border-color: var(--rojo-fuerte); color: #fff; }
    .prioridad-baja input:checked + span { background: var(--gris); border-color: var(--gris); color: var(--superficie); }
  }

  .info-hallazgo { background: var(--azul-fondo); color: var(--azul); font-weight: 600; }

  .chips-equipos { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }

  .chip-equipo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .7rem .8rem;
    border: 2px solid var(--verde);
    border-radius: var(--radio-sm);
    background: var(--verde-suave);

    div { display: grid; gap: .1rem; }
  }

  /* Escáner */
  .visor {
    position: relative;
    aspect-ratio: 3 / 4;
    max-height: 60dvh;
    border-radius: var(--radio);
    overflow: hidden;
    background: #000;

    video { width: 100%; height: 100%; object-fit: cover; }

    .marco {
      position: absolute;
      inset: 50% auto auto 50%;
      width: min(65%, 260px);
      aspect-ratio: 1;
      translate: -50% -50%;
      border: 3px solid rgb(255 255 255 / .9);
      border-radius: 18px;
      box-shadow: 0 0 0 100vmax rgb(0 0 0 / .35);
    }

    .estado-camara {
      position: absolute;
      inset: auto 0 0;
      padding: .7rem 1rem;
      text-align: center;
      font-weight: 700;
      font-size: .9rem;
      color: #fff;
      background: linear-gradient(transparent, rgb(0 0 0 / .7));
    }

    &.sin-camara {
      aspect-ratio: auto;
      min-height: 140px;
      display: grid;
      place-items: center;
      background: var(--superficie-2);

      .marco, video { display: none; }
      .estado-camara { position: static; color: var(--texto); background: none; }
    }

    @media (width >= 1024px) { aspect-ratio: 16 / 9; }
  }

  .bloque-alerta {
    display: block;
    width: 100%;
    border: 0;
    text-align: start;
  }

  .cuenta {
    display: grid;
    gap: 1rem;
    max-width: 560px;

    form { display: grid; gap: .9rem; }

    @media (width >= 1024px) {
      max-width: 1040px;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      > .btn:first-child, > .btn.peligro { grid-column: 1 / -1; justify-self: start; }
    }
  }
}

/* ---------- Utilidades ---------- */
@layer utilidades {
  .pila { display: grid; gap: .7rem; }
  .suave { color: var(--texto-suave); }
  .pequeno { font-size: .85rem; }
  .rojo { color: var(--rojo); font-weight: 700; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Con menú inferior (celular): deja espacio abajo para no tapar contenido */
  body.con-menu {
    main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
    .toast { bottom: calc(5rem + env(safe-area-inset-bottom)); }
    .acciones-fijas { bottom: calc(4.8rem + env(safe-area-inset-bottom)); }

    @media (width >= 1024px) {
      main { padding-bottom: 1.5rem; }
      .toast { bottom: 1.5rem; margin-left: calc(var(--lateral) + 1rem); }
      .acciones-fijas { bottom: .75rem; }
    }
  }
}

/* [DOM: CSS Highlight API] lo que coincide con la búsqueda de órdenes (ver ordenes.js).
   No hay <span> extra en el HTML: el navegador pinta los rangos registrados en CSS.highlights */
::highlight(busqueda) {
  background-color: var(--ambar-fondo);
  color: var(--ambar);
  text-decoration: underline 2px var(--ambar-borde);
}

/* [animacion] + [condicional] las tarjetas aparecen al entrar en pantalla con el scroll,
   solo si el navegador lo soporta y la persona no pidió menos movimiento */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* (las tarjetas de la lista ahora entran escalonadas: ver experiencia.css) */
    .historial .item-historial {
      animation: aparecer linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes aparecer { from { opacity: 0; translate: 0 18px; } }

/* Transiciones entre pantallas (View Transitions API) */
::view-transition-old(contenido) { animation: desvanecer .15s ease-in forwards; }
::view-transition-new(contenido) { animation: desvanecer .2s ease-out reverse; }
@keyframes desvanecer { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Impresión de la pantalla (el reporte formal está en /reportes) */
@media print {
  .sidebar, .topbar, .menu-inferior, .acciones-fijas, .toast { display: none !important; }
  body.con-menu .principal { margin: 0; }
}

/* =====================================================================
   Mejoras visuales (diseño "Field Utility Modern" de Stitch + CSS de los PDFs)
   ===================================================================== */
:root {
  /* Monoespaciada del sistema para números de OT, contadores y etiquetas (como en Stitch) */
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

@layer vistas {
  /* [texto] títulos sin una palabra sola en la última línea; párrafos sin viudas */
  :where(h1, h2, .orden-titulo) { text-wrap: balance; }
  :where(p, .suave) { text-wrap: pretty; }

  /* [texto] el campo "¿Qué hiciste?" crece con lo que se escribe (sin barra de scroll) */
  @supports (field-sizing: content) {
    #trabajo { field-sizing: content; min-height: 110px; max-height: 60vh; }
  }

  /* Códigos y cifras en monoespaciada */
  .orden .numero, .cabecera h1 .num, .contador-gris, .chip-rapido .n, .pestanas .n,
  .cronometro b, .progreso-txt b, .lista-repuestos strong {
    font-family: var(--mono);
    letter-spacing: 0;
  }
  .badge, .dato-titulo, .plazo { font-family: var(--mono); }

  /* ---------- Filtros rápidos con contador ---------- */
  /* [scroll-snap] fila deslizable en el celular; cada chip "encaja" al soltar */
  .chips-rapidos {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: .1rem;
    &::-webkit-scrollbar { display: none; }
  }
  .chip-rapido {
    --tono: var(--verde);
    flex: none;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .35rem .85rem;
    border: 1.5px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--superficie);
    font-weight: 700;
    font-size: .85rem;

    &.rojo { --tono: var(--rojo-fuerte); }
    &.ambar { --tono: var(--ambar-borde); }

    .n {
      min-width: 1.5rem;
      padding: 0 .35rem;
      border-radius: 6px;
      /* [color-rel] el mismo tono del chip, pero transparente */
      background: rgb(from var(--tono) r g b / .16);
      color: var(--texto);
      font-size: .78rem;
      text-align: center;
    }
    &[aria-pressed="true"] {
      border-color: var(--tono);
      background: rgb(from var(--tono) r g b / .12);
      .n { background: var(--tono); color: #fff; }
    }
    @media (any-hover: hover) { &:hover { border-color: var(--tono); } }
  }

  /* ---------- Avance del checklist en la tarjeta ---------- */
  .progreso-ot {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .6rem;
    font-size: .78rem;
    color: var(--texto-suave);
    --avance: var(--pct);
    transition: --avance .6s ease-out;

    .progreso-barra {
      height: 6px;
      border-radius: 999px;
      background: rgb(from var(--verde) r g b / .15);
      overflow: hidden;
    }
    .progreso-barra i {
      display: block;
      height: 100%;
      width: calc(var(--avance) * 1%);
      border-radius: inherit;
      background: var(--verde);
    }
    @starting-style { --avance: 0; }
  }

  /* [scope] estilos que solo valen dentro de una tarjeta de orden, hasta el botón de acción */
  @scope (.orden) to (.cta) {
    .plazo {
      display: inline-block;
      margin-left: .35rem;
      padding: .05rem .4rem;
      border-radius: 6px;
      background: var(--superficie-2, rgb(from var(--texto) r g b / .06));
      font-size: .7rem;
      font-weight: 800;
      &.ambar { background: var(--ambar-fondo); color: var(--ambar); }
      &.rojo { background: var(--rojo-fondo, rgb(from var(--rojo-fuerte) r g b / .12)); color: var(--rojo); }
    }
    /* Tarjeta devuelta o vencida en modo oscuro: borde con brillo (como Stitch) */
    /* light-dark() solo acepta colores: el brillo es transparente en modo claro */
    :scope.vencida { box-shadow: var(--sombra), 0 0 0 1px rgb(from var(--rojo-fuerte) r g b / .3), 0 0 18px light-dark(transparent, rgb(220 38 38 / .2)); }
    :scope.en_progreso { box-shadow: var(--sombra), 0 0 0 1px light-dark(transparent, rgb(16 185 129 / .28)); }
  }

  /* [rendimiento] con muchas órdenes, el navegador no dibuja las que están fuera de pantalla */
  .lista-ordenes > .orden {
    content-visibility: auto;
    contain-intrinsic-size: auto 190px;
  }
  .panel-lista { scrollbar-gutter: stable; }
}