/* =====================================================================
   Portal de pedidos D'Lola  -  Applitech
   ===================================================================== */

:root{
  --navy:#0A1628; --navy2:#14233B; --navy3:#1D3050;
  --gold:#F5A800;
  --paper:#ECEFF3; --card:#fff;
  --line:#D3DAE3; --soft:#E7EBF1;
  --ink:#0A1628; --ink2:#4A5C74; --ink3:#7A8BA3;
  --green:#157F5B; --amber:#C77700; --red:#B3261E;
  --blue:#1D4E9B; --violet:#5B3FA8;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--paper);
     color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- barra superior ---------- */
.top{background:var(--navy);color:#fff;padding:0 20px;display:flex;align-items:center;
     gap:22px;flex-wrap:wrap;min-height:56px}
.marca{font-size:19px;font-weight:700;letter-spacing:.04em}
.marca em{color:var(--gold);font-style:normal;font-weight:600;font-size:15px}
.menu{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.menu a{padding:17px 15px;color:#9FB4CD;font-size:14.5px;border-bottom:3px solid transparent}
.menu a:hover{color:#fff}
.menu a.on{color:#fff;border-bottom-color:var(--gold);font-weight:600}
.yo{display:flex;align-items:center;gap:14px;font-size:13.5px;color:#9FB4CD}
.yo span{display:flex;flex-direction:column;line-height:1.2;color:#fff}
.yo small{color:#7F93AC;font-size:11.5px}
.yo a{color:#9FB4CD;border:1px solid #33465F;border-radius:6px;padding:4px 10px}
.yo a:hover{border-color:var(--gold);color:var(--gold)}

.wrap{max-width:1400px;margin:0 auto;padding:22px 20px 60px}

/* ---------- avisos ---------- */
.aviso{padding:11px 16px;border-radius:9px;margin-bottom:18px;font-size:14.5px}
.aviso.ok{background:#DCEFE6;border:1px solid #A8D5C2;color:var(--green)}
.aviso.err{background:#FDECEA;border:1px solid #F2C4BE;color:var(--red)}
.aviso.info{background:#FFFBF0;border:1px solid #F0DFB5;color:var(--amber)}

/* ---------- títulos ---------- */
h1{font-size:24px;margin:0 0 4px;font-weight:700}
.sub{color:var(--ink2);font-size:14.5px;margin:0 0 22px}

/* ---------- tarjetas del inicio ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.tj{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;
    display:block;box-shadow:0 1px 0 rgba(10,22,40,.05)}
.tj:hover{border-color:var(--gold);box-shadow:0 6px 18px -10px rgba(10,22,40,.4)}
.tj h3{margin:0 0 3px;font-size:17px}
.tj p{margin:0;color:var(--ink2);font-size:13.5px}
.tj .n{font-size:38px;font-weight:700;line-height:1;margin-bottom:6px}
.tj .n small{font-size:14px;font-weight:500;color:var(--ink2);margin-left:6px}
.tj .n.alerta{color:var(--red)}

/* ---------- filtros ---------- */
.filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.seg a{padding:7px 14px;font-size:13.5px;color:var(--ink2)}
.seg a.on{background:var(--navy);color:#fff;font-weight:600}
.filtros select,.filtros input{border:1px solid var(--line);border-radius:8px;
    padding:7px 11px;background:#fff}
.crece{flex:1}

/* ---------- cola de pedidos ---------- */
.dia{background:var(--navy);color:#fff;padding:9px 16px;border-radius:9px;
     margin:20px 0 10px;display:flex;align-items:baseline;gap:10px}
.dia:first-child{margin-top:0}
.dia h3{margin:0;font-size:16px;font-weight:600}
.dia span{margin-left:auto;font-size:13px;color:#9FB4CD}
.dia.hoy{background:var(--red)}

.lista{display:flex;flex-direction:column;gap:9px}
.ped{background:var(--card);border:1px solid var(--line);border-radius:11px;
     padding:12px 15px;display:flex;gap:14px;align-items:center}
.ped:hover{border-color:#9FAEC2}
.ped .th{width:64px;height:64px;border-radius:9px;overflow:hidden;flex:none;
         background:#E4E9EF;border:1px solid var(--line);position:relative}
.ped .th img{width:100%;height:100%;object-fit:cover;display:block}
.ped .th .n{position:absolute;right:2px;bottom:2px;background:rgba(10,22,40,.82);
            color:#fff;font-size:10.5px;padding:0 5px;border-radius:4px}
.ped .th .sinfoto{display:flex;align-items:center;justify-content:center;height:100%;
                  color:var(--ink3);font-size:11px;text-align:center;padding:4px}
.ped .hora{flex:none;text-align:center;min-width:74px}
.ped .hora b{display:block;font-size:23px;font-weight:700;line-height:1.1}
.ped .hora small{font-size:11px;color:var(--ink2)}
.ped .mid{flex:1;min-width:0}
.ped .mid b{display:block;font-size:15.5px;font-weight:600}
.ped .mid p{margin:2px 0 0;font-size:13.5px;color:var(--ink2);
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ped .rt{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.vacio{background:var(--card);border:1px dashed var(--line);border-radius:12px;
       padding:50px 24px;text-align:center;color:var(--ink2)}
.vacio b{display:block;color:var(--ink);font-size:16px;margin-bottom:5px}

/* ---------- chips ---------- */
.chip{display:inline-block;padding:2px 9px;border-radius:5px;font-size:12px;
      font-weight:600;white-space:nowrap}
.e-R{background:#FDF0D6;color:var(--amber)}
.e-T{background:#DEE9FB;color:var(--blue)}
.e-F{background:#DCEFE6;color:var(--green)}
.e-N{background:#E9E5F6;color:var(--violet)}
.e-E{background:#E4E8EE;color:var(--ink2)}
.a-PAN{background:#F3E8D8;color:#8A5A16}
.a-EMB{background:#DFE9F2;color:#1B4E6B}
.a-PAS{background:#F7E3EC;color:#9B2D5E}
.falta{font-size:12px;color:var(--ink3)}
.falta.urge{color:var(--red);font-weight:600}

/* ---------- detalle ---------- */
.cols{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px}
.gal img.main{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
.gal .tiras{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.gal .tiras img{width:56px;height:56px;object-fit:cover;border-radius:8px;
                border:1.5px solid var(--line)}
.gal .cap{display:block;text-align:center;font-size:13px;color:var(--ink2);margin-top:8px}
.sinfoto-grande{background:#FDECEA;border:1px solid #F2C4BE;border-radius:12px;
                padding:34px 20px;text-align:center;color:var(--red);font-weight:600}
.horas{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.hh{background:#F4F6F9;border:1px solid var(--line);border-radius:10px;
    padding:9px 15px;min-width:140px}
.hh span{font-size:12px;color:var(--ink2);display:block}
.hh p{margin:1px 0 0;font-size:25px;font-weight:700}
.hh.clave{background:var(--navy);border-color:var(--navy)}
.hh.clave span{color:#93A8C3}
.hh.clave p{color:var(--gold)}
dl.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        gap:0 20px;margin:16px 0}
dl.grid div{padding:8px 0;border-bottom:1px solid var(--soft)}
dl.grid dt{font-size:12.5px;color:var(--ink2)}
dl.grid dd{margin:1px 0 0;font-size:15px;font-weight:500}
dl.grid dd.rojo{color:var(--red);font-weight:600}
.ley{background:var(--navy);color:#fff;border-radius:10px;padding:13px 17px;margin:16px 0}
.ley span{font-size:12.5px;color:#93A8C3;display:block}
.ley p{margin:2px 0 0;font-size:24px;font-weight:600;color:var(--gold)}
.nota{background:#FFFBF0;border:1px solid #F0DFB5;border-left:3px solid var(--gold);
      border-radius:0 8px 8px 0;padding:11px 15px;margin:14px 0;font-size:14.5px}
.acciones{display:flex;gap:9px;flex-wrap:wrap;border-top:1px solid var(--soft);
          padding-top:18px;margin-top:20px}
.linea{margin-top:24px}
.linea h4{margin:0 0 9px;font-size:14px;font-weight:600}
.linea li{list-style:none;font-size:13.5px;color:var(--ink2);padding:4px 0;
          border-bottom:1px solid var(--soft)}
.linea b{color:var(--ink);font-weight:500}
.linea ol{margin:0;padding:0}

/* ---------- botones ---------- */
.btn{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:8px;
     padding:9px 16px;font-weight:500}
.btn:hover{border-color:#9FAEC2;background:#F6F8FA}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:700}
.btn.gold:hover{background:#FFBB22;border-color:#FFBB22}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy3)}
.btn.verde{background:var(--green);border-color:var(--green);color:#fff}
.btn.rojo{background:#fff;border-color:#E5B4AF;color:var(--red)}
.btn.sm{padding:5px 11px;font-size:13px}

/* ---------- formularios ---------- */
form.caja{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
.seccion{font-size:12.5px;color:var(--ink2);letter-spacing:.06em;text-transform:uppercase;
         border-top:1px solid var(--soft);padding-top:16px;margin:22px 0 12px;font-weight:600}
.seccion:first-of-type{border-top:0;padding-top:0;margin-top:0}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.campo label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:4px}
.campo input,.campo select,.campo textarea{width:100%;border:1px solid var(--line);
    border-radius:8px;padding:9px 11px;background:#fff}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--gold);outline:none}
.campo textarea{resize:vertical;min-height:70px}
.campo.ancho{grid-column:1/-1}
.req::after{content:" *";color:var(--red)}
.chks{display:flex;gap:16px;flex-wrap:wrap}
.chks label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink)}
.ayuda{font-size:12.5px;color:var(--ink3);margin-top:5px}
.pie-form{display:flex;gap:10px;margin-top:24px;border-top:1px solid var(--soft);padding-top:18px}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;background:var(--card);
      border:1px solid var(--line);border-radius:12px;overflow:hidden}
th{text-align:left;font-size:12.5px;font-weight:600;color:var(--ink2);
   padding:11px 14px;background:#F6F8FA;border-bottom:1px solid var(--line)}
td{padding:11px 14px;border-bottom:1px solid var(--soft);font-size:14.5px}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#F9FAFC}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;
       background:var(--navy);padding:24px}
.login form{background:var(--navy2);padding:34px;border-radius:16px;width:100%;max-width:360px;
            border:1px solid #223B5C}
.login h1{color:var(--gold);font-size:26px;margin:0 0 2px;letter-spacing:.03em}
.login .sub{color:#93A8C3;margin-bottom:24px}
.login label{display:block;font-size:12.5px;color:#93A8C3;margin:14px 0 5px}
.login input{width:100%;background:#0D1D33;border:1px solid #2C456B;color:#fff;
             border-radius:9px;padding:11px 13px;font-size:15px}
.login button{width:100%;margin-top:22px;background:var(--gold);border:0;color:var(--navy);
              font-weight:700;padding:13px;border-radius:10px;font-size:15.5px}
.login button:hover{background:#FFBB22}
.login .err{background:#3A1512;border:1px solid #7A2A22;color:#FF9A90;
            padding:10px 13px;border-radius:9px;margin-top:16px;font-size:14px}
.login .pie{color:#61789A;font-size:12.5px;text-align:center;margin-top:20px}

@media(max-width:900px){
  .cols{grid-template-columns:1fr}
  .top{padding:0 14px}
  .menu a{padding:13px 11px}
  .wrap{padding:16px 14px 50px}
  .ped{flex-wrap:wrap}
  .ped .mid{min-width:140px}
}
@media print{
  .top,.filtros,.acciones,.linea{display:none}
  body{background:#fff}
  .cols{grid-template-columns:240px 1fr}
}