/* =====================================================================================
   Graphie · imagen nueva (tema claro). 06/10/2026.

   Esta hoja va DESPUÉS de app.css y sólo la pinta por encima: no se cambió ni una línea
   de app.css. Para volver al aspecto anterior basta con renombrar o borrar este archivo;
   layout.php sólo lo carga si existe.

   Tres reglas que se respetan aquí:
   1. Todo va dentro de `@media screen`. Lo que se imprime —ticket, etiquetas de 57x40 y
      la hoja del cliente— sigue saliendo EXACTAMENTE igual que antes.
   2. Sólo tema claro, también en teléfonos que estén en modo oscuro. Lo pidió el dueño:
      toda la aplicación en oscuro «se vuelve muy pesada para todo el día».
   3. Nada que un teléfono viejo no entienda: colores escritos tal cual, sin funciones
      modernas de mezcla. Los tamaños de botones y campos NO se tocan: se pidieron grandes
      por los teléfonos chicos del taller.

   El naranja #fc4a0c es el del logotipo de Graphie.
   ===================================================================================== */
@media screen {
:root{--papel:#f4f5f9;--sup:#ffffff;--sup-2:#eef0f6;--tinta:#1b2238;--tinta-2:#4d5777;--tinta-3:#6b7594;--linea:#e6e9f2;--linea-2:#d5dae8;--oxido:#fc4a0c;--oxido-osc:#c93a06;--oxido-suave:#fff0e8;--azul:#1266a6;--alerta:#dc2626;--pausa:#a16207;--pausa-suave:#fef3c7;--serie-trabajo:#3478f6;--serie-espera:#fc4a0c;--r:12px;--r-g:16px;--sombra:0 1px 2px rgba(20,30,70,.04),0 4px 14px rgba(20,30,70,.06);--papel-0:rgba(244,245,249,0);--borde-desliz:rgba(20,30,70,.12);--banda:#1b2238;--banda-txt:#ffffff;--banda-2:#c9cede}
body{font-family:Inter,"Archivo","Helvetica Neue",Arial,sans-serif;background:#f4f5f9;background-image:radial-gradient(900px 480px at 0% -10%,#ffe9df 0%,rgba(255,233,223,0) 60%),radial-gradient(900px 600px at 100% 110%,#e8edff 0%,rgba(232,237,255,0) 55%);background-attachment:fixed}
a{color:var(--oxido-osc)}

/* Barra superior: blanca, con el logotipo. */
.top{background:#fff;color:var(--tinta);border-bottom:1px solid var(--linea);box-shadow:0 1px 8px rgba(20,30,70,.05)}
.top .marca{color:var(--tinta);font-family:Inter,sans-serif;font-weight:800;font-size:20px;letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;padding:9px 0}
.top .marca img{height:34px;width:auto;display:block}
.top nav a{color:var(--tinta-2);font-weight:600;border-radius:10px}
.top .secundaria a{color:var(--tinta-3);font-weight:500}
.top nav a:hover{color:var(--oxido-osc);background:var(--oxido-suave)}
.top nav a:active{background:var(--oxido);color:#fff}
.top .quien{color:var(--tinta-2);opacity:1;font-family:Inter,sans-serif;font-weight:700;letter-spacing:.04em}

/* Títulos y formularios. */
h1{font-family:Inter,sans-serif;font-weight:800;font-size:28px;letter-spacing:-.01em}
h2.sub{background:none;color:var(--tinta-3);padding:0 2px 8px;border-bottom:1px solid var(--linea-2);border-radius:0}
label.hero{background:none;color:var(--tinta-2);padding:0 2px 7px}
textarea{border:1px solid var(--linea-2);border-radius:var(--r);box-shadow:var(--sombra)}
input[type=text],input[type=search],input[type=password],input[type=date],input[type=email],input[type=tel],input:not([type]),select{border-color:var(--linea-2)}
.lab em{border-radius:6px;padding:2px 7px}
.chips button{border-radius:11px;font-weight:500}
.chips button.on,.pestanas a.on{background:var(--oxido-suave);border-color:var(--oxido);color:var(--oxido-osc);font-weight:700;box-shadow:none}
.pestanas a{border-radius:11px}

/* Botones. */
.barra{background:rgba(255,255,255,.94);border-top:1px solid var(--linea);box-shadow:0 -4px 16px rgba(20,30,70,.06)}
.primario{font-family:Inter,sans-serif;font-size:16px;font-weight:700;letter-spacing:0;text-transform:none;border-radius:13px;box-shadow:0 6px 16px rgba(252,74,12,.24)}
.primario:hover{background:#e23f06}
/* Los botones de «pasar a…»: sombra corta, para que no se encimen entre sí. La separación la
   pone la cuadrícula de más abajo (07/10); la regla que los separaba uno a uno se quitó porque
   empujaba 8 px a todos menos al primero y los dejaba desalineados en la cuadrícula. */
.primario.grande{box-shadow:0 2px 6px rgba(252,74,12,.18)}
/* El botón verde de «Listo» trae su color puesto a mano: no le toca sombra naranja. */
.primario[style]{box-shadow:none}
.secundario{border-radius:11px;font-weight:600;color:var(--tinta)}

/* Tablas y cajas. */
th{border-bottom:1px solid var(--linea-2)}
.nada{border-radius:var(--r-g)}
.producto{border-color:var(--linea);border-left:4px solid var(--oxido);border-radius:14px;box-shadow:var(--sombra)}
.partida{border-color:var(--linea);border-left:0;background:#f7f8fc;border-radius:12px}
.accion,.titular,.caja,.consent,.campo.dinero,.dinero-ficha,.detenida,.aviso-cliente{border-color:var(--linea);border-radius:16px}
.campo.dinero,.dinero-ficha{border-left:4px solid #cfd5e4}
section.caja > p > b{font-family:Inter,sans-serif;font-size:20px;letter-spacing:0}
.aviso,.error{border-radius:14px}
.error{background:#fff6f5}
.hecho{background:#f3fbf6;border-color:#c5ead3;border-left:4px solid #22a559;border-radius:14px;color:#14532d}
details.bloquear summary{border-radius:11px;font-weight:600}
.ticket{border-color:var(--linea-2);border-radius:16px}
.maq,.inferido,.corr{border-radius:6px}
.escaner{border-radius:16px;border-color:var(--linea-2)}
.totales>div{border-radius:14px}
.suiche input:checked + i{background:#1f9d55}

/* Portada. */
.loza{border-color:var(--linea);border-radius:18px;min-height:112px}
.loza svg{width:44px;height:44px;padding:9px;background:var(--oxido-suave);border-radius:13px;margin-bottom:10px}
.loza b{font-family:Inter,sans-serif;font-size:16.5px;letter-spacing:0}
.loza:hover{box-shadow:0 8px 22px rgba(252,74,12,.14)}
.alerta-avisos{background:#fff6f5;border-color:#f6c8c2;border-left:4px solid #ef4444;border-radius:14px;color:#7f1d1d}
.por-salir{background:#f3fbf6;border-color:#c5ead3;border-left:4px solid #22a559;border-radius:14px}

/* Tablero y entregas. */
.tarjeta{border-color:var(--linea);border-left:4px solid #cfd5e4;border-radius:14px}
.tarjeta.vencida{border-left-color:var(--alerta);background:#fffafa}
.tarjeta.detenida{border-left-color:#f2a900}
.tarjeta .folio{color:var(--oxido-osc);font-size:14.5px}
.tarjeta .etapa{border:0;background:var(--sup-2);color:var(--tinta-2);border-radius:99px;padding:4px 11px;letter-spacing:.06em}
.tarjeta .etapa.esperando{background:none;border:1px dashed var(--linea-2)}
.tarjeta .desc{font-weight:600}
.aviso-detenida{display:inline-block;background:var(--pausa-suave);border-radius:8px;padding:4px 10px}
.aviso-vencida{display:inline-block;background:#fee4e2;border-radius:8px;padding:4px 10px;margin-left:4px}
.entrega{border-color:var(--linea);border-radius:14px;box-shadow:var(--sombra)}
.boton-entregas{background:#1f9d55;font-family:Inter,sans-serif;border-radius:14px}
.boton-entregas:hover{background:#178246}
}

/* ---------- Portada nueva (06/10): contadores en recuadro y botones con color ---------- */
@media screen {
.inicio .saludo{margin:-12px 2px 16px;font-size:15px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.kpi{display:block;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:12px 16px;text-decoration:none;box-shadow:var(--sombra)}
.kpi b{display:block;font-family:Inter,sans-serif;font-size:30px;font-weight:800;line-height:1.1;color:var(--tinta)}
.kpi span{font-size:13px;color:var(--tinta-3)}
.kpi.o b{color:#fc4a0c}.kpi.a b{color:#c27803}.kpi.r b{color:#dc2626}.kpi.g b{color:#15803d}.kpi.cero b{color:#a3abc4}
.kpi:hover{border-color:var(--oxido)}
.inicio .loza .txt{display:block}
.inicio .loza .txt b,.inicio .loza .txt i{display:block}
.loza.c1 svg{background:#fff0e8;stroke:#fc4a0c}.loza.c2 svg{background:#efeaff;stroke:#7c5cf0}.loza.c3 svg{background:#e3f6f4;stroke:#0f9f95}
.loza.c4 svg{background:#e7f0ff;stroke:#3478f6}.loza.c5 svg{background:#e3f7ea;stroke:#1f9d55}.loza.c6 svg{background:#fff3d6;stroke:#c27803}.loza.c7 svg{background:#ffe8ee;stroke:#e5486b}
/* «Nueva orden»: el botón que más se usa, en naranja Graphie. El degradado lleva un color
   liso de respaldo por si el teléfono no lo pinta. */
.loza.pri{background:#fc4a0c;background-image:linear-gradient(135deg,#fc4a0c,#ff7a3d);border-color:#fc4a0c;color:#fff;box-shadow:0 8px 20px rgba(252,74,12,.28)}
.loza.pri svg{background:rgba(255,255,255,.22);stroke:#fff}
.loza.pri i{color:#ffe3d6}
.loza.pri:hover{border-color:#fc4a0c;box-shadow:0 10px 24px rgba(252,74,12,.36)}
.loza.pri:active{background:#e23f06;background-image:none}
}
@media screen and (max-width:619px){
.inicio .menu .loza.pri{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:center;gap:14px}
.inicio .menu .loza.pri svg{margin-bottom:0}
}
@media screen and (min-width:620px){
.kpis{grid-template-columns:repeat(4,1fr)}
.inicio .loza{flex-direction:row;align-items:center;gap:14px;min-height:84px;padding:16px 18px}
.inicio .loza svg{margin-bottom:0;flex:0 0 auto}
}
/* En computadora la portada es más ancha que el resto (568 px útiles) y se centra sola. */
@media screen and (min-width:940px){
.inicio{width:820px;margin-left:-126px}
}

/* ---------- 07/10: color por etapa en el tablero y botones de «pasar a» en cuadrícula ---------- */
@media screen {
/* Los mismos cuatro colores de la pizarra. La franja de la izquierda y la pastilla de la etapa. */
.tarjeta.z-dis{border-left-color:#7c5cf0}.tarjeta.z-dis .etapa{background:#efeaff;color:#5b3fd0}
.tarjeta.z-imp{border-left-color:#e39a00}.tarjeta.z-imp .etapa{background:#fff3d6;color:#8a5a00}
.tarjeta.z-aca{border-left-color:#0f9f95}.tarjeta.z-aca .etapa{background:#e3f6f4;color:#0b7a72}
.tarjeta.z-maq{border-left-color:#e5486b}.tarjeta.z-maq .etapa{background:#ffe8ee;color:#b4234a}
.tarjeta .etapa.esperando{background:none}
/* Detenida y vencida ya se avisan con su pastilla y, la vencida, con el fondo rosado. La franja
   conserva el color de la etapa para que no se pierda dónde está el trabajo. */

/* Dentro de la orden, los botones de «pasar a…» iban apilados: seis botones obligaban a
   desplazarse. Ahora van de dos en dos. Lo que no es botón ocupa el renglón entero, y un botón
   que está solo también. */
section.caja > form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
section.caja > form > *{grid-column:1 / -1}
section.caja > form > button.primario.grande{grid-column:auto;margin-top:0;padding:14px 10px;font-size:15.5px;line-height:1.2}
section.caja > form > button.primario.grande:only-of-type{grid-column:1 / -1}
}

/* ---------- 07/10: recordatorio en «Por entregar» y aire bajo los botones de la orden ---------- */
@media screen {
.recordar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:-4px 0 6px;padding:8px 12px 8px 14px;background:#f7f8fc;border:1px solid var(--linea);border-radius:12px;font-size:13.5px;color:var(--tinta-2)}
.recordar .secundario{border-color:#22a559;color:#15803d;font-weight:700}
.recordar .secundario:hover{background:#f3fbf6;border-color:#15803d;color:#15803d}
p.recordar.nota-rec{display:block;color:var(--tinta-3)}
p.recordar.nota-rec.mal{color:#b42318;background:#fff6f5;border-color:#f6c8c2}
section.caja > details{margin-top:12px}
}

/* En el teléfono, el menú de abajo también pasa a blanco. */
@media screen and (max-width:560px){
.top .principal{background:#fff;border-top:1px solid var(--linea);box-shadow:0 -4px 16px rgba(20,30,70,.08)}
.top .principal a{color:var(--tinta);font-family:Inter,sans-serif;font-size:14.5px;font-weight:700;letter-spacing:0}
.top .principal a:active{background:var(--oxido);color:#fff}
.top .marca img{height:28px}
}