/* ============================================================
   REFRESH.CSS — Capa de rediseño contemporáneo (2026)
   Carga al final: refina la apariencia sin reestructurar nada.
   Conserva la identidad A&A (rojo, dorado, gris, verde). Tema claro.
   Reversible: quitar el <link> devuelve el diseño anterior.
   ============================================================ */

:root {
  /* Tokens de superficie — TEMA CLARO (por defecto) */
  --rf-bg:            #f2f1f3;
  --rf-surface:       #ffffff;
  --rf-surface-2:     #faf9fb;
  --rf-border:        #e7e5e9;
  --rf-border-strong: #d9d6dc;
  --rf-ink:           #1c1b1f;
  --rf-ink-soft:      #3a3940;
  --rf-muted:         #6c6a73;

  --rf-sh-sm: 0 1px 2px rgba(20,18,24,.06), 0 2px 8px rgba(20,18,24,.05);
  --rf-sh-md: 0 4px 12px rgba(20,18,24,.08), 0 12px 28px rgba(20,18,24,.06);
  --rf-sh-lg: 0 12px 32px rgba(20,18,24,.12), 0 4px 12px rgba(20,18,24,.07);
  --rf-sh-red: 0 6px 18px rgba(194,34,25,.28);

  --rf-r-sm: 9px;
  --rf-r-md: 14px;
  --rf-r-lg: 18px;
  --rf-ease: cubic-bezier(.4, 0, .2, 1);

  /* Acentos (fallback si no existieran las --aa-*) */
  --rf-rojo:       var(--aa-rojo, #C22219);
  --rf-rojo-dark:  var(--aa-rojo-dark, #A01C15);
  --rf-dorado:     var(--aa-dorado, #DCBE61);
  --rf-dorado-dark:var(--aa-dorado-dark, #C4A145);
  --rf-verde:      #2a9d8f;
}

/* ===== Base (excluye la página de login, que tiene su propio fondo) ===== */
body.pagina:not(.modern-login),
body:not(.modern-login) {
  background: var(--rf-bg) !important;
  color: var(--rf-ink) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--rf-ink) !important;
  letter-spacing: -.4px;
}

/* ===== Contenedores como tarjetas ===== */
.container.shadow, .container-lg.shadow, .container-fluid.shadow,
.container.fondo-container, .container-lg.fondo-container,
.container.leyenda-tabla, .container-lg.leyenda-tabla, .container-fluid.leyenda-tabla {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: var(--rf-r-lg) !important;
  box-shadow: var(--rf-sh-sm) !important;
  padding: 26px 28px !important;
  margin-top: 26px !important;
  margin-bottom: 26px !important;
}

hr {
  border-color: var(--rf-border) !important;
  opacity: 1 !important;
}

/* ===== Navbar ===== */
.navegador-superior {
  background: linear-gradient(100deg, #1a1a1c 0%, #232228 100%) !important;
  border-bottom: 2px solid var(--rf-dorado) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.22) !important;
}
.navbar-brand { font-weight: 700 !important; letter-spacing: -.2px; }
.palabras-menu, .nav-link.palabras-menu {
  color: #d6d4da !important;
  border-radius: 8px !important;
  padding: 7px 13px !important;
  transition: all .18s var(--rf-ease) !important;
}
.palabras-menu:hover, .nav-link.palabras-menu:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.dropdown-menu {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--rf-sh-md) !important;
  padding: 6px !important;
}
.dropdown-item.palabras-menu-oscuro {
  color: var(--rf-ink-soft) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: all .14s var(--rf-ease) !important;
}
.dropdown-item.palabras-menu-oscuro:hover,
.dropdown-item.palabras-menu-oscuro:focus {
  background: var(--rf-rojo) !important;
  color: #fff !important;
}

/* ===== Tarjetas de métricas ===== */
.metric-card {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: var(--rf-r-md) !important;
  box-shadow: var(--rf-sh-sm) !important;
  padding: 20px !important;
  transition: transform .2s var(--rf-ease), box-shadow .2s var(--rf-ease) !important;
  background-image: none !important;
}
.metric-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--rf-sh-md) !important;
}
.metric-value {
  color: var(--rf-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -.5px !important;
  font-variant-numeric: tabular-nums;
}
.metric-label { color: var(--rf-muted) !important; font-weight: 500 !important; }
/* Variantes de color: solo un borde/acento superior, fondo neutro contemporáneo */
.metric-card.bg-primary, .metric-card.bg-warning, .metric-card.bg-success,
.metric-card.bg-danger, .metric-card.bg-info {
  background: var(--rf-surface) !important;
  color: var(--rf-ink) !important;
}
.metric-card.bg-primary { border-top: 3px solid var(--rf-rojo) !important; }
.metric-card.bg-danger  { border-top: 3px solid var(--rf-rojo) !important; }
.metric-card.bg-warning { border-top: 3px solid var(--rf-dorado) !important; }
.metric-card.bg-success { border-top: 3px solid var(--rf-verde) !important; }
.metric-card.bg-info    { border-top: 3px solid #3257a8 !important; }
.metric-card.bg-primary .metric-value, .metric-card.bg-danger .metric-value { color: var(--rf-rojo) !important; }
.metric-card.bg-success .metric-value { color: var(--rf-verde) !important; }
.metric-card.bg-warning .metric-value { color: var(--rf-dorado-dark) !important; }

/* ===== Botones ===== */
.boton-primario, .boton-error, .boton-exito, .boton-advertencia, .boton-info {
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  transition: transform .17s var(--rf-ease), box-shadow .17s var(--rf-ease), filter .17s var(--rf-ease) !important;
}
.boton-primario:hover, .boton-error:hover, .boton-exito:hover,
.boton-advertencia:hover, .boton-info:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.03);
}
.boton-primario:active, .boton-error:active, .boton-exito:active,
.boton-advertencia:active, .boton-info:active { transform: translateY(0) !important; }

