/* ERP_ROMO — hoja de estilos única. Paleta "Ruta": azul corporativo Logística Romo + acentos vivos. */

:root {
    --bg: #eef2fb;
    --bg-soft: #e7edf9;
    --surface: #ffffff;
    --surface-alt: #f6f8fd;
    --text: #131c2e;
    --text-muted: #5f6b83;
    --text-faint: #93a0b8;

    --accent: #1a63e8;
    --accent-dark: #0f47b8;
    --accent-soft: #e1ecfd;
    --accent-strong: #0b2f7a;
    --accent-2: #17b6a6;
    --gradient-accent: linear-gradient(135deg, #4b90ff 0%, #1a63e8 50%, #0b3fae 100%);
    --gradient-accent-hover: linear-gradient(135deg, #3c81f7, #1454d6, #082f8a);

    --border: #dfe6f5;
    --border-strong: #c6d3ec;

    --danger: #e0295e;
    --danger-soft: #fce7ef;
    --danger-strong: #9c1745;

    --success: #0a9d6d;
    --success-soft: #e0f7ee;
    --success-strong: #07734f;

    --warning: #dc8a12;
    --warning-soft: #fdf1dc;
    --warning-strong: #94590a;

    --birthday: #ec4899;
    --birthday-soft: #fce7f4;
    --birthday-strong: #a3195f;

    --anniversary: #0891b2;
    --anniversary-soft: #dff5fa;
    --anniversary-strong: #0a5770;

    --muted-soft: #eef1f8;
    --muted-strong: #556079;

    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --shadow: 0 1px 2px rgba(20, 40, 90, 0.06), 0 1px 1px rgba(20, 40, 90, 0.05);
    --shadow-md: 0 10px 28px rgba(20, 40, 90, 0.10), 0 2px 8px rgba(20, 40, 90, 0.06);
    --shadow-lg: 0 22px 55px rgba(10, 30, 80, 0.18), 0 6px 16px rgba(10, 30, 80, 0.09);
    --shadow-accent: 0 10px 24px rgba(26, 99, 232, 0.30);

    --sidebar-w: 250px;
    --sidebar-bg: linear-gradient(165deg, #061230 0%, #0b2a6e 50%, #1457d6 100%);
}

* {
    box-sizing: border-box;
}

.icon {
    width: 18px;
    height: 18px;
    flex: none;
}

body {
    margin: 0;
    background:
        radial-gradient(760px 380px at 12% -8%, rgba(26, 99, 232, 0.10), transparent 60%),
        radial-gradient(640px 360px at 100% 0%, rgba(23, 182, 166, 0.09), transparent 55%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
        Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-dark);
    text-decoration: underline;
}

h1, h2, h3 {
    letter-spacing: -0.01em;
    font-family: "Sora", "Inter", sans-serif;
}

::selection {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

/* ---------- Header / navegación ---------- */

.site-header {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}

.site-header .inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 32px;
    height: 84px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.1px;
    color: var(--text);
    font-family: "Sora", sans-serif;
}

.brand:hover {
    text-decoration: none;
}

.brand .brand-logo {
    height: 70px;
    width: auto;
}

.main-nav {
    display: flex;
    gap: 24px;
    flex: 1;
}

.main-nav a {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--accent-dark);
    text-decoration: none;
    border-bottom-color: var(--accent);
}

.user-box {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13.5px;
    color: var(--text-muted);
}

.user-box .user-name {
    font-weight: 700;
    color: var(--text);
}

/* ---------- Layout ---------- */

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 28px 28px 64px;
}

/* Pantallas con tablas de muchas columnas (viajes): aprovechan el ancho
   real de la pantalla para no obligar a barrer de lado. */
.container-wide {
    max-width: min(2200px, 98vw);
    padding-left: 16px;
    padding-right: 16px;
}

/* Resumen de la tarifa que se va a aplicar al viaje. */
.tarifa-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 24px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: var(--surface-alt);
}

.tarifa-resumen .info-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-dark);
}

.tarifa-resumen .full {
    grid-column: 1 / -1;
    margin: 0;
}

/* Barra de navegación por día. */
.day-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.day-nav .day-label {
    font-weight: 800;
    font-size: 14px;
    padding: 0 6px;
    text-transform: capitalize;
}

.day-nav input[type="date"] {
    min-width: 165px;
}

/* Selector de qué fechas se ven: día, periodo o todo. Los tres modos
   comparten renglón de botones, así que se agrupan para que el bloque
   entero se lea como un solo control. */
.periodo-nav {
    margin-bottom: 16px;
}

.periodo-modos {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.periodo-nav .day-nav {
    margin-bottom: 0;
}

.periodo-nav .day-nav + .periodo-atajos {
    margin-top: 10px;
}

/* «Del [fecha] al [fecha]»: la etiqueta va pegada a su campo. */
.periodo-campo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.day-label-sub {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: none;
}

/* Select compacto para cambiar estatus desde la tabla. */
.estado-select {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 8px;
    min-width: 120px;
}

/* Ventana para acciones rápidas (agregar extra a un viaje). */
.modal-dialog {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 26px 28px;
    width: min(560px, 92vw);
    background: var(--surface);
    color: var(--text);
}

.modal-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

.modal-dialog .form-section-title {
    margin-top: 0;
}

/* Bloque que se abre solo cuando se necesita (conteos, detalles). */
.detalle-colapsable {
    margin-top: 26px;
}

.detalle-colapsable > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted-strong);
    padding: 8px 0;
}

.detalle-colapsable > summary:hover {
    color: var(--accent-dark);
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-head h1 {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
}

.page-head .page-subtitle {
    margin: 5px 0 0;
    font-size: 13.5px;
    color: var(--text-muted);
}

.page-head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.breadcrumb {
    font-size: 12px;
    color: var(--accent-dark);
    background: var(--accent-soft);
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}

/* ---------- Shell de RH (sidebar + contenido) ---------- */

.rh-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    align-items: start;
    gap: 26px;
}

.rh-sidebar {
    position: sticky;
    top: 20px;
    background: var(--sidebar-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rh-sidebar .rh-sidebar-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.45);
    padding: 4px 10px 14px;
}

.rh-sidebar a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.rh-sidebar a svg {
    flex: none;
    width: 17px;
    height: 17px;
    opacity: 0.8;
}

.rh-sidebar a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
    transform: translateX(2px);
}

.rh-sidebar a.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.rh-sidebar a.active svg {
    opacity: 1;
}

.rh-content {
    min-width: 0;
}

/* ---------- Hero de RH ---------- */

.rh-hero {
    background: var(--gradient-accent);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 30px 34px;
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.rh-hero::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    top: -150px;
    right: -80px;
}

.rh-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 6px;
}

.rh-hero h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    position: relative;
}

.rh-hero p.page-subtitle {
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    max-width: 480px;
}

.rh-hero-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    position: relative;
}

.rh-hero-icon svg {
    width: 38px;
    height: 38px;
}

@media (max-width: 640px) {
    .rh-hero-icon {
        display: none;
    }
}

@media (max-width: 880px) {
    .rh-shell {
        grid-template-columns: 1fr;
    }

    .rh-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .rh-sidebar .rh-sidebar-title {
        display: none;
    }
}

/* ---------- Tarjetas ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 22px 24px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.card-link {
    display: block;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.card-link::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}

.card-link:hover {
    text-decoration: none;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.card-link:hover::before {
    transform: scaleX(1);
}

.card .card-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
}

.card .card-icon svg {
    width: 19px;
    height: 19px;
}

.card h2 {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 700;
}

.card p {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 13.5px;
}

/* ---------- Tarjetas de estadística ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 17px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.stat-tile > div:last-child {
    min-width: 0;
}

.stat-tile .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--muted-soft);
    color: var(--muted-strong);
}

.stat-tile .stat-icon svg {
    width: 20px;
    height: 20px;
}

.stat-tile .stat-value {
    font-size: 23px;
    font-weight: 800;
    line-height: 1.1;
    font-family: "Sora", sans-serif;
}

.stat-tile .stat-label {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
}

.stat-tile.tone-danger .stat-icon,
.card-icon.tone-danger {
    background: linear-gradient(145deg, var(--danger-soft), #fbd7e2);
    color: var(--danger-strong);
}

.stat-tile.tone-warning .stat-icon,
.card-icon.tone-warning {
    background: linear-gradient(145deg, var(--warning-soft), #fce4bd);
    color: var(--warning-strong);
}

.stat-tile.tone-success .stat-icon,
.card-icon.tone-success {
    background: linear-gradient(145deg, var(--success-soft), #cdf0e0);
    color: var(--success-strong);
}

.stat-tile.tone-accent .stat-icon,
.card-icon.tone-accent {
    background: linear-gradient(145deg, var(--accent-soft), #c7dcfc);
    color: var(--accent-dark);
}

.stat-tile.tone-birthday .stat-icon,
.card-icon.tone-birthday {
    background: linear-gradient(145deg, var(--birthday-soft), #f8cfe6);
    color: var(--birthday-strong);
}

.stat-tile.tone-anniversary .stat-icon,
.card-icon.tone-anniversary {
    background: linear-gradient(145deg, var(--anniversary-soft), #bdeaf2);
    color: var(--anniversary-strong);
}

.stat-tile-link {
    color: inherit;
    text-decoration: none;
}

.stat-tile-link:hover {
    text-decoration: none;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.stat-tile .stat-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Avatar de empleado ---------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    text-transform: uppercase;
    border: 2px solid var(--surface);
    box-shadow: 0 2px 8px rgba(26, 99, 232, 0.30);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-sm {
    width: 38px;
    height: 38px;
    font-size: 14px;
}

.avatar-md {
    width: 76px;
    height: 76px;
    font-size: 26px;
    border-width: 3px;
}

.avatar-lg {
    width: 88px;
    height: 88px;
    font-size: 30px;
    border-width: 3px;
}

.avatar-clickable img {
    cursor: zoom-in;
}

.avatar-clickable img:hover {
    filter: brightness(0.9);
}

.employee-name-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--text);
}

.employee-name-link:hover {
    color: var(--accent-dark);
}

/* ---------- Visor de foto (lightbox) ---------- */

