/* ==========================================================================
   MantePro — Capa "experiencia" (rediseño 2026)

   Va en su propia capa, declarada DESPUÉS de las de styles.css, así que
   [cascada] le gana a todas sin usar !important ni subir especificidad.

   Novedades:
   [aurora]      fondos con gradientes radiales que se mueven lento (@property --giro)
   [vidrio]      barras con backdrop-filter (efecto vidrio esmerilado)
   [dock]        menú inferior flotante con indicador de la sección actual
   [squircle]    esquinas "superelípticas" con corner-shape (si el navegador lo soporta)
   [grupos]      encabezados de la lista pegajosos (sticky) por fecha: Hoy, Mañana…
   [esqueleto]   carga con la forma del contenido y un brillo que pasa
   [paleta]      búsqueda rápida Ctrl + K en un <dialog> nativo
   [entrada]     las tarjetas entran escalonadas (animation-delay con una variable --i)
   ========================================================================== */

/* [property] ángulo animable para el giro lento de la aurora */
@property --giro {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --aurora-1: light-dark(#10b981, #10b981);
  --aurora-2: light-dark(#0ea5e9, #0891b2);
  --aurora-3: light-dark(#047857, #064e3b);
  --vidrio: light-dark(rgb(255 255 255 / .72), rgb(17 24 28 / .68));
  --vidrio-borde: light-dark(rgb(15 23 42 / .08), rgb(255 255 255 / .08));
  --sombra-flotante: 0 10px 30px -10px rgb(2 44 34 / .35), 0 2px 6px rgb(0 0 0 / .08);
  --anillo-foco: 0 0 0 3px color-mix(in srgb, var(--verde) 45%, transparent);
  --ease-salto: cubic-bezier(.34, 1.56, .64, 1);
}

@layer experiencia {
  /* ---------- Base ---------- */
  body {
    /* Un brillo verde muy suave en la esquina: da profundidad sin distraer */
    background:
      radial-gradient(60rem 30rem at 100% -10%, color-mix(in srgb, var(--aurora-1) 9%, transparent), transparent 70%),
      var(--fondo);
    background-attachment: fixed;
  }

  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
  }

  ::selection { background: color-mix(in srgb, var(--verde) 30%, transparent); }

  kbd {
    display: inline-grid;
    place-items: center;
    min-width: 1.5em;
    padding: .05rem .35rem;
    border: 1px solid var(--borde-fuerte);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--superficie);
    font: 700 .68rem/1.4 var(--mono);
    color: var(--texto-suave);
  }

  /* ---------- [vidrio] barra superior del celular ---------- */
  .topbar {
    background:
      linear-gradient(120deg, rgb(255 255 255 / .06), transparent 40%),
      linear-gradient(135deg, var(--aurora-3), color-mix(in srgb, var(--aurora-3) 70%, var(--aurora-2)));
    box-shadow: 0 8px 24px -12px rgb(2 44 34 / .6);

    .btn-icono.buscar-movil {
      display: inline-grid;
      place-items: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid rgb(255 255 255 / .2);
      background: rgb(255 255 255 / .1);
      color: #fff;
    }
  }

  /* ---------- [dock] menú inferior flotante ---------- */
  @media (width < 1024px) {
    .menu-inferior {
      inset: auto .75rem calc(.6rem + env(safe-area-inset-bottom));
      padding: .3rem;
      gap: .2rem;
      border: 1px solid var(--vidrio-borde);
      border-radius: 22px;
      background: var(--vidrio);
      backdrop-filter: blur(18px) saturate(1.6);
      box-shadow: var(--sombra-flotante);

      a {
        position: relative;
        min-height: 54px;
        padding: .45rem .2rem .4rem;
        border-radius: 16px;
        transition: color .2s, background .25s;

        .ico { transition: translate .3s var(--ease-salto); }

        &[aria-current="page"] {
          color: var(--verde-texto);
          background: color-mix(in srgb, var(--verde) 14%, transparent);
          .ico { translate: 0 -2px; }
        }
        &:active { scale: .96; }
      }
    }
    /* el contenido no queda tapado por el dock */
    body.con-menu main { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
    .toast { bottom: calc(5.6rem + env(safe-area-inset-bottom)); }
    .acciones-fijas { bottom: calc(5.4rem + env(safe-area-inset-bottom)); border-radius: 18px; }
  }

  /* ---------- Escritorio: menú lateral y barra ---------- */
  @media (width >= 1024px) {
    .sidebar {
      position: relative;
      background:
        radial-gradient(28rem 18rem at 0% 0%, rgb(16 185 129 / .35), transparent 70%),
        radial-gradient(20rem 22rem at 100% 100%, rgb(14 165 233 / .2), transparent 70%),
        linear-gradient(180deg, #065f46, #053d2e);
      box-shadow: inset -1px 0 0 rgb(255 255 255 / .06);
    }

    .sidebar-nav a {
      position: relative;
      transition: background .2s, color .2s, padding-left .25s var(--ease-salto);

      /* Indicador de la sección actual: una rayita luminosa a la izquierda */
      &::before {
        content: "";
        position: absolute;
        left: -.8rem;
        top: 22%;
        bottom: 22%;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: #6ee7b7;
        box-shadow: 0 0 12px #34d399;
        scale: 1 0;
        transition: scale .3s var(--ease-salto);
      }
      &[aria-current="page"] {
        background: rgb(255 255 255 / .14);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / .12);
        &::before { scale: 1 1; }
      }
      &:hover:not([aria-current]) { padding-left: 1rem; }
    }

    .barra-app {
      background: var(--vidrio);
      backdrop-filter: blur(16px) saturate(1.5);
      border-bottom-color: var(--vidrio-borde);
    }

    /* Botón que abre la búsqueda rápida (Ctrl + K) */
    .buscar-global {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      min-width: min(340px, 28vw);
      min-height: 38px;
      padding: .3rem .45rem .3rem .8rem;
      border: 1px solid var(--borde);
      border-radius: 12px;
      background: var(--superficie);
      color: var(--texto-suave);
      font-size: .85rem;
      text-align: left;
      transition: border-color .2s, box-shadow .2s;

      span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .ico { width: 17px; height: 17px; }
      &:hover { border-color: var(--verde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 12%, transparent); }
    }
  }

  @media (1024px <= width < 1280px) {
    .buscar-global { min-width: 0; span { display: none; } }
  }

  /* ---------- [aurora] saludo de la pantalla de órdenes ---------- */
  .saludo.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1rem;
    padding: 1.15rem 1.15rem 1.05rem;
    border: 0;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--aurora-3), #065f46 55%, #0e7490);
    box-shadow: var(--sombra-flotante);

    /* Manchas de luz que giran despacio por detrás (no se mueven si se pide menos movimiento) */
    &::before {
      content: "";
      position: absolute;
      inset: -60%;
      z-index: -1;
      background:
        radial-gradient(closest-side at 30% 40%, rgb(52 211 153 / .55), transparent),
        radial-gradient(closest-side at 75% 65%, rgb(56 189 248 / .45), transparent),
        radial-gradient(closest-side at 60% 20%, rgb(16 185 129 / .4), transparent);
      rotate: var(--giro);
      animation: aurora 24s linear infinite;
    }
    /* Textura de puntos muy sutil */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image: radial-gradient(rgb(255 255 255 / .12) 1px, transparent 1px);
      background-size: 14px 14px;
      mask: linear-gradient(90deg, transparent, #000 70%);
    }

    &.hero-alerta {
      background: linear-gradient(135deg, #064e3b, #065f46 50%, #7f1d1d);
    }

    .hero-texto { display: grid; gap: .2rem; min-width: 0; }
    .hero-fecha {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: .8;
    }
    h1 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.7rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
    p { color: rgb(255 255 255 / .82); font-size: .88rem; }

    .hero-foco {
      display: grid;
      justify-items: end;
      gap: .15rem;
      text-align: right;

      strong { font: 800 2.6rem/1 var(--fuente); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
      span { font-size: .72rem; font-weight: 700; opacity: .85; }
    }

    .hero-refrescar {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      margin-top: .35rem;
      padding: .2rem .55rem;
      border: 1px solid rgb(255 255 255 / .25);
      border-radius: 999px;
      background: rgb(255 255 255 / .12);
      color: #fff;
      font: 700 .7rem/1.4 var(--mono);
      backdrop-filter: blur(6px);
      .ico { width: 13px; height: 13px; transition: rotate .6s var(--ease-salto); }
      &:hover .ico { rotate: -1turn; }
    }

    .avatar { display: none; }

    /* Variante para otras pantallas: ícono grande o iniciales en vez del número */
    .hero-icono {
      display: grid;
      place-items: center;
      width: 3.4rem;
      height: 3.4rem;
      border: 1px solid rgb(255 255 255 / .25);
      border-radius: 18px;
      background: rgb(255 255 255 / .12);
      backdrop-filter: blur(6px);
      .ico { width: 1.7rem; height: 1.7rem; }
    }
    .hero-iniciales { font: 800 1.25rem/1 var(--fuente); letter-spacing: .02em; }
  }
  .hero-pantalla { margin-bottom: .25rem; }

  @keyframes aurora { to { --giro: 360deg; } }

  /* En el panel angosto del escritorio el saludo se compacta */
  @container lista (width < 420px) {
    .saludo.hero {
      padding: .95rem;
      .hero-foco strong { font-size: 2.1rem; }
      .hero-fecha { font-size: .64rem; }
    }
  }

  /* ---------- Indicadores ---------- */
  .resumen .dato {
    position: relative;
    overflow: hidden;
    border-color: var(--vidrio-borde);
    background:
      linear-gradient(160deg, color-mix(in srgb, var(--tono-dato, var(--verde)) 7%, transparent), transparent 55%),
      var(--superficie);
    transition: translate .2s, box-shadow .2s;

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

    /* Ícono dentro de una pastilla de color */
    .dato-titulo .ico {
      box-sizing: content-box;
      padding: 5px;
      border-radius: 9px;
      background: color-mix(in srgb, var(--tono-dato, var(--verde)) 14%, transparent);
      color: var(--tono-dato, var(--verde));
    }
    /* Raya de color abajo */
    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 3px;
      background: linear-gradient(90deg, var(--tono-dato, var(--verde)), transparent);
      opacity: .7;
    }
    @media (any-hover: hover) { &:hover { translate: 0 -2px; box-shadow: var(--sombra-2); } }
  }

  /* ---------- Pestañas y filtros ---------- */
  .pestanas {
    padding: .25rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--texto) 5%, var(--superficie));
    border: 1px solid var(--vidrio-borde);

    button { border-radius: 10px; transition: background .2s, color .2s, box-shadow .2s; }
    button[aria-selected="true"] {
      background: var(--superficie);
      box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 12px -6px rgb(0 0 0 / .25);
    }
  }

  .buscar input {
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s;
    &:focus { border-color: var(--verde); box-shadow: var(--anillo-foco); }
  }

  /* ---------- [grupos] encabezados de la lista ---------- */
  .grupo-lista {
    grid-column: 1 / -1;            /* ocupa toda la fila de la cuadrícula de tarjetas */
    position: sticky;
    top: calc(64px + env(safe-area-inset-top));
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .4rem;
    padding: .45rem .2rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    background: linear-gradient(var(--fondo) 70%, transparent);

    b {
      min-width: 1.4rem;
      padding: 0 .35rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--texto) 9%, transparent);
      font: 800 .7rem/1.5 var(--mono);
      text-align: center;
    }
    /* Línea que se desvanece hasta el borde */
    &::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--borde), transparent); }

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

    &:first-child { margin-top: 0; }
  }
  @media (width >= 1024px) { .grupo-lista { top: 0; } }

  /* ---------- Tarjetas de orden ---------- */
  .orden {
    border: 1px solid var(--vidrio-borde);
    border-left-width: 4px;
    border-radius: 18px;
    transition: translate .25s var(--ease-salto), box-shadow .25s, border-color .2s;

    /* La prioridad urgente lleva un brillo rojo suave en el borde */
    &[data-prioridad="urgente"]:not(.completada) {
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--rojo-fuerte) 7%, transparent), transparent 35%),
        var(--superficie);
    }

    @media (any-hover: hover) {
      &:hover { translate: 0 -3px; box-shadow: 0 14px 30px -18px rgb(2 44 34 / .45), var(--sombra); }
    }
    &:active { scale: .992; }

    .cta {
      border-radius: 12px;
      transition: filter .2s;
      &.cta-verde, &.cta-rojo { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2); }
    }
    @media (any-hover: hover) { &:hover .cta { filter: brightness(1.06); } }
  }

  /* [squircle] esquinas superelípticas, más "de app nativa" (solo si el navegador lo soporta) */
  @supports (corner-shape: squircle) {
    .orden, .resumen .dato, .saludo.hero, .tarjeta, .paleta .pal-caja {
      corner-shape: squircle;
      border-radius: 28px;
    }
  }

  /* [entrada] las tarjetas aparecen una tras otra al cargar la lista. */
  @media (prefers-reduced-motion: no-preference) {
    .lista-ordenes > .orden, .lista-ordenes > .grupo-lista, .resumen .dato {
      animation: entrar .45s var(--ease-salto) both;
    }
    /* --i lo pone ordenes.js (posición en la lista); los indicadores usan :nth-child */
    .lista-ordenes > * { animation-delay: calc(var(--i, 0) * 40ms); }
    .resumen .dato:nth-child(2) { animation-delay: 50ms; }
    .resumen .dato:nth-child(3) { animation-delay: 100ms; }
    .resumen .dato:nth-child(4) { animation-delay: 150ms; }
  }
  @keyframes entrar { from { opacity: 0; translate: 0 12px; scale: .98; } }

  /* ---------- [esqueleto] carga ---------- */
  .esqueleto {
    display: grid;
    gap: .8rem;
    padding-block: .5rem;

    > *, .esq-tarjeta > * { position: relative; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--texto) 7%, transparent); }
    .esq-titulo { height: 2.1rem; width: 62%; }
    .esq-linea { display: block; height: .85rem; width: calc(var(--ancho) * 1%); }
    .esq-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; background: none; overflow: visible; }
    .esq-dato { height: 84px; border-radius: 16px; background: color-mix(in srgb, var(--texto) 7%, transparent); position: relative; overflow: hidden; }
    .esq-tarjeta {
      display: grid;
      gap: .7rem;
      padding: 1rem;
      border: 1px solid var(--borde);
      border-radius: 18px;
      background: var(--superficie);
    }

    /* El brillo que recorre cada bloque */
    .esq-titulo::after, .esq-linea::after, .esq-dato::after {
      content: "";
      position: absolute;
      inset: 0;
      translate: -100% 0;
      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--superficie) 70%, transparent), transparent);
      animation: brillo 1.4s ease-in-out infinite;
    }
  }
  @keyframes brillo { to { translate: 100% 0; } }

  /* ---------- Avisos (toast) ---------- */
  .toast {
    display: flex;
    align-items: center;
    gap: .7rem;
    overflow: hidden;
    padding: .75rem 1rem .85rem .75rem;
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: 16px;
    background: rgb(17 24 39 / .92);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .55);
    cursor: pointer;
    transition: opacity .3s, translate .35s var(--ease-salto), scale .35s var(--ease-salto);

    @starting-style { opacity: 0; translate: 0 1.2rem; scale: .96; }

    .toast-icono {
      display: grid;
      place-items: center;
      flex: none;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgb(255 255 255 / .14);
      font: 900 .85rem/1 var(--fuente);
    }
    .toast-texto { flex: 1; line-height: 1.35; }

    /* Barrita que se vacía: cuánto falta para que se cierre solo */
    .toast-tiempo {
      position: absolute;
      inset: auto 0 0;
      height: 3px;
      background: rgb(255 255 255 / .45);
      transform-origin: left;
      animation: vaciar var(--duracion, 3.5s) linear forwards;
    }

    &.ok { background: rgb(4 120 87 / .95); .toast-icono { background: #fff; color: #047857; } }
    &.error { background: rgb(153 27 27 / .95); .toast-icono { background: #fff; color: #991b1b; } }
  }
  @keyframes vaciar { from { scale: 1 1; } to { scale: 0 1; } }

  /* ---------- Login con aurora ---------- */
  .login {
    position: relative;
    isolation: isolate;

    /* Tres manchas de luz que se desplazan despacio detrás de la tarjeta */
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(45vmax 35vmax at 15% 20%, color-mix(in srgb, var(--aurora-1) 30%, transparent), transparent 70%),
        radial-gradient(40vmax 32vmax at 85% 85%, color-mix(in srgb, var(--aurora-2) 26%, transparent), transparent 70%),
        radial-gradient(35vmax 28vmax at 75% 10%, color-mix(in srgb, var(--aurora-3) 28%, transparent), transparent 70%);
      background-size: 130% 130%;
      animation: deriva 18s ease-in-out infinite alternate;
    }

    .tarjeta {
      border: 1px solid var(--vidrio-borde);
      border-radius: 26px;
      background: var(--vidrio);
      backdrop-filter: blur(22px) saturate(1.4);
      box-shadow: 0 30px 60px -30px rgb(2 44 34 / .5);
    }

    .logo img {
      border-radius: 22px;
      box-shadow: 0 12px 30px -10px rgb(4 120 87 / .7);
      animation: flotar 6s ease-in-out infinite;
    }
    .logo h1 {
      font-size: 1.8rem;
      letter-spacing: -.03em;
      background: linear-gradient(120deg, var(--verde-texto), var(--aurora-2));
      background-clip: text;
      color: transparent;
    }
  }
  @keyframes flotar { 50% { translate: 0 -5px; } }
  @keyframes deriva { to { background-position: 100% 60%, 0% 30%, 40% 100%; } }

  /* ---------- [paleta] búsqueda rápida (Ctrl + K) ---------- */
  dialog.paleta {
    width: min(100% - 1.5rem, 640px);
    max-height: min(70dvh, 560px);
    margin: 12dvh auto auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--texto);
    overflow: visible;

    &::backdrop {
      background: rgb(3 7 18 / .45);
      backdrop-filter: blur(4px);
    }

    opacity: 1;
    translate: 0 0;
    transition: opacity .2s, translate .25s var(--ease-salto), display .2s allow-discrete, overlay .2s allow-discrete;
    @starting-style { opacity: 0; translate: 0 -10px; }
    &:not([open]) { opacity: 0; translate: 0 -10px; }
  }

  .pal-caja {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: min(70dvh, 560px);
    overflow: hidden;
    border: 1px solid var(--vidrio-borde);
    border-radius: 20px;
    background: var(--superficie);
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6);
  }

  .pal-campo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--borde);

    .ico { width: 20px; height: 20px; color: var(--verde); flex: none; }
    input {
      flex: 1;
      min-width: 0;
      border: 0;
      background: none;
      font-size: 1.02rem;
      outline: none;
      box-shadow: none !important;
      &::-webkit-search-cancel-button { display: none; }
    }
  }

  .pal-lista {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .4rem;
    margin: 0;
    list-style: none;

    li[role="option"] {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .6rem .7rem;
      border-radius: 12px;
      cursor: pointer;

      &[aria-selected="true"] { background: color-mix(in srgb, var(--verde) 12%, transparent); .pal-icono { background: var(--verde); color: #fff; } }
      @media (any-hover: hover) { &:hover:not([aria-selected="true"]) { background: color-mix(in srgb, var(--texto) 5%, transparent); } }
    }
  }

  .pal-icono {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--texto) 7%, transparent);
    color: var(--texto-suave);
    transition: background .15s, color .15s;
    .ico { width: 18px; height: 18px; }
  }

  .pal-texto {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
    strong, small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    strong { font-size: .92rem; }
    small { font-size: .78rem; color: var(--texto-suave); }
  }

  .pal-etiqueta {
    flex: none;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: var(--rojo-fondo);
    color: var(--rojo);
    font: 800 .66rem/1.5 var(--mono);
    text-transform: uppercase;
  }

  .pal-vacio { padding: 1.5rem; text-align: center; color: var(--texto-suave); }

  .pal-pie {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .55rem 1rem;
    border-top: 1px solid var(--borde);
    background: color-mix(in srgb, var(--texto) 3%, var(--superficie));
    font-size: .72rem;
    color: var(--texto-suave);
    span { display: inline-flex; align-items: center; gap: .25rem; }
    @media (width < 640px) { display: none; }
  }

  /* ---------- Detalle de la orden: pequeños toques ---------- */
  .tarjeta { border-radius: 18px; }
  .btn { transition: filter .15s, translate .15s, box-shadow .2s; }
  .btn.primario { box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--verde) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .18); }
  @media (any-hover: hover) { .btn:hover { filter: brightness(1.05); } }
  .btn:active { translate: 0 1px; }
}

