/* =========================================================================
   COMPLIANCE21 — REBRAND GLASSMORPHISM
   Área: COMPONENTS (tarjetas, botones, formularios, pestañas, tablas, modales)
   Archivo: control/assets/css/rebrand-components.css

   Re-skin por CSS puro: sobrescribe la plantilla UBold + Bootstrap 3.
   Se carga DESPUÉS de los CSS de UBold para ganar la cascada.
   NO se toca HTML, JS ni PHP (salvo el <link> en cabecera.php / index.php).
   Valores (color, blur, borde, sombra, radio) copiados del mockup aprobado
   "rediseno-compliance21.html".
   ========================================================================= */

/* ===== SISTEMA DE TOKENS GLASSMORPHISM (compartido, NO cambiar los valores) ===== */
:root{
  --bg1:#eef2f8; --bg2:#f6f8fc; --bg3:#eef3f9;
  --ink:#1b2434; --ink-2:#3d475b; --muted:#6b7488;
  --glass:rgba(255,255,255,.88); --glass-2:rgba(255,255,255,.94); --glass-hi:#ffffff;
  --border:rgba(23,32,49,.10); --border-in:rgba(23,32,49,.07); --line:rgba(23,32,49,.08);
  --accent:#2f5fc7; --accent-2:#4d7ce0; --accent-soft:rgba(47,95,199,.10);
  --low:#2fa860; --mid:#dca11f; --high:#e07b2b; --crit:#d23b3b;
  --low-s:rgba(47,168,96,.13); --mid-s:rgba(220,161,31,.15); --high-s:rgba(224,123,43,.14); --crit-s:rgba(210,59,59,.13);
  --shadow:0 1px 2px rgba(23,40,80,.06), 0 10px 26px -14px rgba(23,40,80,.20);
  --shadow-sm:0 1px 2px rgba(23,40,80,.08);
  --blur:9px; --radius:14px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --blob-a:rgba(59,111,212,.42); --blob-b:rgba(53,184,201,.32); --blob-c:rgba(240,168,90,.28); --blob-d:rgba(120,90,220,.24);

  /* Gradientes de acento (mapean a los g-* del mockup: launcher y botones) */
  --g-blue:linear-gradient(135deg,#3b6fd4,#5d92ec);
  --g-amber:linear-gradient(135deg,#e0932b,#eab958);
  --g-green:linear-gradient(135deg,#2fa860,#57c983);
  --g-violet:linear-gradient(135deg,#6a5ae0,#9384f0);
  --g-teal:linear-gradient(135deg,#2aa6b8,#4fc9d9);
  --g-rose:linear-gradient(135deg,#d2517f,#ec78a1);
  --g-red:linear-gradient(135deg,#d23b3b,#e56a6a);
  --g-slate:linear-gradient(135deg,#2d3748,#4a5568);
}
/* --- Dark mode: sistema (respeta el toggle explícito light) --- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg1:#0c1120; --bg2:#0f1626; --bg3:#111a2e;
  --ink:#e9edf5; --ink-2:#bcc4d4; --muted:#7d879c;
  --glass:rgba(28,38,58,.52); --glass-2:rgba(32,44,68,.66); --glass-hi:rgba(44,58,86,.7);
  --border:rgba(255,255,255,.09); --border-in:rgba(255,255,255,.05); --line:rgba(255,255,255,.07);
  --accent:#6f9bef; --accent-2:#8db1f5; --accent-soft:rgba(111,155,239,.16);
  --low:#4bc57e; --mid:#e6bd52; --high:#ec9256; --crit:#e56a6a;
  --low-s:rgba(75,197,126,.14); --mid-s:rgba(230,189,82,.14); --high-s:rgba(236,146,86,.14); --crit-s:rgba(229,106,106,.15);
  --shadow:0 4px 16px -6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.75);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
  --blob-a:rgba(59,111,212,.36); --blob-b:rgba(53,184,201,.20); --blob-c:rgba(240,168,90,.16); --blob-d:rgba(140,110,240,.30);
}}
/* --- Dark mode: toggle explícito --- */
:root[data-theme="dark"]{
  --bg1:#0c1120; --bg2:#0f1626; --bg3:#111a2e;
  --ink:#e9edf5; --ink-2:#bcc4d4; --muted:#7d879c;
  --glass:rgba(28,38,58,.52); --glass-2:rgba(32,44,68,.66); --glass-hi:rgba(44,58,86,.7);
  --border:rgba(255,255,255,.09); --border-in:rgba(255,255,255,.05); --line:rgba(255,255,255,.07);
  --accent:#6f9bef; --accent-2:#8db1f5; --accent-soft:rgba(111,155,239,.16);
  --low:#4bc57e; --mid:#e6bd52; --high:#ec9256; --crit:#e56a6a;
  --low-s:rgba(75,197,126,.14); --mid-s:rgba(230,189,82,.14); --high-s:rgba(236,146,86,.14); --crit-s:rgba(229,106,106,.15);
  --shadow:0 4px 16px -6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.75);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
  --blob-a:rgba(59,111,212,.36); --blob-b:rgba(53,184,201,.20); --blob-c:rgba(240,168,90,.16); --blob-d:rgba(140,110,240,.30);
}

/* Respeto por usuarios que reducen movimiento */
@media (prefers-reduced-motion:reduce){
  .card-box,.btn,.menu-isotope .menu-link,.nav-tabs>li>a,.table tbody tr{transition:none !important;}
}


/* =========================================================================
   1. TARJETAS — .card-box  (equivale a .card del mockup)
   Vidrio translúcido con blur, borde claro, radio grande, sombra difusa y
   un fino highlight superior.
   ========================================================================= */
.card-box{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  margin-bottom:20px;
  position:relative;
}


/* =========================================================================
   2. TÍTULOS DE PÁGINA — .page-title / .page-title-alt  (equivale a .pageh)
   ========================================================================= */
.page-title{
  color:var(--ink);
  font-family:var(--sans);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:2px 0 2px;
}
.page-title-alt{
  color:var(--muted);
  font-size:13.5px;
  font-weight:400;
  margin-top:4px;
  margin-bottom:20px;
}
/* Cabecera de tarjeta interna (títulos tipo header-title dentro de card) */
.card-box .header-title{
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.01em;
}


/* =========================================================================
   3. BOTONES — .btn y variantes
   Radio 12px, peso 600, sin gradientes chillones de UBold. Gradientes suaves
   coherentes con la paleta y sombra de color puntual.
   ========================================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  line-height:1.2;
  border-radius:12px !important;
  font-family:var(--sans);
  font-weight:600;
  border:1px solid transparent;
  padding:9px 16px;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, filter .16s ease;
  outline:none;
  vertical-align:middle;
  text-decoration:none;
}
.btn:focus,.btn:active:focus,.btn.active:focus{outline:none;}
.btn-sm,.btn-xs{border-radius:10px !important;padding:6px 12px;}

/* Icono dentro de botón: nunca solapado, siempre centrado con el texto.
   El gap del .btn ya separa icono y texto; el margin de fa-fw se neutraliza. */
.btn > i,.btn i{line-height:1;vertical-align:middle;}
.btn > i.fa-fw{margin:0;}
/* Botón que es SOLO icono (sin texto): cuadrado y centrado */
.btn-icon,.btn.icon-only{
  width:38px;height:38px;padding:0;
}
.btn-icon.btn-sm,.btn-icon.btn-xs{width:32px;height:32px;}
.btn-icon > i,.btn.icon-only > i{margin:0;}
/* waves-effect no debe alterar el flujo del contenido del botón */
.btn.waves-effect{overflow:hidden;}

/* Elevación leve en hover para todos los botones de color */
.btn-primary:hover,.btn-info:hover,.btn-success:hover,.btn-danger:hover,
.btn-warning:hover,.btn-inverse:hover,.btn-purple:hover,.btn-pink:hover{
  transform:translateY(-1px);
}
.btn-primary:active,.btn-info:active,.btn-success:active,.btn-danger:active,
.btn-warning:active,.btn-inverse:active,.btn-purple:active,.btn-pink:active{
  transform:translateY(0);
}

/* -- Primario / Info -> azul acento -- */
.btn-primary,.btn-primary:focus,.btn-primary:active,.btn-primary.active,
.btn-info,.btn-info:focus,.btn-info:active,.btn-info.active,
.open>.dropdown-toggle.btn-primary,.open>.dropdown-toggle.btn-info{
  background:var(--g-blue) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 8px 18px -8px var(--accent);
}
.btn-primary:hover,.btn-info:hover{box-shadow:0 10px 22px -8px var(--accent);}

/* -- Éxito -> verde (--low) -- */
.btn-success,.btn-success:focus,.btn-success:active,.btn-success.active,
.open>.dropdown-toggle.btn-success{
  background:var(--g-green) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 8px 18px -8px rgba(47,168,96,.9);
}

/* -- Peligro -> rojo (--crit) -- */
.btn-danger,.btn-danger:focus,.btn-danger:active,.btn-danger.active,
.open>.dropdown-toggle.btn-danger{
  background:var(--g-red) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 8px 18px -8px rgba(210,59,59,.9);
}

/* -- Aviso -> ámbar (--mid) -- */
.btn-warning,.btn-warning:focus,.btn-warning:active,.btn-warning.active,
.open>.dropdown-toggle.btn-warning{
  background:var(--g-amber) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 8px 18px -8px rgba(224,147,43,.9);
}

/* -- Inverso -> pizarra oscura -- */
.btn-inverse,.btn-inverse:focus,.btn-inverse:active,.btn-inverse.active,
.open>.dropdown-toggle.btn-inverse{
  background:var(--g-slate) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 8px 18px -8px rgba(45,55,72,.9);
}

/* -- Púrpura -> violeta -- */
.btn-purple,.btn-purple:focus,.btn-purple:active,.btn-purple.active,
.open>.dropdown-toggle.btn-purple{
  background:var(--g-violet) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 8px 18px -8px rgba(106,90,224,.9);
}

/* -- Rosa -> rosa -- */
.btn-pink,.btn-pink:focus,.btn-pink:active,.btn-pink.active,
.open>.dropdown-toggle.btn-pink{
  background:var(--g-rose) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 8px 18px -8px rgba(210,81,127,.9);
}

/* -- Por defecto / blanco -> botón "fantasma" de vidrio (.btn-ghost del mockup) -- */
.btn-default,.btn-white,
.btn-default:focus,.btn-white:focus{
  background:var(--glass-2) !important;
  border:1px solid var(--border-in) !important;
  color:var(--ink-2) !important;
  box-shadow:none;
}
.btn-default:hover,.btn-white:hover{
  background:var(--glass-hi) !important;
  color:var(--ink) !important;
  transform:translateY(-1px);
}

/* -- Botones "outline" (btn-*-outline / rounded se conservan legibles) -- */
.btn-rounded{border-radius:2em !important;}


/* =========================================================================
   4. LAUNCHER DEL DASHBOARD — .menu-isotope .menu-link  (equivale a .tile)
   Se transforma el botón de color en una tarjeta de vidrio con icono en caja
   con gradiente. El color del btn-* se traslada al icono.
   ========================================================================= */
.menu-isotope .item-menu{
  margin-top:0;
  margin-bottom:16px;
  padding:0 8px;
}
.menu-isotope .item-menu .menu-link{
  display:block;
  width:100%;
  height:auto;
  min-height:118px;
  text-align:left !important;
  padding:20px;
  background:var(--glass) !important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
  text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.menu-isotope .item-menu .menu-link:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  background:var(--glass) !important;
}

/* Icono: caja redondeada con gradiente (color según variante btn-*) */
.menu-isotope .menu-link > i:first-child{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:13px;
  margin-bottom:14px;
  color:#fff !important;
  font-size:22px;
  line-height:1;
  box-shadow:0 2px 6px -2px rgba(23,40,80,.28);
}
/* Título de la tile (el <span> pasa de posición absoluta a bloque normal) */
.menu-isotope .menu-link > span{
  position:static;
  display:block;
  width:auto;
  bottom:auto;
  color:var(--ink) !important;
  text-transform:none;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.25;
}

/* Mapeo de color btn-* -> gradiente del icono */
.menu-isotope .menu-link.btn-warning > i:first-child{background:var(--g-amber);}
.menu-isotope .menu-link.btn-pink    > i:first-child{background:var(--g-rose);}
.menu-isotope .menu-link.btn-danger  > i:first-child{background:var(--g-red);}
.menu-isotope .menu-link.btn-success > i:first-child{background:var(--g-green);}
.menu-isotope .menu-link.btn-primary > i:first-child,
.menu-isotope .menu-link.btn-info    > i:first-child{background:var(--g-blue);}
.menu-isotope .menu-link.btn-purple  > i:first-child{background:var(--g-violet);}
.menu-isotope .menu-link.btn-inverse > i:first-child{background:var(--g-slate);}

/* La tile no debe heredar la sombra/gradiente de botón de UBold */
.menu-isotope .menu-link.btn-warning,
.menu-isotope .menu-link.btn-pink,
.menu-isotope .menu-link.btn-danger,
.menu-isotope .menu-link.btn-success,
.menu-isotope .menu-link.btn-primary,
.menu-isotope .menu-link.btn-info,
.menu-isotope .menu-link.btn-purple,
.menu-isotope .menu-link.btn-inverse{
  background:var(--glass) !important;
}
.menu-isotope .menu-link:hover > i:first-child{transform:none;}


/* =========================================================================
   5. FORMULARIOS — .form-control, .control-label, .required, .form-group
   Input de vidrio (.inp del mockup) con anillo azul en focus.
   ========================================================================= */
.form-control{
  background:var(--glass-2);
  border:1px solid var(--border);
  border-radius:11px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:13px;
  height:38px;
  padding:9px 13px;
  box-shadow:none;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
textarea.form-control{height:auto;min-height:84px;line-height:1.5;}
select.form-control{height:38px;}
.form-control::-webkit-input-placeholder{color:var(--muted);}
.form-control::placeholder{color:var(--muted);}
.form-control:focus{
  background:var(--glass-hi);
  border:1px solid var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  color:var(--ink);
  outline:0 !important;
}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{
  background:rgba(120,130,150,.10);
  color:var(--muted);
  cursor:not-allowed;
}

/* Etiquetas */
.control-label,.form-group > label{
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
}
/* Campo obligatorio: asterisco rojo al final de la etiqueta */
.control-label.required::after,
label.required::after{
  content:" *";
  color:var(--crit);
  font-weight:700;
}
.form-group{margin-bottom:16px;}

/* Ayudas / texto secundario del formulario */
.help-block,.form-text{color:var(--muted);font-size:11px;}

/* Estados de validación coherentes con la paleta */
.has-error .form-control{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-s);}
.has-success .form-control{border-color:var(--low);box-shadow:0 0 0 3px var(--low-s);}
.has-warning .form-control{border-color:var(--mid);box-shadow:0 0 0 3px var(--mid-s);}
.has-error .control-label{color:var(--crit);}


/* =========================================================================
   6. PESTAÑAS — .nav-tabs / .tab-content / .tab-pane  (equivale a .ftabs)
   ========================================================================= */
.nav.nav-tabs{
  border-bottom:1px solid var(--line);
  box-shadow:none;
  gap:4px;
}
.nav.nav-tabs > li{margin-bottom:-1px;}
.nav.nav-tabs > li > a,
.nav.tabs-vertical > li > a{
  color:var(--muted) !important;
  background:transparent !important;
  border:none !important;
  border-radius:11px 11px 0 0 !important;
  line-height:1.4;
  padding:10px 15px !important;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap;              /* el texto del tab no se parte en 2 filas */
  transition:color .16s ease, background-color .16s ease;
}
/* La barra de pestañas fluye como items completos, nunca partiendo el texto */
.nav.nav-tabs{ display:flex; flex-wrap:wrap; }
/* El JS de tabs de UBold/Materialize (.tabs) reparte un width inline (~50%) a cada
   <li> y con flex-wrap eso las apila; width:auto lo neutraliza (gana al inline, que
   va sin !important) y cada pestaña vuelve a medir su texto. */
.nav.nav-tabs > li{ float:none; flex:0 0 auto; width:auto !important; }
/* La barra "indicator" verde de Materialize sobra: la pestaña activa ya se marca
   con fondo + color de acento. */
.nav.nav-tabs .indicator{ display:none !important; }
/* UBold (.tabs li.tab a) fuerza display:block + width:100% en el enlace; dentro
   de un flex eso estira cada pestaña al ancho total y con flex-wrap las apila una
   sobre otra. Con inline-flex + width:auto cada pestaña mide lo que su texto y
   quedan lado a lado. */
.nav.nav-tabs > li > a{
  display:inline-flex !important;
  align-items:center;
  width:auto !important;
}
.nav.nav-tabs > li > a:hover,
.nav.tabs-vertical > li > a:hover{
  color:var(--accent) !important;
  background:var(--glass-2) !important;
}
.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li.active > a:focus,
.nav.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
  color:var(--accent) !important;
  background:var(--glass-hi) !important;
  border:none !important;
  box-shadow:var(--shadow-sm);
}

/* Contenido de pestañas: vidrio suave (o transparente si va dentro de .card-box) */
.nav.nav-tabs + .tab-content{
  background:var(--glass);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow-sm);
  color:var(--ink-2);
  padding:22px;
}
/* Dentro de una tarjeta, evita el doble panel */
.card-box .nav.nav-tabs + .tab-content{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:20px 0 0;
}
.tab-content{box-shadow:none;color:var(--ink-2);}

/* Pestañas con fondo (navtab-bg) */
.navtab-bg{background:var(--glass-2);}


/* =========================================================================
   7. TABLAS BOOTSTRAP — .table  (equivale a .tbl del mockup)
   Cabecera mono en mayúsculas, filas con hover de vidrio, líneas finas.
   (Flexigrid se estiliza en su propio archivo; esto es solo .table de BS3.)
   ========================================================================= */
.table{
  color:var(--ink);
  font-size:13px;
  background:transparent;
  width:100%;
  max-width:100%;
}
.table > thead > tr > th,
.table > thead > tr > td{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  text-align:left;
  vertical-align:middle;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  border-top:none;
}
.table > tbody > tr > td,
.table > tfoot > tr > td{
  padding:12px 16px;
  vertical-align:middle;
  border-top:none;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
.table > tbody > tr{transition:background-color .12s ease;}
.table > tbody > tr:hover,
.table-hover > tbody > tr:hover{
  background:var(--glass-2);
}
.table > tbody > tr:last-child > td{border-bottom:none;}

/* Tabla con líneas (bordered) coherente con la paleta */
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td{
  border-color:var(--line);
}
/* Filas cebra en tono vidrio */
.table-striped > tbody > tr:nth-of-type(odd){
  background:rgba(255,255,255,.28);
}
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd){background:var(--glass-2);}
/* Enlaces de acción dentro de tablas */
.table a.text-primary,.table .btn-link{color:var(--accent);}


/* =========================================================================
   8. MODALES — .modal-content  (tarjeta de vidrio con backdrop difuminado)
   ========================================================================= */
.modal-backdrop,
.modal-backdrop.in{
  background:rgba(15,20,35,.42);
  opacity:1 !important;
}
.modal-content,
.modal .modal-dialog .modal-content{
  background:var(--glass-hi);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--ink);
  padding:24px;
  position:relative;
}
.modal .modal-dialog .modal-content .modal-header,
.modal-header{
  border-bottom:1px solid var(--line);
  padding:0 0 15px;
  margin:0;
}
.modal-header .modal-title,
.modal-title{
  color:var(--ink);
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-.01em;
}
.modal .modal-dialog .modal-content .modal-body,
.modal-body{padding:20px 0;color:var(--ink-2);}
.modal .modal-dialog .modal-content .modal-footer,
.modal-footer{
  border-top:1px solid var(--line);
  padding:15px 0 0;
  margin:0;
}
.modal-header .close{
  color:var(--muted);
  opacity:.8;
  text-shadow:none;
  font-size:22px;
  transition:color .16s ease;
}
.modal-header .close:hover{color:var(--crit);opacity:1;}