.photo-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 12, 40, 0.85);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 24px;
}

.photo-lightbox.open {
    display: flex;
}

.photo-lightbox img {
    max-width: min(90vw, 480px);
    max-height: 85vh;
    border-radius: 18px;
    border: 5px solid #fff;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    object-fit: cover;
}

.page-head-with-avatar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.form-field-foto {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.form-field-foto .form-field {
    flex: 1;
}

.timeline-row.timeline-row-link {
    color: inherit;
    text-decoration: none;
}

.timeline-row.timeline-row-link:hover {
    background: var(--surface-alt);
    text-decoration: none;
}

/* ---------- Botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--gradient-accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
    box-shadow: var(--shadow-accent);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn svg {
    width: 15px;
    height: 15px;
}

.btn:hover {
    background: var(--gradient-accent-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(26, 99, 232, 0.36);
}

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

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.btn-secondary:hover {
    background: var(--surface-alt);
    color: var(--accent-dark);
    border-color: var(--accent);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--surface);
    color: var(--danger);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.btn-danger:hover {
    background: var(--danger-soft);
    color: var(--danger-strong);
    border-color: #f3c3d1;
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.btn-success {
    background: var(--surface);
    color: var(--success);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.btn-success:hover {
    background: var(--success-soft);
    color: var(--success-strong);
    border-color: #a7e6cd;
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12.5px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.inline-form {
    display: inline;
}

.row-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* ---------- Barra de búsqueda / filtros ---------- */

.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.search-box {
    position: relative;
    flex: 1 1 260px;
    max-width: 380px;
}

.search-box .search-box-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-faint);
    pointer-events: none;
}

.search-box input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 13.5px;
}

.search-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.search-box .search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: var(--muted-soft);
    color: var(--text-muted);
    cursor: pointer;
}

.search-box .search-clear:hover {
    background: var(--border);
    color: var(--text);
}

.search-box .search-clear svg {
    width: 13px;
    height: 13px;
}

.search-box.has-value .search-clear {
    display: flex;
}

.chip-group {
    display: flex;
    gap: 6px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    padding: 4px;
    border-radius: 999px;
}

.chip {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.chip:hover {
    color: var(--text);
}

.chip.active {
    background: var(--gradient-accent);
    color: #fff;
    box-shadow: var(--shadow-accent);
}

/* Pestañas por cuenta: los chips son enlaces, no botones. */
.tab-group {
    display: inline-flex;
    margin-bottom: 20px;
}

.tab-group .chip {
    text-decoration: none;
    display: inline-block;
}

.tab-group .chip:hover {
    text-decoration: none;
}

.tab-group .chip.active:hover {
    color: #fff;
}

.toolbar select {
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    min-width: 170px;
}

.toolbar-count {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.toolbar-count strong {
    color: var(--accent-dark);
    font-weight: 800;
}

/* ---------- Tablas ---------- */

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

th,
td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

th {
    background: var(--surface-alt);
    color: var(--muted-strong);
    font-weight: 800;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr {
    position: relative;
    transition: background .1s ease;
}

tbody tr:hover {
    background: var(--accent-soft);
}

tbody tr.row-hidden {
    display: none;
}

td.actions {
    text-align: right;
}

.empty-row td {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 16px;
}

/* ---------- Tabla con scroll inteligente (.table-shell) ---------- */

.table-shell {
    position: relative;
    overflow: hidden;
}

.table-shell .table-scroll {
    overflow: auto;
    max-height: 68vh;
}

.table-shell thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 var(--border);
}

.table-shell.has-up thead th {
    box-shadow: 0 4px 10px rgba(20, 40, 90, 0.10);
}

.table-shell th.col-actions,
.table-shell td.actions {
    position: sticky;
    right: 0;
    border-left: 1px solid var(--border);
}

.table-shell th.col-actions {
    z-index: 3;
    text-align: right;
}

.table-shell td.actions {
    background: var(--surface);
    transition: background .1s ease, box-shadow .15s ease;
}

.table-shell.has-right th.col-actions,
.table-shell.has-right td.actions {
    box-shadow: -14px 0 18px -12px rgba(20, 40, 90, 0.22);
}

.table-shell tbody tr.row-even,
.table-shell tbody tr.row-even td.actions {
    background: var(--surface-alt);
}

.table-shell tbody tr:hover,
.table-shell tbody tr.row-even:hover,
.table-shell tbody tr:hover td.actions,
.table-shell tbody tr.row-even:hover td.actions {
    background: var(--accent-soft);
}

.table-shell tbody tr.empleado-row {
    cursor: pointer;
}

.table-shell .scroll-fade {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 4;
}

.table-shell .scroll-fade-left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 36px;
    background: linear-gradient(90deg, rgba(19, 28, 46, 0.12), transparent);
}

.table-shell.has-left .scroll-fade-left {
    opacity: 1;
}

.table-shell .scroll-fade-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    background: linear-gradient(to top, rgba(19, 28, 46, 0.12), transparent);
}

