/* ===== Tema institucional ISM — granate y azul marino, estilo futurista ===== */
:root {
  --granate: #8d2334;
  --granate-2: #a8304a;
  --granate-osc: #5e0f1f;
  --marino: #0b1430;
  --marino-2: #131f45;
  --marino-3: #1c2b5c;
  --crema: #feedda;
  --blanco: #ffffff;
  --tinta: #e9ecf6;
  --tinta-2: #a9b1cc;
  --tinta-3: #6f7899;
  --linea: rgba(255, 255, 255, .09);
  --vidrio: rgba(19, 31, 69, .62);
  --vidrio-2: rgba(255, 255, 255, .045);
  --ok: #34d399;
  --alerta: #fbbf24;
  --error: #fb7185;
  --brillo: 0 0 0 1px rgba(168, 48, 74, .55), 0 10px 40px -8px rgba(168, 48, 74, .55);
  --sombra: 0 24px 60px -24px rgba(0, 0, 0, .65);
  --radio: 18px;
  --fuente: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SFMono-Regular", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #0b1430; }
body {
  font-family: var(--fuente); color: var(--tinta); line-height: 1.45; min-height: 100vh;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(141, 35, 52, .55), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(28, 43, 92, .9), transparent 60%),
    linear-gradient(160deg, #0a1129 0%, #0b1430 45%, #120d26 100%);
  background-attachment: fixed;
}
@media (max-width: 900px) { body { background-attachment: scroll; } }
@media (max-width: 520px) { .marca small { display: none !important; } }
/* Retícula sutil */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
body > * { position: relative; z-index: 1; }
a { color: var(--crema); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--granate); color: #fff; }

.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.18em; }

/* ---------- vidrio ---------- */
.vidrio {
  background: var(--vidrio); border: 1px solid var(--linea); border-radius: var(--radio);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--sombra);
}

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  border: 0; border-radius: 12px; padding: 11px 18px; cursor: pointer; font-weight: 650; letter-spacing: .01em;
  color: #fff; background: linear-gradient(135deg, var(--granate-2), var(--granate) 55%, var(--granate-osc));
  box-shadow: 0 8px 24px -10px rgba(168, 48, 74, .9), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.1); box-shadow: var(--brillo); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; }
.btn.sec { background: var(--vidrio-2); border: 1px solid rgba(255,255,255,.14); box-shadow: none; color: var(--tinta); }
.btn.sec:hover { border-color: rgba(254, 237, 218, .45); background: rgba(255,255,255,.08); }
.btn.marino { background: linear-gradient(135deg, var(--marino-3), var(--marino-2)); border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
.btn.peligro { background: linear-gradient(135deg, #e11d48, #9f1239); }
.btn.ok { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 8px 24px -10px rgba(16,185,129,.8); }
.btn.grande { padding: 16px 26px; font-size: 18px; border-radius: 14px; }
.btn.chico { padding: 7px 12px; font-size: 13px; border-radius: 10px; }

/* ---------- formularios ---------- */
label { font-size: 12px; font-weight: 650; color: var(--tinta-2); display: block; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=datetime-local], select, textarea {
  width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(6, 11, 30, .55); color: var(--tinta); transition: border-color .15s, box-shadow .15s;
}
input[type=datetime-local] { color-scheme: dark; }
input:disabled { opacity: .45; cursor: not-allowed; }
input::placeholder { color: var(--tinta-3); }
select option { background: var(--marino-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--granate-2); box-shadow: 0 0 0 4px rgba(168, 48, 74, .25); }
input[type=file] { width: 100%; color: var(--tinta-2); font-size: 13px; }
input[type=file]::file-selector-button { margin-right: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06);
  color: var(--tinta); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
input[type=checkbox] { accent-color: var(--granate-2); width: 18px; height: 18px; }

/* ---------- avisos ---------- */
.aviso { padding: 12px 14px; border-radius: 12px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.aviso.error { background: rgba(251, 113, 133, .12); color: #fecdd3; border: 1px solid rgba(251,113,133,.35); }
.aviso.ok { background: rgba(52, 211, 153, .12); color: #a7f3d0; border: 1px solid rgba(52,211,153,.35); }
.aviso.info { background: rgba(251, 191, 36, .12); color: #fde68a; border: 1px solid rgba(251,191,36,.35); }
.oculto { display: none !important; }
.muted { color: var(--tinta-2); font-size: 13px; }

/* ---------- etiquetas ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ABIERTA { background: rgba(52,211,153,.14); color: var(--ok); }
.pill.CERRADA { background: rgba(251,113,133,.14); color: var(--error); }
.pill.PREPARACION { background: rgba(251,191,36,.14); color: var(--alerta); }
.pill.ABIERTA::before { box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: latido 1.8s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

/* ---------- marca ---------- */
.marca { display: flex; align-items: center; gap: 12px; }
.escudo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--granate-2), var(--granate-osc)); color: #fff; font-size: 13px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 6px 20px -6px rgba(168,48,74,.9); }
.marca b { display: block; font-size: 15px; letter-spacing: .02em; }
.marca small { display: block; font-size: 11px; color: var(--tinta-2); letter-spacing: .14em; text-transform: uppercase; }

.toast { position: fixed; bottom: 22px; right: 22px; z-index: 99; max-width: 400px; padding: 13px 18px; border-radius: 14px;
  background: rgba(19,31,69,.92); border: 1px solid var(--linea); backdrop-filter: blur(12px); box-shadow: var(--sombra);
  display: flex; gap: 10px; align-items: center; animation: subir .25s ease-out; }
.toast.error { border-color: rgba(251,113,133,.5); color: #fecdd3; }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }