/* ===========================================================================
   xnova-theme.css — presentación de la familia XNOVA para el área admin.

   Carga DESPUÉS de bootstrap, app.css y el <style> del layout: solo redefine
   variables y colores, no toca estructura. Quitar este <link> del layout
   devuelve la app a su presentación anterior.

   Paleta y tipografía: mismas de xnova-hoa.com (design-tokens.css del sitio).
   Acento HOA: verde #10614A (claro) / #57B894 (oscuro).
   =========================================================================== */

/* ── IBM Plex auto-alojada (copiada del sitio xnova-hoa) ─────────────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(vendor/plex/plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(vendor/plex/plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/plex/plex-serif-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/plex/plex-serif-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/plex/plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/plex/plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/plex/plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/plex/plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Paleta: se redefinen las variables que ya usa app.css ────────────────
   Tema oscuro (predeterminado del app) con los neutrales verdosos de la
   familia; tema claro con papel #FAFAF8. --on-brand es el texto que va
   encima del acento (oscuro sobre verde claro, blanco sobre verde bosque). */
:root{
  --bg1:#101312; --bg2:#131715;
  --panel:#171B19; --panel2:#1D2320;
  --text:#E8EAE6; --muted:#9AA19C;
  --brand:#57B894; --brand2:#7BCBAD;
  --stroke:#2A2F2C; --card:#151918;
  --on-brand:#0F1311;
}
:root[data-theme="light"]{
  --bg1:#FAFAF8; --bg2:#F1F3EF;
  --panel:#FFFFFF; --panel2:#F1F3EF;
  --text:#16181A; --muted:#565B5E;
  --brand:#10614A; --brand2:#0B4736;
  --stroke:#DCDEDA; --card:#FFFFFF;
  --on-brand:#FFFFFF;
}

/* ── Tipografía ───────────────────────────────────────────────────────────── */
body{
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--bg1);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.modal-title, .card-header h5, legend{
  font-family:'IBM Plex Serif', Georgia, "Times New Roman", serif;
  font-weight:600;
}
code, kbd, pre, samp{
  font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* ── Bootstrap: acento primario → verde de la familia ─────────────────────── */
:root, :root[data-theme="light"]{
  --bs-body-font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --bs-border-radius:4px;
  --bs-border-radius-sm:3px;
  --bs-border-radius-lg:4px;
  --bs-border-radius-xl:4px;
  --bs-border-radius-2xl:4px;
}
:root{
  --bs-primary:#57B894;
  --bs-primary-rgb:87,184,148;
  --bs-link-color:#57B894;         --bs-link-color-rgb:87,184,148;
  --bs-link-hover-color:#7BCBAD;   --bs-link-hover-color-rgb:123,203,173;
}
:root[data-theme="light"]{
  --bs-primary:#10614A;
  --bs-primary-rgb:16,97,74;
  --bs-link-color:#10614A;         --bs-link-color-rgb:16,97,74;
  --bs-link-hover-color:#0B4736;   --bs-link-hover-color-rgb:11,71,54;
}

.btn-primary{
  --bs-btn-bg:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-color:var(--on-brand);
  --bs-btn-hover-bg:var(--brand2);
  --bs-btn-hover-border-color:var(--brand2);
  --bs-btn-hover-color:var(--on-brand);
  --bs-btn-active-bg:var(--brand2);
  --bs-btn-active-border-color:var(--brand2);
  --bs-btn-active-color:var(--on-brand);
  --bs-btn-disabled-bg:var(--brand);
  --bs-btn-disabled-border-color:var(--brand);
  --bs-btn-disabled-color:var(--on-brand);
}
.btn-outline-primary{
  --bs-btn-color:var(--brand);
  --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--brand);
  --bs-btn-hover-border-color:var(--brand);
  --bs-btn-hover-color:var(--on-brand);
  --bs-btn-active-bg:var(--brand);
  --bs-btn-active-border-color:var(--brand);
  --bs-btn-active-color:var(--on-brand);
}

/* El badge/encabezado azul de Bootstrap pasa al verde; el texto encima
   cambia con el tema para mantener contraste. */
.badge.bg-primary, .card-header.bg-primary, .list-group-item.active{
  color:var(--on-brand) !important;
}
.list-group-item.active{
  background-color:var(--brand);
  border-color:var(--brand);
}

/* El gris fijo de Bootstrap no se lee sobre el fondo oscuro; se sustituye por
   el --muted del tema, que cambia con el modo. (!important porque la utilidad
   de Bootstrap también lo lleva.) */
.text-muted{ color:var(--muted) !important; }

/* Foco de formularios en verde en vez del halo azul. */
.form-control:focus, .form-select:focus, .form-check-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.form-check-input:checked{
  background-color:var(--brand);
  border-color:var(--brand);
}

/* Paginación (DataTables usa la de Bootstrap). */
.page-link{ color:var(--brand); }
.active > .page-link, .page-link.active{
  background-color:var(--brand);
  border-color:var(--brand);
  color:var(--on-brand);
}

/* ── Forma: canto vivo en tarjetas, 4px en controles ─────────────────────── */
.card, .card-header, .card-footer, .modal-content, .table, .alert{
  border-radius:0;
}
.card > .card-header{ border-top-left-radius:0; border-top-right-radius:0; }

/* Controles del layout (el <style> del layout les da 10–14px). */
.navbar .dropdown-menu{ border-radius:4px; }
.navbar .dropdown-item{ border-radius:3px; }
.nav-btn{ border-radius:4px; }
.theme-btn{ border-radius:4px; }

/* ── Botones del menú: icono arriba, texto debajo, todos iguales ──────────
   El icono ocupa su propia fila (flex-basis 100%); el texto y el caret de
   los dropdowns quedan juntos y centrados en la fila de abajo. Solo en
   escritorio: en el menú colapsado de móvil vuelven a ser lista normal. */
@media (min-width: 992px){
  .navbar .nav-btn{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    column-gap:.3rem;
    row-gap:2px;
    min-width:92px;
    padding:.45rem .7rem;
    font-size:.85rem;
    line-height:1.15;
    text-align:center;
  }
  .navbar .nav-btn > i{
    flex-basis:100%;
    text-align:center;
    font-size:1.2rem;
    line-height:1;
    margin:0 !important; /* anula los me-1/me-2 del marcado */
  }
}

/* ── Barra superior: papel entintado en vez del azul marino ──────────────── */
/* El layout del admin no acotaba la altura del logo (las standalone sí); con
   la marca cuadrada nueva hace falta, o sale a tamaño natural. */
.navbar-brand img{ height:54px; width:auto; }
@media (max-width:576px){ .navbar-brand img{ height:44px; } }

.navbar{
  background:rgba(16,19,18,.85);
}
:root[data-theme="light"] .navbar{
  background:rgba(250,250,248,.90);
}
.nav-btn.active, .nav-btn:focus{
  box-shadow:0 0 0 .12rem rgba(var(--bs-primary-rgb), .3);
}
.lang-pill a.active{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }

/* ── Páginas standalone (index de invitado y login) ───────────────────────
   Su CTA .btn-gradient llevaba degradado azul con texto oscuro fijo; en la
   familia va plano, en el acento, con el texto que contrasta según el tema. */
.btn-gradient{
  background:var(--brand);
  color:var(--on-brand);
}
.btn-gradient:hover{
  background:var(--brand2);
  color:var(--on-brand);
}

/* ── Marca en la barra: nombre + endoso junto a la X ─────────────────────── */
.navbar-brand{ display:flex; align-items:center; gap:.5rem; }
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.brand-name{
  font-family:'IBM Plex Serif', Georgia, serif;
  font-weight:600;
  font-size:1.15rem;
  color:var(--text);
  letter-spacing:.01em;
}
.brand-sub{
  font-size:.68rem;
  color:var(--muted);
}
@media (max-width:576px){
  .brand-sub{ display:none; } /* en móvil no cabe el endoso */
  .brand-name{ font-size:1rem; }
}

/* La insignia del hero (.badge-soft) traía azules fijos; pasa al acento. */
.badge-soft{
  color:var(--brand);
  background:rgba(87,184,148,.12);
  border-color:rgba(87,184,148,.35);
}
:root[data-theme="light"] .badge-soft{
  color:#10614A;
  background:rgba(16,97,74,.08);
  border-color:rgba(16,97,74,.30);
}

/* El titular con degradado azul fijo (#2888fe→#1e25eb) pasa al acento. */
.text-gradient{
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}