/* ==========================================================================
   BITGENIO — hoja de marca para gestion.bitgenio.com (octubre de 2026)

   Se carga DESPUÉS de bootstrap.min.css, style.css (Inspinia) y los CSS de
   plugins de la cabecera, y solo sobrescribe: no editar los CSS de Inspinia,
   Bootstrap ni vendor. Referencia: icarus-brandbook/bitgenio/bitgenio.css.

   La cargan, mediante aplicacion/views/_marca.php:
   - Panel y área de clientes (admin/plantilla.php, clientes/plantilla.php).
   - Accesos y recordatorios (acceso.php, recordar.php, firstrun.php).
   - Páginas públicas de renovación (body#page-top, Bootstrap 5): bloque final.

   Reglas de color:
   - #329FC1 (--genio) solo para gráficos y acentos, nunca texto sobre claro.
   - #1D6F8A (--genio-tinta) para texto, enlaces y botones sobre papel.
   - #FFD000 (--sol) solo para avisos importantes, siempre con texto en tinta.
   ========================================================================== */

/* ---------- Tipografías (autoalojadas en assets/fonts/bitgenio) ---------- */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/bitgenio/schibsted-grotesk-normal-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: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/bitgenio/schibsted-grotesk-normal-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: 'Schibsted Grotesk'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/bitgenio/schibsted-grotesk-italic-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: 'Schibsted Grotesk'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/bitgenio/schibsted-grotesk-italic-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; }
/* Satoshi (Fontshare): licencia ITF FFL en assets/fonts/bitgenio/FFL-Satoshi.txt. Se puede autoalojar, no redistribuir. */
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/bitgenio/satoshi-variable.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/bitgenio/ibm-plex-mono-normal-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: 400; font-display: swap; src: url(../fonts/bitgenio/ibm-plex-mono-normal-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: 500; font-display: swap; src: url(../fonts/bitgenio/ibm-plex-mono-normal-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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/bitgenio/ibm-plex-mono-normal-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; }

/* ---------- Variables ---------- */
:root {
  --papel: #F7F6EC;
  --papel-claro: #FDFCF7;      /* campos de formulario y botones claros, como .btn--light de la web */
  --piedra: #ECEADF;
  --tinta: #1B0F02;
  --tinta-2: #5E5646;
  --linea: rgba(27, 15, 2, .26);
  --linea-suave: rgba(27, 15, 2, .12);
  --genio: #329FC1;            /* gráficos y acentos; nunca texto sobre claro */
  --genio-tinta: #1D6F8A;      /* texto, enlaces y botones sobre papel (5,2:1) */
  --genio-noche: #0F3A48;
  --sol: #FFD000;              /* avisos importantes, con texto en tinta */
  /* Estados (sube/baja) armonizados con el papel; todos >= 4,5:1 con papel */
  --ok: #3E7B4F;
  --ko: #B23A2E;
  --aviso-texto: #8A6100;      /* texto de aviso sobre claro; el fondo de aviso es --sol */
  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --titulos: 'Satoshi', 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

/* ---------- Logotipo en texto: BITGEN10, el «10» en turquesa tinta ---------- */
.marca-logo {
  display: inline-block;
  font: 800 20px/1 var(--titulos);
  letter-spacing: .14em;
  margin-right: -.14em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.marca-logo .bits { color: var(--genio-tinta); }
a.marca-logo:hover, a.marca-logo:focus { color: var(--tinta); text-decoration: none; }
/* Cabecera del panel y del área de clientes */
.navbar-form-custom .marca-logo { line-height: 60px; padding-left: 6px; }
/* Accesos (login, recordar contraseña, primer acceso) */
.marca-logo--acceso { display: block; font-size: 40px; margin: 0 auto; }

/* ==========================================================================
   Base (Inspinia / Bootstrap 3)
   ========================================================================== */
body {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--tinta);
  background-color: var(--genio-noche);   /* se ve bajo el menú lateral */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--titulos); color: var(--tinta); }
h1, h2 { font-weight: 500; letter-spacing: -.02em; }
h3, h4, h5 { font-weight: 600; }
.font-bold, strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--genio-tinta); outline-offset: 2px; }
::selection { background: var(--sol); color: var(--tinta); }

a { color: var(--genio-tinta); }
a:hover, a:focus { color: var(--genio-noche); }
.text-muted, .help-block { color: var(--tinta-2); }
small, .small { color: inherit; }
hr { border-top-color: var(--linea-suave); }

