/* =========================================================
   G-Risk — Paleta corporativa
   Pantalla de acceso: Azul marino #0A2342 · Naranja #FF8C42
   Sistema (post-login): Pizarra #1c2833 · Verde seguridad #22c55e
   Se carga DESPUÉS de bootstrap.min.css y app.min.css.
   ========================================================= */

:root{
  /* ── Paleta login (sin cambios) ── */
  --cer-navy:          #0A2342;
  --cer-navy-2:        #123660;
  --cer-navy-3:        #1b4a7a;
  --cer-white:         #FFFFFF;
  --cer-orange:        #FF8C42;
  --cer-orange-dark:   #e8732a;
  --cer-text-muted:    #6c7585;

  /* ── Paleta G-Risk D — Pizarra + Verde seguridad ── */
  --grisk-slate:       #1c2833;   /* Pizarra oscuro — sidebar, topbar, card headers */
  --grisk-slate-mid:   #2c3e50;   /* Pizarra medio — hovers, bordes */
  --grisk-slate-light: #3d5166;   /* Pizarra claro — elementos de superficie */
  --grisk-green:       #22c55e;   /* Verde seguridad ANSI Z535 — accento principal */
  --grisk-green-dark:  #16a34a;   /* Verde oscuro — botones (contraste WCAG AA) */
  --grisk-green-tint:  #dcfce7;   /* Verde muy claro — fondos de badges "cumple" */

  /* ── Override Bootstrap --bs-primary → verde G-Risk ──
     #16a34a sobre blanco = ratio ~4.5:1 (WCAG AA mínimo).
     Se sobrescribe aquí para que btn-primary, badges, links
     y focus-rings usen el verde en vez del azul Dashonic.
  ── */
  --bs-primary:          #16a34a;
  --bs-primary-rgb:      22, 163, 74;
  --bs-link-color:       #16a34a;
  --bs-link-color-rgb:   22, 163, 74;
  --bs-link-hover-color: #15803d;
}

/* ---- Fondo general de página (detrás de la tarjeta) ---- */
.authentication-bg{
  background-image: none;
  background-color: #0d1a26;
}
.authentication-bg .bg-overlay.bg-white{
  background-color: #0d1a26 !important;
  opacity: 1;
}

/* ---- Logo de marca (texto, sin archivo de imagen aún) ---- */
.cer-logo-text{
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--cer-navy);
}
.cer-logo-text.cer-logo-on-dark{ color: var(--cer-white); }
.text-cer-orange{ color: var(--cer-orange); }

/* ---- Tarjeta de autenticación tipo "cover" (split panel) ---- */
.auth-cover-card{
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(10,35,66,.18);
}

