/* EconoHogar · panel de administración
   Denso y sin adornos: es una herramienta de trabajo, no una vitrina. */

/* Fuentes desde el propio dominio, las mismas de la tienda
   (ver seed/parciales/fuentes.css y assets/fuentes/LICENCIA.txt). */
@font-face{
  font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fuentes/plex-sans.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fuentes/plex-mono-400.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:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url(fuentes/plex-mono-600.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;
}

:root{
  --fondo:#F1F5F8; --superficie:#FFFFFF; --superficie-2:#E7EEF3;
  --linea:#D6E1E9; --linea-fuerte:#B7C8D4;
  --tinta:#0F1D26; --tinta-2:#33505F; --tenue:#647F8E;
  --azul:#14618F; --azul-nav:#0E4D72;
  --ok:#2E7D32; --mal:#C62828; --avisa:#9A5E00;
  --radio:4px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
h1{font-size:1.3rem;margin:0 0 4px;font-weight:700;letter-spacing:-.01em}
h2{font-size:1rem;margin:0 0 10px;font-weight:700}
.env{max-width:1240px;margin:0 auto;padding:0 18px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- cabecera ---------- */
.p-cab{background:var(--azul-nav);color:#fff}
.p-cab-in{display:flex;align-items:center;gap:18px;padding-top:11px;padding-bottom:11px;flex-wrap:wrap}
.p-marca{font-weight:800;font-size:16px;color:#fff;letter-spacing:-.01em}
.p-marca:hover{text-decoration:none}
.p-marca span{opacity:.6;font-weight:500;font-size:13px;margin-left:6px}
.p-nav{display:flex;gap:2px;margin-left:8px;flex-wrap:wrap}
.p-nav a{color:#D7E7F1;padding:6px 11px;border-radius:var(--radio);font-size:13.5px}
.p-nav a:hover{background:rgba(255,255,255,.12);text-decoration:none;color:#fff}
.p-nav a[aria-current="page"]{background:rgba(255,255,255,.18);color:#fff;font-weight:600}
.p-yo{margin-left:auto;font-size:12.5px;color:#BDD6E5;display:flex;align-items:center;gap:12px}
.p-yo a{color:#fff;text-decoration:underline}
/* «Salir» es un formulario (va por POST con token) que se ve como enlace. */
.p-salir{display:inline;margin:0}
.p-salir button{
  background:none;border:0;padding:0;font:inherit;color:#fff;text-decoration:underline;cursor:pointer;
}

.p-cuerpo{padding-top:22px;padding-bottom:60px}
.p-tit{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.p-tit p{margin:0;color:var(--tenue);font-size:13px}
.p-tit .der{margin-left:auto;display:flex;gap:8px}

/* ---------- avisos ---------- */
.aviso{
  padding:11px 14px;border-radius:var(--radio);margin-bottom:16px;font-size:13.5px;
  border-left:3px solid;
}
.aviso.bien{background:rgba(46,125,50,.10);border-color:var(--ok);color:#1B5E20}
.aviso.mal{background:rgba(198,40,40,.09);border-color:var(--mal);color:#8E1F1A}
.aviso.ayuda{background:#FFF8E7;border-color:var(--avisa);color:#6B4200}
/* El <b> abre el aviso como título; para resaltar dentro del texto va <strong>. */
.aviso b{display:block;margin-bottom:2px}

/* ---------- tarjetas de resumen ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.cifra{background:var(--superficie);border:1px solid var(--linea);border-radius:8px;padding:15px 16px}
.cifra b{display:block;font-size:26px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.cifra span{font-size:12px;color:var(--tenue);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.cifra.alerta b{color:var(--mal)}
.cifra.activa b{color:var(--ok)}

/* ---------- caja ---------- */
.caja{background:var(--superficie);border:1px solid var(--linea);border-radius:8px;overflow:hidden;margin-bottom:20px}
.caja-cab{padding:12px 16px;border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.caja-cab h2{margin:0}
.caja-cab .der{margin-left:auto}
.caja-cuerpo{padding:16px}

/* ---------- tablas ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{
  text-align:left;padding:9px 12px;background:var(--superficie-2);color:var(--tinta-2);
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  border-bottom:1px solid var(--linea);white-space:nowrap;
}
.tabla td{padding:9px 12px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--superficie-2)}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla .sku{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tinta-2)}
.tabla .apagado{opacity:.5}
.tabla-scroll{overflow-x:auto}

/* ---------- etiquetas ---------- */
.eti{
  display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;
  font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.eti.nuevo{background:rgba(20,97,143,.14);color:var(--azul)}
.eti.confirmado{background:rgba(46,125,50,.14);color:var(--ok)}
.eti.entregado{background:var(--superficie-2);color:var(--tinta-2)}
.eti.cancelado{background:rgba(198,40,40,.12);color:var(--mal)}
.eti.oculto-pub{background:#FFF1D6;color:#6B4200}
.eti.agotado{background:rgba(198,40,40,.12);color:var(--mal)}
.eti.poco{background:#FFF1D6;color:#6B4200}
.eti.demo{background:#EDE4FA;color:#5B3B93}

/* ---------- formularios ---------- */
/* Dos columnas fijas en escritorio, una en el teléfono. Antes era
   auto-fit de 210 px: en 1200 px daba cinco columnas, y como los campos
   anchos (Dirección, Nombre) las ocupan todas, las filas de dos campos
   quedaban amontonadas a la izquierda con un hueco a la derecha. */
.campos{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.campos{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}}
/* Cantidades por sala: números cortos. Casillas de ancho fijo alineadas a
   la izquierda, no estiradas a media pantalla. */
.campos.campos-cortos{grid-template-columns:repeat(auto-fill,minmax(150px,200px))}
.campo{display:block}
.campo>label,.campo>.et{
  display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tenue);font-weight:700;margin-bottom:4px;
}
/* Todo campo de texto, sea del tipo que sea. Antes la regla nombraba
   text, number, email y password, y un tel o un datetime-local quedaba con
   el aspecto del navegador: fino y con borde negro. */
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]),
.campo select,.campo textarea,.ficha-fila input{
  width:100%;font:inherit;font-size:14px;padding:9px 11px;border-radius:var(--radio);
  border:1.5px solid var(--linea-fuerte);background:var(--superficie);color:var(--tinta);
  min-height:42px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus,.ficha-fila input:focus{
  border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgba(20,97,143,.14);
}
/* El selector de fecha y hora trae su propio icono: que no quede pegado. */
.campo input[type=datetime-local]{padding-right:8px}
.campo input::placeholder,.campo textarea::placeholder,.ficha-fila input::placeholder{color:var(--tenue);opacity:1}
.campo input[readonly]{background:var(--superficie-2);color:var(--tinta-2)}
.campo textarea{resize:vertical;min-height:74px}
.pista{display:block;font-size:12px;color:var(--tenue);margin-top:4px;line-height:1.45}
.campo.ancho{grid-column:1/-1}

/* Ficha técnica: filas de «característica · valor · quitar». */
.ficha-ed{display:grid;gap:8px}
.ficha-cab,.ficha-fila{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) 40px;gap:8px;align-items:center}
.ficha-cab span{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);
}
.ficha-fila input[name="ficha_nombre[]"]{font-weight:600}
.ficha-quitar{
  width:40px;height:40px;border:0;border-radius:var(--radio);background:transparent;
  color:var(--tenue);font:inherit;font-size:22px;line-height:1;cursor:pointer;
}
.ficha-quitar:hover{background:rgba(198,40,40,.09);color:var(--mal)}
.ficha-quitar:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.ficha-mas{margin-top:12px}
.marca{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.marca input{width:17px;height:17px;accent-color:var(--azul)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--azul);color:#fff;border-radius:var(--radio);padding:9px 17px;
  font-weight:600;font-size:13.5px;
}
.btn:hover{background:var(--azul-nav);text-decoration:none;color:#fff}
.btn.claro{background:var(--superficie);color:var(--tinta);border:1.5px solid var(--linea-fuerte)}
.btn.claro:hover{background:var(--superficie-2);color:var(--tinta)}
.btn.verde{background:var(--ok)}
.btn.verde:hover{background:#1B5E20}
.btn.rojo{background:var(--mal)}
.btn.rojo:hover{background:#8E1F1A}
.btn.chico{padding:5px 11px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.acciones{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}

/* existencias en línea */
.exi{display:flex;gap:5px;align-items:center}
.exi input{width:66px;padding:5px 7px;font:inherit;font-size:13px;text-align:right;
  border:1.5px solid var(--linea-fuerte);border-radius:var(--radio);background:var(--superficie);color:var(--tinta)}

/* filtros */
.filtra{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.filtra input[type=search],.filtra select{
  font:inherit;font-size:13.5px;padding:8px 11px;border-radius:var(--radio);
  border:1.5px solid var(--linea-fuerte);background:var(--superficie);color:var(--tinta);
}
.filtra input[type=search]{min-width:220px}
.fichas{display:flex;gap:4px;flex-wrap:wrap}
.fichas a{
  padding:6px 13px;border-radius:20px;font-size:13px;color:var(--tinta-2);
  background:var(--superficie-2);
}
.fichas a:hover{text-decoration:none;background:var(--linea)}
.fichas a[aria-current="page"]{background:var(--azul);color:#fff;font-weight:600}

.paginas{display:flex;justify-content:center;gap:6px;margin:18px 0}
.paginas a,.paginas span{padding:6px 12px;border:1px solid var(--linea);border-radius:var(--radio);
  font-size:13px;background:var(--superficie)}
.paginas .aqui{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:700}

/* ---------- entrar ---------- */
.entrar{max-width:392px;margin:9vh auto;padding:0 18px}
.entrar .caja-cuerpo{padding:26px 24px}
.entrar .logo{
  display:flex;align-items:center;gap:10px;justify-content:center;
  width:fit-content;min-height:44px;margin:0 auto 22px;padding:2px 6px;border-radius:6px;
  color:var(--tinta);transition:transform .16s cubic-bezier(.34,1.4,.64,1);
}
.entrar .logo:hover{text-decoration:none;transform:translateY(-1.5px)}
.entrar .logo:active{transform:translateY(0)}
.entrar .logo .logo-img{display:block;width:158px;height:64px}
.entrar .campo{margin-bottom:14px}
.entrar .btn{width:100%;padding:11px}
.entrar .pie-nota{text-align:center;font-size:12px;color:var(--tenue);margin:16px 0 0}

@media(max-width:700px){
  .p-yo{width:100%;margin-left:0;order:3}
  .tabla th,.tabla td{padding:8px 9px}
}

/* ---------- fotos de producto ---------- */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.foto{
  margin:0;border:1px solid var(--linea);border-radius:8px;overflow:hidden;
  background:var(--superficie-2);position:relative;
}
.foto.portada{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.foto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#fff}
.foto-eti{
  position:absolute;top:7px;left:7px;background:var(--azul);color:#fff;
  font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:.03em;
}
.foto figcaption{
  display:flex;gap:6px;flex-wrap:wrap;padding:8px;background:var(--superficie);
  border-top:1px solid var(--linea);
}
.foto figcaption form{margin:0}
.foto figcaption .btn{width:100%;justify-content:center}
.campo input[type=file]{
  width:100%;font:inherit;font-size:13.5px;padding:9px 11px;border-radius:var(--radio);
  border:1.5px dashed var(--linea-fuerte);background:var(--superficie);color:var(--tinta);
  cursor:pointer;
}
.campo input[type=file]:hover{border-color:var(--azul)}

/* ============================================================
   Panel en el teléfono
   ------------------------------------------------------------
   Medido a 375 px antes de tocar nada:
     · cabecera de 133 px en todas las pantallas
     · tablas más anchas que la pantalla (productos 556 px, pedidos
       570): el campo de existencias y el botón de guardar quedaban
       fuera de la vista
     · 142 tocables chicos y 42 campos que hacían zoom en iPhone,
       justo en la pantalla de ajuste rápido de existencias
     · todos los formularios con letra menor a 16 px

   Todo va dentro de max-width:767.98px: el escritorio no cambia.
   ============================================================ */

html{-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea,label{touch-action:manipulation}

/* Los iconos del menú y las etiquetas «solo teléfono» no se ven en escritorio. */
.p-nav-ic{display:none}
.solo-movil{display:none}

/* Globo de pedidos nuevos: sirve en las dos versiones. */
.p-globo{
  display:inline-block;min-width:18px;height:18px;padding:0 5px;margin-left:6px;
  border-radius:9px;background:var(--mal);color:#fff;font-size:11px;line-height:18px;
  text-align:center;font-weight:700;vertical-align:1px;
}

@media (max-width:767.98px){

  body.con-menu{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .env{padding:0 12px}
  .p-cuerpo{padding-top:14px;padding-bottom:24px}
  h1{font-size:1.2rem}

  /* ---------- cabecera: una sola fila ---------- */
  .p-cab-in{flex-wrap:nowrap;gap:10px;padding-top:6px;padding-bottom:6px;min-height:52px}
  .p-marca{font-size:15px;white-space:nowrap;min-height:40px;display:inline-flex;align-items:center}
  .p-yo{width:auto;margin-left:auto;order:0;gap:14px;font-size:12.5px}
  .p-yo-nombre{display:none}
  .p-yo a,.p-salir button{min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}

  /* ---------- menú abajo, como en una app ----------
     Quien atiende la tienda usa esto de pie, con una mano. */
  .p-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;gap:2px;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:var(--superficie);border-top:1px solid var(--linea);
    padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 22px -14px rgba(15,29,38,.35);
  }
  .p-nav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--tenue);padding:6px 2px;min-height:54px;border-radius:10px;
    font-size:11px;font-weight:600;position:relative;
  }
  .p-nav a:hover{background:transparent;color:var(--tinta);text-decoration:none}
  .p-nav a[aria-current="page"]{background:rgba(20,97,143,.10);color:var(--azul);font-weight:700}
  .p-nav-ic{display:block;width:23px;height:23px}
  .p-globo{position:absolute;top:3px;left:calc(50% + 5px);margin:0}

  /* ---------- títulos y botones de arriba ---------- */
  .p-tit{gap:10px;margin-bottom:14px}
  .p-tit .der{margin-left:0;width:100%}
  .p-tit .der .btn{flex:1}

  /* ---------- campos: 16 px, o iPhone hace zoom al tocarlos ---------- */
  .campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]),
  .campo select,.campo textarea,.ficha-fila input,
  .filtra input[type=search],.filtra select{font-size:16px;min-height:46px}
  .campo input[type=file]{font-size:14px;min-height:52px}
  .campo textarea{min-height:96px}
  .pista{font-size:12.5px}

  /* Ficha técnica: el nombre arriba con su ✕, el valor abajo. */
  .ficha-cab{display:none}
  .ficha-ed{gap:0}
  .ficha-fila{
    grid-template-columns:minmax(0,1fr) 44px;gap:6px;
    padding:10px 0;border-bottom:1px solid var(--linea);
  }
  .ficha-fila input[name="ficha_valor[]"]{grid-column:1/-1;grid-row:2}
  .ficha-quitar{width:44px;height:46px}
  .ficha-mas{width:100%}
  .marca{min-height:44px}
  .marca input{width:22px;height:22px}

  /* ---------- botones al alcance del dedo ---------- */
  .btn{min-height:44px}
  .btn.chico{min-height:40px;padding:8px 14px;font-size:13px}
  .acciones .btn{flex:1 1 100%}

  /* ---------- resumen de la portada: 2 x 2 ---------- */
  .cifras{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
  .cifra{padding:12px 13px}
  .cifra b{font-size:22px}
  .cifra span{font-size:11px}

  /* ---------- filtros del listado ---------- */
  .caja-cab{padding:12px}
  .filtra{width:100%;gap:8px}
  .filtra input[type=search]{min-width:0;flex:1 1 100%}
  .filtra select{flex:1 1 auto;min-width:0}
  .caja-cab .der.fichas{
    margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .fichas::-webkit-scrollbar{display:none}
  .fichas a{white-space:nowrap;min-height:40px;display:inline-flex;align-items:center}

  /* ---------- tablas convertidas en tarjetas ----------
     Una tabla de 5 u 8 columnas en 375 px obliga a deslizar de costado
     para ver lo importante. Cada fila pasa a ser un bloque con todo a la
     vista. */
  .tabla-scroll{overflow:visible}
  .t-prod,.t-ped,.t-items,.t-salas{display:block}
  .t-prod thead,.t-ped thead,.t-items thead,.t-salas thead{display:none}
  .t-prod tbody,.t-ped tbody,.t-items tbody,.t-salas tbody,.t-items tfoot{display:block}
  .t-prod tr,.t-ped tr,.t-items tr,.t-salas tr{
    display:grid;padding:13px 12px;border-bottom:1px solid var(--linea);align-items:center;
  }
  .t-prod td,.t-ped td,.t-items td,.t-salas td{display:block;padding:0;border:0;text-align:left}
  .tabla tbody tr:hover{background:transparent}
  .solo-movil{display:inline}

  /* Productos: nombre y precio arriba, existencias y editar abajo. */
  .t-prod tr{
    grid-template-columns:1fr auto;gap:6px 12px;
    grid-template-areas:"prod precio" "cat cat" "exi edit";
  }
  .t-prod .c-prod{grid-area:prod;min-width:0}
  .t-prod .c-prod > a{display:inline-flex;align-items:center;min-height:40px;font-weight:600;font-size:14.5px;line-height:1.3}
  .t-prod .c-precio{grid-area:precio;text-align:right;font-weight:700;align-self:start}
  .t-prod .c-cat{grid-area:cat;font-size:12px !important}
  .t-prod .c-exi{grid-area:exi;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .t-prod .c-edit{grid-area:edit;align-self:end}
  .exi-et{flex-basis:100%;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tenue);font-weight:700}
  .exi{flex-wrap:nowrap;gap:6px}
  .exi input{width:76px;min-height:40px;font-size:16px;padding:6px 8px}

  /* Pedidos: código y estado, cliente y total, entrega y cuándo. */
  .t-ped tr{
    grid-template-columns:1fr auto;gap:4px 12px;
    grid-template-areas:"cod est" "cli tot" "ent cuando" "abrir abrir";
  }
  .t-ped .c-cod{grid-area:cod}
  .t-ped .c-cod a{font-size:14px;font-weight:700;display:inline-flex;align-items:center;min-height:40px}
  .t-ped .c-est{grid-area:est;justify-self:end}
  .t-ped .c-cli{grid-area:cli;font-size:14px}
  .t-ped .c-tot{grid-area:tot;text-align:right;font-weight:700;font-size:15px}
  .t-ped .c-ent{grid-area:ent;font-size:12.5px !important;color:var(--tinta-2)}
  .t-ped .c-cuando{grid-area:cuando;text-align:right}
  .t-ped .c-lin{display:none}
  .t-ped .c-abrir{grid-area:abrir;margin-top:8px;text-align:left !important}
  .t-ped .c-abrir .btn{width:100%}

  /* Lo que pidió: producto arriba, «2 × $1,319» y subtotal abajo. */
  .t-items tr{
    grid-template-columns:auto 1fr auto;gap:4px 6px;
    grid-template-areas:"prod prod prod" "cant precio sub";
  }
  .t-items .c-prod{grid-area:prod;font-size:14px}
  .t-items .c-cant{grid-area:cant;font-weight:700}
  .t-items .c-precio{grid-area:precio;color:var(--tenue)}
  .t-items .c-sub{grid-area:sub;text-align:right;font-weight:700}
  .t-items tfoot tr{display:flex;justify-content:space-between;align-items:center;padding:13px 12px}
  .t-items tfoot th{display:block;padding:0;border:0 !important}

  /* Datos del cliente: etiqueta arriba, dato abajo. */
  .t-datos tr{display:grid;grid-template-columns:1fr;padding:9px 0;border-bottom:1px solid var(--linea)}
  .t-datos tr:last-child{border-bottom:0}
  .t-datos th,.t-datos td{width:auto !important;padding:0;border:0;background:transparent}
  .t-datos td{font-size:14.5px;padding-top:2px}

  /* Salas. */
  .t-salas tr{
    grid-template-columns:1fr auto;gap:6px 12px;
    grid-template-areas:"sala est" "cont num" "acc acc";
  }
  .t-salas .c-sala{grid-area:sala}
  .t-salas .c-est{grid-area:est;justify-self:end}
  .t-salas .c-cont{grid-area:cont}
  .t-salas .c-num{grid-area:num;text-align:right;font-size:12.5px;color:var(--tinta-2)}
  .t-salas .c-acc{grid-area:acc;display:flex;gap:8px;margin-top:6px;white-space:normal !important}
  .t-salas .c-acc > .btn,.t-salas .c-acc > form{flex:1}
  .t-salas .c-acc form{display:flex !important}
  .t-salas .c-acc form .btn{width:100%}

  /* ---------- detalle del pedido: acciones grandes y apiladas ---------- */
  .p-estado-acc{flex-direction:column}
  .p-estado-acc .btn{width:100%;min-height:50px;font-size:15px}

  /* ---------- fotos del producto ---------- */
  .fotos{grid-template-columns:repeat(2,1fr);gap:10px}
  .foto figcaption{flex-direction:column}

  /* ---------- paginación ---------- */
  .paginas{gap:4px;flex-wrap:wrap}
  .paginas a,.paginas span{
    min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;
  }

  /* ---------- enlaces sueltos de texto ---------- */
  .caja-cab .der > a,.caja-cuerpo p > a,.t-items .c-prod > a,.aviso a{
    display:inline-flex;align-items:center;min-height:40px;
  }

  /* ---------- avisos ---------- */
  .aviso{font-size:14px}

  /* ---------- entrar ---------- */
  .entrar{margin:6vh auto}
}

/* Avisos por WhatsApp: tarjetas en el teléfono, como el resto de tablas. */
@media (max-width:767.98px){
  .t-avisos,.t-avisos tbody{display:block}
  .t-avisos thead{display:none}
  .t-avisos tr{
    display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
    grid-template-areas:"tel est" "desde desde" "acc acc";
    padding:12px;border-bottom:1px solid var(--linea);
  }
  .t-avisos td{display:block;padding:0;border:0;text-align:left}
  .t-avisos .c-tel{grid-area:tel}
  .t-avisos .c-tel a{font-size:16px;font-weight:700;display:inline-flex;align-items:center;min-height:40px}
  .t-avisos .c-est{grid-area:est;justify-self:end}
  .t-avisos .c-desde{grid-area:desde}
  .t-avisos .c-acc{grid-area:acc;display:flex;gap:8px;margin-top:6px;white-space:normal !important}
  .t-avisos .c-acc form{flex:1;display:flex !important}
  .t-avisos .c-acc .btn{width:100%}

  /* Historial de existencias: el cambio y el motivo primero, que es lo que se busca. */
  .t-movs,.t-movs tbody{display:block}
  .t-movs thead{display:none}
  .t-movs tr{
    display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:baseline;
    grid-template-areas:"delta mot cuando" "ref ref ref";
    padding:11px 12px;border-bottom:1px solid var(--linea);
  }
  .t-movs td{display:block;padding:0;border:0;text-align:left}
  .t-movs .c-delta{grid-area:delta;font-size:15px;min-width:44px}
  .t-movs .c-mot{grid-area:mot;font-size:14px}
  .t-movs .c-cuando{grid-area:cuando;text-align:right;white-space:nowrap}
  .t-movs .c-ref{grid-area:ref;overflow-wrap:anywhere}
  .t-movs .c-ref:empty{display:none}
}