/* =====================================================================
   SIPP · TEMA / PALETA DE COLORES
   ---------------------------------------------------------------------
   Premio Nacional de Poesía «Ramón López Velarde»

   Colores base de marca:
     · Dorado claro #E3C177 (R227 G193 B119)
     · Dorado       #BB9147 (R187 G145 B71)
     · Negro        #000000
     · Blanco       #FFFFFF

   CÓMO CAMBIAR LA PALETA:
   Solo edita el bloque "TOKENS DE MARCA" de abajo (las escalas --navy-*,
   --gold-* y los colores semánticos). TODO lo demás (botones, alertas,
   paneles, navbar, footer, formularios...) deriva de esas variables, así
   que no hay que tocar nada más para reestilizar el sitio completo.
   ===================================================================== */

:root {
  /* ==========================================================
     1) TOKENS DE MARCA  ← edita SOLO esto para cambiar la paleta
     ========================================================== */

  /* --- Negro (color principal / institucional) --- */
  --navy-900: #000000;  /* base */
  --navy-800: #1A1A1A;
  --navy-700: #2E2E2E;
  --navy-600: #434343;
  --navy-500: #5C5C5C;
  --navy-400: #808080;
  --navy-300: #A6A6A6;
  --navy-200: #CCCCCC;
  --navy-100: #E6E6E6;
  --navy-50:  #F5F5F5;
  --navy-rgb: 0, 0, 0;            /* para sombras / transparencias */

  /* --- Dorado (acento de marca) --- */
  --gold-700: #6E5329;
  --gold-600: #8A6837;
  --gold-500: #BB9147;  /* base (rgb 187,145,71) */
  --gold-400: #CDA75D;
  --gold-300: #E3C177;  /* dorado claro (rgb 227,193,119) */
  --gold-200: #ECD49C;
  --gold-100: #F5E8C8;
  --gold-50:  #FBF4E5;
  --gold-rgb: 187, 145, 71;

  /* --- Base neutra --- */
  --white: #FFFFFF;
  --black: #000000;

  /* --- Estados (derivados de la paleta: dorado / gris / óxido) ---
     Cada estado tiene: sólido / oscuro (hover, texto) / fondo claro / borde.
     SIN verde ni azul: éxito/validado/abierto = dorado; info/enviado = gris. */
  --success:        var(--gold-500);
  --success-dark:   var(--gold-700);
  --success-bg:     var(--gold-50);
  --success-border: var(--gold-200);

  --info:           var(--navy-600);
  --info-dark:      var(--navy-800);
  --info-bg:        var(--navy-50);
  --info-border:    var(--navy-200);

  --warning:        var(--gold-300);
  --warning-dark:   var(--gold-700);
  --warning-bg:     var(--gold-100);
  --warning-border: var(--gold-300);

  --danger:         #A23B2E;
  --danger-dark:    #7C2C22;
  --danger-bg:      #F8EAE6;
  --danger-border:  #EAC9C1;


  /* ==========================================================
     2) ROLES SEMÁNTICOS  (derivados; normalmente NO se editan)
     ========================================================== */

  /* Superficies y texto */
  --color-bg:            var(--navy-50);     /* fondo de la página */
  --color-surface:       var(--white);       /* tarjetas, paneles, modales */
  --color-surface-muted: var(--navy-100);    /* zonas resaltadas suaves */
  --color-border:        var(--navy-100);    /* bordes y separadores */
  --color-text:          var(--navy-900);    /* texto principal */
  --color-text-muted:    #5C6B7E;            /* texto secundario / ayudas */
  --color-text-inverse:  var(--white);       /* texto sobre fondos oscuros */

  /* Acciones */
  --color-primary:        var(--navy-900);   /* acción principal (guardar) */
  --color-primary-hover:  var(--navy-700);
  --color-accent:         var(--gold-500);   /* CTA / acento de marca */
  --color-accent-hover:   var(--gold-600);
  --color-link:           var(--navy-600);
  --color-link-hover:     var(--gold-600);

  /* Marca / superficies oscuras (navbar, footer) */
  --brand-grad: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);

  /* Sombras y radios reutilizables */
  --shadow-sm: 0 2px 12px rgba(var(--navy-rgb), .12);
  --shadow-md: 0 4px 24px rgba(var(--navy-rgb), .08);
  --radius:    16px;


  /* ==========================================================
     3) PUENTE CON BOOTSTRAP 5.3
     Reasigna las variables nativas de Bootstrap a nuestra paleta.
     ========================================================== */
  --bs-primary:        var(--navy-900);
  --bs-primary-rgb:    var(--navy-rgb);
  --bs-secondary:      var(--navy-400);
  --bs-success:        var(--success);
  --bs-info:           var(--info);
  --bs-warning:        var(--warning);
  --bs-danger:         var(--danger);
  --bs-light:          var(--navy-50);
  --bs-dark:           var(--navy-900);

  --bs-body-bg:        var(--color-bg);
  --bs-body-color:     var(--color-text);
  --bs-border-color:   var(--color-border);

  --bs-link-color:        var(--color-link);
  --bs-link-hover-color:  var(--color-link-hover);
  --bs-link-color-rgb:    var(--navy-rgb);
}