.table-shell.has-down .scroll-fade-bottom {
    opacity: 1;
}

.table-shell .scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%) translateY(4px);
    background: var(--accent-strong);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 5;
    white-space: nowrap;
}

.table-shell.show-hint .scroll-hint {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Tabla ajustada al ancho disponible (.table-fit) ---------- */

.table-fit th,
.table-fit td {
    white-space: normal;
}

.table-fit .cell-nowrap {
    white-space: nowrap;
}

.table-fit td:first-child {
    min-width: 190px;
}

.cell-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.cell-stack .cell-main {
    font-weight: 600;
}

.cell-stack .cell-sub {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.badge-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

/* ---------- Celda de empleado (nombre + número) ---------- */

.employee-name-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.employee-sub {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ---------- Botones de acción por fila (iconos) ---------- */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}

.icon-btn .icon,
.icon-btn svg {
    width: 15px;
    height: 15px;
}

.icon-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-dark);
    text-decoration: none;
    transform: translateY(-1px);
}

.icon-btn-danger:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger-strong);
}

.icon-btn-success:hover {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success-strong);
}

/* ---------- Estado vacío (fuera de tabla) ---------- */

.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-muted);
}

.empty-state .empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--muted-soft);
    color: var(--muted-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.empty-state .empty-icon svg {
    width: 22px;
    height: 22px;
}

.empty-state p {
    margin: 0;
    font-size: 13.5px;
}

/* ---------- Badges de estado ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3.5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge-pendiente,
.badge-en_revision,
.badge-por_vencer,
.badge-borrador,
.badge-programado,
.badge-en_curso {
    background: var(--warning-soft);
    color: var(--warning-strong);
}

.badge-aprobada,
.badge-activo,
.badge-asistencia,
.badge-vigente,
.badge-resuelta,
.badge-negativo,
.badge-autorizado,
.badge-autorizada,
.badge-liquidado,
.badge-pagada,
.badge-completado {
    background: var(--success-soft);
    color: var(--success-strong);
}

.badge-rechazada,
.badge-inactivo,
.badge-falta,
.badge-vencido,
.badge-positivo,
.badge-rechazado,
.badge-cancelado,
.badge-cancelada {
    background: var(--danger-soft);
    color: var(--danger-strong);
}

.badge-permiso,
.badge-incapacidad {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.badge-faltante {
    background: var(--muted-soft);
    color: var(--muted-strong);
}

.badge-operador {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.badge-oficina {
    background: var(--anniversary-soft);
    color: var(--anniversary-strong);
}

/* ---------- Formularios ---------- */

.form-card {
    max-width: 680px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field.full {
    grid-column: 1 / -1;
}

.field-hint {
    font-size: 12px;
    color: var(--text-faint);
    margin: -2px 0 0;
}

.field-hint-error {
    color: var(--danger-strong);
    font-weight: 600;
}

.input-error,
.input-error:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted-strong);
}

.checkbox-field {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.checkbox-field label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}

input,
select,
textarea {
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
    font-family: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
}

input[type="file"] {
    border-style: dashed;
    padding: 14px 12px;
    background: var(--surface-alt);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.form-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
}

.form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 30px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.form-section-hint {
    font-size: 12px;
    color: var(--text-faint);
    margin: -8px 0 14px;
}

.filter-bar {
    display: flex;
    align-items: end;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.filter-bar .form-field {
    min-width: 160px;
}

/* ---------- Mensajes ---------- */

.flash {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.flash-ok {
    background: var(--success-soft);
    color: var(--success-strong);
    border-color: #b9e9d4;
}

.flash-error {
    background: var(--danger-soft);
    color: var(--danger-strong);
    border-color: #f4c4d3;
}

.flash-warn {
    background: var(--warning-soft);
    color: var(--warning-strong);
    border-color: #f2dcae;
    /* Estos avisos llevan una segunda línea con el detalle. */
    display: block;
}

.flash-warn .field-hint {
    display: block;
    margin: 4px 0 0;
    color: inherit;
    opacity: .85;
    font-weight: 500;
}

/* ---------- Alertas (documentos / cumpleaños) ---------- */

.alert-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.alert-section {
    margin-bottom: 26px;
}

.alert-section h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--muted-soft);
    color: var(--muted-strong);
}

.alert-section-icon .icon {
    width: 16px;
    height: 16px;
}

.alert-section-icon.tone-danger {
    background: var(--danger-soft);
    color: var(--danger-strong);
}

.alert-section-icon.tone-warning {
    background: var(--warning-soft);
    color: var(--warning-strong);
}

