/* ==========================================================================
   Krriers 956 — Design System (tema oscuro/claro + componentes)
   Se carga DESPUES de strategy.css para tener prioridad. No es parte del
   build de Vite a proposito: se puede editar y desplegar sin recompilar
   nada ni arriesgar el bundle compartido de JS/CSS del resto del sitio.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
    --kr-bg-base: #0a0a0a;
    --kr-bg-surface: #141516;
    --kr-bg-elevated: #1c1e20;
    --kr-border: rgba(255, 255, 255, 0.08);
    --kr-border-strong: rgba(255, 255, 255, 0.14);
    --kr-text-primary: #f5f6f7;
    --kr-text-secondary: #a7acb1;
    --kr-text-muted: #6b7075;
    --kr-accent: #42ed09;
    --kr-accent-light: #8bff5c;
    --kr-accent-dim: rgba(66, 237, 9, 0.14);
    --kr-accent-dimmer: rgba(66, 237, 9, 0.07);
    --kr-accent-contrast: #063d00;
    --kr-shadow-card: 0 6px 24px rgba(0, 0, 0, 0.55);
    --kr-shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
    --kr-shadow-deep: 0 24px 48px -22px rgba(0, 0, 0, 0.65);
    --kr-radius-lg: 18px;
    --kr-radius-md: 12px;
    --kr-radius-sm: 8px;
    --kr-header-bg: rgba(10, 10, 10, 0.85);

    /* Superficies anidadas (v10): una "bandeja" clara que contiene tarjetas
       mas oscuras. Es lo que le da profundidad al panel -- antes todo vivia
       en una sola capa y por eso se veia plano. */
    --kr-bg-sunken: #0d0e0f;
    --kr-radius-xl: 26px;
}

:root[data-theme="light"] {
    --kr-bg-base: #f2f4f3;
    --kr-bg-surface: #ffffff;
    --kr-bg-elevated: #eef1ef;
    --kr-border: rgba(10, 10, 10, 0.08);
    --kr-border-strong: rgba(10, 10, 10, 0.14);
    --kr-text-primary: #14171a;
    --kr-text-secondary: #4b5157;
    --kr-text-muted: #7b8188;
    --kr-accent: #1c9e00;
    --kr-accent-light: #35c400;
    --kr-accent-dim: rgba(28, 158, 0, 0.12);
    --kr-accent-dimmer: rgba(28, 158, 0, 0.06);
    --kr-accent-contrast: #ffffff;
    --kr-shadow-card: 0 6px 24px rgba(20, 20, 20, 0.10);
    --kr-shadow-soft: 0 2px 10px rgba(20, 20, 20, 0.06);
    --kr-shadow-deep: 0 24px 48px -22px rgba(20, 20, 20, 0.22);
    --kr-radius-lg: 18px;
    --kr-radius-md: 12px;
    --kr-radius-sm: 8px;
    --kr-header-bg: rgba(255, 255, 255, 0.9);

    /* En claro la jerarquia se invierte: la bandeja es blanca y las tarjetas
       de adentro van un tono mas grises, para que igual se distingan capas. */
    --kr-bg-sunken: #f7f9f8;
    --kr-radius-xl: 26px;
}