/* =====================================================================
   ESTRUCTURA GENERAL
   ===================================================================== */
body {
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  padding-bottom: 5rem;        /* espacio para la barra inferior en móvil */
}
@media (min-width: 992px) { body { padding-bottom: 0; } }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

h1, h2, h3 { font-weight: 700; color: var(--color-text); }


/* =====================================================================
   NAVBAR SUPERIOR
   ===================================================================== */
.navbar-sipp {
  background: var(--brand-grad);
  box-shadow: var(--shadow-sm);
  border-bottom: 3px solid var(--color-accent);   /* línea dorada de marca */
}
.navbar-sipp .navbar-nav { gap: .4rem; }
.navbar-sipp .navbar-brand { font-weight: 700; letter-spacing: .5px; color: var(--white); }
.navbar-sipp .navbar-brand i { color: var(--color-accent); }
.navbar-sipp .nav-link {
  color: rgba(255,255,255,.88) !important;
  font-weight: 500; border-radius: 8px; padding: .45rem .8rem;
  transition: background .15s, color .15s;
}
.navbar-sipp .nav-link:hover,
.navbar-sipp .nav-link.active { background: rgba(255,255,255,.14); color: var(--white) !important; }
.navbar-sipp .nav-link.active { box-shadow: inset 0 -2px 0 var(--color-accent); }
.navbar-sipp .nav-link i { margin-right: .35rem; }

.user-chip { color: var(--white); font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.user-chip .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(var(--gold-rgb), .85); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}


/* =====================================================================
   PANELES / TARJETAS / CONTENIDO
   ===================================================================== */
.page-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
.card { border-color: var(--color-border); }
.card-header { background: var(--navy-50); border-bottom-color: var(--color-border); font-weight: 600; }


/* =====================================================================
   BARRA INFERIOR (móvil tipo app)
   ===================================================================== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 16px rgba(var(--navy-rgb), .08);
  display: flex; justify-content: space-around;
}
.bottom-nav a {
  flex: 1; text-align: center; padding: .55rem 0 .7rem;
  color: var(--color-text-muted); text-decoration: none; font-size: .72rem; font-weight: 600;
}
.bottom-nav a i { display: block; font-size: 1.4rem; margin-bottom: .1rem; }
.bottom-nav a.active { color: var(--color-accent); }
@media (min-width: 992px) { .bottom-nav { display: none; } }


/* =====================================================================
   PIE DE PÁGINA (footer)
   ===================================================================== */
.footer-sipp {
  background: var(--navy-900);
  color: rgba(255,255,255,.75);
  border-top: 3px solid var(--color-accent);
  padding: 2rem 0;
  font-size: .9rem;
}
.footer-sipp a { color: var(--gold-300); }
.footer-sipp a:hover { color: var(--gold-200); }


/* =====================================================================
   BOTONES
   En Bootstrap 5.3 cada variante usa sus propias --bs-btn-*; las
   reasignamos para respetar la paleta (incluye estados hover/active).
   ===================================================================== */

/* Acción principal: GUARDAR / CONTINUAR  → azul marino */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--navy-800);
  --bs-btn-active-border-color: var(--navy-800);
  --bs-btn-disabled-bg: var(--navy-400);
  --bs-btn-disabled-border-color: var(--navy-400);
}