.alert-section-icon.tone-accent {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.alert-section-icon.tone-birthday {
    background: var(--birthday-soft);
    color: var(--birthday-strong);
}

.alert-section-icon.tone-anniversary {
    background: var(--anniversary-soft);
    color: var(--anniversary-strong);
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.timeline-row {
    background: var(--surface);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}

.timeline-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.timeline-left > div {
    min-width: 0;
}

.timeline-row .timeline-main {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-row .timeline-sub {
    color: var(--text-muted);
    font-size: 12.5px;
}

.dias-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--muted-soft);
    color: var(--muted-strong);
    white-space: nowrap;
    flex: none;
}

.dias-badge-hoy {
    background: var(--birthday);
    color: #fff;
}

.dias-badge-pronto {
    background: var(--birthday-soft);
    color: var(--birthday-strong);
}

.dias-badge-anniv-hoy {
    background: var(--anniversary);
    color: #fff;
}

.dias-badge-anniv-pronto {
    background: var(--anniversary-soft);
    color: var(--anniversary-strong);
}

/* ---------- Expediente digital ---------- */

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.doc-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .12s ease, transform .12s ease;
}

.doc-tile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.doc-tile.doc-tile-vigente {
    border-left-color: var(--success);
}

.doc-tile.doc-tile-por_vencer {
    border-left-color: var(--warning);
}

.doc-tile.doc-tile-vencido {
    border-left-color: var(--danger);
}

.doc-tile .doc-tile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.doc-tile-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.doc-tile h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-file-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    background: var(--muted-soft);
    color: var(--muted-strong);
}

.doc-file-chip-pdf {
    background: var(--danger-soft);
    color: var(--danger-strong);
}

.doc-file-chip-doc {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.doc-file-chip-xls {
    background: var(--success-soft);
    color: var(--success-strong);
}

.doc-tile .doc-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.doc-tile .doc-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.doc-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
}

.doc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.doc-tile-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.doc-tile-link:hover .doc-thumb {
    border-color: var(--accent);
}

/* ---------- Ficha de empleado ---------- */

.detail-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.detail-card h2 {
    font-size: 13px;
    font-weight: 800;
    color: var(--muted-strong);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 14px;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px 20px;
}

.detail-info-grid .info-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-strong);
    margin-bottom: 2px;
}

.detail-info-grid .info-value {
    font-size: 13.5px;
    color: var(--text);
}

.detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.detail-section-head h2 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

/* ---------- Historial de seguimiento (tickets de mantenimiento) ---------- */

.seguimiento-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.seguimiento-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface);
}

.seguimiento-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-dark);
    margin-bottom: 6px;
}

.seguimiento-meta .seguimiento-fecha {
    font-weight: 500;
    color: var(--text-muted);
}

.seguimiento-mensaje {
    font-size: 13.5px;
    color: var(--text);
    white-space: pre-wrap;
}

.evidencia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.evidencia-thumb {
    display: block;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1;
}

.evidencia-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* El botón de borrar va encima de la foto y solo aparece al pasar el
   cursor: es destructivo, no debe estar invitando al clic todo el rato. */
.evidencia-item {
    position: relative;
}

.evidencia-borrar {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity .15s ease;
}

.evidencia-item:hover .evidencia-borrar,
.evidencia-borrar:focus-within {
    opacity: 1;
}

