/* ==========================================================================
   /public_html/assets/css/componentes.css — MA Ayacucho (Producción)
   Propósito:
   - Componentes base reutilizables (botones, chips, toasts, tarjetas, alertas).
   - Contraste accesible (≥ 3:1), foco visible, sin inline (CSP).
   - Capa base: vistas (p.ej. mapa.css) pueden sobreescribir detalles.
   ========================================================================== */

/* ==============================
   Variables (defaults seguros)
   ============================== */
:root {
  /* Paleta base (alineada con mapa.css) */
  --brand: #0ea5e9;                 /* Cyan-500 */
  --color-primario: var(--brand);   /* Alias hacia atrás */
  --brand-ink: #062a33;             /* Texto sobre primario (≥3:1) */

  --fg: #0f172a;          /* Texto principal */
  --fg-weak: #475569;     /* Texto atenuado */
  --bg: #ffffff;          /* Fondo */
  --surface: #ffffff;     /* Superficie tarjetas/botones */
  --border: #e2e8f0;      /* Borde suave */

  /* Semáforo */
  --ok: #16a34a;
  --warn: #f59e0b;
  --error: #ef4444;

  /* Layout / UI */
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.12);
  --focus-ring: 2px solid color-mix(in srgb, var(--brand) 60%, #fff);

  /* Botones */
  --btn-minh: 44px;              /* Click target mínimo accesible */
  --btn-pad-x: 1.1rem;
  --btn-pad-y: .7rem;
  --btn-gap: .5rem;

  /* Toasts */
  --toast-pad-x: 14px;
  --toast-pad-y: 10px;
  --toast-radius: 12px;
  --toast-gap: 8px;

  /* Z-index de utilidades globales */
  --z-toast: 9999;
  --z-controls: 30;
}

/* Preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --focus-ring: 3px solid #000; }
}

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-minh);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow);
  transition:
    filter .15s ease,
    transform .05s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}
.btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.btn:hover { filter: brightness(.98); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* Variantes */
.btn--primary {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: color-mix(in srgb, var(--brand) 40%, #000);
}
.btn--secondary,
.btn--secundario {                /* alias ES */
  background: #334155;           /* slate-700 */
  color: #ffffff;
  border-color: #1f2937;         /* slate-800 */
}
.btn--outline {
  background: transparent;
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 65%, var(--border));
  box-shadow: none;
}
.btn--outline:hover { background: color-mix(in srgb, var(--brand) 10%, #fff); }
.btn--ghost,
.btn--fantasma {                  /* alias ES */
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
  box-shadow: none;
}

/* Tamaños */
.btn--sm { padding: .5rem .75rem; min-height: 36px; font-weight: 600; }
.btn--lg { padding: .85rem 1.25rem; min-height: 48px; font-weight: 800; }

/* Iconos en botón */
.btn .icon, .btn svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* Bloque */
.btn--block { display: inline-flex; width: 100%; }

/* Estado de carga accesible */
.btn[aria-busy="true"] {
  position: relative;
  pointer-events: none;
  opacity: .85;
}
.btn[aria-busy="true"]::after{
  content:"";
  width: 1em; height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  margin-inline-start: .5rem;
  display: inline-block;
  animation: ma-spin .8s linear infinite;
}
@keyframes ma-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   UTILS Z-LAYER
   ========================================================================== */
.z-controls { position: relative; z-index: var(--z-controls); }
.z-toast { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-toast); }

/* ==========================================================================
   TOASTS (genéricos)
   - Nota: la vista del mapa puede aplicar posición/animación propias.
   ========================================================================== */
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--toast-gap);
  padding: var(--toast-pad-y) var(--toast-pad-x);
  border-radius: var(--toast-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .2s ease, filter .15s ease;
}
.toast .icon, .toast svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* Estados */
.toast--ok {
  background: color-mix(in srgb, var(--ok) 12%, #fff);
  border-color: color-mix(in srgb, var(--ok) 40%, var(--border));
  color: color-mix(in srgb, var(--ok) 85%, #053);
}
.toast--warn {
  background: color-mix(in srgb, var(--warn) 14%, #fff);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  color: color-mix(in srgb, var(--warn) 85%, #442);
}
.toast--err,
.toast--error {
  background: color-mix(in srgb, var(--error) 12%, #fff);
  border-color: color-mix(in srgb, var(--error) 45%, var(--border));
  color: color-mix(in srgb, var(--error) 88%, #511);
}

/* Compat específica (algunos módulos esperan #toast con clase .toast) */
#toast.toast { opacity: 1; transform: none; }

/* ==========================================================================
   CHIPS (genéricos) + CHIPS DE LEYENDA (base)
   - La vista del mapa puede sobreescribirlos en mapa.css.
   ========================================================================== */
.chip {
  display:inline-block;
  padding:.25rem .5rem;
  border-radius:9999px;
  background:#0b1622;
  color:#cfe8ff;
  font-size:.875rem;
  font-weight:700;
  line-height:1;
  user-select:none;
}

/* Base de leyenda (neutral) */
.chip-legend{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-weak);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.chip-legend::before{
  content: ""; width: 8px; height: 8px; border-radius: 9999px; background: currentColor; opacity: .7;
}
/* Modificadores (coinciden con los del mapa) */
.chip-legend--disponible{ color: var(--ok); }
.chip-legend--ocupado{ color: #6b7280; } /* slate-500 neutro */

/* ==========================================================================
   TARJETAS / ALERTAS (reutilizables)
   ========================================================================== */
.card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.card__header{ margin-bottom: .5rem; }
.card__content{}

.alerta{
  padding:.75rem 1rem;
  border-radius: 12px;
  border:1px solid var(--border);
  background: color-mix(in srgb, #f3f4f6 60%, #fff);
  color: var(--fg);
}
.alerta--warning{
  background: color-mix(in srgb, var(--warn) 18%, #fff);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  color: #3b2f0a;
}

/* Utilidades pequeñas */
.muted{ color: var(--fg-weak); }
.oculto { display: none !important; }

/* Switch accesible (sin imágenes) */
.switch{
  -webkit-appearance:none; appearance:none;
  width:48px; height:28px;
  background:#374151; border-radius:9999px;
  position:relative; outline:none; cursor:pointer;
  transition:background .2s ease-in-out;
  vertical-align:middle;
}
.switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:22px; height:22px; border-radius:9999px;
  background:#fff; transition:left .2s ease-in-out;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.switch:checked{ background: var(--brand); }
.switch:checked::after{ left:23px; }
.switch:disabled{ opacity:.6; cursor:not-allowed; }

/* ==========================================================================
   Modo oscuro / Alto contraste
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .btn--secondary,
  .btn--secundario { background:#1f2937; border-color:#0b1220; }
  .toast{
    background: color-mix(in srgb, #0f172a 85%, var(--surface));
    border-color:#0b1220; color:var(--fg);
  }
  .toast--ok   { background: color-mix(in srgb, var(--ok)   14%, #0f172a); border-color: color-mix(in srgb, var(--ok)   35%, #0b1220); }
  .toast--warn { background: color-mix(in srgb, var(--warn) 16%, #0f172a); border-color: color-mix(in srgb, var(--warn) 40%, #0b1220); }
  .toast--err,
  .toast--error { background: color-mix(in srgb, var(--error)16%, #0f172a); border-color: color-mix(in srgb, var(--error)45%, #0b1220); }
  .bg-oscuro .card    { background:#0b1622; border-color:#0b1220; }
  .bg-oscuro .alerta  { background:#111827; border-color:#0b1220; color:#e5e7eb; }
  .bg-oscuro .alerta--warning { background:#78350f; border-color:#92400e; color:#fff; }
}

/* Windows High Contrast (Forced colors) */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .btn:focus-visible { outline: 2px solid Highlight; }
  .toast { border: 1px solid CanvasText; }
}