/* ════════════════════════════════════════════════════════════════
Check to Drive — Override de marca sobre Tabler
Paleta corporativa de checktodrive.com:
#00897B Verde primario (logo, CTAs, sello)
#1a1a1a Charcoal (header / footer)
#00796B Verde oscuro hover
#f4f9f6 Verde muy claro fondo sutil
════════════════════════════════════════════════════════════════ */
:root {
--ctd-green: #00897B;
--ctd-green-dark: #00796B;
--ctd-green-darker: #00564B;
--ctd-green-light: #4DB6AC;
--ctd-green-50: #E0F2F1;
--ctd-green-100: #B2DFDB;
--ctd-charcoal: #1a1a1a;
--ctd-charcoal-2: #2a2a2a;
/* Variables Tabler que sobrescribimos */
--tblr-primary: var(--ctd-green);
--tblr-primary-rgb: 0, 137, 123;
--tblr-primary-darken: var(--ctd-green-dark);
--tblr-primary-lt: var(--ctd-green-50);
--tblr-link-color: var(--ctd-green-dark);
--tblr-link-hover-color: var(--ctd-green-darker);
/* El «exito» NO sigue a la marca (22/09/2026): --ctd-green lo redefine el
layout con el color de cada marca, y en RUTABUS (rojo) los «Guardado»,
«Gratis» y «Aprobada» salian rojos, como errores. Verde fijo: el de
Check to Drive, para que ahi no cambie nada. */
--tblr-success: #00897B;
--tblr-success-rgb: 0, 137, 123;
--tblr-border-color: #e6ecf2;
--tblr-body-bg: #f7faf9;
--tblr-card-bg: #ffffff;
}
/* Botón primario corporativo */
.btn-primary,
.btn.bg-primary,
.bg-primary {
background-color: var(--ctd-green) !important;
border-color: var(--ctd-green) !important;
color: #fff !important;
}
.btn-primary:hover,
.btn.bg-primary:hover {
background-color: var(--ctd-green-dark) !important;
border-color: var(--ctd-green-dark) !important;
}
.btn-outline-primary {
color: var(--ctd-green-dark) !important;
border-color: var(--ctd-green) !important;
}
.btn-outline-primary:hover {
background-color: var(--ctd-green) !important;
color: #fff !important;
}
/* Enlaces y elementos con text-primary */
.text-primary,
a.text-primary {
color: var(--ctd-green-dark) !important;
}
/* Sidebar Tabler: estilo corporativo */
.navbar-vertical.navbar-dark,
.navbar-vertical {
background: #042335;
color: #d4d4d8;
}
.navbar-vertical .navbar-brand {
color: #fff !important;
font-weight: 700;
letter-spacing: -0.3px;
}
.navbar-vertical .nav-link {
color: rgba(255, 255, 255, .72);
}
.navbar-vertical .nav-link:hover {
color: #fff;
background-color: rgba(255, 255, 255, .04);
}
.navbar-vertical .nav-link.active {
color: #fff;
background: linear-gradient(90deg, rgba(0,137,123,.18) 0%, rgba(0,137,123,0) 100%);
border-left: 3px solid var(--ctd-green);
}
.navbar-vertical .nav-link .nav-link-icon {
color: var(--ctd-green-light);
}
/* ── RUTABUS (solo app.rutabus.es / modulo hoja_ruta): sidebar en degradado
negro → rojo oscuro (identidad del iso) + acento activo rojo. Scoped a
body.brand-rutabus para NO afectar a Check to Drive, que comparte este CSS. ── */
/* Superficie sólida y limpia (misma familia visual que el portal del conductor:
fondo tranquilo, acento de marca reservado para el elemento activo). */
body.brand-rutabus .navbar-vertical.navbar-dark,
body.brand-rutabus .navbar-vertical {
background: #0f1115;
}
/* nav-links como píldoras redondeadas (en vez de barra lateral) */
body.brand-rutabus .navbar-vertical .nav-link {
border-radius: 10px;
margin: 2px .5rem;
color: rgba(255, 255, 255, .74);
transition: background-color .15s ease, color .15s ease;
}
body.brand-rutabus .navbar-vertical .nav-link:hover {
background-color: rgba(255, 255, 255, .06);
color: #fff;
}
/* Activo: píldora sólida con el rojo de marca, sin borde izquierdo */
body.brand-rutabus .navbar-vertical .nav-link.active {
background: #d30b00;
border-left: 0;
color: #fff;
box-shadow: 0 2px 10px rgba(211, 11, 0, .35);
}
body.brand-rutabus .navbar-vertical .nav-link.active .nav-link-icon {
color: #fff;
}
body.brand-rutabus .navbar-vertical .nav-link .nav-link-icon {
color: rgba(255, 255, 255, .82);
}
/* Sub-navegación anidada: píldoras más discretas, alineadas con el grupo */
body.brand-rutabus .navbar-vertical .nav-vertical .nav-link {
margin: 1px .35rem 1px 0;
font-size: .875rem;
}
body.brand-rutabus .navbar-vertical .nav-vertical .nav-link.active {
box-shadow: none;
background: rgba(211, 11, 0, .85);
}
/* Logo de la empresa (tenant) en el menú lateral (fondo oscuro). Si solo hay
logo para fondo claro, se envuelve en una pastilla blanca para que se lea. */
.rb-brand-pill {
display: inline-flex;
align-items: center;
background: #fff;
border-radius: 14px;
padding: 11px 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.rb-brand-pill img {
filter: none !important;
}
/* Rincon de colaboradores (pie del sidebar, solo Rutabus) */
.rb-collab {
margin: .75rem .25rem .5rem;
padding: .85rem .75rem 0;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, .10);
}
.rb-collab-cap {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .06em;
color: rgba(255, 255, 255, .55);
margin-bottom: .45rem;
}
.rb-collab-cap-mid {
margin-top: .6rem;
}
.rb-collab-rutabus {
display: block;
width: 100%;
max-width: 150px;
height: auto;
margin: .15rem auto .1rem;
}
.rb-collab-confebus {
display: inline-block;
margin-top: .15rem;
line-height: 0;
}
.rb-collab-confebus img {
display: block;
width: 100%;
max-width: 150px;
height: auto;
}
/* Pastilla blanca para el logo de asociacion colaboradora en el pie del sidebar
(RutaPorte y otras marcas no-Rutabus): el logo del asociado vive sobre fondo
claro, y el sidebar es oscuro, asi que necesita fondo blanco para leerse. */
.rb-collab-pill {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 10px;
padding: 8px 14px;
margin-top: .15rem;
max-width: 168px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.rb-collab-pill img {
display: block;
width: 100%;
height: auto;
filter: none !important;
}
/* Top bar */
.navbar.bg-white {
border-bottom: 1px solid var(--tblr-border-color);
}
/* Cards con sombra suave corporativa */
.card {
border: 1px solid var(--tblr-border-color);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.card-header {
background: #fff;
border-bottom: 1px solid var(--tblr-border-color);
}
/* KPI cards con acento */
.kpi-card {
border-left: 4px solid var(--ctd-green);
}
.kpi-card.kpi-warning { border-left-color: #f59f00; }
.kpi-card.kpi-danger { border-left-color: #d63939; }
.kpi-card.kpi-info { border-left-color: #4263eb; }
.kpi-card .kpi-value {
font-size: 1.875rem;
font-weight: 700;
color: var(--ctd-charcoal);
line-height: 1.1;
}
.kpi-card .kpi-label {
color: #6c7a8b;
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* Logo corporativo */
.ctd-logo {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -0.4px;
}
.ctd-logo .ctd-logo-mark {
width: 28px;
height: 28px;
border-radius: 7px;
background: var(--ctd-green);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 800;
font-size: 14px;
}
.ctd-logo .ctd-logo-mark.lg {
width: 40px;
height: 40px;
font-size: 18px;
border-radius: 10px;
}
/* Tabla nativa Tabler con cabecera más limpia */
.table > :not(caption) > * > * {
padding: .75rem 1rem;
}
.table thead th {
background: #fafbfc;
color: var(--ctd-charcoal);
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--tblr-border-color);
}
/* Badges de exito: verde fijo, no el de la marca (ver --tblr-success) */
.badge.bg-success,
.bg-success {
background-color: var(--tblr-success) !important;
}
.badge.bg-primary-lt {
background: var(--ctd-green-50);
color: var(--ctd-green-darker);
}
/* Page header con franja verde sutil */
.page-header {
border-bottom: 1px solid var(--tblr-border-color);
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
}
.page-pretitle {
color: var(--ctd-green-dark);
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.6px;
font-weight: 700;
}
/* Login layout */
.ctd-auth-bg {
min-height: 100vh;
display: flex;
align-items: flex-start; /* centrado seguro: ver .ctd-auth-bg > .container */
justify-content: center;
/* Fondo e intensidad del velo por marca: las vars las inyecta el layout de
auth desde config/brands.php. Sin marca (Check to Drive) manda el fallback. */
background-color: var(--ctd-auth-bg-color, #042335);
background-image:
linear-gradient(var(--ctd-auth-veil-dir, to bottom), var(--ctd-auth-veil-from, rgba(4,35,53,.62)), var(--ctd-auth-veil-to, rgba(4,35,53,.72))),
var(--ctd-auth-bg-image, url('../img/login-bg.webp'));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Logo del promotor bajo la tarjeta del login (Confebus en RUTABUS): se muestra
con su propia transparencia, sin pastilla blanca detrás. */
.ctd-auth-partner {
margin-top: 1.25rem;
display: inline-flex;
align-items: center;
}
.ctd-auth-partner img { display: block; height: 100px; width: auto; }
/* Isotipo de marca asomando por la esquina inferior derecha, replicando el hero
de rutabus.es. Sin --ctd-auth-iso-on el pseudo-elemento NI SE GENERA
(content:none), asi que las marcas sin isotipo no pagan nada. */
.ctd-auth-bg::after {
content: var(--ctd-auth-iso-on, none);
position: fixed;
right: 0;
bottom: 0;
width: 600px;
height: 600px;
transform: translate(26%, 28%);
background: var(--ctd-auth-iso, none) center center / contain no-repeat;
opacity: .5;
pointer-events: none;
z-index: 1;
}
/* El contenido siempre por encima del isotipo (mismo truco que el hero). */
.ctd-auth-bg > * { position: relative; z-index: 2; }
/* Centrado seguro en vertical: los margenes auto de flexbox absorben el
espacio libre cuando sobra alto (centra, como antes) y valen 0 cuando el
contenido es mas alto que la ventana, de forma que arranca arriba y el
scroll llega a todo. Con align-items:center el desbordamiento superior
quedaba inalcanzable y el logotipo de cabecera se perdia. */
.ctd-auth-bg > .container { margin-top: auto; margin-bottom: auto; }
@media (max-width: 767px) {
.ctd-auth-bg::after { width: 340px; height: 340px; }
}
/* Pagina de error: no tiene tarjeta, asi que su titular usaba el color de texto
por defecto (oscuro) y se perdia sobre el fondo. Solo .ctd-error: en el resto
de pantallas de acceso el .h3 vive DENTRO de la tarjeta blanca. */
.ctd-error .h3 { color: #fff; }
/* Texto secundario (footer ©) legible sobre el fondo oscuro del login */
.ctd-auth-bg .text-muted,
.ctd-auth-bg .text-muted a { color: rgba(255,255,255,.66) !important; }
/* Logo del login: mismo ancho que la tarjeta del formulario */
.ctd-auth-logo { width: 100%; max-width: 460px; height: auto; display: block; }
/* Sub-enlaces del menú con contador en texto plano */
aside.navbar-vertical .nav-vertical .nav-link { padding-right: 1rem; }
/* Tiles de la ficha: badge grande y centrado */
.kpi-badge {
font-size: 1rem;
font-weight: 700;
padding: .5rem .85rem;
border-radius: 10px;
line-height: 1.2;
display: inline-block;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
/* Ficha del conductor — cabecera hero */
.ctd-driver-hero {
border: 0;
color: #fff;
background: linear-gradient(135deg, var(--ctd-green) 0%, var(--ctd-green-dark) 100%);
box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.ctd-driver-hero h2 { color: #fff; font-weight: 700; }
.ctd-driver-hero .text-secondary { color: rgba(255,255,255,.78) !important; }
.ctd-driver-hero code { background: rgba(255,255,255,.16); color: #fff; }
.ctd-driver-hero .btn-outline-secondary {
color: #fff !important; border-color: rgba(255,255,255,.55) !important; background: transparent;
}
.ctd-driver-hero .btn-outline-secondary:hover { background: rgba(255,255,255,.14) !important; }
.ctd-driver-hero .btn-outline-primary {
color: #fff !important; border-color: rgba(255,255,255,.7) !important;
}
.ctd-driver-hero .btn-danger,
.ctd-driver-hero .btn-outline-danger {
color: #fff !important;
background: #e03131 !important;
border: 2px solid #fff !important;
font-weight: 600;
box-shadow: 0 3px 10px rgba(0,0,0,.28) !important;
}
.ctd-driver-hero .btn-danger:hover,
.ctd-driver-hero .btn-outline-danger:hover { background: #c92a2a !important; }
.ctd-driver-hero .btn-primary { background:#fff !important; color: var(--ctd-green-dark) !important; border-color:#fff !important; }
.ctd-driver-hero .audit-status,
.ctd-driver-hero .badge { box-shadow: 0 1px 2px rgba(0,0,0,.12); }
/* Estados de la cabecera */
.ctd-driver-hero.ctd-hero-danger {
background: linear-gradient(135deg, #e8590c 0%, #c0392b 100%);
}
.ctd-driver-hero.ctd-hero-danger.ctd-hero-retirado {
background: linear-gradient(135deg, #c0392b 0%, #7a1f17 100%);
}
.ctd-driver-hero.ctd-hero-warn {
background: linear-gradient(135deg, #f08c00 0%, #d9480f 100%);
}
.ctd-driver-hero.ctd-hero-muted {
background: linear-gradient(135deg, #5a6b7b 0%, #3a4651 100%);
}
/* Avatar: el botón de cámara va FUERA del recorte circular */
.ctd-avatar-wrap { position: relative; width: 112px; height: 112px; }
.ctd-avatar {
width: 112px; height: 112px;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,.18);
border: 3px solid rgba(255,255,255,.55);
}
/* Avatar clicable: añadir foto (label) o quitarla (button) */
.ctd-avatar-btn { padding: 0; cursor: pointer; display: block; font: inherit; -webkit-appearance: none; appearance: none; }
.ctd-avatar-btn:hover { filter: brightness(1.08); }
.ctd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctd-avatar .ctd-avatar-initials {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
font-size: 2.4rem; font-weight: 700; color: #fff;
}
.ctd-avatar-edit { position: absolute; right: -4px; bottom: -4px; margin: 0; }
.ctd-avatar-edit label {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; margin: 0;
background: #1a1a1a; color: #fff; cursor: pointer;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.ctd-avatar-edit label:hover { background: #000; }
.ctd-avatar-del { position: absolute; right: -6px; top: -6px; margin: 0; }
.ctd-avatar-del button {
width: 26px; height: 26px; padding: 0;
display: flex; align-items: center; justify-content: center;
background: #c0392b; color: #fff; border: 2px solid #fff;
border-radius: 50%; cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.ctd-avatar-del button:hover { background: #962d22; }
/* Anillo de puntos en la cabecera */
.ctd-points-ring {
width: 88px; height: 88px;
border-radius: 50%;
background: rgba(255,255,255,.16);
border: 3px solid rgba(255,255,255,.6);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: #fff; line-height: 1;
}
.ctd-points-ring .ctd-points-num { font-size: 2.1rem; font-weight: 800; }
.ctd-points-ring .ctd-points-cap { font-size: .7rem; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }
.ctd-auth-card {
max-width: 460px;
width: 100%;
border: 1px solid var(--tblr-border-color);
background: #fff;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(15, 30, 22, .08);
}
/* Driver portal (PWA) — mobile-first más cálido */
.driver-shell {
background: #f7faf9;
min-height: 100dvh;
/* Respeta la muesca/notch en móviles (PWA con viewport-fit=cover):
baja todo el contenido por debajo de la ceja. En pantallas sin notch vale 0. */
padding-top: env(safe-area-inset-top, 0px);
}
.driver-hero {
background: var(--ctd-charcoal);
color: #fff;
padding: 24px 20px 32px;
border-radius: 0 0 24px 24px;
box-shadow: 0 8px 24px rgba(0, 121, 107, .25);
}
.driver-hero .driver-greeting {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.6px;
opacity: .85;
}
.driver-hero .driver-name {
font-size: 1.4rem;
font-weight: 700;
margin-top: 2px;
}
.driver-status-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
}
.driver-status-pill.en_vigor { background: rgba(255,255,255,.22); color: #fff; }
.driver-status-pill.suspendido { background: #f59f00; color: #fff; }
.driver-status-pill.retirado { background: #d63939; color: #fff; }
.driver-status-pill.pending,
.driver-status-pill.no_consultado,
.driver-status-pill.error { background: rgba(255,255,255,.12); color: rgba(255,255,255,.78); }
.driver-points-inline {
display: inline-flex;
align-items: center;
gap: 4px;
color: rgba(255,255,255,.9);
font-size: 1rem;
font-weight: 700;
line-height: 1;
}
.driver-points-inline small {
font-size: 0.7rem;
font-weight: 400;
opacity: .72;
}
/* ── RUTABUS portal del conductor: franja de 3 logos (tenant · RUTABUS ·
Confebus) sobre la cabecera, cabecera con degradado negro→rojo (igual que
el menú) y valoración compacta junto al nombre. Clases solo presentes en
el markup gated a rutabus → inertes en Check to Drive. ── */
.driver-brandbar {
display: flex;
align-items: center;
gap: 10px;
padding: 2px 2px 14px;
}
.driver-brandbar .db-col {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.driver-brandbar .db-col img {
max-height: 38px;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.driver-hero-rb {
background: linear-gradient(90deg, #0b0b0d 0%, #0b0b0d 20%, #d30b00 100%);
box-shadow: 0 8px 24px rgba(92, 17, 13, .28);
border-radius: 24px;
}
.driver-rating {
text-align: right;
line-height: 1;
flex-shrink: 0;
margin-left: 12px;
}
.driver-rating .driver-rating-wheels {
line-height: 0;
white-space: nowrap;
}
.driver-rating .driver-rating-num {
margin-top: 5px;
font-weight: 700;
font-size: 1.05rem;
color: #fff;
}
.driver-rating .driver-rating-num small {
font-weight: 400;
opacity: .7;
font-size: .72rem;
}
/* CTA de RUTABUS (mismo formato que el botón «Descargar PDF oficial» del DeCA):
primario rojo, esquinas 12px, generoso, con icono. */
.driver-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 16px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
}
.driver-cta i {
font-size: 18px;
}
/* Trayectos (origen → destino) de cada servicio en el listado de hojas de ruta */
.rb-trayectos {
display: flex;
flex-direction: column;
gap: 2px;
}
.rb-trayecto {
font-size: .86rem;
color: #343a40;
line-height: 1.4;
}
.rb-trayecto i {
color: #d30b00;
font-size: .9rem;
vertical-align: -1px;
}
.driver-tile {
background: #fff;
border: 1px solid var(--tblr-border-color);
border-radius: 14px;
padding: 18px 18px;
transition: transform .12s ease, box-shadow .12s ease;
}
.driver-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15,30,22,.06); }
.driver-tile .tile-icon {
width: 38px; height: 38px;
background: var(--ctd-green-50); color: var(--ctd-green-dark);
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
font-size: 18px;
}
/* Layout: footer pegado al fondo SIN provocar scroll.
El body es la columna flex; .page absorbe el espacio restante
tras la franja demo, así nunca se supera el 100vh. */
html, body { height: 100%; }
/* Sticky footer SOLO en el panel admin (no en login/portal) */
body:not(.ctd-auth-bg):not(.driver-shell) {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ctd-demo-banner { flex: 0 0 auto; }
.page {
flex: 1 0 auto;
display: flex;
flex-direction: column;
min-height: 0; /* anula el min-height:100vh de Tabler */
}
.page-wrapper {
display: flex;
flex-direction: column;
flex: 1 0 auto;
}
.page-body {
flex: 1 0 auto;
}
/* Footer corporativo */
footer.ctd-footer {
background: var(--ctd-charcoal);
color: rgba(255,255,255,.7);
padding: 16px 0;
font-size: 0.82rem;
margin-top: auto !important;
}
footer.ctd-footer a { color: #fff; }
/* Logo del sidebar con aire — SOLO escritorio (lg+).
En móvil dejamos la cabecera nativa de Tabler [hamburguesa][logo]. */
@media (min-width: 992px) {
aside.navbar-vertical .container-fluid {
flex-direction: column;
align-items: stretch;
}
aside.navbar-vertical .navbar-brand {
margin: 0 !important;
width: 100%;
display: flex;
justify-content: center;
}
aside.navbar-vertical .navbar-brand img {
width: auto;
}
}
/* Móvil: cabecera compacta + menú desplegable oscuro y visible */
@media (max-width: 991.98px) {
aside.navbar-vertical {
background: #042335 !important;
width: 100%;
position: relative;
z-index: 1030;
}
aside.navbar-vertical .container-fluid {
flex-wrap: wrap;
align-items: center;
padding: .35rem .75rem;
}
aside.navbar-vertical .navbar-brand {
padding: .15rem .25rem !important;
margin: 0 !important;
order: 2;
}
aside.navbar-vertical .navbar-brand img {
max-height: 30px !important;
width: auto;
}
aside.navbar-vertical .navbar-toggler {
order: 1;
color: #fff;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 0;
margin-right: .5rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
}
/* El panel desplegado: ancho completo, fondo oscuro, por encima del contenido */
aside.navbar-vertical .navbar-collapse {
order: 3;
flex-basis: 100%;
background: #042335;
margin: .25rem -.75rem -.35rem;
padding: .5rem .75rem 1rem;
box-shadow: 0 12px 24px rgba(0,0,0,.35);
}
aside.navbar-vertical .navbar-collapse .nav-link {
color: rgba(255,255,255,.88);
padding: .6rem .25rem;
}
aside.navbar-vertical .navbar-collapse .nav-link.active {
color: #fff;
}
.ctd-sidebar-user { display: block; }
}
/* Icono hamburguesa: 3 barras CSS puras (sin SVG ni data-URI) */
aside.navbar-vertical .navbar-toggler-icon {
position: relative;
display: inline-block;
width: 22px;
height: 2px;
background-image: none !important;
background-color: #fff !important;
border-radius: 2px;
}
aside.navbar-vertical .navbar-toggler-icon::before,
aside.navbar-vertical .navbar-toggler-icon::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 2px;
background-color: #fff;
border-radius: 2px;
}
aside.navbar-vertical .navbar-toggler-icon::before { top: -7px; }
aside.navbar-vertical .navbar-toggler-icon::after { top: 7px; }
/* Bloque de usuario al pie del menú lateral */
.ctd-sidebar-user {
margin-top: auto;
border-top: 1px solid rgba(255,255,255,.10);
padding: .9rem 1rem;
}
.ctd-sidebar-user .ctd-su-name { color: #fff; font-weight: 600; font-size: .9rem; }
.ctd-sidebar-user .ctd-su-meta { color: rgba(255,255,255,.55); font-size: .76rem; }
.ctd-sidebar-user .btn { --tblr-btn-color: #fff; }
/* que el menú pueda empujar el bloque de usuario abajo */
@media (min-width: 992px) {
aside.navbar-vertical .navbar-collapse { display: flex; flex-direction: column; flex: 1; }
aside.navbar-vertical .navbar-nav.pt-lg-3 { flex: 1 0 auto; }
}
/* Top bar: contenido del usuario alineado a la derecha */
.navbar.navbar-light .container-xl,
header.navbar .container-xl {
display: flex;
justify-content: flex-end;
align-items: center;
}
/* Puntos DGT con código de color */
.pts {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
padding: 2px 10px;
border-radius: 999px;
font-weight: 700;
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
}
.pts-good { background: var(--ctd-green-50); color: var(--ctd-green-darker); }
.pts-warn { background: #fff4e0; color: #8a5a00; }
.pts-bad { background: #ffe7e8; color: #98212d; }
.pts-none { color: #9aa6b2; font-weight: 600; }
/* Fila de tabla clicable */
tr.row-link { cursor: pointer; }
tr.row-link:hover { background: var(--ctd-green-50); }
tr.row-link a { position: relative; z-index: 2; }
/* Fila de elemento inactivo: tinte rojizo (sustituye a la columna "Activo") */
tr.row-inactive > * { background-color: #fdeceb !important; }
tr.row-inactive:hover > * { background-color: #fbdbd9 !important; }
tr.row-inactive td:first-child { box-shadow: inset 3px 0 0 #d63939; }
tr.row-inactive { color: #8a3b3b; }
tr.row-inactive .text-secondary { color: #b06a6a !important; }
/* Utilidades */
.text-ctd-green { color: var(--ctd-green) !important; }
.bg-ctd-green { background-color: var(--ctd-green) !important; color: #fff; }
.bg-ctd-charcoal{ background-color: var(--ctd-charcoal) !important; color: #fff; }
.border-ctd-green { border-color: var(--ctd-green) !important; }
/* Estado de auditoría — chips */
.audit-status {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.audit-status.en_vigor { background: var(--ctd-green-50); color: var(--ctd-green-darker); }
.audit-status.suspendido { background: #ffe3e0; color: #b42318; }
.audit-status.retirado { background: #f4ccd0; color: #7a1410; }
.audit-status.no_consultado { background: #f1f4f8; color: #5a6c80; }
/* Bandera del modo demo */
.ctd-demo-banner {
background: #fff4e0;
color: #8a5a00;
border-bottom: 1px solid #f5d18a;
padding: 6px 14px;
font-size: 0.78rem;
font-weight: 600;
text-align: center;
}
/* ── Línea del tiempo (audit log + driver history) ── */
.ctd-timeline {
position: relative;
padding-left: 0;
}
.ctd-timeline::before {
content: '';
position: absolute;
left: 19px;
top: 8px;
bottom: 0;
width: 2px;
background: var(--tblr-border-color);
z-index: 0;
}
.ctd-timeline-item {
position: relative;
display: flex;
gap: 16px;
padding-bottom: 1.5rem;
}
.ctd-timeline-item:last-child { padding-bottom: 0; }
.ctd-timeline-dot {
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
z-index: 1;
border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--tblr-border-color);
}
.ctd-timeline-dot.dot-green { background: var(--ctd-green-50); color: var(--ctd-green-darker); box-shadow: 0 0 0 2px var(--ctd-green-100); }
.ctd-timeline-dot.dot-blue { background: #dce8f8; color: #1c5fa8; box-shadow: 0 0 0 2px #b8d0f0; }
.ctd-timeline-dot.dot-red { background: #ffe7e8; color: #b42318; box-shadow: 0 0 0 2px #fbc9cb; }
.ctd-timeline-dot.dot-orange { background: #fff4e0; color: #8a5a00; box-shadow: 0 0 0 2px #fde7a5; }
.ctd-timeline-dot.dot-purple { background: #f0eaff; color: #5f3dc4; box-shadow: 0 0 0 2px #d8c8ff; }
.ctd-timeline-dot.dot-gray { background: #f1f4f8; color: #5a6c80; box-shadow: 0 0 0 2px #dce2ea; }
.ctd-timeline-dot.dot-teal { background: var(--ctd-green-50); color: var(--ctd-green-dark); box-shadow: 0 0 0 2px var(--ctd-green-100); }
.ctd-timeline-body {
flex: 1;
min-width: 0;
background: #fff;
border: 1px solid var(--tblr-border-color);
border-radius: 10px;
padding: 12px 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ctd-timeline-meta {
font-size: 0.78rem;
color: #6c7a8b;
}
.ctd-timeline-title {
font-weight: 600;
font-size: 0.9rem;
line-height: 1.3;
}
.ctd-timeline-day-sep {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--ctd-green-dark);
padding: .5rem 0 .75rem 56px;
}
.ctd-field-change {
display: inline-flex;
align-items: center;
gap: 4px;
background: #f7f9fb;
border: 1px solid var(--tblr-border-color);
border-radius: 6px;
padding: 2px 7px;
font-size: 0.78rem;
margin: 2px 2px 0 0;
color: #3a4a5a;
}
.ctd-field-change .cf-arrow { color: var(--ctd-green-dark); font-weight: 600; }
.ctd-audit-result {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--tblr-border-color);
}
/* Timeline del portal del conductor */
.ctd-driver-timeline { position: relative; }
.ctd-driver-timeline::before {
content: '';
position: absolute;
left: 19px;
top: 8px;
bottom: 0;
width: 2px;
background: rgba(0,137,123,.15);
z-index: 0;
}
.ctd-driver-tl-item {
position: relative;
display: flex;
gap: 14px;
padding-bottom: 1.25rem;
}
.ctd-driver-tl-item:last-child { padding-bottom: 0; }
.ctd-driver-tl-dot {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
z-index: 1;
position: relative;
border: 2px solid #fff;
}
.ctd-driver-tl-dot.en_vigor { background: var(--ctd-green-50); color: var(--ctd-green-darker); box-shadow: 0 0 0 2px var(--ctd-green-100); }
.ctd-driver-tl-dot.suspendido { background: #fff4e0; color: #8a5a00; box-shadow: 0 0 0 2px #fde7a5; }
.ctd-driver-tl-dot.retirado { background: #ffe7e8; color: #b42318; box-shadow: 0 0 0 2px #fbc9cb; }
.ctd-driver-tl-dot.pending { background: #f1f4f8; color: #5a6c80; box-shadow: 0 0 0 2px #dce2ea; }
.ctd-driver-tl-dot.error { background: #fff4e0; color: #8a5a00; box-shadow: 0 0 0 2px #fde7a5; }
.ctd-driver-tl-dot.no_consultado { background: #f1f4f8; color: #5a6c80; box-shadow: 0 0 0 2px #dce2ea; }
.ctd-driver-tl-dot.next { background: #f0eaff; color: #5f3dc4; box-shadow: 0 0 0 2px #d8c8ff; }
.ctd-driver-tl-body {
flex: 1;
min-width: 0;
background: #fff;
border: 1px solid var(--tblr-border-color);
border-radius: 12px;
padding: 12px 14px;
}
.ctd-driver-tl-body.next-audit {
border-color: #d8c8ff;
background: #faf8ff;
}
/* Print */
@media print {
.navbar-vertical, .navbar, .page-header, footer { display: none !important; }
.page-wrapper { padding: 0 !important; }
}
/* Fichas de expedicion del resumen del asistente (paso 3). El recuadro va
marcado con el acento de la marca: es lo ultimo que se repasa antes de
emitir y con dos o mas expediciones conviene que se separen bien.
var(--ctd-green) porque cada marca lo redefine en config/brands.php. */
.js-resumen-grupo .card {
border: 1px solid var(--ctd-green-100);
border-left: 4px solid var(--ctd-green);
}
/* Acto del albaran ya cerrado (#923). Va en brand.css y no en doccard.css
porque la misma tarjeta se pinta en la oficina y en el movil, y brand.css es
la unica hoja que cargan los dos layouts.
El estado tiene que leerse de un vistazo: con firma en papel no hay garabato
en pantalla, asi que esto es LO UNICO que distingue un acto hecho de uno a
medias. Antes solo lo decia una etiqueta pequena junto al titulo. */
.acto-hecho { display:flex; align-items:center; gap:10px; padding:12px 14px;
background:#eef8f4; border:1px solid #bfe3d6; border-radius:9px; color:#14624b; }
.acto-hecho i { font-size:22px; flex-shrink:0; }
.acto-hecho strong { font-size:14.5px; }
.acto-hecho-det { font-size:12.5px; opacity:.85; margin-top:1px; }
/* badges-solidos-texto-blanco (14/09/2026)
* Tabler deja el texto de .badge en gris (--tblr-secondary) y solo lo aclara
* con las clases text-*-fg, que casi ninguna vista usa: "Refirma", "Vencido",
* "Revocada"... salian gris sobre rojo, y los bg-secondary gris sobre gris.
* Los fondos solidos llevan texto blanco. Las variantes -lt no se tocan, y una
* utilidad explicita (text-dark, text-white...) sigue mandando por !important. */
.badge.bg-danger,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-primary,
.badge.bg-info,
.badge.bg-dark,
.badge.bg-orange,
.badge.bg-warning,
.badge.bg-red,
.badge.bg-green,
.badge.bg-teal,
.badge.bg-azure,
.badge.bg-blue,
.badge.bg-purple {
color: #fff;
}
/* ── Trayecto en dos puntos (#926) ──────────────────────────────────────────
El mismo dibujo que el DeCA del portal del conductor: origen arriba, destino
abajo y una linea uniendolos. Las reglas viven aqui y no en doccard.css
porque esa hoja solo la carga el portal, y traerla entera al panel por dos
puntos no compensa. Los colores salen de las variables de marca. */
.tray { margin: 0; }
.tray .tray-pt { position: relative; padding-left: 20px; padding-bottom: 9px; line-height: 1.3; }
.tray .tray-pt:last-child { padding-bottom: 0; }
.tray .tray-pt::before { content: ''; position: absolute; left: 0; top: 5px; width: 9px; height: 9px;
border-radius: 50%; background: var(--tblr-primary, #0054a6); box-sizing: border-box; }
.tray .tray-pt::after { content: ''; position: absolute; left: 4px; top: 16px; bottom: -1px; width: 2px;
background: var(--tblr-border-color, #e6e7e9); }
.tray .tray-pt:last-child::after { display: none; }
.tray .tray-pt:last-child::before { background: #1a2634; }
.tray .tray-txt { display: block; }
/* ─────────────────────────────────────────────────────────────────────────
Modal con scroll cuyo