/* Acento de marca / CTA destacado  → dorado */
.btn-accent {
  --bs-btn-color: var(--navy-900);
  --bs-btn-bg: var(--gold-500);
  --bs-btn-border-color: var(--gold-500);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--gold-600);
  --bs-btn-hover-border-color: var(--gold-600);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--gold-700);
  --bs-btn-active-border-color: var(--gold-700);
  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--gold-300);
  --bs-btn-disabled-border-color: var(--gold-300);
}

/* CONFIRMAR / APROBAR  → verde */
.btn-success {
  --bs-btn-bg: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: var(--success-dark);
  --bs-btn-hover-border-color: var(--success-dark);
  --bs-btn-active-bg: var(--success-dark);
  --bs-btn-active-border-color: var(--success-dark);
}

/* ELIMINAR / RECHAZAR  → rojo */
.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger-dark);
  --bs-btn-hover-border-color: var(--danger-dark);
  --bs-btn-active-bg: var(--danger-dark);
  --bs-btn-active-border-color: var(--danger-dark);
}

/* EDITAR / PRECAUCIÓN  → ámbar (texto oscuro para contraste) */
.btn-warning {
  --bs-btn-color: var(--navy-900);
  --bs-btn-bg: var(--warning);
  --bs-btn-border-color: var(--warning);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--warning-dark);
  --bs-btn-hover-border-color: var(--warning-dark);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--warning-dark);
  --bs-btn-active-border-color: var(--warning-dark);
}

/* INFORMATIVO / DETALLE  → azul claro */
.btn-info {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--info);
  --bs-btn-border-color: var(--info);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--info-dark);
  --bs-btn-hover-border-color: var(--info-dark);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--info-dark);
  --bs-btn-active-border-color: var(--info-dark);
}

/* CANCELAR / NEUTRO  → gris azulado */
.btn-secondary {
  --bs-btn-bg: var(--navy-400);
  --bs-btn-border-color: var(--navy-400);
  --bs-btn-hover-bg: var(--navy-500);
  --bs-btn-hover-border-color: var(--navy-500);
  --bs-btn-active-bg: var(--navy-600);
  --bs-btn-active-border-color: var(--navy-600);
}

/* Botón claro (sobre fondos oscuros como la navbar) */
.btn-light {
  --bs-btn-color: var(--navy-900);
  --bs-btn-bg: var(--white);
  --bs-btn-border-color: var(--white);
  --bs-btn-hover-bg: var(--gold-100);
  --bs-btn-hover-border-color: var(--gold-100);
}

/* CANCELAR / DESCARTAR → vino claro (familia de eliminar, pero suave) */
.btn-soft-danger {
  --bs-btn-color: var(--danger-dark);
  --bs-btn-bg: var(--danger-bg);
  --bs-btn-border-color: var(--danger-border);
  --bs-btn-hover-color: var(--danger-dark);
  --bs-btn-hover-bg: var(--danger-border);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--danger);
  --bs-btn-active-border-color: var(--danger);
}

/* Variantes "outline" más usadas, alineadas a la paleta */
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
}
.btn-outline-accent {
  --bs-btn-color: var(--gold-600);
  --bs-btn-border-color: var(--gold-500);
  --bs-btn-hover-color: var(--navy-900);
  --bs-btn-hover-bg: var(--gold-500);
  --bs-btn-hover-border-color: var(--gold-500);
}
/* Outline destructivo (eliminar/rechazar) → vino de marca */
.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--danger-dark);
  --bs-btn-active-border-color: var(--danger-dark);
}
.btn-outline-secondary {
  --bs-btn-color: var(--navy-500);
  --bs-btn-border-color: var(--navy-400);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--navy-400);
  --bs-btn-hover-border-color: var(--navy-400);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--navy-500);
  --bs-btn-active-border-color: var(--navy-500);
}
.btn-outline-success {
  --bs-btn-color: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--success);
  --bs-btn-hover-border-color: var(--success);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--success-dark);
  --bs-btn-active-border-color: var(--success-dark);
}
.btn-outline-warning {
  --bs-btn-color: var(--warning-dark);
  --bs-btn-border-color: var(--warning);
  --bs-btn-hover-color: var(--navy-900);
  --bs-btn-hover-bg: var(--warning);
  --bs-btn-hover-border-color: var(--warning);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--warning-dark);
  --bs-btn-active-border-color: var(--warning-dark);
}
.btn-outline-info {
  --bs-btn-color: var(--info);
  --bs-btn-border-color: var(--info);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--info);
  --bs-btn-hover-border-color: var(--info);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--info-dark);
  --bs-btn-active-border-color: var(--info-dark);
}


