/* ═══════════════════════════════════════════════════════════════
   G4S Documenta — Theme override (rojo + negro, estilo corporativo)
   Se carga DESPUES de eq-login.css / eq-layout.css / eq-tickets.css
   ═══════════════════════════════════════════════════════════════ */

:root {
    --g4s-red:         #c8102e;
    --g4s-red-dark:    #a10d25;
    --g4s-red-soft:    #e63756;
    --g4s-black:       #000000;
    --g4s-black-soft:  #1a1a1a;

    /* Override de variables de layout */
    --eq-accent:          var(--g4s-red);
    --eq-accent-2:        var(--g4s-red-dark);
    --eq-sidebar-hover:   rgba(200,16,46,.14);
    --eq-sidebar-active:  rgba(200,16,46,.22);
    --tk-accent:          var(--g4s-red);
}

/* ══════════════════════════════════════════════════════════
   LOGIN — panel izquierdo (fondo negro sólido, sin efectos)
══════════════════════════════════════════════════════════ */

body.eq-login-body {
    background: #0a0a0a !important;
}

body.eq-login-body .eq-login-left {
    background: #0a0a0a !important;
}

/* Ocultar canvas de partículas (tiene colores hardcoded en JS) */
body.eq-login-body #eq-canvas {
    display: none !important;
}

/* Quitar todos los gradientes del overlay */
body.eq-login-body .eq-login-left-overlay {
    background: transparent !important;
}

/* Texto del logo "G4S Documenta" en blanco sólido */
body.eq-login-body .eq-logo-svg {
    filter: drop-shadow(0 0 10px rgba(200,16,46,.5)) !important;
}

/* Logo IMG en login (reemplazo del SVG) */
body.eq-login-body .eq-logo-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(200,16,46,.25);
}

/* Logo IMG en topbar dashboard */
.eq-brand-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 3px;
    flex-shrink: 0;
}

body.eq-login-body .eq-login-logo-text strong {
    color: #ffffff !important;
}
body.eq-login-body .eq-login-logo-text span {
    color: rgba(255,255,255,.6) !important;
}

/* Headline + sub */
body.eq-login-body .eq-login-headline {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.eq-login-body .eq-login-headline em,
body.eq-login-body .eq-login-headline strong {
    color: var(--g4s-red-soft) !important;
    background: none !important;
    -webkit-text-fill-color: var(--g4s-red-soft) !important;
    font-style: italic !important;
}
body.eq-login-body .eq-login-sub {
    color: rgba(255,255,255,.75) !important;
}

/* Features */
body.eq-login-body .eq-features li {
    color: rgba(255,255,255,.85) !important;
}
body.eq-login-body .eq-feat-icon {
    background: rgba(200,16,46,.15) !important;
    border: 1px solid rgba(200,16,46,.35) !important;
    color: var(--g4s-red) !important;
}
body.eq-login-body .eq-feat-icon i {
    color: var(--g4s-red) !important;
}

/* ══════════════════════════════════════════════════════════
   LOGIN — panel derecho (QUITAR burbuja + separador teal)
══════════════════════════════════════════════════════════ */

/* Fondo del panel derecho: forzar negro sólido (anti-burbuja roja) */
body.eq-login-body .eq-login-right {
    background: #070b14 !important;
}

/* Eliminar completamente el glow decorativo del panel derecho */
body.eq-login-body .eq-login-right::before,
.eq-login-right::before {
    display: none !important;
    background: transparent !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Separador lateral rojo sutil */
body.eq-login-body .eq-login-right::after {
    background: linear-gradient(to bottom,
        transparent,
        rgba(200,16,46,.25) 30%,
        rgba(200,16,46,.25) 70%,
        transparent) !important;
}

/* Botón Ingresar */
body.eq-login-body .eq-btn-login {
    background: var(--g4s-red) !important;
    border-color: var(--g4s-red) !important;
}
body.eq-login-body .eq-btn-login:hover {
    background: var(--g4s-red-dark) !important;
    border-color: var(--g4s-red-dark) !important;
    box-shadow: 0 8px 24px rgba(200,16,46,.35) !important;
}

/* Inputs focus */
body.eq-login-body .eq-input:focus {
    border-color: var(--g4s-red) !important;
    box-shadow: 0 0 0 3px rgba(200,16,46,.18) !important;
}
body.eq-login-body .eq-input-wrap:focus-within .eq-input-icon {
    color: var(--g4s-red) !important;
}

/* Links */
body.eq-login-body .eq-links a {
    color: var(--g4s-red) !important;
}
body.eq-login-body .eq-links a:hover {
    color: var(--g4s-red-dark) !important;
}

/* Modal */
body.eq-login-body .eq-modal-btn-confirm {
    background: linear-gradient(135deg, var(--g4s-red-dark), var(--g4s-red)) !important;
    border-color: var(--g4s-red) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — móvil: dejar el panel izquierdo oculto
   (ya está en el CSS original, no lo modifico)
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   TOPBAR + SIDEBAR (dashboard interno)
══════════════════════════════════════════════════════════ */

.eq-topbar {
    background: #000000 !important;
    border-bottom: 1px solid rgba(200,16,46,.3) !important;
}

.eq-brand-name {
    color: #fff !important;
}

.eq-brand-logo {
    filter: drop-shadow(0 0 8px rgba(200,16,46,.5)) !important;
}

.eq-empresa-badge {
    background: rgba(200,16,46,.15) !important;
    color: #fff !important;
    border-color: rgba(200,16,46,.35) !important;
}
.eq-empresa-badge i { color: var(--g4s-red) !important; }

.eq-sidebar-link.active,
.eq-sidebar-link:hover {
    background: rgba(200,16,46,.14) !important;
    color: #fff !important;
    border-left-color: var(--g4s-red) !important;
}
.eq-sidebar-link.active i,
.eq-sidebar-link:hover i {
    color: var(--g4s-red) !important;
}

/* ══════════════════════════════════════════════════════════
   TICKETS (botones, cards, Kendo)
══════════════════════════════════════════════════════════ */

.tk-btn-primary {
    background: var(--g4s-red) !important;
    border-color: var(--g4s-red) !important;
}
.tk-btn-primary:hover {
    background: var(--g4s-red-dark) !important;
    border-color: var(--g4s-red-dark) !important;
}

.tk-card-hdr {
    background: linear-gradient(135deg, var(--g4s-black) 0%, var(--g4s-red) 100%) !important;
}

.tk-input:focus {
    border-color: var(--g4s-red) !important;
    box-shadow: 0 0 0 2px rgba(200,16,46,.2) !important;
}

.k-grid .k-selected,
.k-grid tr.k-selected > td {
    background: rgba(200,16,46,.18) !important;
}