/* ============================================================================
   Facilu Flow — tema de marca para AdminLTE / Bootstrap 3
   ----------------------------------------------------------------------------
   Capa de SOLO COLOR. No cambia markup, clases, espaciados ni tipografia.
   Se carga despues de AdminLTE y sus skins para ganar en cascada.

   Criterio de diseno:
     · El CROMO (header, sidebar, acciones primarias) se apropia de la marca.
     · Los ESTADOS semanticos (exito/peligro/aviso) conservan verde/rojo/ambar:
       son senales que el operador lee sin mirar. Solo se reafinan al tono
       de la paleta de marca.
   ========================================================================= */

:root {
    --fg-p: #6C3AED;   /* primary          */
    --fg-pl: #A855F7;  /* primary light    */
    --fg-pd: #4F27B3;  /* primary dark     */
    --fg-ap: #EC4899;  /* accent magenta   */

    --fg-dark: #1a0845;   /* cromo: header / sidebar */
    --fg-dark-2: #150636; /* cromo: bloque del logo  */
    --fg-dark-3: #241056; /* cromo: hover            */

    /* Estados: tono "vivo" para texto/bordes sobre blanco... */
    --fg-success: #10B981;
    --fg-danger: #EF4444;
    --fg-warning: #F59E0B;
    --fg-info: #06B6D4;

    /* ...y tono oscurecido para cuando son FONDO con texto blanco (AA 4.5:1) */
    --fg-success-btn: #047857;  /* 5.6:1 */
    --fg-danger-btn: #DC2626;   /* 4.8:1 */
    --fg-info-btn: #0E7490;     /* 5.4:1 */
    --fg-warning-ink: #451A03;  /* texto sobre ambar: 7.0:1 */

    /* Fondos de cifras grandes (small-box): umbral 3:1 de texto grande */
    --fg-success-fill: #059669; /* 3.8:1 */
    --fg-info-fill: #0891B2;    /* 3.7:1 */

    --fg-ink: #1e293b;
    --fg-muted: #64748B;
    --fg-line: #E6E0F5;
    --fg-soft: #F7F5FF;

    --fg-ring: rgba(108, 58, 237, 0.15);
}

/* ══ 1. CROMO ═══════════════════════════════════════════════════════════ */

.skin-blue .main-header .navbar {
    background-color: var(--fg-dark);
}

.skin-blue .main-header .logo {
    background-color: var(--fg-dark-2);
    color: #fff;
    border-bottom: 0 solid transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.skin-blue .main-header .logo:hover {
    background-color: #100428;
}

/* Logo de marca dentro del header (reemplaza el texto anterior) */
.main-header .logo .fg-brand {
    display: inline-block;
    height: 30px;
    width: auto;
    vertical-align: middle;
    filter: brightness(0) invert(1);
}

.main-header .logo .fg-brand-mini {
    height: 28px;
    width: auto;
    vertical-align: middle;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: rgba(255, 255, 255, 0.8);
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    color: #fff;
    background-color: var(--fg-dark-3);
}

.skin-blue .main-header .navbar .nav > li > a {
    color: rgba(255, 255, 255, 0.85);
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus,
.skin-blue .main-header .navbar .nav > .active > a {
    background-color: var(--fg-dark-3);
    color: #fff;
}

.skin-blue .main-header li.user-header {
    background-color: var(--fg-p);
}

/* Sidebar */
.skin-blue .main-sidebar,
.skin-blue .left-side {
    background-color: var(--fg-dark-2);
}

.skin-blue .sidebar a {
    color: #cfc4e8;
}

.skin-blue .sidebar a:hover {
    text-decoration: none;
}

.skin-blue .sidebar-menu > li.header {
    color: #8d7cb5;
    background: #100428;
}

.skin-blue .sidebar-menu > li > a {
    border-left: 3px solid transparent;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
    color: #fff;
    background: var(--fg-dark-3);
    border-left-color: var(--fg-pl);
}

.skin-blue .sidebar-menu > li > .treeview-menu {
    background: #100428;
}

.skin-blue .treeview-menu > li > a {
    color: #b3a5d1;
}

.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
    color: #fff;
}

.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
    color: #fff;
}

/* Cabecera de contenido y pie */
.skin-blue .content-header {
    background: transparent;
}