/* =====================================================================
   ALERTAS / MENSAJES AL USUARIO
   (success, info, warning, danger + secundario)
   ===================================================================== */
.alert-success {
  --bs-alert-color: var(--success-dark);
  --bs-alert-bg: var(--success-bg);
  --bs-alert-border-color: var(--success-border);
  --bs-alert-link-color: var(--success-dark);
}
.alert-info {
  --bs-alert-color: var(--info-dark);
  --bs-alert-bg: var(--info-bg);
  --bs-alert-border-color: var(--info-border);
  --bs-alert-link-color: var(--info-dark);
}
.alert-warning {
  --bs-alert-color: var(--warning-dark);
  --bs-alert-bg: var(--warning-bg);
  --bs-alert-border-color: var(--warning-border);
  --bs-alert-link-color: var(--warning-dark);
}
.alert-danger {
  --bs-alert-color: var(--danger-dark);
  --bs-alert-bg: var(--danger-bg);
  --bs-alert-border-color: var(--danger-border);
  --bs-alert-link-color: var(--danger-dark);
}
.alert-secondary {
  --bs-alert-color: var(--navy-800);
  --bs-alert-bg: var(--navy-100);
  --bs-alert-border-color: var(--navy-200);
}


/* =====================================================================
   BADGES / ETIQUETAS DE ESTADO
   ===================================================================== */
.badge.text-bg-primary   { background-color: var(--color-primary) !important; color: var(--white) !important; }
.badge.text-bg-accent    { background-color: var(--gold-500) !important;      color: var(--navy-900) !important; }
.badge.text-bg-success   { background-color: var(--success) !important;       color: var(--navy-900) !important; }
.badge.text-bg-info      { background-color: var(--info) !important;          color: var(--white) !important; }
.badge.text-bg-warning   { background-color: var(--warning) !important;       color: var(--navy-900) !important; }
.badge.text-bg-danger    { background-color: var(--danger) !important;        color: var(--white) !important; }
.badge.text-bg-secondary { background-color: var(--navy-400) !important;      color: var(--white) !important; }

/* Badges "suaves" (fondo claro + texto fuerte) */
.badge-soft-success { background: var(--success-bg); color: var(--success-dark); }
.badge-soft-info    { background: var(--info-bg);    color: var(--info-dark); }
.badge-soft-warning { background: var(--warning-bg); color: var(--warning-dark); }
.badge-soft-danger  { background: var(--danger-bg);  color: var(--danger-dark); }
.badge-soft-neutral { background: var(--navy-100);   color: var(--navy-800); }


/* =====================================================================
   FORMULARIOS
   ===================================================================== */
.form-label { font-weight: 600; color: var(--navy-800); }
.form-control, .form-select {
  border-color: var(--color-border);
  color: var(--color-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 .2rem rgba(var(--gold-rgb), .25);
}
.form-text { color: var(--color-text-muted); }

/* Checkbox / radio marcados → azul marino de marca
   (Bootstrap 5.3 los trae con un azul fijo que no usa --bs-primary). */
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-check-input:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 .2rem rgba(var(--gold-rgb), .25);
} 

/* Mensajes de validación de formularios */
.form-control.is-valid, .was-validated .form-control:valid {
  border-color: var(--success);
}
.valid-feedback { color: var(--success-dark); }
.form-control.is-invalid, .was-validated .form-control:invalid {
  border-color: var(--danger);
}
.invalid-feedback { color: var(--danger-dark); }
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
  box-shadow: 0 0 0 .2rem rgba(162, 59, 46, .25);
}


/* =====================================================================
   UTILIDADES DE TEXTO/FONDO DE MARCA
   ===================================================================== */
.text-navy   { color: var(--navy-900) !important; }
.text-gold   { color: var(--gold-600) !important; }
.text-muted-sipp { color: var(--color-text-muted) !important; }
.bg-navy     { background-color: var(--navy-900) !important; color: var(--white); }
.bg-gold     { background-color: var(--gold-500) !important; color: var(--navy-900); }
.bg-surface-muted { background-color: var(--color-surface-muted) !important; }
hr { border-color: var(--color-border); }

/* Oculta elementos de Alpine hasta que el JS esté listo (modal de confirmación) */
[x-cloak] { display: none !important; }