/* [condicional] sin animaciones decorativas si la persona lo pidió en su sistema */
@media (prefers-reduced-motion: reduce) {
  .saludo.hero::before, .login::before, .login .logo img { animation: none; }
}

/* ---------- SLA (plazo máximo de las correctivas) y WhatsApp ---------- */
@layer experiencia {
  .badge.sla, .chip-sla {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    .ico { width: 13px; height: 13px; }
  }
  .chip-sla {
    grid-column: 1 / -1;
    justify-self: start;
    padding: .15rem .55rem;
    border-radius: 999px;
    font: 800 .72rem/1.5 var(--mono);
  }
  :is(.badge.sla, .chip-sla) {
    &.sla-en_tiempo, &.sla-cumplido { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
    &.sla-por_vencer { background: var(--ambar-fondo); color: var(--ambar); border-color: var(--ambar-borde); }
    &.sla-vencido, &.sla-incumplido { background: var(--rojo-fondo); color: var(--rojo); border-color: var(--rojo-borde); }
  }
  /* El chip de "fuera de SLA" late suave para llamar la atención */
  @media (prefers-reduced-motion: no-preference) {
    .chip-sla.sla-vencido { animation: latir 2s ease-in-out infinite; }
  }
  @keyframes latir { 50% { box-shadow: 0 0 0 4px rgb(from var(--rojo-fuerte) r g b / .18); } }

  .btn-whatsapp .ico { color: #16a34a; }
}

/* ---------- Mis órdenes: ajustes del diseño nuevo de Stitch ---------- */
@layer experiencia {
  .alerta-devuelta .alerta-texto small {
    display: block;
    margin-top: .1rem;
    font: 800 .68rem/1.4 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rojo);
  }
  .orden {
    > .chip-sla { justify-self: start; }
    .orden-motivo {
      margin: 0;
      font-size: .8rem;
      font-weight: 500;
      line-height: 1.35;
      color: var(--rojo);
      b { font-weight: 800; }
    }
    /* Avance: texto arriba, barra abajo a todo lo ancho */
    .progreso-ot {
      grid-template-columns: 1fr;
      gap: .35rem;
      .progreso-txt {
        display: flex;
        justify-content: space-between;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        b { font-family: var(--mono); color: var(--texto); letter-spacing: 0; text-transform: none; }
      }
      .progreso-barra { height: 8px; }
    }
    &.vencida .progreso-ot .progreso-barra {
      background: rgb(from var(--rojo-fuerte) r g b / .15);
      i { background: var(--rojo-fuerte); }
    }
  }
}

/* ---------- Reportar: opciones técnicas (sistema, síntomas) en chips que se acomodan ---------- */
@layer experiencia {
  .opciones-tecnicas .opcion { flex: 0 1 auto; }
  .opciones-tecnicas .opcion span { min-height: 40px; font-size: .82rem; font-weight: 600; text-align: center; }
}