.content-header > h1 {
    color: var(--fg-ink);
}

.content-header > h1 > small {
    color: var(--fg-muted);
}

.content-header > .breadcrumb > li > a {
    color: var(--fg-p);
}

.content-header > .breadcrumb > .active {
    color: var(--fg-muted);
}

.main-footer {
    background: #fff;
    border-top: 1px solid var(--fg-line);
    color: var(--fg-muted);
}

.main-footer a {
    color: var(--fg-p);
}

.content-wrapper {
    background-color: #F4F2FB;
}

/* ── Chips de la navbar ──────────────────────────────────────────────────
   bg-green / bg-red dentro del header NO son estados: colorean los accesos
   directos de "Historial" y "Servicios activos". Sobre el cromo violeta
   chillaban, asi que pasan a tintes de marca. Fuera del header conservan su
   significado semantico intacto. */
.main-header .navbar .nav > li.bg-green,
.main-header .navbar .nav > li.bg-red,
.main-header .navbar .nav > li.bg-aqua,
.main-header .navbar .nav > li.bg-yellow,
.main-header .navbar .nav > li.bg-blue {
    background-color: transparent !important;
}

.main-header .navbar .nav > li.bg-green > a { color: #6EE7B7 !important; }
.main-header .navbar .nav > li.bg-red > a { color: #FCA5A5 !important; }
.main-header .navbar .nav > li.bg-aqua > a { color: #67E8F9 !important; }
.main-header .navbar .nav > li.bg-yellow > a { color: #FCD34D !important; }
.main-header .navbar .nav > li.bg-blue > a { color: #A5B4FC !important; }

.main-header .navbar .nav > li.bg-green > a:hover,
.main-header .navbar .nav > li.bg-red > a:hover,
.main-header .navbar .nav > li.bg-aqua > a:hover,
.main-header .navbar .nav > li.bg-yellow > a:hover,
.main-header .navbar .nav > li.bg-blue > a:hover {
    background-color: var(--fg-dark-3) !important;
}

/* ══ 2. BOTONES ═════════════════════════════════════════════════════════
   btn-primary y btn-info se usan casi por igual (65 y 67 veces) y hoy se
   distinguen (azul vs aqua). Para no perder esa jerarquia: primary = accion
   principal solida; info = accion secundaria en tinte suave. */

.btn-primary {
    background-color: var(--fg-p);
    border-color: var(--fg-p);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--fg-pd);
    border-color: var(--fg-pd);
    color: #fff;
}

.btn-primary.disabled,
.btn-primary[disabled] {
    background-color: #B9A5EC;
    border-color: #B9A5EC;
}

/* btn-info: relleno solido en la familia cian. Se probo como tinte lavanda
   claro y quedaba descolgado junto a los botones solidos; ademas competia
   con btn-primary en vez de leerse como accion secundaria. */
.btn-info {
    background-color: var(--fg-info-btn);
    border-color: var(--fg-info-btn);
    color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    background-color: #155E75;
    border-color: #155E75;
    color: #fff;
}

/* btn-default: neutro convencional. Es el mas usado de la app (91 veces) y
   debe leerse como accion terciaria, no como un boton de marca. */
.btn-default {
    background-color: #f4f4f4;
    border-color: #ddd;
    color: #333;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    background-color: #e7e7e7;
    border-color: #c9c0dd;
    color: #222;
}

/* Estados semanticos: se conservan, reafinados a la paleta de marca.
   ------------------------------------------------------------------
   Los acentos de la landing (#10B981, #EF4444, #F59E0B) estan calibrados
   como TEXTO sobre blanco. Como fondo con texto blanco encima no llegan a
   AA (2.5:1 / 3.8:1 / 2.2:1), asi que aqui se usan los tonos --*-btn, que
   son las mismas familias oscurecidas hasta pasar 4.5:1.
   El ambar no alcanza AA con texto blanco a ningun tono usable: lleva
   texto marron oscuro, que da 7:1 y conserva el amarillo reconocible. */
.btn-success {
    background-color: var(--fg-success-btn);
    border-color: var(--fg-success-btn);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: #065F46;
    border-color: #065F46;
    color: #fff;
}

.btn-danger {
    background-color: var(--fg-danger-btn);
    border-color: var(--fg-danger-btn);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: #B91C1C;
    border-color: #B91C1C;
    color: #fff;
}

.btn-warning {
    background-color: var(--fg-warning);
    border-color: #D97706;
    color: var(--fg-warning-ink);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: #D97706;
    border-color: #B45309;
    color: var(--fg-warning-ink);
}

/* Anillo de foco solo por teclado. Con `:focus` a secas, Bootstrap 3 lo deja
   pegado despues de cada clic de raton y los botones parecen "encendidos". */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--fg-ring);
}

.btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ══ 3. BOXES ═══════════════════════════════════════════════════════════ */

.box {
    border-top-color: var(--fg-line);
}

.box.box-primary {
    border-top-color: var(--fg-p);
}

.box.box-info {
    border-top-color: var(--fg-info);
}

.box.box-success {
    border-top-color: var(--fg-success);
}

.box.box-danger {
    border-top-color: var(--fg-danger);
}

.box.box-warning {
    border-top-color: var(--fg-warning);
}

.box.box-solid.box-primary {
    border: 1px solid var(--fg-p);
}

.box.box-solid.box-primary > .box-header {
    background: var(--fg-p);
    background-color: var(--fg-p);
    color: #fff;
}

.box-header > .box-title {
    color: var(--fg-ink);
}

.box-header .fa,
.box-header .glyphicon,
.box-header .ion {
    color: var(--fg-p);
}

/* ══ 4. FONDOS Y CAJAS DE DATO ══════════════════════════════════════════
   small-box / info-box se colorean con bg-*. Fuera del header conservan
   su lectura semantica; solo se reafina el tono. */

.bg-blue { background-color: var(--fg-p) !important; }
.bg-aqua { background-color: var(--fg-info-fill) !important; }
.bg-green { background-color: var(--fg-success-fill) !important; }
.bg-red { background-color: var(--fg-danger-btn) !important; }
.bg-yellow { background-color: var(--fg-warning) !important; }
.bg-purple { background-color: var(--fg-pd) !important; }

.bg-blue, .bg-aqua, .bg-green, .bg-red, .bg-purple {
    color: #fff !important;
}

/* El ambar nunca alcanza AA con blanco: texto oscuro */
.bg-yellow,
.bg-yellow a,
.bg-yellow .small-box-footer {
    color: var(--fg-warning-ink) !important;
}

.small-box {
    border-radius: 4px;
}

.small-box > .small-box-footer:hover {
    background: rgba(0, 0, 0, 0.18);
}

.info-box-icon {
    border-radius: 4px 0 0 4px;
}

/* ══ 5. ETIQUETAS Y ALERTAS ═════════════════════════════════════════════ */

/* Las etiquetas llevan texto de 12px sobre el color: se aplica el umbral
   AA normal, no el de texto grande. */
.label-primary { background-color: var(--fg-p); color: #fff; }
.label-info { background-color: var(--fg-info-btn); color: #fff; }
.label-success { background-color: var(--fg-success-btn); color: #fff; }
.label-danger { background-color: var(--fg-danger-btn); color: #fff; }
.label-warning { background-color: var(--fg-warning); color: var(--fg-warning-ink); }

.alert-info {
    background-color: #ECFEFF;
    border-color: #A5F3FC;
    color: #155E75;
}

.alert-success {
    background-color: #ECFDF5;
    border-color: #A7F3D0;
    color: #065F46;
}

.alert-danger,
.alert-error {
    background-color: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}

.alert-warning {
    background-color: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

/* ══ 6. FORMULARIOS ═════════════════════════════════════════════════════ */

.form-control:focus {
    border-color: var(--fg-p);
    box-shadow: 0 0 0 3px var(--fg-ring);
}

.has-error .form-control:focus {
    border-color: var(--fg-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.input-group-addon {
    background-color: var(--fg-soft);
    border-color: #D9D2E9;
    color: var(--fg-pd);
}

/* ══ 7. TABLAS, PESTANAS, PAGINACION ════════════════════════════════════ */

.table > thead > tr > th {
    border-bottom-color: var(--fg-line);
    color: var(--fg-ink);
}

.table-hover > tbody > tr:hover {
    background-color: var(--fg-soft);
}

.table > tbody > tr.active > td,
.table > tbody > tr > td.active {
    background-color: #EDE4FE !important;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--fg-p);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--fg-pd);
}

.nav-tabs > li > a:hover {
    color: var(--fg-p);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--fg-p);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
    background-color: var(--fg-p);
    border-color: var(--fg-p);
}

.pagination > li > a {
    color: var(--fg-p);
}

.pagination > li > a:hover {
    background-color: var(--fg-soft);
    color: var(--fg-pd);
}

.progress-bar {
    background-color: var(--fg-p);
}

.progress-bar-success { background-color: var(--fg-success); }
.progress-bar-danger { background-color: var(--fg-danger); }
.progress-bar-warning { background-color: var(--fg-warning); }
.progress-bar-info { background-color: var(--fg-info); }

/* ══ 8. ENLACES ═════════════════════════════════════════════════════════ */

a {
    color: var(--fg-p);
}

a:hover,
a:focus {
    color: var(--fg-pd);
}

/* Los enlaces dentro de cromo oscuro no heredan el violeta.
   OJO: aqui NO puede ir `.btn`. Tiene la misma especificidad que
   `.btn-primary` y va despues, asi que anularia el color de texto de todas
   las variantes. Cada btn-* declara el suyo y ya le gana al selector `a`. */
.main-header a,
.main-sidebar a,
.small-box a,
.bg-blue a, .bg-aqua a, .bg-green a, .bg-red a, .bg-yellow a {
    color: inherit;
}

/* ══ 9. PLUGINS ═════════════════════════════════════════════════════════
   Son los que mas delatan un tema a medias. */

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--fg-p) !important;
    border-color: var(--fg-p) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--fg-soft) !important;
    border-color: #D9D2E9 !important;
    color: var(--fg-pd) !important;
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: var(--fg-p);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--fg-p);
    outline: none;
}

/* Datepicker */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active {
    background-color: var(--fg-p) !important;
    background-image: none !important;
    border-color: var(--fg-pd) !important;
    color: #fff !important;
    text-shadow: none !important;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: #FDE68A !important;
    background-image: none !important;
    color: #92400E !important;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background: var(--fg-soft);
}

/* SweetAlert */
.sweet-alert button.confirm {
    background-color: var(--fg-p) !important;
}

.sweet-alert button.confirm:hover {
    background-color: var(--fg-pd) !important;
}

.sweet-alert button:focus {
    box-shadow: 0 0 0 3px var(--fg-ring) !important;
}

/* ── blockUI (indicador de carga) ────────────────────────────────────────
   Por defecto pinta un velo blanco al 50% y una caja negra #333 con texto de
   20px en negrita, sin indicador de giro. Se rehace como velo oscuro con
   desenfoque y tarjeta blanca con spinner de marca.
   El DOM lo genera el plugin y no se toca: solo se reestilan sus clases. */

.block-ui-overlay {
    background-color: rgba(26, 8, 69, 0.32);
    opacity: 1;
    filter: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.block-ui-message-container {
    top: 50%;
    transform: translateY(-50%);
}

.block-ui-message {
    display: inline-block;
    min-width: 172px;
    padding: 26px 34px 22px;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(26, 8, 69, 0.28);
    color: var(--fg-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}

/* Spinner: anillo violeta girando sobre pista lavanda */
.block-ui-message::before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid #EDE4FE;
    border-top-color: var(--fg-p);
    border-radius: 50%;
    animation: fg-spin 0.75s linear infinite;
}

@keyframes fg-spin {
    to { transform: rotate(360deg); }
}

/* Sin animacion: el anillo se queda completo en violeta, no a medias */
@media (prefers-reduced-motion: reduce) {
    .block-ui-message::before {
        animation: none;
        border-color: var(--fg-p);
    }
}

/* Bootstrap modal + tooltip */
.modal-header {
    border-bottom-color: var(--fg-line);
}

.modal-footer {
    border-top-color: var(--fg-line);
}

.tooltip-inner {
    background-color: var(--fg-dark);
}

.tooltip.top .tooltip-arrow { border-top-color: var(--fg-dark); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--fg-dark); }
.tooltip.left .tooltip-arrow { border-left-color: var(--fg-dark); }
.tooltip.right .tooltip-arrow { border-right-color: var(--fg-dark); }

/* uib-typeahead / dropdowns */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover {
    background-color: var(--fg-soft);
    color: var(--fg-pd);
}