/* Transicion suave al cambiar de tema */
html.kr-theme-ready,
html.kr-theme-ready body,
html.kr-theme-ready .header,
html.kr-theme-ready .styled-table,
html.kr-theme-ready .card,
html.kr-theme-ready .kr-card {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

body {
    background-color: var(--kr-bg-base) !important;
    color: var(--kr-text-primary);
}

a { color: inherit; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.header {
    background: var(--kr-header-bg) !important;
    border-bottom: 1px solid var(--kr-border);
    /* Se fuerza el fixed-top de Bootstrap con !important -- en paginas con
       tablas anchas (Asignaciones, Rutas) el menu principal se quedaba sin
       quedar fijo al hacer scroll. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
}

/* El blur solo se aplica en escritorio: "backdrop-filter" en el header crea
   un nuevo contenedor de referencia para los elementos position:fixed de
   adentro (el menu movil de pantalla completa), lo que hacia que ese menu
   se encogiera a la altura del header (90px) en vez de cubrir toda la
   pantalla en celulares. */
@media (min-width: 1200px) {
    .header {
        backdrop-filter: blur(10px);
    }
}

.header .sitename {
    color: var(--kr-text-primary);
    font-weight: 800;
    letter-spacing: 0.5px;
}

.navmenu > ul > li > a {
    color: var(--kr-text-secondary) !important;
    font-weight: 600;
    letter-spacing: 0.4px;
    border-radius: var(--kr-radius-sm);
    padding: 8px 14px !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.navmenu > ul > li > a:hover,
.navmenu > ul > li:hover > a {
    color: var(--kr-accent) !important;
    background-color: var(--kr-accent-dimmer);
}

.navmenu .dropdown ul {
    background: var(--kr-bg-surface) !important;
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-md);
    box-shadow: var(--kr-shadow-card);
    overflow: hidden;
}

.navmenu .dropdown ul li a {
    color: var(--kr-text-secondary) !important;
}

.navmenu .dropdown ul li a:hover {
    color: var(--kr-accent) !important;
    background-color: var(--kr-accent-dimmer);
}

.btn-getstarted {
    background: var(--kr-accent) !important;
    color: #06210a !important;
    font-weight: 700;
    border-radius: 999px !important;
    box-shadow: 0 3px 12px rgba(66, 237, 9, 0.25);
}

/* Boton de cambiar tema */
.kr-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--kr-border-strong);
    background: var(--kr-bg-elevated);
    color: var(--kr-text-primary);
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.kr-theme-toggle:hover {
    transform: scale(1.06);
    color: var(--kr-accent);
}

/* ==========================================================================
   TABLAS — v10.1: bandeja envolvente + profundidad
   El problema que se estaba corrigiendo: la tabla vivia pegada directo al
   fondo de la pagina, sin ningun escalon de superficie que la separara --
   por eso se veia plana. Se le da el mismo tratamiento de "panel + contenido
   hundido adentro" que ya tienen las tarjetas del dashboard.
   ========================================================================== */

/* Bandeja que envuelve la tabla (usar en un <div> por fuera del
   .table-responsive, NUNCA por dentro -- el scroll y las columnas/encabezado
   fijos de Asignaciones dependen de que .table-responsive sea el contenedor
   de scroll mas cercano; meter el padding ahi rompe esa referencia). */
.kr-table-panel {
    background: var(--kr-bg-surface);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-xl);
    padding: 14px;
    box-shadow: var(--kr-shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    margin-bottom: 22px;
}

/* Encabezado fijo al hacer scroll vertical, generico para cualquier tabla
   (Flotas Completadas, etc) -- misma tecnica que Asignaciones pero sin las
   columnas fijas por izquierda (esas se quedan solo en Asignaciones, con su
   propio bloque de estilos en ese blade). Se le da su propio scroll vertical
   con max-height: el contenedor con overflow-x:auto ya es la referencia de
   sticky, un "top" contra el scroll de la pagina no aplicaria aqui. */
.kr-table-scroll {
    overflow: auto;
    max-height: calc(100vh - 230px);
    border-radius: var(--kr-radius-md, 10px);
}

.kr-table-scroll .styled-table {
    overflow: visible;
    border-radius: 0;
}

.kr-table-scroll .styled-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    /* El fondo verde lo pinta el <tr>, que NO se queda fijo -- sin repetirlo
       aqui en cada <th> el encabezado se ve transparente al hacer scroll y
       las filas se le pasan por debajo. */
    background: linear-gradient(180deg, var(--kr-accent-light), var(--kr-accent)) !important;
}

/* Fila pintada a mano (Rutas de Choferes) para diferenciarla visualmente.
   El design-system pinta TODOS los <td> con "background: transparent
   !important" (necesario para que las filas pares/hover se vean bien en
   tema oscuro), y eso le gana a cualquier fondo puesto solo en el <tr> --
   por eso el color se aplica por variable CSS a cada <td>, no al <tr>. */
.styled-table tbody tr.kr-fila-coloreada td {
    background: var(--kr-fila-color, transparent) !important;
}

.styled-table {
    border-collapse: separate !important;
    border-spacing: 0;
    background: var(--kr-bg-sunken);
    border-radius: var(--kr-radius-lg);
    overflow: hidden;
}

/* Encabezado con gradiente (de-arriba-hacia-abajo, mas claro arriba) en vez
   de un bloque solido de color -- simula una fuente de luz en vez de una
   pegatina plana. El filo inferior brillante refuerza esa sensacion. */
.styled-table thead tr {
    background: linear-gradient(180deg, var(--kr-accent-light), var(--kr-accent)) !important;
}

.styled-table thead th {
    color: #06210a !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.5px;
    border: none !important;
    padding: 14px 16px !important;
    /* Filo brillante en el borde inferior de cada celda -- se pone AQUI (no
       en un ::after del <tr>) para que se mueva junto con el encabezado
       cuando esta fijo (position:sticky), donde cada <th> se ancla por su
       cuenta y el <tr> que lo contiene deja de ser buena referencia visual. */
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.35);
}