.evidencia-borrar .icon-btn {
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* ---------- Carga de documentos en el alta ---------- */

.doc-upload-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-upload-row {
    display: grid;
    grid-template-columns: 180px 1fr 160px;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.doc-upload-row:last-child {
    border-bottom: none;
}

.doc-upload-row .doc-upload-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* ---------- Login ---------- */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(900px 560px at 15% 10%, rgba(59, 130, 246, 0.40), transparent 60%),
        radial-gradient(760px 520px at 100% 100%, rgba(23, 182, 166, 0.30), transparent 55%),
        linear-gradient(160deg, #061230, #0d2c72 60%, #1457d6);
    padding: 24px;
}

.login-card {
    width: 860px;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.login-card .login-hero {
    background: var(--gradient-accent);
    color: #fff;
    padding: 46px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.login-card .login-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    top: -120px;
    right: -100px;
}

.login-card .login-hero .brand-logo {
    height: 84px;
    width: auto;
    align-self: flex-start;
    background: #fff;
    border-radius: 14px;
    padding: 8px 12px;
    margin-bottom: 6px;
    position: relative;
}

.login-card .login-hero h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    font-family: "Sora", sans-serif;
    position: relative;
}

.login-card .login-hero p {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 260px;
    position: relative;
}

.login-card .login-form {
    padding: 46px 40px;
}

.login-card h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.login-card .subtitle {
    margin: 0 0 26px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.login-card .form-field {
    margin-bottom: 16px;
}

.login-card .btn {
    width: 100%;
    justify-content: center;
    padding: 11px;
    margin-top: 6px;
}

@media (max-width: 720px) {
    .login-card {
        grid-template-columns: 1fr;
    }

    .login-card .login-hero {
        padding: 32px 30px;
    }

    .login-card .login-form {
        padding: 32px 30px;
    }
}

/* ---------- Página de error ---------- */

.error-page {
    max-width: 480px;
    margin: 80px auto;
    text-align: center;
}

.error-page .code {
    font-size: 48px;
    font-weight: 800;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 8px;
}

/* ---------- Hoja de captura masiva de viajes ---------- */

.hoja-tips {
    margin: 0;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.7;
}

.hoja-pegar {
    margin-bottom: 14px;
}

.hoja-pegar summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--accent);
}

.hoja-pegar textarea {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.hoja-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.hoja-resumen {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

/* La hoja se lee como una hoja de cálculo: celdas al ras, sin bordes
   redondeados y con el encabezado fijo al hacer scroll. */
.hoja-wrap {
    overflow: auto;
    max-height: 70vh;
}

table.hoja-carga {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}

table.hoja-carga thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-alt);
    white-space: nowrap;
    padding: 8px 6px;
}

table.hoja-carga td {
    padding: 0;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

table.hoja-carga td.col-num {
    padding: 0 8px;
    text-align: right;
    color: var(--text-faint);
    font-weight: 700;
    background: var(--surface-alt);
    white-space: nowrap;
}

table.hoja-carga td.col-pago {
    padding: 0 8px;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

table.hoja-carga input,
table.hoja-carga select {
    width: 100%;
    min-width: 92px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 7px 6px;
    font-size: 12.5px;
    box-shadow: none;
}

table.hoja-carga input[name="referencia"],
table.hoja-carga input[name="observaciones"] {
    min-width: 130px;
    text-transform: uppercase;
}

table.hoja-carga select[name="operador_id"],
table.hoja-carga select[name="destino_id"],
table.hoja-carga select[name="cliente_final_id"] {
    min-width: 150px;
}

table.hoja-carga input:focus,
table.hoja-carga select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--surface);
}

/* Celda que el pegado no supo interpretar, o referencia duplicada. */
table.hoja-carga .celda-mala {
    background: var(--danger-soft);
    box-shadow: inset 0 0 0 1px var(--danger);
}

table.hoja-carga tr.fila-error td.col-num {
    background: var(--danger-soft);
    color: var(--danger-strong);
}

.hoja-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    cursor: help;
}

.hoja-errores ul {
    margin: 0;
    padding-left: 18px;
    color: var(--danger-strong);
    font-size: 13px;
    line-height: 1.8;
}

/* Muchas referencias no caben en una sola línea de chips. */
.chip-group.chip-wrap {
    flex-wrap: wrap;
    border-radius: 12px;
    max-height: 128px;
    overflow-y: auto;
}