/* ── Panel izquierdo: branding G-Risk (sin imagen externa) ── */
.grisk-cover-panel{
  background: linear-gradient(145deg, #0d1a26 0%, #111820 55%, #0c2214 100%);
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

/* Ruido de textura sutil mediante radial-gradient */
.grisk-cover-panel::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(34,197,94,.07) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 90%, rgba(34,197,94,.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Borde verde sutil a la derecha */
.grisk-cover-panel::after{
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(34,197,94,.35), transparent);
}

.grisk-cover-logo{
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1;
}
.text-cer-green{ color: #22c55e !important; }

.grisk-cover-tagline{
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}

.grisk-cover-illustration{
  position: relative;
  z-index: 1;
}

.grisk-cover-features{
  position: relative;
  z-index: 1;
}

/* Panel derecho: formulario sobre fondo pizarra oscuro (G-Risk D) */
.cer-form-panel{
  background: linear-gradient(155deg, #111820 0%, #0c1219 100%);
}

.cer-form-panel .form-floating-custom .form-control{
  background-color: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: var(--cer-white);
}
.cer-form-panel .form-floating-custom .form-control:focus{
  border-color: var(--cer-orange);
  box-shadow: 0 0 0 .15rem rgba(255,140,66,.25);
  background-color: rgba(255,255,255,.1);
}
.cer-form-panel .form-floating-custom .form-control::placeholder{ color: rgba(255,255,255,.35); }
.cer-form-panel .form-floating-custom label{ color: rgba(255,255,255,.55); }
.cer-form-panel .form-floating-icon i{ color: rgba(255,255,255,.55); }

.cer-form-panel .form-check-input{
  background-color: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.3);
}
.cer-form-panel .form-check-input:checked{
  background-color: var(--cer-orange);
  border-color: var(--cer-orange);
}
.cer-form-panel .form-check-label{ color: rgba(255,255,255,.7); }

.cer-form-panel .alert-cer-info{
  background-color: rgba(255,140,66,.12);
  border: 1px solid rgba(255,140,66,.35);
  color: var(--cer-white);
}
.cer-form-panel .alert-warning{
  background-color: rgba(255,193,7,.15);
  border-color: rgba(255,193,7,.4);
  color: #ffe9b3;
}
.cer-form-panel .alert-warning a{ color: var(--cer-white); text-decoration: underline; }

/* ---- Botón principal (verde G-Risk) ---- */
.btn-cer-primary{
  background-color: var(--grisk-green-dark);
  border-color: var(--grisk-green-dark);
  color: var(--cer-white);
  font-weight: 600;
  border-radius: .5rem;
  padding: .65rem 1.5rem;
  transition: background-color .2s, border-color .2s;
}
.btn-sm.btn-cer-primary,
.btn-cer-primary.btn-sm {
  padding: .25rem .75rem;
  font-size: .8125rem;
  border-radius: .4rem;
}
.btn-cer-primary:hover,
.btn-cer-primary:focus,
.btn-cer-primary:active{
  background-color: #15803d;
  border-color: #15803d;
  color: var(--cer-white);
}

/* ---- Tablas responsivas — sin scroll horizontal ---- */
/* md+ : table-layout fixed, texto largo truncado con ellipsis  */
/* xs/sm: table-layout auto, avatar oculto, más espacio al texto */
.grisk-table { width: 100%; table-layout: fixed; }
.grisk-table th,
.grisk-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grisk-table th { overflow: visible; }  /* cabeceras no se cortan */
.grisk-table .grisk-col-actions {
    width: 130px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* xs/sm — layout libre, ocultar elementos no esenciales */
@media (max-width: 767.98px) {
    .grisk-table             { table-layout: auto; }
    .grisk-table td,
    .grisk-table th          { white-space: normal; overflow: visible; }
    .grisk-avatar            { display: none !important; }
    .grisk-table .badge      { font-size: .65rem; padding: .15rem .35rem; white-space: nowrap; }
    .grisk-col-actions       { width: 90px !important; }
}

/* ---- Tooltip CSS — diseño idéntico a Bootstrap/Dashonic ---- */
[data-tip] {
    position: relative;
}
/* Burbuja */
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.9);
    color: #fff;
    font-family: var(--bs-font-sans-serif, system-ui, sans-serif);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.4;
    padding: .25rem .5rem;
    border-radius: .25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s linear;
    z-index: 1080;
}
/* Flecha hacia abajo */
[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0,0,0,.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s linear;
    z-index: 1080;
}
[data-tip]:hover::after,
[data-tip]:hover::before {
    opacity: 1;
}

/* ---- Enlaces de acento naranja ---- */
.cer-link{
  color: var(--cer-orange);
  text-decoration: underline;
  font-weight: 500;
}
.cer-link:hover{ color: var(--cer-orange-dark); }

/* ---- Pie de página ---- */
.cer-footer{ color: #6c7585; font-size: .82rem; }
.cer-footer a{ color: var(--cer-navy); }


/* =========================================================
   Dashboard interno (post-login) — demo de navegación
   Sidebar y topbar oscuros, recoloreados a la paleta corporativa
   mediante las variables CSS que ya expone Dashonic
   (data-sidebar="dark" / data-topbar="dark").
   ========================================================= */

/* ── Topbar oscuro — fondo pizarra (reemplaza el azul Dashonic #03314d) ── */
[data-topbar=dark]{
  --bs-header-dark-bg:       var(--grisk-slate);
  --bs-header-dark-item-color: rgba(255,255,255,.85);
}

/* Forzar el fondo del topbar (la variable no siempre llega al elemento) */
[data-topbar=dark] #page-topbar{
  background-color: var(--grisk-slate) !important;
  border-bottom: 1px solid var(--grisk-slate-mid) !important;
  box-shadow: 0 1px 0 rgba(34,197,94,.15) !important;
}

/* Íconos y texto en el topbar oscuro */
[data-topbar=dark] .header-item,
[data-topbar=dark] .noti-icon i,
[data-topbar=dark] .user-name,
[data-topbar=dark] .bx-menu {
  color: rgba(255,255,255,.85) !important;
}
[data-topbar=dark] .user-sub-title{ color: rgba(255,255,255,.5) !important; }

/* Punto de notificación */
[data-topbar=dark] .noti-dot{ background-color: var(--grisk-green) !important; }

/* Sidebar dark — se deja por compatibilidad pero en G-Risk usamos data-sidebar=brand */
[data-sidebar=dark]{
  --bs-sidebar-dark-bg:                       var(--grisk-slate);
  --bs-sidebar-dark-menu-item-active-bg-color: rgba(34,197,94,.1);
  --bs-sidebar-dark-menu-item-active-color:    var(--grisk-green);
}

/* Logo de texto dentro de las cajas de marca (topbar y sidebar) */
.navbar-brand-box .cer-logo-text{
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.4px;
}
.navbar-brand-box .cer-logo-sm-text{
  font-size: 1.4rem;
  font-weight: 800;
  color: #22c55e;
  width: 100%;
  text-align: center;
  display: inline-block;
}

/* Avatar con iniciales (usuario conectado) */
.cer-avatar-initials{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cer-orange);
  color: var(--cer-white);
  font-weight: 700;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Encabezado del dropdown de usuario — pizarra oscuro */
.cer-dropdown-header{ background: var(--grisk-slate); }

/* Iconos de KPI */
.cer-kpi-icon{
  width: 46px;
  height: 46px;
  border-radius: .65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.bg-cer-orange-subtle{ background-color: rgba(255,140,66,.15); }
.text-cer-orange{ color: var(--cer-orange) !important; }

/* ── Botones primarios → verde oscuro (#16a34a) ── */
.btn-primary{
  background-color: var(--grisk-green-dark) !important;
  border-color:     var(--grisk-green-dark) !important;
  color:            #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active{
  background-color: #15803d !important;
  border-color:     #166534 !important;
  color:            #fff !important;
}
.btn-primary:focus-visible{
  box-shadow: 0 0 0 .25rem rgba(22,163,74,.35) !important;
}
.btn-outline-primary{
  color:        var(--grisk-green-dark) !important;
  border-color: var(--grisk-green-dark) !important;
}
.btn-outline-primary:hover{
  background-color: var(--grisk-green-dark) !important;
  color: #fff !important;
}

/* ── Links del sistema → verde oscuro ── */
a:not(.dropdown-item):not(.nav-link):not(.btn):not([class*="badge"]):not([class*="breadcrumb"]):not([class*="text-"]) {
  color: var(--grisk-green-dark);
}
a:not(.dropdown-item):not(.nav-link):not(.btn):not([class*="badge"]):not([class*="breadcrumb"]):not([class*="text-"]):hover {
  color: #15803d;
}

/* Breadcrumb link → verde */
.breadcrumb-item a { color: var(--grisk-green-dark) !important; }

/* ── Focus rings → verde ── */
.form-control:focus,
.form-select:focus{
  border-color: var(--grisk-green) !important;
  box-shadow: 0 0 0 .15rem rgba(34,197,94,.2) !important;
}

/* ── Badges bg-primary → verde ── */
.badge.bg-primary,
.badge.text-bg-primary{
  background-color: var(--grisk-green-dark) !important;
  color: #fff !important;
}

/* ── Paginación activa → verde ── */
.page-item.active .page-link{
  background-color: var(--grisk-green-dark) !important;
  border-color:     var(--grisk-green-dark) !important;
}
.page-link{ color: var(--grisk-green-dark) !important; }
.page-link:hover{ color: #15803d !important; }

/* Fondo del área de contenido */
.page-content{ background-color: #f4f7fb; }

/* Card-headers con fondo sólido — forzar texto blanco (Dashonic override) */
.card-header.bg-danger h6,
.card-header.bg-danger .h6,
.card-header.bg-danger p,
.card-header.bg-warning h6,
.card-header.bg-warning .h6,
.card-header.bg-success h6,
.card-header.bg-success .h6,
.card-header.bg-primary h6,
.card-header.bg-primary .h6,
.card-header.bg-dark h6,
.card-header.bg-dark .h6 {
  color: #fff !important;
}
.card-header.bg-danger svg,
.card-header.bg-danger i[data-feather],
.card-header.bg-warning svg,
.card-header.bg-warning i[data-feather],
.card-header.bg-success svg,
.card-header.bg-success i[data-feather],
.card-header.bg-primary svg,
.card-header.bg-primary i[data-feather],
.card-header.bg-dark svg,
.card-header.bg-dark i[data-feather] {
  color: #fff !important;
  stroke: #fff !important;
}

/* =========================================================
   Flatpickr — Paleta G-Risk D (Pizarra + Verde seguridad)
   ========================================================= */

/* Cabecera del calendario (mes/año + flechas) */
.flatpickr-months {
  background: var(--grisk-slate) !important;
  border-radius: 5px 5px 0 0;
}
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  background: var(--grisk-slate) !important;
  color: #fff !important;
  fill: #fff !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: var(--grisk-slate-mid) !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--grisk-green) !important;
}
.flatpickr-current-month,
.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year {
  color: #fff !important;
  font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--grisk-slate) !important;
  color: #fff !important;
}
.numInputWrapper:hover,
.numInputWrapper span:hover {
  background: rgba(255,255,255,.1) !important;
}
.numInputWrapper span svg { fill: rgba(255,255,255,.7) !important; }

/* Nombres de días (Lun Mar …) */
.flatpickr-weekdays { background: var(--grisk-slate-mid) !important; }
span.flatpickr-weekday {
  background: var(--grisk-slate-mid) !important;
  color: rgba(255,255,255,.75) !important;
  font-weight: 600;
}

/* Días del mes */
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(34,197,94,.15) !important;
  border-color: rgba(34,197,94,.3) !important;
  color: #1c2833 !important;
}

/* Hoy */
.flatpickr-day.today {
  border-color: var(--grisk-green) !important;
  color: var(--grisk-green-dark) !important;
  font-weight: 700;
}
.flatpickr-day.today:hover {
  background: var(--grisk-green) !important;
  border-color: var(--grisk-green) !important;
  color: #fff !important;
}

/* Día seleccionado */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--grisk-green-dark) !important;
  border-color: var(--grisk-green-dark) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Días fuera del mes actual — más apagados */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(0,0,0,.2) !important;
}

/* Borde del contenedor */
.flatpickr-calendar {
  border: 1px solid var(--grisk-slate-mid) !important;
  box-shadow: 0 4px 16px rgba(17,24,32,.18) !important;
  border-radius: 6px !important;
  overflow: hidden;
}
.flatpickr-innerContainer { border-radius: 0 0 5px 5px; }