:root {
  --naranja:#c2410c; --naranja-osc:#9a3412; --ambar:#f59e0b; --ambar-claro:#fef3c7; --crema:#fff8ed;
  --lateral:#1f1b16; --lateral-2:#2b251d; --fondo:#faf6ef; --borde:#eadfcc; --texto:#2a2118; --suave:#6b5d4d;
  --rojo:#b3261e; --verde:#1e7b3c; --aviso:#92400e;
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--fondo); color:var(--texto); line-height:1.45; }
a { color:var(--naranja-osc); }
.icono { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---- estructura con menú lateral ---- */
.app { display:flex; min-height:100vh; }
.lateral { width:250px; flex:none; background:var(--lateral); color:#e9dfd0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.marca { display:flex; align-items:center; gap:10px; padding:18px 18px 14px; color:#fff; text-decoration:none; font-weight:700; font-size:18px; border-bottom:1px solid #3a3226; }
.marca-logo { background:linear-gradient(135deg,var(--ambar),var(--naranja)); color:#fff; border-radius:8px; padding:4px 8px; font-size:14px; letter-spacing:.5px; }
.lateral nav { flex:1; padding:8px 10px 16px; }
.grupo { margin:18px 10px 6px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#a99a85; }
.lateral nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; margin:2px 0; border-radius:8px; color:#e9dfd0; text-decoration:none; font-size:15px; }
.lateral nav a:hover { background:var(--lateral-2); color:#fff; }
.lateral nav a.activo { background:var(--ambar); color:#2a1700; font-weight:600; }
.perfil { border-top:1px solid #3a3226; padding:14px 16px 16px; font-size:14px; }
.perfil-datos { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.perfil-datos b { display:block; color:#fff; font-size:14px; }
.perfil-datos small { color:#a99a85; font-size:12px; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--naranja); color:#fff; display:grid; place-items:center; font-weight:700; }
.enlace-perfil { display:block; color:#f2c27a; margin-bottom:8px; }
.salir { width:100%; background:transparent; border:1px solid #5a4d3a; color:#e9dfd0; }
.salir:hover { background:var(--lateral-2); }
.cuerpo { flex:1; min-width:0; display:flex; flex-direction:column; }
.barra { display:none; align-items:center; gap:12px; padding:14px 24px; background:#fff; border-bottom:1px solid var(--borde); border-top:4px solid var(--ambar); }
.barra-titulo { margin:0; font-size:20px; }
.hamburguesa { display:none; background:transparent; color:var(--texto); padding:6px; border:1px solid var(--borde); }
.velo { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:20; }
.velo[hidden] { display:none; }

main { width:100%; max-width:1200px; margin:20px auto; padding:0 24px; }
h1 { font-size:22px; margin:0 0 16px; }
h2 { font-size:18px; margin:24px 0 12px; }

/* ---- componentes ---- */
.tarjeta { background:#fff; border:1px solid var(--borde); border-radius:10px; padding:16px; margin-bottom:16px; box-shadow:0 1px 2px rgba(60,40,10,.05); }
.resumen { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:16px; }
.resumen .tarjeta { margin:0; border-left:4px solid var(--ambar); }
.resumen b { display:block; font-size:26px; margin-top:4px; color:var(--naranja-osc); }
.tabla { overflow-x:auto; border:1px solid var(--borde); border-radius:10px; background:#fff; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--borde); font-size:14px; vertical-align:top; }
th { background:var(--crema); color:var(--aviso); font-weight:600; }
tbody tr:hover { background:#fffcf6; }
form.rejilla { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; align-items:end; }
.en-linea { display:inline; }
label { font-size:13px; display:block; color:var(--suave); }
input, select, textarea { width:100%; padding:9px; border:1px solid #d9c9ad; border-radius:8px; font:inherit; background:#fff; color:var(--texto); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:3px solid rgba(245,158,11,.55); outline-offset:1px; border-color:var(--ambar); }
button, .boton { background:var(--naranja); color:#fff; border:0; padding:9px 16px; border-radius:8px; cursor:pointer; text-decoration:none; font:inherit; font-weight:600; display:inline-block; }
button:hover, .boton:hover { background:var(--naranja-osc); }
button.peligro { background:var(--rojo); }
button.exito { background:var(--verde); }
.insignia { padding:2px 9px; border-radius:10px; font-size:12px; background:#eee7da; color:var(--suave); white-space:nowrap; }
.b-activo, .b-pagada, .b-cerrado, .b-ok { background:#d7f0de; color:var(--verde); }
.b-suspendido, .b-pendiente, .b-en_proceso, .b-media { background:var(--ambar-claro); color:var(--aviso); }
.b-cortado, .b-anulada, .b-alta, .b-abierto, .b-error, .b-inactivo { background:#fbdcd9; color:var(--rojo); }
.mensaje { padding:10px 14px; border-radius:8px; margin-bottom:14px; background:#d7f0de; color:var(--verde); }
.mensaje.error { background:#fbdcd9; color:var(--rojo); }
.errores { background:#fbdcd9; color:var(--rojo); border-radius:8px; padding:10px 14px 10px 30px; margin:0 0 14px; }
.ayuda { font-size:12px; color:var(--suave); }
code { background:var(--crema); padding:1px 5px; border-radius:4px; }

/* ---- formularios verticales ---- */
.formulario { max-width:620px; }
.formulario fieldset { margin:0 0 16px; min-width:0; }
.formulario legend { font-weight:700; color:var(--naranja-osc); padding:0 6px; font-size:16px; }
.formulario label { margin-bottom:14px; font-size:14px; color:var(--texto); }
.formulario label input, .formulario label select, .formulario label textarea { margin-top:5px; }
.req { color:var(--rojo); }
.acciones { display:flex; align-items:center; gap:16px; margin-bottom:24px; }

/* ---- ingreso ---- */
.centrado { min-height:100vh; display:grid; place-items:center; padding:16px; background:linear-gradient(160deg,#fff3d6,#ffd9a0 55%,#f9a24a); }
.centrado form { background:#fff; padding:30px; border-radius:14px; border:1px solid var(--borde); width:min(380px,100%); box-shadow:0 12px 30px rgba(120,60,0,.18); border-top:5px solid var(--ambar); }
.centrado form h1 { text-align:center; color:var(--naranja-osc); }
.centrado form label { margin-bottom:12px; }
.centrado button { width:100%; }

/* ---- móvil ---- */
@media (max-width: 860px) {
  .lateral { position:fixed; z-index:30; left:0; top:0; transform:translateX(-100%); transition:transform .2s; box-shadow:4px 0 18px rgba(0,0,0,.35); }
  .lateral.abierto { transform:none; }
  .barra { display:flex; }
  .hamburguesa { display:inline-flex; }
  .barra { padding:10px 14px; }
  main { padding:0 14px; }
}
@media (prefers-reduced-motion: reduce) { .lateral { transition:none; } }