/* BOTICA · estilos propios (Tailwind CDN no procesa @apply en archivos externos).

   🎨 COLOR DE LA MARCA: se cambia SÓLO acá. Son tripletas RGB (sin comas) de la escala 50→950.
   Hoy: celeste (sky). Ejemplos para cambiar: teal, azul (blue), verde (emerald) de la paleta de Tailwind. */
:root {
  --marca-50: 240 249 255;
  --marca-100: 224 242 254;
  --marca-200: 186 230 253;
  --marca-300: 125 211 252;
  --marca-400: 56 189 248;
  --marca-500: 14 165 233;
  --marca-600: 2 132 199;
  --marca-700: 3 105 161;
  --marca-800: 7 89 133;
  --marca-900: 12 74 110;
  --marca-950: 8 47 73;
}

html { -webkit-font-smoothing: antialiased; }
body { background: #f4f8fb; }

/* ── Campos ── */
.campo { border: 1px solid #cbd5e1; border-radius: .5rem; padding: .5rem .7rem; background: #fff; font-size: .9rem;
  transition: border-color .15s, box-shadow .15s; }
.campo:focus { outline: none; border-color: rgb(var(--marca-500)); box-shadow: 0 0 0 3px rgb(var(--marca-500) / .2); }
.campo[readonly] { background: #f1f5f9; color: #475569; }
.campo-error { border-color: #dc2626 !important; background: #fef2f2; }
.campo-grande { font-size: 1.1rem; padding: .7rem .9rem; }
.etiqueta { display: block; font-size: .8rem; font-weight: 600; color: #475569; margin-bottom: .25rem; }
.ayuda { font-size: .75rem; color: #64748b; margin-top: .25rem; }

/* ── Botones ── */
.boton, .boton-sec, .boton-peligro, .boton-exito { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: .5rem; font-weight: 600; font-size: .9rem; padding: .55rem 1.1rem; transition: background .15s, box-shadow .15s;
  cursor: pointer; white-space: nowrap; }
.boton { background: rgb(var(--marca-600)); color: #fff; box-shadow: 0 1px 2px rgb(var(--marca-900) / .2); }
.boton:hover { background: rgb(var(--marca-700)); }
.boton-sec { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
.boton-sec:hover { background: #f8fafc; border-color: #94a3b8; }
.boton-exito { background: #16a34a; color: #fff; }
.boton-exito:hover { background: #15803d; }
.boton-rojo { display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; font-weight: 600;
  font-size: .9rem; padding: .55rem 1.1rem; background: #dc2626; color: #fff; cursor: pointer; }
.boton-rojo:hover { background: #b91c1c; }
.boton-peligro { background: #fff; color: #b91c1c; border: 1px solid #fca5a5; padding: .3rem .7rem; font-size: .8rem; }
.boton-peligro:hover { background: #fef2f2; }
.boton:disabled, .boton-sec:disabled, .boton-peligro:disabled, .boton-exito:disabled { opacity: .55; cursor: not-allowed; }
.boton:focus-visible, .boton-sec:focus-visible, .boton-exito:focus-visible, .boton-peligro:focus-visible {
  outline: 3px solid rgb(var(--marca-400) / .6); outline-offset: 2px; }
.boton-grande { font-size: 1.1rem; padding: .8rem 1.5rem; }
.enlace { color: rgb(var(--marca-700)); font-weight: 600; cursor: pointer; font-size: .85rem; }
.enlace:hover { text-decoration: underline; }

/* ── Tarjetas y pestañas ── */
.tarjeta { background: #fff; border: 1px solid #e2e8f0; border-radius: .9rem; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.pestanas { display: inline-flex; gap: .25rem; background: #e2e8f0; padding: .25rem; border-radius: .7rem; }
.pestana { padding: .45rem 1rem; border-radius: .5rem; font-size: .9rem; font-weight: 600; color: #475569; cursor: pointer; }
.pestana[aria-selected="true"] { background: #fff; color: rgb(var(--marca-700)); box-shadow: 0 1px 3px rgb(15 23 42 / .12); }

/* ── Tablas ── */
.tabla { background: #fff; border-collapse: separate; border-spacing: 0; font-size: .875rem; width: 100%;
  border: 1px solid #e2e8f0; border-radius: .75rem; overflow: hidden; }
.tabla th { background: #f8fafc; text-align: left; padding: .6rem .75rem; font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .03em; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.tabla td { padding: .55rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: rgb(var(--marca-50) / .6); }
.tabla tr.fila-alerta td { background: #fff7ed; }
.tabla tr.fila-roja td { background: #fef2f2; }
.tabla tr.anulada td { color: #94a3b8; text-decoration: line-through; }
.tabla tfoot td { background: #f8fafc; font-weight: 700; border-top: 1px solid #e2e8f0; }

/* ── Chips ── */
.chip { display: inline-flex; align-items: center; border-radius: 9999px; padding: .05rem .55rem; font-size: .72rem; font-weight: 600; }
.chip-rojo { background: #fee2e2; color: #991b1b; }
.chip-ambar { background: #fef3c7; color: #92400e; }
.chip-verde { background: #dcfce7; color: #166534; }
.chip-gris { background: #e2e8f0; color: #475569; }
.chip-marca { background: rgb(var(--marca-100)); color: rgb(var(--marca-800)); }

/* ── Menú lateral ── */
.menu-enlace { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: .6rem;
  color: #475569; font-weight: 500; font-size: .92rem; }
.menu-enlace svg { width: 1.25rem; height: 1.25rem; flex: none; color: #94a3b8; }
.menu-enlace:hover { background: #f1f5f9; color: #0f172a; }
.menu-enlace[aria-current="page"] { background: rgb(var(--marca-50)); color: rgb(var(--marca-800)); font-weight: 600; }
.menu-enlace[aria-current="page"] svg { color: rgb(var(--marca-600)); }
.menu-grupo { padding: 1rem .75rem .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #94a3b8; }

/* Aviso para la pistola lectora */
@keyframes destello { 0% { background: rgb(var(--marca-100)); } 100% { background: #fff; } }
.destello { animation: destello .8s ease-out; }