/* ===== Sistema de Preparación ===== */
:root{
  --azul:#1e3a8a; --azul-claro:#3b5bdb; --gris:#6b7280; --borde:#e5e7eb;
  --fondo:#f3f4f6; --blanco:#fff; --verde:#047857; --rojo:#b91c1c; --ambar:#b45309;
  --radio:10px; --sombra:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:#111827;
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-size:15px;line-height:1.5}
a{color:var(--azul-claro);text-decoration:none}
a:hover{text-decoration:underline}

/* --- Barra superior --- */
.barra{background:var(--azul);color:#fff;box-shadow:var(--sombra)}
.barra-in{max-width:1150px;margin:0 auto;display:flex;align-items:center;gap:24px;
  padding:12px 20px;flex-wrap:wrap}
.marca{color:#fff;font-weight:600;font-size:17px}
.marca:hover{text-decoration:none}
.menu{display:flex;gap:18px;flex:1;flex-wrap:wrap}
.menu a{color:#c7d2fe;font-size:14px}
.menu a:hover{color:#fff;text-decoration:none}
.usuario{display:flex;align-items:center;gap:12px;font-size:14px;color:#c7d2fe}
.salir{color:#fff;border:1px solid rgba(255,255,255,.4);padding:4px 12px;border-radius:6px;font-size:13px}
.salir:hover{background:rgba(255,255,255,.15);text-decoration:none}

/* --- Contenido --- */
.contenido{max-width:1150px;margin:0 auto;padding:28px 20px 60px}
.contenido.centrado{max-width:430px;padding-top:60px}
.pie{text-align:center;color:var(--gris);font-size:13px;padding:20px}

h1{font-size:23px;margin:0 0 4px}
h2{font-size:18px;margin:0 0 12px}
.subtitulo{color:var(--gris);margin:0 0 24px;font-size:14px}

/* --- Tarjetas --- */
.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  padding:22px;box-shadow:var(--sombra);margin-bottom:20px}
.rejilla{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.kpis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:24px}
.kpi{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:18px}
.kpi .n{font-size:28px;font-weight:700;color:var(--azul)}
.kpi .t{font-size:13px;color:var(--gris);text-transform:uppercase;letter-spacing:.4px}

/* --- Formularios --- */
.campo{margin-bottom:16px}
label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=tel],input[type=date],input[type=file],select,textarea{
  width:100%;padding:9px 11px;border:1px solid #d1d5db;border-radius:8px;
  font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul-claro);
  box-shadow:0 0 0 3px rgba(59,91,219,.15)}
textarea{min-height:90px;resize:vertical}
.ayuda{font-size:12px;color:var(--gris);margin-top:4px}

.btn{display:inline-block;background:var(--azul);color:#fff;border:0;border-radius:8px;
  padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:#172c6b;text-decoration:none;color:#fff}
.btn.sec{background:#fff;color:#374151;border:1px solid #d1d5db}
.btn.sec:hover{background:#f9fafb;color:#111827}
.btn.peligro{background:var(--rojo)}
.btn.peligro:hover{background:#8f1414}
.btn.chico{padding:5px 11px;font-size:13px;font-weight:500}
.btn:disabled{background:#9ca3af;cursor:not-allowed}
.acciones{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}

/* --- Tablas --- */
.tabla-caja{background:#fff;border:1px solid var(--borde);border-radius:var(--radio);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--borde);vertical-align:middle}
th{background:#f9fafb;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:#4b5563}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafafa}
.vacio{padding:36px;text-align:center;color:var(--gris)}

/* --- Etiquetas --- */
.eti{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
.eti.ok{background:#d1fae5;color:var(--verde)}
.eti.no{background:#fee2e2;color:var(--rojo)}
.eti.av{background:#fef3c7;color:var(--ambar)}
.eti.gr{background:#e5e7eb;color:#374151}

/* --- Alertas --- */
.alerta{padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:14px;border:1px solid}
.alerta.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.alerta.error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alerta.aviso{background:#fffbeb;border-color:#fde68a;color:#92400e}
.alerta.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}

/* --- Login / código --- */
.login-caja{background:#fff;border:1px solid var(--borde);border-radius:14px;
  padding:34px 30px;box-shadow:0 4px 16px rgba(0,0,0,.07)}
.login-caja h1{text-align:center;color:var(--azul);margin-bottom:6px}
.login-caja .subtitulo{text-align:center}
.codigo-input{text-align:center;font-size:30px;letter-spacing:14px;font-weight:700;
  padding:14px 10px !important}

/* --- Reproductor --- */
.reproductor{position:relative;background:#000;border-radius:var(--radio);overflow:hidden;
  aspect-ratio:16/9;max-width:100%}
.reproductor video{width:100%;height:100%;display:block;background:#000}
.marca-agua{position:absolute;pointer-events:none;color:rgba(255,255,255,.42);
  font-size:13px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.9);
  padding:4px 8px;transition:left 1.2s linear,top 1.2s linear;white-space:nowrap;z-index:5}
.aviso-legal{background:#fffbeb;border:1px solid #fde68a;color:#92400e;
  padding:12px 16px;border-radius:8px;font-size:13px;margin-top:16px}

/* --- Barra de vistas --- */
.vistas-barra{height:6px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:6px}
.vistas-barra i{display:block;height:100%;background:var(--azul-claro)}

@media (max-width:640px){
  .barra-in{gap:12px}
  .menu{order:3;width:100%}
  .contenido{padding:20px 14px 40px}
}