/* El CSS heredado (simple-green-v2.css) pinta fondos claros directo en el <tr>
   para filas pares y hover (pensado para paginas claras). Sin sobreescribir el
   fondo del <tr> tambien, ese fondo claro se asoma detras del texto claro del
   tema oscuro y lo vuelve ilegible. Se fuerza el fondo en <tr> Y <td> juntos. */
.styled-table tbody tr {
    background: transparent !important;
}

.styled-table tbody tr:nth-of-type(2n) {
    background: var(--kr-bg-elevated) !important;
}

.styled-table tbody tr:hover {
    background: var(--kr-accent-dimmer) !important;
}

.styled-table tbody td,
.styled-table tbody tr:nth-of-type(2n) td,
.styled-table tbody tr:hover td {
    color: var(--kr-text-primary) !important;
    border-bottom: 1px solid var(--kr-border) !important;
    padding: 12px 16px !important;
    background: transparent !important;
    /* Hairline clara justo debajo del borde inferior: un "grosor" de 1px que
       simula una ranura entre filas en vez de una linea plana. Efecto barato
       (sin sombras costosas) pero es lo que mas se nota como "3D". */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025);
}

/* Fila activa: barra de acento a la izquierda en vez de solo cambiar el
   fondo -- lectura rapida de "esta es la fila que estoy mirando", sin usar
   transform (un transform en <tr> rompe position:sticky de las columnas
   fijas de Asignaciones, porque el ancestro transformado pasa a ser el
   contenedor de referencia del sticky). */
.styled-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--kr-accent), 0 1px 0 rgba(255, 255, 255, 0.025);
}

.styled-table tbody tr:nth-of-type(2n) a {
    color: var(--kr-accent) !important;
}

/* ==========================================================================
   TARJETAS GENERICAS Y FORM CONTROLS
   ========================================================================== */
.card,
.kr-card {
    background: var(--kr-bg-surface) !important;
    border: 1px solid var(--kr-border) !important;
    border-radius: var(--kr-radius-lg) !important;
    box-shadow: var(--kr-shadow-card);
    color: var(--kr-text-primary) !important;
}

.form-control,
.form-select,
select.form-control {
    background-color: var(--kr-bg-elevated) !important;
    border: 1px solid var(--kr-border-strong) !important;
    color: var(--kr-text-primary) !important;
    border-radius: var(--kr-radius-sm) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kr-accent) !important;
    box-shadow: 0 0 0 3px var(--kr-accent-dimmer) !important;
}

.form-control::placeholder {
    color: var(--kr-text-muted) !important;
}

.form-label {
    color: var(--kr-text-secondary);
}

/* ==========================================================================
   MODALES (Agregar/Editar/Eliminar) — antes quedaban con el body claro por
   defecto de Bootstrap y los campos oscuros del tema, una combinacion de muy
   mal contraste. Se unifica todo el modal al mismo tema oscuro.
   ========================================================================== */
.modal-content {
    background: var(--kr-bg-surface) !important;
    color: var(--kr-text-primary) !important;
    border: 1px solid var(--kr-border) !important;
    border-radius: var(--kr-radius-lg) !important;
}

.modal-header {
    background: var(--kr-bg-elevated) !important;
    border-bottom: 2px solid var(--kr-accent) !important;
}

.modal-footer {
    background: var(--kr-bg-surface) !important;
    border-top: 1px solid var(--kr-border) !important;
}

.modal-body,
.modal-body .form-label {
    color: var(--kr-text-primary);
}

.modal .text-muted {
    color: var(--kr-text-muted) !important;
}

.modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.8);
}

/* Barras de accion masiva (Rutas de Choferes, Flotas Completadas): usaban
   el fondo claro por defecto de Bootstrap (.bg-body-secondary), invisible
   sobre el resto del tema oscuro. */
.bg-body-secondary {
    background-color: var(--kr-bg-elevated) !important;
    border-color: var(--kr-border-strong) !important;
    color: var(--kr-text-primary) !important;
}

.btn-success,
.btn-primary {
    background: var(--kr-accent) !important;
    border-color: var(--kr-accent) !important;
    color: #06210a !important;
    font-weight: 600;
}