/* Fondos: contenido sobre papel y piedra */
.gray-bg, .bg-muted { background-color: var(--piedra); }
.white-bg { background-color: var(--papel); }
/* Inspinia pinta el body con body:not(.mini-navbar) (#f3f3f4); se iguala esa especificidad */
body:not(.mini-navbar) { background-color: var(--genio-noche); }
body.gray-bg, body.gray-bg:not(.mini-navbar) { background-color: var(--piedra); border-top: 6px solid var(--genio); }   /* accesos, con la franja de la web */

/* ---------- Menú lateral: turquesa noche ---------- */
.navbar-static-side { background-color: var(--genio-noche); }
.navbar-static-side .nav > li > a { color: rgba(247, 246, 236, .78); font-family: var(--sans); font-weight: 500; }
.navbar-static-side .nav > li.active > a,
.navbar-static-side .nav > li > a:hover,
.navbar-static-side .nav > li > a:focus { color: var(--papel); }
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus { background-color: rgba(0, 0, 0, .18); color: var(--papel); }
.navbar-static-side .nav > li.active { border-left: 4px solid var(--genio); background: rgba(0, 0, 0, .22); }
ul.nav-second-level, .canvas-menu.mini-navbar .nav-second-level { background: rgba(0, 0, 0, .22); }
.nav-header { background: rgba(0, 0, 0, .2) none; border-bottom: 1px dashed rgba(247, 246, 236, .22); }
body.mini-navbar .nav-header { background-color: var(--genio-tinta); }
.nav-header a { color: var(--papel); }
.nav-header .text-muted { color: rgba(247, 246, 236, .7); }
.navbar-static-side .nav .open > a,
.navbar-static-side .nav .open > a:hover,
.navbar-static-side .nav .open > a:focus { background: transparent; }

/* ---------- Cabecera superior y título de página ---------- */
.navbar-static-top, .navbar-fixed-top, .white-bg .navbar-static-top { background: var(--papel); }
#page-wrapper > .row.border-bottom { border-bottom: 1px dashed var(--linea) !important; }
.border-bottom { border-bottom-color: var(--linea-suave) !important; }
.page-heading { background-color: var(--papel); border-bottom: 1px dashed var(--linea) !important; }
.page-heading h2 { font-weight: 500; }
.navbar-minimalize.btn-link, .navbar-minimalize.btn-link:hover { color: var(--tinta); }
.nav.navbar-right > li > a, .navbar-top-links li a { color: var(--tinta-2); }
.nav.navbar-right > li > a:hover { color: var(--tinta); }
.welcome-message { color: var(--tinta-2) !important; }
.breadcrumb { background-color: transparent; font: 400 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.breadcrumb > li + li:before { color: var(--linea); }
.breadcrumb > .active, .breadcrumb > .active strong { color: var(--tinta); font-weight: 500; }
.footer { background: var(--papel); border-top: 1px dashed var(--linea); color: var(--tinta-2); }
.footer strong { color: var(--tinta); }

/* ---------- Cajas (ibox) y paneles ---------- */
.ibox-title { background-color: var(--papel); border-color: var(--linea-suave); border-style: dashed none none; border-width: 1px 0 0; }
.ibox-title h5 { font-family: var(--titulos); font-weight: 600; color: var(--tinta); }
.ibox-content { background-color: var(--papel); border-color: var(--linea-suave); }
.ibox-title + .ibox-content { border-top-style: dashed; }
.ibox-content h1, .ibox-content h2 { font-weight: 500; }
.panel { background-color: var(--papel); }
.panel-default { border-color: var(--linea-suave); }
.panel-default > .panel-heading { background-color: var(--piedra); border-color: var(--linea-suave); color: var(--tinta); }
.well { background-color: var(--piedra); border-color: var(--linea-suave); box-shadow: none; }
.widget.style1, .widget { border-radius: 0; }
.modal-content { background-color: var(--papel); border-radius: 0; }
.inmodal .modal-body { background: var(--piedra); }
.list-group-item { background-color: var(--papel); border-color: var(--linea-suave); }
a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus { background-color: var(--genio-tinta); border-color: var(--genio-tinta); }
.nav-tabs > li > a { color: var(--tinta-2); }
.nav-tabs > li.active { border-left: 0; background: transparent; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--tinta); background: var(--papel); }
.tabs-container .panel-body { background: var(--papel); border-color: var(--linea-suave); }

/* ---------- Tablas: cabeceras como etiquetas, en mono ---------- */
.table > thead > tr > th {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-2);
  border-bottom: 1px solid var(--linea);
}
.table > tbody > tr > td, .table > tbody > tr > th,
.table > tfoot > tr > td, .table > tfoot > tr > th,
.table > thead > tr > td { border-top-color: var(--linea-suave); }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--linea-suave); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(27, 15, 2, .03); }
.table-hover > tbody > tr:hover { background-color: rgba(29, 111, 138, .07); }
.issue-tracker .btn-link, .issue-tracker .issue-info a { color: var(--genio-tinta); }

/* ---------- Botones: cuadrados, mono en mayúsculas ---------- */
.btn {
  border-radius: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Botones con clase de rejilla (p. ej. «Consultar» en Editar proyecto): la mono es más ancha y el texto se cortaba */
.btn[class*="col-"] { width: auto; min-width: 16.66%; }
.btn-xs { font-size: 10px; }
.btn-sm { font-size: 11px; }
.btn-lg { font-size: 14px; }
.btn-primary { background-color: var(--genio-tinta); border-color: var(--genio-tinta); color: var(--papel); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active:hover, .btn-primary.active:focus,
.open .dropdown-toggle.btn-primary { background-color: var(--genio-noche); border-color: var(--genio-noche); color: var(--papel); }
.btn-primary.disabled, .btn-primary[disabled], .btn-primary.disabled:hover, .btn-primary[disabled]:hover { background-color: var(--genio-tinta); border-color: var(--genio-tinta); opacity: .5; }
.btn-primary.btn-outline { color: var(--genio-tinta); background: transparent; }
.btn-primary.btn-outline:hover { color: var(--papel); background: var(--genio-tinta); }
.btn-info { background-color: var(--genio-noche); border-color: var(--genio-noche); color: var(--papel); }
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info { background-color: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.btn-info.btn-outline { color: var(--genio-noche); }
.btn-success { background-color: var(--ok); border-color: var(--ok); color: var(--papel); }
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active { background-color: #2F5F3C; border-color: #2F5F3C; color: var(--papel); }
.btn-success.btn-outline { color: var(--ok); }
.btn-danger { background-color: var(--ko); border-color: var(--ko); color: var(--papel); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active { background-color: #8E2C22; border-color: #8E2C22; color: var(--papel); }
.btn-danger.btn-outline { color: var(--ko); }
.btn-warning { background-color: var(--sol); border-color: var(--sol); color: var(--tinta); }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active { background-color: #E6BB00; border-color: #E6BB00; color: var(--tinta); }
.btn-warning.btn-outline { color: var(--aviso-texto); }
.btn-white, .btn-default { background: var(--papel-claro); border: 1px solid var(--linea); color: var(--tinta); }
.btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active,
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active,
.open .dropdown-toggle.btn-white { background: var(--piedra); border-color: var(--linea); color: var(--tinta); }
.btn-white.active { background: var(--genio-tinta); border-color: var(--genio-tinta); color: var(--papel); box-shadow: none; }
.btn-link { color: var(--genio-tinta); }
.btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active { color: var(--genio-noche); }
.btn-primary.dim, button.btn-primary.dim { box-shadow: inset 0 0 0 var(--genio-noche), 0 5px 0 0 var(--genio-noche), 0 10px 5px rgba(27, 15, 2, .3); }

/* ---------- Formularios ---------- */
.form-control, .single-line {
  background-color: var(--papel-claro);
  border: 1px solid rgba(27, 15, 2, .22);
  border-radius: 0;
  color: var(--tinta);
}
.form-control:focus, .single-line:focus { border-color: var(--genio-tinta); }
.form-control::placeholder { color: rgba(94, 86, 70, .8); }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: var(--piedra); }
.input-group-addon { background-color: var(--piedra); border-color: rgba(27, 15, 2, .22); border-radius: 0; color: var(--tinta-2); }
label, .control-label { color: var(--tinta); font-weight: 600; }
.has-success .form-control, .has-success .form-control:focus { border-color: var(--ok); }
.has-success .control-label, .has-success .help-block { color: var(--ok); }
.has-warning .form-control, .has-warning .form-control:focus { border-color: var(--aviso-texto); }
.has-warning .control-label, .has-warning .help-block { color: var(--aviso-texto); }
.has-error .form-control, .has-error .form-control:focus { border-color: var(--ko); }
.has-error .control-label, .has-error .help-block { color: var(--ko); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { background-color: var(--papel-claro); border-color: rgba(27, 15, 2, .22); border-radius: 0; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--genio-tinta); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--genio-tinta); color: var(--papel); }
.select2-dropdown { background-color: var(--papel); border-color: rgba(27, 15, 2, .22); border-radius: 0; }
.onoffswitch-label { border-color: var(--genio-tinta); }
.onoffswitch-inner:before { background-color: var(--genio-tinta); color: var(--papel); }
.onoffswitch-switch { border-color: var(--genio-tinta); }
.dropzone { border-color: var(--genio-tinta); background: var(--papel-claro); }
/* awesome-bootstrap-checkbox */
.checkbox-primary input[type="checkbox"]:checked + label::before,
.radio-primary input[type="radio"]:checked + label::after { background-color: var(--genio-tinta) !important; border-color: var(--genio-tinta) !important; }
.checkbox-success input[type="checkbox"]:checked + label::before { background-color: var(--ok) !important; border-color: var(--ok) !important; }

/* ---------- Etiquetas y contadores: mono en mayúsculas ---------- */
.label, .badge {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 0;
  background-color: #E2DFD3;
  color: var(--tinta-2);
}
.badge { border-radius: 10px; }
.label-primary, .badge-primary { background-color: var(--genio-tinta); color: var(--papel); }
.label-info, .badge-info { background-color: var(--genio-noche); color: var(--papel); }
.label-success, .badge-success { background-color: var(--ok); color: var(--papel); }
.label-danger, .badge-danger { background-color: var(--ko); color: var(--papel); }
.label-warning, .badge-warning, .label-warning-light, .badge-warning-light { background-color: var(--sol); color: var(--tinta); }
.label-inverse, .badge-inverse { background-color: var(--tinta); color: var(--papel); }
.label-white, .badge-white { background-color: var(--papel-claro); color: var(--tinta-2); }

/* ---------- Colores de texto y fondo de utilidad ---------- */
.text-navy, .text-primary, .category-list li a .text-navy { color: var(--genio-tinta); }
.text-info, .category-list li a .text-info { color: var(--genio-noche); }
.text-success { color: var(--ok); }
.text-danger { color: var(--ko); }
.text-warning, .category-list li a .text-warning { color: var(--aviso-texto); }
.bg-primary, .navy-bg { background-color: var(--genio-tinta); color: var(--papel); }
.bg-info, .lazur-bg { background-color: var(--genio-noche); color: var(--papel); }
.bg-success, .blue-bg { background-color: var(--ok); color: var(--papel); }
.bg-danger, .red-bg { background-color: var(--ko); color: var(--papel); }
.bg-warning, .yellow-bg { background-color: var(--sol); color: var(--tinta); }
.panel-primary { border-color: var(--genio-tinta); }
.panel-primary > .panel-heading { background-color: var(--genio-tinta); border-color: var(--genio-tinta); }
.panel-info { border-color: var(--genio-noche); }
.panel-info > .panel-heading { background-color: var(--genio-noche); border-color: var(--genio-noche); }
.panel-success { border-color: var(--ok); }
.panel-success > .panel-heading { background-color: var(--ok); border-color: var(--ok); }
.panel-danger { border-color: var(--ko); }
.panel-danger > .panel-heading { background-color: var(--ko); border-color: var(--ko); }
.panel-warning { border-color: var(--sol); }
.panel-warning > .panel-heading { background-color: var(--sol); border-color: var(--sol); color: var(--tinta); }
.progress { background-color: var(--piedra); border-radius: 0; box-shadow: none; }
.progress-bar { background-color: var(--genio); }
.progress-bar-success { background-color: var(--ok); }
.progress-bar-danger { background-color: var(--ko); }
.progress-bar-warning { background-color: var(--sol); }
.progress-bar-info { background-color: var(--genio-noche); }

/* ---------- Avisos ---------- */
.alert { border-radius: 0; }
.alert-warning { background-color: var(--sol); border-color: var(--sol); color: var(--tinta); }
.alert-warning a, .alert-warning .alert-link { color: var(--tinta); }
.alert-info { background-color: #DCE8EA; border-color: rgba(29, 111, 138, .35); color: var(--genio-noche); }
.alert-success { background-color: #E2EAD9; border-color: rgba(62, 123, 79, .35); color: #2F5F3C; }
.alert-danger { background-color: #F2DED8; border-color: rgba(178, 58, 46, .35); color: #8E2C22; }

/* ---------- Menús desplegables, paginación, tooltips ---------- */
.dropdown-menu { background-color: var(--papel); border-radius: 0; box-shadow: 0 8px 24px -8px rgba(27, 15, 2, .35); }
.dropdown-menu > li > a { color: var(--tinta); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--piedra); color: var(--tinta); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: var(--genio-tinta); color: var(--papel); }
.dropdown-menu .divider { background-color: var(--linea-suave); }
.pagination > li > a, .pagination > li > span { background-color: var(--papel-claro); border-color: var(--linea-suave); color: var(--tinta); font-family: var(--mono); font-size: 12px; }
.pagination > li > a:hover, .pagination > li > span:hover { background-color: var(--piedra); color: var(--tinta); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { background-color: var(--genio-tinta); border-color: var(--genio-tinta); color: var(--papel); }
.pagination > li:first-child > a, .pagination > li:first-child > span,
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0; }
.tooltip-inner { background-color: var(--tinta); color: var(--papel); border-radius: 0; font-family: var(--sans); }
.tooltip.top .tooltip-arrow { border-top-color: var(--tinta); }
.tooltip.right .tooltip-arrow { border-right-color: var(--tinta); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--tinta); }
.tooltip.left .tooltip-arrow { border-left-color: var(--tinta); }
.pace .pace-progress { background: var(--genio); }

/* ---------- Plugins (sus CSS se cargan al final del body: por eso los !important) ---------- */
/* DataTables */
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--tinta-2); }
.html5buttons a { background: var(--papel-claro); border-color: var(--linea); color: var(--tinta); }
/* Datepicker y daterangepicker */
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active,
.datepicker table tr td.active.active:hover, .datepicker table tr td span.active, .datepicker table tr td span.active:hover,
.daterangepicker td.active, .daterangepicker td.active:hover {
  background: var(--genio-tinta) !important; border-color: var(--genio-tinta) !important; color: var(--papel) !important; text-shadow: none !important;
}
.datepicker table tr td.today, .datepicker table tr td.today:hover { background: var(--sol) !important; color: var(--tinta) !important; }
/* Toastr */
#toast-container > .toast { border-radius: 0; box-shadow: 0 8px 24px -8px rgba(27, 15, 2, .45); }
#toast-container > .toast-success { background-color: var(--ok); }
#toast-container > .toast-error { background-color: var(--ko); }
#toast-container > .toast-info { background-color: var(--genio-noche); }
#toast-container > .toast-warning { background-color: var(--sol); color: var(--tinta); }
/* SweetAlert */
.sweet-alert { background-color: var(--papel); border-radius: 0; font-family: var(--sans); }
.sweet-alert h2 { font-family: var(--titulos); color: var(--tinta); }
.sweet-alert p { color: var(--tinta-2); }
.sweet-alert button { border-radius: 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.sweet-alert button.cancel { background-color: var(--piedra); color: var(--tinta); }
/* Select2, summernote */
.note-editor.note-frame { border-color: rgba(27, 15, 2, .22); }

/* ---------- Accesos (login) ---------- */
.passwordBox .ibox-content, .loginColumns .ibox-content { border: 1px dashed var(--linea); }
.passwordBox h3 { font-weight: 600; }

/* ---------- Móvil ---------- */
@media (max-width: 768px) {
  /* Inspinia oculta .navbar-form-custom en móvil; aquí solo contiene el logotipo, así que se muestra */
  .navbar-form-custom { display: block; width: auto; }
  .navbar-form-custom .marca-logo { font-size: 17px; }
  .marca-logo--acceso { font-size: 32px; }
}
@media (max-width: 480px) {
  .navbar-top-links .welcome-message { display: none; }
}

/* ==========================================================================
   Páginas públicas de renovación (cron/confirmacion): Bootstrap 5 + Freelancer.
   Se distinguen por body#page-top.
   ========================================================================== */
body#page-top {
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.55 var(--sans);
  border-top: 0;
}
body#page-top h1, body#page-top h2, body#page-top h3,
body#page-top h4, body#page-top h5, body#page-top h6 { font-family: var(--titulos); font-weight: 600; color: var(--tinta); }
body#page-top #mainNav {
  background-color: var(--papel) !important;
  border-top: 6px solid var(--genio);
  border-bottom: 1px dashed var(--linea);
  font-family: var(--sans);
  padding-top: 18px;
  padding-bottom: 18px;
}
body#page-top #mainNav .navbar-brand.marca-logo { color: var(--tinta); font-size: clamp(22px, 2vw, 28px); letter-spacing: .14em; margin: 0 auto; padding: 0; }
body#page-top #mainNav .navbar-brand.marca-logo .bits { color: var(--genio-tinta); }
body#page-top .page-section { padding-top: 9rem; }
body#page-top .form-control, body#page-top .form-select {
  background-color: var(--papel-claro);
  border: 1px solid rgba(27, 15, 2, .3);
  border-radius: 0;
  color: var(--tinta);
  font-family: var(--sans);
}
body#page-top .form-control:focus, body#page-top .form-select:focus { border-color: var(--genio-tinta); box-shadow: 0 0 0 3px rgba(29, 111, 138, .2); }
body#page-top .btn-primary {
  background-color: var(--genio-noche);
  border-color: var(--genio-noche);
  color: var(--papel);
  padding: 14px 22px;
  font-size: 13px;
}
body#page-top .btn-primary:hover, body#page-top .btn-primary:focus, body#page-top .btn-primary:active {
  background-color: var(--tinta); border-color: var(--tinta); color: var(--papel); box-shadow: none;
}
body#page-top .copyright {
  background-color: var(--genio-noche);
  color: var(--papel) !important;
  font-family: var(--mono);
  letter-spacing: .04em;
}

