/* DECA - estilos minimos */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    color: #24292f;
    background: #eef1f5;
}
body.centrado {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #34495e;
    color: #fff;
    padding: 10px 18px;
}
.cabecera a { color: #cfe2ff; margin-left: 14px; text-decoration: none; }
.cabecera a:hover { text-decoration: underline; }

/* Menu "Mas" de la cabecera */
.menu-mas { position: relative; display: inline-block; }
.menu-desplegable {
    position: absolute; right: 0; top: 140%;
    display: flex; flex-direction: column; min-width: 200px; z-index: 60;
    background: #fff; border: 1px solid #d5dbe1; border-radius: 6px;
    box-shadow: 0 5px 16px rgba(0,0,0,.22);
}
.menu-desplegable a {
    color: #24292f !important; margin: 0 !important;
    padding: 10px 14px; border-bottom: 1px solid #eef1f4;
}
.menu-desplegable a:last-child { border-bottom: 0; }
.menu-desplegable a:hover { background: #f2f5f8; text-decoration: none !important; }

/* Lista de conductores del modal de WhatsApp */
.wa-lista { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px; }
.wa-lista .boton-mini { margin: 0; padding: 9px 14px; }

h2.subtitulo { font-size: 1.05rem; margin: 22px 0 6px; }

.tarjeta {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    padding: 24px 28px;
    margin: 24px auto;
}
.tarjeta.login { width: 340px; }
.tarjeta.ancho { max-width: 1080px; width: calc(100% - 32px); }

h1 { font-size: 1.35rem; margin: 0 0 12px; }
.sub { color: #667; margin-top: -6px; }

label { display: block; margin: 10px 0 2px; font-weight: 600; }
label small { font-weight: normal; color: #667; }
span.req { color: #b03030; }
input, textarea, select {
    width: 100%;
    padding: 7px 9px;
    margin-top: 3px;
    border: 1px solid #c4ccd4;
    border-radius: 5px;
    font: inherit;
}
input:focus, textarea:focus { outline: 2px solid #4a7bd0; border-color: #4a7bd0; }

.fila { display: flex; gap: 14px; }
.fila label { flex: 1; }

fieldset {
    border: 1px solid #d5dbe1;
    border-radius: 6px;
    margin: 14px 0;
    padding: 10px 14px 14px;
}
legend { font-weight: 700; padding: 0 6px; }

button, .boton-mini {
    background: #34495e;
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 10px 18px;
    font: inherit;
    cursor: pointer;
    margin-top: 12px;
}
button:hover { background: #24344a; }
.boton-mini {
    font-size: .8rem;
    padding: 3px 9px;
    margin: 0 0 0 8px;
    text-decoration: none;
    display: inline-block;
    background: #5a7ba6;
}
.boton-mini:hover { background: #46648a; }
.boton-mini.boton-sec {
    background: #eef1f5;
    color: #34495e;
    border: 1px solid #d5dbe1;
}
.boton-mini.boton-sec:hover { background: #dfe6ee; }
.boton-mini.wa { background: #1faa53; }
.boton-mini.wa:hover { background: #178a43; }
.boton-mini.wa::before { content: "✆ "; }

.error {
    background: #fde8e8;
    border: 1px solid #e5a3a3;
    color: #8a1f1f;
    border-radius: 5px;
    padding: 8px 12px;
    margin: 10px 0;
}
.error ul { margin: 0; padding-left: 18px; }
.exito {
    background: #e6f6e6;
    border: 1px solid #9fd39f;
    color: #1e5c1e;
    border-radius: 5px;
    padding: 8px 12px;
    margin: 10px 0;
}
.aviso {
    background: #fff8e1;
    border: 1px solid #e6cf7a;
    border-radius: 5px;
    padding: 8px 12px;
}
.nota { color: #667; font-size: .85rem; margin: 4px 0 0; }

.listado-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 10px;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
}
table.listado {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: 0;
}
table.listado th, table.listado td {
    border-bottom: 1px solid #e2e6ea;
    padding: 8px 8px;
    text-align: left;
    font-size: .9rem;
    vertical-align: middle;
    overflow-wrap: anywhere;
}
table.listado th { background: #f4f6f8; }
table.listado th .orden-col {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    color: #24292f;
    text-decoration: none;
    font-weight: 700;
    padding: 3px 4px;
    border-radius: 4px;
}
table.listado th .orden-col:hover { background: #e6edf5; }
table.listado th .orden-col em {
    color: #5a7ba6;
    font-style: normal;
    font-size: .64rem;
    font-weight: 800;
    background: #e7edf5;
    border: 1px solid #cbd8e6;
    border-radius: 4px;
    padding: 1px 4px;
}
table.listado th .orden-col.activa {
    color: #183b70;
    background: #eaf1fb;
}
table.listado th .orden-col.activa em {
    color: #fff;
    background: #2456a6;
    border-color: #2456a6;
}
table.listado td.url { white-space: nowrap; }
table.listado tr:last-child td { border-bottom: 0; }
table.listado .col-num { width: 4.5%; }
table.listado .col-fecha { width: 8.8%; }
table.listado .col-registro { width: 8.8%; }
table.listado .col-cargador { width: 16%; }
table.listado .col-ruta { width: 13%; }
table.listado .col-matricula { width: 8%; }
table.listado .col-estado { width: 9.5%; }
table.listado .col-acciones { width: 31.4%; }
td.acciones { white-space: normal; }
td.acciones .boton-mini {
    margin: 2px 3px 2px 0;
    padding: 4px 8px;
    line-height: 1.25;
    white-space: nowrap;
}
td.acciones .accion-pdf {
    background: transparent;
    color: #2456a6;
    border: 1px solid #b8c8df;
}
td.acciones .accion-pdf:hover { background: #edf3fb; }
td.acciones .accion-editar {
    background: #eef1f5;
    color: #34495e;
    border: 1px solid #d5dbe1;
}
td.acciones .accion-editar:hover { background: #dfe6ee; }

.etiqueta {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
}
.etiqueta.verde   { background: #2e8b57; }
.etiqueta.roja    { background: #b03030; }
.etiqueta.naranja { background: #d07a1e; }
.etiqueta.azul    { background: #3a6ea5; }
.etiqueta.gris    { background: #7a8794; }

/* ---------- Filtros del listado ---------- */
.filtros {
    margin: 10px 0 8px;
}
.filtros-panel {
    background: #f4f6f8;
    border: 1px solid #dbe2ea;
    border-radius: 6px;
}
.filtros-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    color: #34495e;
    user-select: none;
    font-weight: 800;
    letter-spacing: .02em;
}
.filtros-panel summary::-webkit-details-marker { display: none; }
.filtros-panel summary::before {
    content: ">";
    font-size: .78rem;
    color: #5a7ba6;
}
.filtros-panel[open] summary::before { content: "v"; }
.filtros-panel summary span { flex: 1; }
.filtros-panel summary em {
    font-style: normal;
    font-size: .7rem;
    color: #fff;
    background: #2456a6;
    border-radius: 999px;
    padding: 2px 7px;
    letter-spacing: 0;
}
.filtros-cuerpo {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(190px, .9fr);
    gap: 12px 16px;
    align-items: end;
    border-top: 1px solid #dbe2ea;
    padding: 12px;
}
.filtro-busqueda label,
.filtro-fechas label {
    margin: 0;
    font-size: .78rem;
    color: #55616d;
}
.filtro-busqueda input[type=search],
.filtro-fechas select,
.filtro-fechas input[type=date] {
    margin-top: 2px;
    padding: 6px 8px;
    background: #fff;
}
.filtro-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-self: center;
}
.filtro-checks label.check { margin: 0; }
.filtro-fechas {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 140px minmax(160px, 1fr) minmax(140px, .8fr) minmax(140px, .8fr);
    gap: 10px;
    align-items: end;
    border-top: 1px solid #e2e6ea;
    padding-top: 10px;
}
.filtro-titulo {
    color: #34495e;
    font-weight: 800;
    padding-bottom: 7px;
}
.filtros-acciones {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filtros-acciones .boton-mini {
    margin: 0;
    white-space: nowrap;
}

.paginacion {
    display: flex; gap: 12px; align-items: center; justify-content: center;
    margin-top: 14px; color: #556;
}
.paginacion .boton-mini { margin: 0; }
label.check {
    display: flex; align-items: center; gap: 6px;
    font-weight: 500; margin: 4px 0; cursor: pointer;
}
label.check input { width: auto; margin: 0; }
.fila.checks { gap: 22px; flex-wrap: wrap; }
.fila.checks label.check { flex: 0 0 auto; }

form.enlinea { display: inline-block; margin: 0; }
form.enlinea input.compacto { width: 130px; padding: 3px 5px; font-size: .85rem; }
form.enlinea button { margin-top: 0; }

/* ---------- Vistas lista / tarjetas ---------- */
.oculto { display: none !important; }

.lista-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lista-cab h1 { margin-bottom: 0; }

.tarjetas-deca { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.deca-card {
    border: 1px solid #d5dbe1;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fbfcfd;
}
.dc-cab {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    border-bottom: 1px solid #e2e6ea;
    padding-bottom: 6px; margin-bottom: 10px;
}
.dc-cuerpo { display: flex; gap: 12px; align-items: flex-start; }
.dc-qr {
    width: 110px; height: 110px; flex: 0 0 auto;
    border: 1px solid #e2e6ea; border-radius: 6px; background: #fff;
    cursor: pointer;
}
.dc-datos { flex: 1; font-size: .92rem; }
.dc-datos > div { margin-bottom: 6px; }
.dc-etq { display: block; font-size: .72rem; font-weight: 700; color: #8895a2; text-transform: uppercase; }
.dc-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dc-botones .boton-mini { margin: 0; }

/* ---------- Ventana emergente del QR ---------- */
.qr-modal {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(20, 28, 38, .65);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.qr-caja {
    background: #fff; border-radius: 10px;
    padding: 20px 26px; text-align: center;
    max-width: 92vw;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.qr-caja h2 { margin: 0 0 10px; font-size: 1.1rem; }
.qr-caja img { width: min(320px, 78vw); height: auto; }
.qr-caja p { color: #667; font-size: .85rem; margin: 8px 0 4px; }

/* ---------- Movil ---------- */
@media (max-width: 700px) {
    .tarjeta { padding: 16px 14px; margin: 12px 8px; }
    .tarjeta.ancho { max-width: none; }
    .cabecera { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
    .cabecera nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .fila { flex-direction: column; gap: 0; }
    table.listado { min-width: 880px; }
    table.listado th, table.listado td { padding: 6px 6px; font-size: .8rem; }
    .lista-cab { flex-wrap: wrap; }
    .tarjetas-deca { grid-template-columns: 1fr; }
    .filtros { margin: 8px 0; }
    .filtros-panel summary { padding: 10px; }
    .filtros-cuerpo { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
    .filtro-checks { display: grid; grid-template-columns: 1fr; gap: 7px; }
    .filtro-fechas { grid-template-columns: 1fr; gap: 8px; }
    .filtros-acciones { display: grid; grid-template-columns: 1fr; }
    .filtros-acciones .boton-mini { width: 100%; text-align: center; }
}