.badge.bg-success { background-color: var(--kr-accent) !important; color: #06210a !important; }

/* Formularios tipo "contacto" (Agendar Vehiculo, Solicitud de Contacto) */
.contact-form-wrapper {
    background: var(--kr-bg-surface);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    box-shadow: var(--kr-shadow-card);
    padding: 28px 30px;
    color: var(--kr-text-primary);
}

.contact-form-wrapper h1,
.contact-form-wrapper h2,
.contact-form-wrapper h3,
.contact-form-wrapper h4 {
    color: var(--kr-text-primary);
}

.form-check-input {
    background-color: var(--kr-bg-elevated) !important;
    border: 1px solid var(--kr-border-strong) !important;
}

.form-check-input:checked {
    background-color: var(--kr-accent) !important;
    border-color: var(--kr-accent) !important;
}

.form-check-label {
    color: var(--kr-text-secondary);
}

/* ==========================================================================
   DASHBOARD — superficies anidadas (v10)
   La idea central: una "bandeja" (.kr-panel) que agrupa un bloque, y dentro
   tarjetas hundidas mas oscuras. Dos capas visibles en vez de una sola es lo
   que quita la sensacion de plano, sin recurrir a sombras pesadas.
   ========================================================================== */
.kr-panel {
    background: var(--kr-bg-surface);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-xl);
    padding: 22px 24px 24px;
    margin-bottom: 22px;
}

.kr-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.kr-panel-title {
    color: var(--kr-text-primary) !important;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.2px;
    margin: 0;
}

.kr-panel-sub {
    color: var(--kr-text-muted) !important;
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.kr-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

/* Tarjeta hundida: mas oscura que la bandeja que la contiene. */
.kr-stat-card {
    background: var(--kr-bg-sunken);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    color: var(--kr-text-primary) !important;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.kr-stat-card:hover {
    border-color: var(--kr-border-strong);
    transform: translateY(-2px);
}

/* Filo superior de acento: un detalle fino, no un bloque de color. */
.kr-stat-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kr-accent), transparent);
    opacity: 0.45;
}

.kr-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--kr-accent-dim);
    color: var(--kr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.kr-stat-label {
    color: var(--kr-text-secondary) !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 600;
}

.kr-stat-value {
    color: var(--kr-text-primary) !important;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    /* Cifras de ancho fijo: sin esto los montos "bailan" al actualizarse. */
    font-variant-numeric: tabular-nums;
}

.kr-chart-card {
    background: var(--kr-bg-surface);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius-xl);
    padding: 20px 22px;
    margin-bottom: 22px;
    color: var(--kr-text-primary) !important;
}

.kr-section-title {
    color: var(--kr-text-primary) !important;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.4px;
    margin-bottom: 6px;
}

.kr-section-sub {
    color: var(--kr-text-muted) !important;
    font-size: 0.9rem;
    margin-bottom: 22px;
}

/* ==========================================================================
   BOTON CON BRILLO (.kr-glow-btn)
   Equivalente en CSS puro del componente React "GlowButton" que mando el
   usuario -- este proyecto es Blade/Bootstrap, no React/Tailwind, asi que el
   efecto se reconstruye con un gradiente conico girando detras del boton y un
   nucleo opaco encima que deja ver solo el filo iluminado.
   ========================================================================== */
.kr-glow-btn {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/* Capa 1: el gradiente que gira. Se hace cuadrado y sobredimensionado para
   que al rotar cubra siempre el boton entero, sin esquinas vacias. */
.kr-glow-btn::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 50%;
    top: 50%;
    width: 280%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0 28%,
        var(--kr-accent) 42%,
        #b6ff8f 50%,
        var(--kr-accent) 58%,
        transparent 72% 100%
    );
    animation: kr-glow-spin 4s linear infinite;
}

/* Capa 2: el nucleo opaco. El "inset" es el grosor del filo brillante. */
.kr-glow-btn::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 2px;
    border-radius: inherit;
    background: #111215;
}

.kr-glow-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 26px var(--kr-accent-dim);
}

.kr-glow-btn:active {
    transform: translateY(0);
}

@keyframes kr-glow-spin {
    to { rotate: 360deg; }
}

/* El giro constante marea a quien pidio menos movimiento en su sistema: se
   deja el filo iluminado pero quieto. */
@media (prefers-reduced-motion: reduce) {
    .kr-glow-btn::before {
        animation: none;
    }
}