.boton-primario, .boton-error {
  background: linear-gradient(135deg, var(--rf-rojo) 0%, var(--rf-rojo-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(194,34,25,.28) !important;
}
.boton-exito {
  background: linear-gradient(135deg, #2fae9e 0%, #22867a 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(42,157,143,.28) !important;
}
.boton-advertencia {
  background: linear-gradient(135deg, var(--rf-dorado) 0%, var(--rf-dorado-dark) 100%) !important;
  color: #2a2410 !important;
  box-shadow: 0 4px 14px rgba(220,190,97,.32) !important;
}
.boton-info {
  background: #232228 !important;
  color: #fff !important;
  box-shadow: var(--rf-sh-sm) !important;
}

/* Botones Bootstrap estándar dentro del contenido */
.btn { border-radius: 10px !important; }

/* ===== Formularios ===== */
.leyenda { color: var(--rf-ink-soft) !important; font-weight: 600 !important; font-size: .82rem !important; letter-spacing: .2px; }
.form-control, .form-select {
  background: var(--rf-surface-2) !important;
  border: 1px solid var(--rf-border-strong) !important;
  border-radius: 10px !important;
  color: var(--rf-ink) !important;
  transition: border-color .16s var(--rf-ease), box-shadow .16s var(--rf-ease), background .16s var(--rf-ease) !important;
}
.form-control:focus, .form-select:focus {
  background: var(--rf-surface) !important;
  border-color: var(--rf-rojo) !important;
  box-shadow: 0 0 0 3px rgba(194,34,25,.14) !important;
}
.form-control::placeholder { color: var(--rf-muted) !important; }
.input-readonly {
  background: var(--rf-surface-2) !important;
  color: var(--rf-ink-soft) !important;
  opacity: 1 !important;
}

/* ===== Choices.js ===== */
.choices__inner {
  background: var(--rf-surface-2) !important;
  border: 1px solid var(--rf-border-strong) !important;
  border-radius: 10px !important;
  color: var(--rf-ink) !important;
}
.is-focused .choices__inner, .is-open .choices__inner {
  border-color: var(--rf-rojo) !important;
  box-shadow: 0 0 0 3px rgba(194,34,25,.14) !important;
}
.choices__list--dropdown, .choices__list[aria-expanded] {
  background: var(--rf-surface) !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow: var(--rf-sh-md) !important;
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { color: var(--rf-ink) !important; }
.choices__list--single { color: var(--rf-ink) !important; }

/* ===== Modales ===== */
.modal-content, .coreui-modal {
  background: var(--rf-surface) !important;
  color: var(--rf-ink) !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: var(--rf-r-lg) !important;
  box-shadow: var(--rf-sh-lg) !important;
  overflow: hidden;
}
.modal-header, .coreui-modal-header { border-bottom: 1px solid var(--rf-border) !important; }
.modal-footer { border-top: 1px solid var(--rf-border) !important; }

/* ===== Badges de estado (pills) ===== */
.badge {
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 4px 11px !important;
  letter-spacing: .1px;
}
.badge.text-bg-success { background: rgba(42,157,143,.15) !important; color: #1f7c71 !important; }
.badge.text-bg-danger  { background: rgba(194,34,25,.13) !important; color: var(--rf-rojo) !important; }
.badge.text-bg-warning { background: rgba(224,168,0,.16) !important; color: #9a7400 !important; }
.badge.text-bg-info    { background: rgba(50,87,168,.14) !important; color: #3257a8 !important; }
.badge.text-bg-primary { background: rgba(50,87,168,.14) !important; color: #3257a8 !important; }
.badge.text-bg-secondary { background: rgba(108,106,115,.16) !important; color: var(--rf-muted) !important; }

/* ===== Tablas (armoniza tabla.css con tokens) ===== */
.tabla-ligera tbody td { color: var(--rf-ink-soft) !important; border-bottom-color: var(--rf-border) !important; }
.tabla-ligera tbody tr:hover { background: rgba(194,34,25,.05) !important; }
.table { color: var(--rf-ink-soft) !important; }
.table > :not(caption) > * > * { background-color: transparent !important; }
.tabla-pie .page-link { background: var(--rf-surface-2) !important; color: var(--rf-ink) !important; border-color: var(--rf-border-strong) !important; }

/* Buscador de tabla: lupa + input como una sola pastilla (arregla la lupa) */
.tabla-barra .input-group { border-radius: 10px; }
.tabla-barra .input-group-text {
  background: var(--rf-surface-2) !important;
  color: var(--rf-muted) !important;
  border: 1px solid var(--rf-border-strong) !important;
  border-right: 0 !important;
  border-radius: 10px 0 0 10px !important;
  padding-right: 6px !important;
}
.tabla-barra .tabla-buscar {
  background: var(--rf-surface-2) !important;
  color: var(--rf-ink) !important;
  border: 1px solid var(--rf-border-strong) !important;
  border-left: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: none !important;
}
.tabla-barra .input-group:focus-within { box-shadow: 0 0 0 3px rgba(194,34,25,.14); border-radius: 10px; }
.tabla-barra .input-group:focus-within .input-group-text,
.tabla-barra .input-group:focus-within .tabla-buscar { border-color: var(--rf-rojo) !important; }

/* ===== Pie sobre el fondo (sin tarjeta) ===== */
.rf-footer {
  text-align: center;
  padding: 26px 16px 30px;
  margin-top: 8px;
}
.rf-footer p {
  margin: 0;
  color: var(--rf-muted);
  font-size: .8rem;
  letter-spacing: .3px;
}

/* ===== Roles: permisos como grupos de interruptores ===== */
.rol-grupo {
  height: 100%;
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  box-shadow: var(--rf-sh-sm);
  overflow: hidden;
  transition: box-shadow .2s var(--rf-ease), transform .2s var(--rf-ease);
}
.rol-grupo:hover { box-shadow: var(--rf-sh-md); transform: translateY(-2px); }
.rol-grupo-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #262529 0%, #1a1a1c 100%);
  color: #fff;
  font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid var(--rf-dorado);
}
.rol-grupo-head i { color: var(--rf-dorado); }
.rol-grupo-all {
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; cursor: pointer;
  transition: all .15s var(--rf-ease);
}
.rol-grupo-all:hover { background: var(--rf-rojo); border-color: var(--rf-rojo); }
.rol-grupo-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.rol-switch { margin: 0; padding: 6px 4px 6px 2.6em; border-radius: 8px; transition: background .13s var(--rf-ease); }
.rol-switch:hover { background: var(--rf-surface-2); }
.rol-switch .form-check-label { font-size: .88rem; color: var(--rf-ink-soft); cursor: pointer; }
.rol-switch .form-check-input { cursor: pointer; width: 2.1em; height: 1.05em; margin-left: -2.6em; }
.rol-switch .form-check-input:checked {
  background-color: var(--rf-rojo) !important;
  border-color: var(--rf-rojo) !important;
}
.rol-switch .form-check-input:focus {
  border-color: var(--rf-rojo) !important;
  box-shadow: 0 0 0 .2rem rgba(194,34,25,.18) !important;
}

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