/* ---------- Elegir qué se renueva (renovar.php) y agradecimiento ---------- */
body#page-top .renovar { padding-bottom: 6rem; }
.renovar-kicker {
  margin: 0 0 14px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--genio-tinta);
}
body#page-top .renovar-titulo { margin: 0 0 16px; font: 700 clamp(28px, 3.4vw, 38px)/1.15 var(--titulos); letter-spacing: -.01em; }
.renovar-intro { margin: 0 0 36px; font-size: 18px; line-height: 1.55; color: var(--tinta-2); }
.renovar-intro b { color: var(--tinta); }
.renovar a { color: var(--genio-tinta); }

.renovar-lista { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px dashed var(--linea); }
.renovar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px dashed var(--linea);
}
.renovar-dato { display: grid; gap: 4px; min-width: 0; }
.renovar-dominio { font: 700 22px/1.2 var(--titulos); color: var(--tinta); overflow-wrap: anywhere; }
.renovar-servicio { font-size: 15px; color: var(--tinta-2); }
.renovar-fecha { font: 400 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--tinta-2); }

/* Interruptor de dos opciones: los radios quedan accesibles pero ocultos, se ve la etiqueta */
.renovar-opciones { display: flex; flex: none; margin: 0; padding: 0; border: 0; }
.renovar-opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.renovar-opciones label {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  background: var(--papel-claro);
  font: 500 13px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-2);
  cursor: pointer;
  white-space: nowrap;
}
.renovar-opciones label + input + label { border-left: 0; }
.renovar-opciones label:hover { background: var(--piedra); color: var(--tinta); }
.renovar-opciones input:focus-visible + label { outline: 2px solid var(--genio-tinta); outline-offset: 2px; }
.renovar-opciones input[value="si"]:checked + label { background: var(--genio-tinta); border-color: var(--genio-tinta); color: var(--papel); }
.renovar-opciones input[value="no"]:checked + label { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
/* El servicio que se da de baja pierde peso */
.renovar-item:has(input[value="no"]:checked) .renovar-dominio { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--tinta-2); }

/* El aviso solo se vuelve amarillo Sol cuando hay algo marcado para no renovar */
.renovar-aviso {
  margin: 0 0 28px;
  padding: 14px 16px;
  border-left: 3px solid var(--linea);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-2);
}
.hay-bajas .renovar-aviso { background: var(--sol); border-left-color: var(--tinta); color: var(--tinta); }

.renovar-pie { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.renovar-resumen { margin: 0; font: 400 14px/1.4 var(--mono); letter-spacing: .02em; color: var(--tinta); }
.renovar-ayuda { margin: 40px 0 0; font-size: 15px; color: var(--tinta-2); }

@media (max-width: 575px) {
  body#page-top .page-section.renovar { padding-top: 7rem; }
  .renovar-item { flex-direction: column; align-items: stretch; gap: 14px; }
  .renovar-opciones label { flex: 1; text-align: center; }
  .renovar-pie .btn { width: 100%; }
}

/* ---------- Separadores discontinuos (Inspinia) ---------- */
.hr-line-dashed { border-top: 1px dashed var(--linea); background-color: transparent; }
.hr-line-solid { border-top-color: var(--linea-suave); }