.chip-static {
    color: var(--text-muted);
    cursor: default;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Combo con buscador (static/js/combobox.js) ---------- */

.combo {
    position: relative;
    width: 100%;
}

/* El <select> sigue ahí con su name y su value; solo deja de verse. */
.combo select {
    display: none;
}

.combo .combo-input {
    width: 100%;
}

/* Mientras se escribe sin haber elegido, el campo avisa que todavía no
   hay nada seleccionado. */
.combo .combo-input.combo-sin-elegir {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.combo-lista {
    position: fixed;
    overscroll-behavior: contain;
    z-index: 60;
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(20, 40, 90, 0.18);
}

.combo-opcion {
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo-opcion:hover,
.combo-opcion.activa {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.combo-opcion.elegida {
    font-weight: 700;
}

.combo-vacio {
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Dentro de la hoja de captura el combo va al ras, como las demás celdas. */
table.hoja-carga .combo-input {
    min-width: 92px;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 7px 6px;
    font-size: 12.5px;
}

table.hoja-carga .combo-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--surface);
}

table.hoja-carga .combo-input.combo-sin-elegir {
    background: var(--accent-soft);
}

table.hoja-carga .combo[data-campo="operador_id"] .combo-input,
table.hoja-carga .combo[data-campo="destino_id"] .combo-input,
table.hoja-carga .combo[data-campo="cliente_final_id"] .combo-input,
table.hoja-carga .combo[data-campo="unidad_id"] .combo-input,
table.hoja-carga .combo[data-campo="caja_id"] .combo-input {
    min-width: 150px;
}

/* El desplegable de la hoja se ensancha aparte: "104 · UTILITY · 60UZ5E"
   no cabe en el ancho de la celda. */
.combo-lista {
    min-width: 210px;
}

/* ---------- Panel de filtros de tabla (static/js/tablafiltro.js) ---------- */

.filtro-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.filtro-panel .search-box {
    flex: 1 1 300px;
}

/* Los selectores y el conteo se van a la derecha y bajan juntos en
   pantallas angostas. */
.filtro-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.filtro-campos select {
    padding: 8px 10px;
    font-size: 12.5px;
    border-radius: 999px;
}

.filtro-conteo {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.filtro-conteo strong {
    color: var(--text);
}

/* Los chips de filtro son <button>, no enlaces. */
.filtro-panel .chip-group .chip {
    font-size: 12px;
    padding: 7px 12px;
}

@media (max-width: 900px) {
    .filtro-campos {
        margin-left: 0;
    }
}

/* El filtro de tablas esconde renglones con el atributo hidden; esta
   regla evita que un display de la hoja se lo pase por alto. */
[hidden] {
    display: none !important;
}

/* ---------- Hoja de captura: guía de columnas y semana ---------- */

.hoja-orden {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 4px 14px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.hoja-orden li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 3px 0;
}

.hoja-orden li span {
    flex: none;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 800;
}

.hoja-orden li em {
    color: var(--text-faint);
    font-size: 12px;
    font-style: normal;
}

.hoja-faltantes ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.9;
}

.hoja-faltantes a {
    white-space: nowrap;
    font-weight: 700;
}

/* El resumen semanal se comparte con la lista de viajes, donde queda
   pegado a la tabla de arriba si no se le da aire propio. */
.hoja-semana {
    margin: 22px 0;
}

.hoja-semana summary {
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
}

.hoja-semana-periodo {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.semana-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 6px;
    margin-top: 12px;
}

.semana-tarjeta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-alt);
    font-size: 12.5px;
}

/* Quien no ha hecho viajes se atenúa: lo que interesa es quién va cargado. */
.semana-tarjeta.sin-viajes {
    opacity: .5;
}

.semana-nombre {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.semana-cuenta {
    flex: none;
    min-width: 24px;
    text-align: center;
    font-weight: 800;
    color: var(--accent-strong);
}

.semana-pago {
    flex: none;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Pantalla de exportación ---------- */

/* Un renglón por decisión: etiqueta a la izquierda, opciones a la
   derecha. Son tres y caben en una pantalla sin bajar. */
.exp-linea {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.exp-linea:last-of-type {
    border-bottom: none;
}

.exp-etiqueta {
    flex: none;
    width: 76px;
    padding-top: 4px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
}

.exp-opciones {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    min-width: 0;
}

.exp-radio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
}

.exp-fechas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}


/* ---------- Captura de servicios de renta ---------- */

.form-card-ancho {
    max-width: 100%;
}

.input-corto {
    max-width: 90px;
}

/* Lo mismo que su Excel calcula en tres columnas, pero visible antes de
   guardar: si el total no cuadra, se ve aquí y no en la factura. */
.resumen-factura {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 14px 18px;
    margin: 4px 0 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.resumen-factura > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.resumen-factura span {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.resumen-factura strong {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.resumen-factura .resumen-total strong {
    color: var(--accent-dark);
}

/* Renglón del tabulador que todavía nadie ha llenado. */
tr.renglon-vacio {
    opacity: .7;
}


/* ---------- Zona de borrado irreversible ---------- */

/* Va visualmente separada del resto del formulario: lo que hay aquí no
   se deshace, y no debe leerse como una acción más. */
.zona-peligro {
    margin-top: 26px;
    border: 1px solid var(--danger);
    background: var(--danger-soft);
}

.zona-peligro h2 {
    color: var(--danger-strong);
    margin-top: 0;
}

.lista-peligro {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.8;
}

.zona-peligro code {
    font-weight: 800;
    letter-spacing: .5px;
}

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

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


/* ---------- Historial de taller de una unidad ---------- */

.historial-ticket {
    margin-bottom: 14px;
    padding: 16px 18px;
}

/* El que sigue abierto se marca de lado: es el que importa hoy. */
.historial-ticket.abierto {
    border-left: 3px solid var(--warning);
}

.historial-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.historial-titulo {
    font-weight: 800;
    font-size: 15px;
}

.historial-cifras {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.historial-monto {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--warning-strong);
}

.historial-descripcion {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--text-muted);
}

/* Los trabajos van indentados: cuelgan del ticket, no son hermanos suyos. */
.historial-trabajos {
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid var(--border);
}

.historial-trabajos .seguimiento-item {
    background: var(--surface-alt);
}


/* ---------- Pantalla de seguridad de la cuenta ---------- */

.seguridad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px;
    align-items: start;
}

.motivos-password {
    margin: 6px 0 0;
    padding-left: 18px;
    font-weight: 500;
    line-height: 1.7;
}

.reglas-password {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--text-muted);
}

.reglas-password li {
    padding: 2px 0 2px 20px;
    position: relative;
}

/* Neutro mientras no escriben; el color solo aparece al teclear. */
.reglas-password li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: var(--text-faint);
}

.reglas-password li.cumple {
    color: var(--success-strong);
}

.reglas-password li.cumple::before {
    content: "✓";
    color: var(--success);
    font-weight: 800;
}

.reglas-password li.falla {
    color: var(--danger-strong);
}

.reglas-password li.falla::before {
    content: "✕";
    color: var(--danger);
    font-weight: 800;
}

.medidor {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
}

.medidor-barra {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.medidor-barra span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width .18s ease, background .18s ease;
}

.medidor-barra span.debil { background: var(--danger); }
.medidor-barra span.media { background: var(--warning); }
.medidor-barra span.fuerte { background: var(--success); }

.medidor-texto {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---------- KPIs de totales (recibos de nómina) ---------- */

/* Los montos largos no caben con el tamaño normal del stat-value. */
.stat-value.kpi-monto {
    font-size: 20px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.kpi-grupo {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: 14px 16px;
}

.kpi-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 10px;
}

.kpi-titulo em {
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-size: 11.5px;
}

.kpi-renglon {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
    color: var(--text-muted);
}

.kpi-renglon strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kpi-renglon .kpi-resta {
    color: var(--danger-strong);
}

/* El renglón de cierre de cada tarjeta se separa con una línea. */
.kpi-renglon.kpi-total {
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-weight: 700;
}

.kpi-renglon.kpi-desembolso strong {
    color: var(--accent-strong);
}

tfoot .fila-totales td {
    background: var(--surface-alt);
    border-top: 2px solid var(--border-strong);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Cuántos empleados traen ese descuento, junto a su etiqueta. */
.kpi-cuantos {
    font-style: normal;
    color: var(--text-faint);
    font-size: 11.5px;
}

/* ---------- Tabla compacta (viajes) ---------- */

/* Con 11 columnas cada píxel cuenta: se aprieta el relleno y se baja un
   punto la letra para no obligar a barrer de lado. */
table.tabla-compacta {
    font-size: 12.5px;
}

table.tabla-compacta th,
table.tabla-compacta td {
    padding: 9px 10px;
}

table.tabla-compacta .cell-sub {
    font-size: 11px;
}

/* El extra tiene que saltar a la vista: es dinero que no venía en la
   tarifa y define lo que se le paga al operador. */
.badge-extra {
    background: var(--warning-soft);
    color: var(--warning-strong);
    border: 1px solid var(--warning);
    font-variant-numeric: tabular-nums;
}

td.col-extra {
    text-align: right;
}

/* Badge que además es botón (abre el desglose de extras del viaje). */
.badge-boton {
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.badge-boton:hover {
    filter: brightness(.95);
}

/* ---------- Desglose de extras de un viaje ---------- */

.extra-lista {
    margin-bottom: 18px;
}

.extra-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.extra-fila:last-child {
    border-bottom: none;
}

.extra-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.extra-concepto {
    font-weight: 700;
    font-size: 13.5px;
}

.extra-monto {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Un extra cancelado sigue a la vista, pero se lee como lo que es: un
   cargo que ya no cuenta. */
.extra-fila.cancelado,
tr.fila-cancelada {
    opacity: .55;
}

.extra-fila.cancelado .extra-monto,
tr.fila-cancelada td:nth-child(3) {
    text-decoration: line-through;
}

/* Montos de rentabilidad: la utilidad negativa tiene que saltar. */
.monto-positivo {
    color: var(--success-strong);
}

.monto-negativo {
    color: var(--danger-strong);
}

td.col-monto,
th.col-monto {
    text-align: right;
}

td.col-monto .cell-stack {
    align-items: flex-end;
}


/* ============================================================
   Revisión de la carga de Arca
   ============================================================
   La imagen del correo llega comprimida y el lector marca los datos
   que no vio con claridad. Estas clases son las que hacen que el ojo
   caiga en ellos antes de guardar: amarillo = confírmalo, rojo = algo
   no cuadró contra el catálogo. */

.celda-dudosa {
    background: var(--warning-soft);
    border-color: #f2dcae;
}

/* El renglón entero cuando algo no cruzó, no solo la celda: el aviso
   suele ser de la combinación (placa de uno, nombre de otro) y no de
   un campo en particular. */
tr.fila-error > td {
    background: var(--danger-soft);
}

tr.fila-avisos > td {
    padding-top: 0;
    border-top: 0;
}

.aviso-linea {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--danger-strong);
    padding: 2px 0;
}

.aviso-linea .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}


/* Conteo de una sola cuenta dentro del resumen semanal (Arca). Va como
   pastilla al lado del total para que se lean como dos cifras distintas
   y no como una sola: "8 viajes, 3 de Arca". */
.semana-de-cuenta {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* En cero no se apaga la tarjeta completa (el operador sí trae viajes de
   otras cuentas): solo esta pastilla, que es la que está en cero. */
.semana-de-cuenta.en-cero {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
}


/* Columnas que NO vienen del Excel del cliente sino que las deduce el
   sistema (el operador desde las placas, la demora desde los renglones
   de horas extra). Se marcan distinto para que quien captura sepa que
   ahí no tiene que pegar nada. */
.col-derivada {
    background: var(--accent-soft);
}

th.col-derivada {
    background: var(--accent-strong);
}

/* La columna del id de unidad viaja escondida: en pantalla se ve el
   económico y las placas, que es lo que ellos pegan. */
.oculto {
    display: none;
}

/* Renglón al que se le plegó una demora que venía como fila aparte. */
tr.fila-con-demora > td {
    background: var(--warning-soft);
}