/* ==========================================================================
   TravelGest · hoja de estilos
   ========================================================================== */

:root {
    --fondo:        #ededed;
    --panel:        #ffffff;
    --tinta:        #101010;
    --tinta-media:  #5b5b5b;
    --tinta-suave:  #8c8c8c;
    --borde:        #ececec;
    --borde-fuerte: #dedede;
    --gris-suave:   #f6f6f6;
    --gris-medio:   #f1f1f1;
    --verde:        #2bc46a;
    --verde-claro:  #dff7e7;
    --verde-tinta:  #12874a;
    --lima:         #e4f24a;
    --amarillo:     #f6ef4f;
    --lila:         #ece8fe;
    --lila-tinta:   #5b44c8;
    --azul:         #e4edff;
    --azul-tinta:   #2f5bd0;
    --rosa:         #fde8f0;
    --rosa-tinta:   #d63b72;
    --panel-alt:    #fbfbfb;
    --tinta-tenue:  #c8c8c8;
    --contraste-bg:       #101010;
    --contraste-bg-hover: #2c2c2c;
    --contraste-tinta:    #ffffff;
    --contraste-suave:    rgba(255,255,255,.65);
    --lima-hover:   #d8e63f;

    /* Tonos suaves para distinguir categorías sin gritar */
    --t-azul-bg:   #e8effe;  --t-azul-tinta:   #2f5bd0;
    --t-ambar-bg:  #fdf1dc;  --t-ambar-tinta:  #9a6712;
    --t-lila-bg:   #efeafe;  --t-lila-tinta:   #6248cf;
    --t-verde-bg:  #e2f6ea;  --t-verde-tinta:  #14804a;
    --t-rosa-bg:   #fde9f1;  --t-rosa-tinta:   #c53a72;
    --t-agua-bg:   #e0f4f4;  --t-agua-tinta:   #10736f;
    --t-gris-bg:   #f0f0f1;  --t-gris-tinta:   #63636a;
    --ok-bg:        #dff7e7;
    --ok-borde:     #bfeed3;
    --ok-tinta:     #12874a;
    --error-bg:     #fde8f0;
    --error-borde:  #f8cede;
    --error-tinta:  #a52350;
    --atencion-bg:    #fff8db;
    --atencion-borde: #f4e6a8;
    --atencion-tinta: #6b5300;
    --velo:         rgba(16,16,16,.42);
    --brillo-1:     #f7f9d8;
    --brillo-2:     #e6f7ec;
    --radio:        14px;
    --radio-s:      10px;
    --sombra:       0 1px 2px rgba(16,16,16,.04), 0 8px 24px rgba(16,16,16,.05);
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--fondo);
    color: var(--tinta);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--tinta); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 10px; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 18px 0; }

/* ------------------------------------------------------------ Estructura */

.app {
    display: flex;
    min-height: 100vh;
    padding: 22px;
    gap: 0;
}

.marco {
    display: flex;
    flex: 1;
    background: var(--panel);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--sombra);
    min-width: 0;
}

/* -------------------------------------------------------------- Sidebar */

.lateral {
    width: 262px;
    flex: 0 0 262px;
    border-right: 1px solid var(--borde);
    padding: 26px 18px 18px;
    display: flex;
    flex-direction: column;
    background: var(--panel);
}

.marca {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    padding: 0 8px 26px;
}

.marca__icono {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--contraste-bg);
    color: var(--contraste-tinta);
    font-size: 14px;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav__enlace {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--radio-s);
    color: var(--tinta-media);
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}

.nav__enlace:hover { background: var(--gris-suave); color: var(--tinta); }

.nav__enlace--activo {
    background: var(--gris-medio);
    color: var(--tinta);
    font-weight: 600;
}

.nav__enlace svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav__enlace .cuenta {
    margin-left: auto;
    background: var(--amarillo);
    color: #2c2a00;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 6px;
}

.nav__grupo { margin-top: 2px; }

.nav__sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 6px 0;
    margin-left: 22px;
    border-left: 1px solid var(--borde-fuerte);
}

.nav__sub a {
    position: relative;
    padding: 9px 12px 9px 18px;
    border-radius: var(--radio-s);
    color: var(--tinta-suave);
    font-weight: 500;
}

.nav__sub a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 1px;
    background: var(--borde-fuerte);
}

.nav__sub a:hover { background: var(--gris-suave); color: var(--tinta); }
.nav__sub a.activo { color: var(--tinta); font-weight: 600; }

.lateral__pie {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --------------------------------------------------------------- Cabecera */

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

.barra-superior {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 26px;
    border-bottom: 1px solid var(--borde);
}

.buscador {
    position: relative;
    flex: 0 1 460px;
}

.buscador svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--tinta-suave);
}

.buscador input[type="search"] {
    width: 100%;
    background: var(--gris-suave);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 12px 16px 12px 44px;
    outline: none;
}

.buscador input[type="search"]::placeholder { color: var(--tinta-suave); }
.buscador input[type="search"]:focus { border-color: var(--borde-fuerte); background: var(--panel); }

.barra-superior__acciones {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.icono-boton {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--tinta);
    cursor: pointer;
}

.icono-boton:hover { background: var(--gris-suave); }
.icono-boton svg { width: 19px; height: 19px; }

.icono-boton .punto {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tinta);
}

.separador-vertical {
    width: 1px;
    height: 28px;
    background: var(--borde);
    margin: 0 8px;
}

.usuario-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
}

.usuario-menu:hover { background: var(--gris-suave); }

.avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--contraste-bg);
    color: var(--contraste-tinta);
    font-size: 13px;
    font-weight: 600;
    flex: 0 0 auto;
}

.avatar--s { width: 26px; height: 26px; font-size: 10px; }
.avatar--l { width: 62px; height: 62px; font-size: 20px; }
.avatar--lima { background: var(--lima); color: #2c2a00; }
.avatar--verde { background: var(--verde); color: #fff; }

.menu-flotante {
    position: absolute;
    right: 24px;
    top: 66px;
    z-index: 40;
    min-width: 220px;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 12px 36px rgba(16,16,16,.12);
    padding: 8px;
    display: none;
}

.menu-flotante.abierto { display: block; }
.menu-flotante a, .menu-flotante button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--tinta-media);
    font: inherit;
}
.menu-flotante a svg, .menu-flotante button svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .75; }
.menu-flotante a:hover svg, .menu-flotante button:hover svg { opacity: 1; }
/* En el menú de avisos, el texto secundario va debajo y no en línea */
.menu-flotante a { flex-wrap: wrap; }
.menu-flotante a .pequeno { flex: 1 1 100%; }
.menu-flotante a:hover, .menu-flotante button:hover { background: var(--gris-suave); color: var(--tinta); }
.menu-flotante .cabecera { padding: 8px 12px 10px; border-bottom: 1px solid var(--borde); margin-bottom: 6px; }
.menu-flotante .cabecera strong { display: block; }
.menu-flotante .cabecera span { color: var(--tinta-suave); font-size: 12px; }

/* Conmutador de tema: solo se ve el botón que toca. */
.solo-oscuro { display: none; }
:root[data-tema="oscuro"] .solo-claro { display: none; }
:root[data-tema="oscuro"] .solo-oscuro { display: grid; }

@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] .solo-claro { display: none; }
    :root[data-tema="auto"] .solo-oscuro { display: grid; }
}

/* --------------------------------------------------------------- Contenido */

.contenido {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

.migas {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--borde);
}

.migas a, .migas span { color: var(--tinta-suave); font-weight: 500; }
.migas a:hover { color: var(--tinta); }
.migas .actual { color: var(--tinta-suave); }
.migas .raiz { color: var(--tinta); font-weight: 600; }
.migas .flecha-atras {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px; color: var(--tinta);
}
.migas .flecha-atras:hover { background: var(--gris-suave); }
.migas__derecha { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-media); }

.punto-verde { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); display: inline-block; }

.seccion { padding: 26px; }
.seccion--ajustada { padding: 22px 26px; }

.titulo-pagina { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.titulo-pagina h1 { font-size: 24px; }
.titulo-pagina .sub { color: var(--tinta-suave); margin: 2px 0 0; }
.titulo-pagina__acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

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

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-s);
    background: var(--panel);
    color: var(--tinta);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}

.boton:hover { background: var(--gris-suave); }
.boton svg { width: 16px; height: 16px; }
.boton--negro { background: var(--contraste-bg); border-color: var(--contraste-bg); color: var(--contraste-tinta); }
.boton--negro:hover { background: var(--contraste-bg-hover); border-color: var(--contraste-bg-hover); color: var(--contraste-tinta); }
.boton--gris { background: var(--gris-medio); border-color: transparent; }
.boton--lima { background: var(--lima); border-color: var(--lima); color: #2c2a00; }
.boton--lima:hover { background: var(--lima-hover); }
.boton--peligro { color: var(--rosa-tinta); }
.boton--peligro:hover { background: var(--rosa); }
.boton--s { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.boton--bloque { width: 100%; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------------- Pestañas */

.pestanas {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--borde);
    padding: 0 26px;
    overflow-x: auto;
    scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }

.pestanas a {
    position: relative;
    padding: 16px 0;
    color: var(--tinta-suave);
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
}

.pestanas a:hover { color: var(--tinta); }
.pestanas a svg { width: 15px; height: 15px; opacity: .6; }
.pestanas a.activa svg { opacity: 1; }
.pestanas a.activa { color: var(--tinta); font-weight: 600; }
.pestanas a.activa::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--tinta);
    border-radius: 2px 2px 0 0;
}
.pestanas .contador {
    background: var(--contraste-bg);
    color: var(--contraste-tinta);
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: grid;
    place-items: center;
}
.pestanas a:not(.activa) .contador { background: var(--gris-medio); color: var(--tinta-media); }

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

.tarjeta {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 20px;
}

.tarjeta--plana { border-color: transparent; background: var(--gris-suave); }
.tarjeta__cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.tarjeta__cabecera h2, .tarjeta__cabecera h3 { font-size: 17px; }
.tarjeta__cabecera .dato-icono__caja { margin-right: -2px; }
.tarjeta__cabecera .acciones { margin-left: auto; display: flex; gap: 8px; }

.rejilla { display: grid; gap: 16px; }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }

.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; }
.kpi__etiqueta { color: var(--tinta-suave); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.kpi__valor { font-size: 25px; font-weight: 600; letter-spacing: -.02em; margin-top: 8px; }
.kpi__pie { color: var(--tinta-suave); font-size: 12px; margin-top: 4px; }
.kpi--acento { background: var(--contraste-bg); border-color: var(--contraste-bg); color: var(--contraste-tinta); }
.kpi--acento .kpi__etiqueta, .kpi--acento .kpi__pie { color: var(--contraste-suave); }
.kpi--lima { background: var(--lima); border-color: var(--lima); color: #2c2a00; }
.kpi--lima .kpi__etiqueta, .kpi--lima .kpi__pie { color: rgba(0,0,0,.55); }

/* --------------------------------------------------------------- Pastillas */

.pastilla {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    background: var(--gris-medio);
    color: var(--tinta-media);
    white-space: nowrap;
}
.pastilla--verde { background: var(--verde-claro); color: var(--verde-tinta); }
.pastilla--verde-solido { background: var(--verde); color: #fff; }
.pastilla--lila { background: var(--lila); color: var(--lila-tinta); }
.pastilla--azul { background: var(--azul); color: var(--azul-tinta); }
.pastilla--rosa { background: var(--rosa); color: var(--rosa-tinta); }
.pastilla--amarilla { background: var(--amarillo); color: #3a3600; }
.pastilla--gris { background: var(--gris-medio); color: var(--tinta-media); }
.pastilla--negra { background: var(--contraste-bg); color: var(--contraste-tinta); }
.pastilla--rosa::before, .pastilla--roja::before { content: '•'; font-size: 14px; line-height: 0; }

/* ------------------------------------------------------------------- Listas */

.lista-items { display: flex; flex-direction: column; gap: 12px; }

.item {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: background .12s ease, border-color .12s ease;
}
.item:hover { border-color: var(--borde-fuerte); }
.item--hecho { background: var(--gris-suave); border-color: transparent; }
.item__cuerpo { flex: 1; min-width: 0; }
.item__titulo { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item--hecho .item__titulo { color: var(--tinta-media); }
.item__desc { color: var(--tinta-suave); margin-top: 3px; }
.item__pie { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.item__pie .autor { display: flex; align-items: center; gap: 8px; color: var(--tinta-suave); font-size: 13px; }
.item__pie .derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.item__meta { margin-left: auto; text-align: right; color: var(--tinta-suave); font-size: 13px; white-space: nowrap; }
.item__meta strong { color: var(--tinta); font-weight: 600; }

.marca-check {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--borde-fuerte);
    display: grid; place-items: center; flex: 0 0 22px;
    background: var(--panel); cursor: pointer; margin-top: 1px; padding: 0;
}
.marca-check svg { width: 12px; height: 12px; opacity: 0; color: #fff; }
.marca-check--ok { background: var(--verde); border-color: var(--verde); }
.marca-check--ok svg { opacity: 1; }
.marca-check:hover { border-color: var(--verde); }

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

.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
table.tabla { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabla th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-suave);
    font-weight: 600;
    padding: 13px 13px;
    background: var(--gris-suave);
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}
.tabla td { padding: 14px 13px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--panel-alt); }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla tfoot td { background: var(--gris-suave); font-weight: 600; border-top: 1px solid var(--borde); }

/* ---------------------------------------------------------------- Timeline */

.timeline { position: relative; display: flex; flex-direction: column; gap: 22px; }
.timeline__item { display: flex; gap: 14px; position: relative; }
.timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 18px; top: 42px; bottom: -22px;
    width: 1px;
    background: var(--borde);
}
.timeline__cuerpo { flex: 1; min-width: 0; }
.timeline__texto { line-height: 1.45; }
.timeline__texto strong { font-weight: 600; }
.timeline__hora { color: var(--tinta-suave); font-size: 13px; margin-top: 2px; }
.timeline__extra { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.etiqueta-campo { color: var(--tinta-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

.dato-icono { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.dato-icono__caja {
    width: 38px; height: 38px; border-radius: var(--radio-s);
    background: var(--t-gris-bg); color: var(--t-gris-tinta);
    display: grid; place-items: center; flex: 0 0 38px;
}
.dato-icono__caja svg { width: 17px; height: 17px; }
.dato-icono__caja--s { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; }
.dato-icono__caja--s svg { width: 15px; height: 15px; }
.dato-icono__txt span { display: block; color: var(--tinta-suave); font-size: 12px; }
.dato-icono__txt strong { font-weight: 600; }

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

.campo { margin-bottom: 16px; }
.campo > label, .etiqueta {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
.campo .pista { color: var(--tinta-suave); font-size: 12px; margin-top: 5px; font-weight: 400; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=url], input[type=tel], input[type=search], select, textarea {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-s);
    padding: 11px 13px;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--tinta);
    box-shadow: 0 0 0 3px rgba(16,16,16,.06);
}

textarea { resize: vertical; min-height: 92px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }

.fila { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fila--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; cursor: pointer; }
.check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--tinta); }

.acciones-form { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
.acciones-form .derecha { margin-left: auto; display: flex; gap: 10px; }

/* ---------------------------------------------------------------- Avisos */

.aviso { border-radius: var(--radio); padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--borde); background: var(--gris-suave); }
.aviso--ok { background: var(--ok-bg); border-color: var(--ok-borde); color: var(--ok-tinta); }
.aviso--error { background: var(--error-bg); border-color: var(--error-borde); color: var(--error-tinta); }
.aviso--atencion { background: var(--atencion-bg); border-color: var(--atencion-borde); color: var(--atencion-tinta); }
.aviso p { margin: 6px 0 0; }
.aviso__detalle { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; opacity: .8; }

.flashes { position: fixed; top: 20px; right: 20px; z-index: 90; width: 340px; max-width: calc(100vw - 40px); }
.flashes .aviso { box-shadow: 0 10px 30px rgba(0,0,0,.12); }

.vacio { text-align: center; padding: 48px 20px; color: var(--tinta-suave); }
.vacio svg { width: 34px; height: 34px; margin-bottom: 12px; opacity: .4; }
.vacio strong { display: block; color: var(--tinta); margin-bottom: 4px; font-size: 15px; }

/* ------------------------------------------------------------------- Mapa */

#mapa, .mapa {
    width: 100%;
    height: 460px;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    background: var(--gris-suave);
}

.mapa-leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; color: var(--tinta-suave); font-size: 13px; }
.mapa-leyenda span { display: flex; align-items: center; gap: 7px; }
.pin-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--contraste-bg); color: var(--contraste-tinta);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; flex: 0 0 22px;
}

/* -------------------------------------------------------------- Calendario */

.calendario { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.calendario__cabecera { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--gris-suave); border-bottom: 1px solid var(--borde); }
.calendario__cabecera div { padding: 11px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.calendario__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); }
.dia { min-height: 118px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.dia:nth-child(7n) { border-right: 0; }
.dia--fuera { background: var(--panel-alt); }
.dia--fuera .dia__num { color: var(--tinta-tenue); }
.dia__num { font-size: 12px; font-weight: 600; color: var(--tinta-media); display: flex; align-items: center; justify-content: space-between; }
.dia--hoy .dia__num span:first-child {
    background: var(--contraste-bg); color: var(--contraste-tinta);
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center;
}
.dia__num a { color: var(--tinta-suave); opacity: 0; font-size: 15px; line-height: 1; }
.dia:hover .dia__num a { opacity: 1; }
.evento {
    display: block;
    font-size: 12px;
    padding: 4px 7px;
    border-radius: 7px;
    background: var(--gris-medio);
    color: var(--tinta-media);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: 3px solid var(--borde-fuerte);
}
.evento--proyectado { background: var(--lila); color: var(--lila-tinta); border-left-color: var(--lila-tinta); }
.evento--en_desarrollo { background: var(--verde-claro); color: var(--verde-tinta); border-left-color: var(--verde); }
.evento--finalizado { background: var(--gris-medio); color: var(--tinta-suave); border-left-color: var(--tinta-suave); text-decoration: line-through; }
.evento--ruta { background: var(--amarillo); color: #3a3600; border-left-color: #c9c024; }

/* ------------------------------------------------------------------ Barras */

.barra-progreso { height: 8px; border-radius: 999px; background: var(--gris-medio); overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--tinta); border-radius: 999px; }
.barra-progreso span.verde { background: var(--verde); }
.barra-progreso span.rosa { background: var(--rosa-tinta); }
.barra-progreso span.lima { background: var(--lima); }

.barras-cat { display: flex; flex-direction: column; gap: 14px; }
.barras-cat__fila { display: grid; grid-template-columns: 150px 1fr 110px; gap: 12px; align-items: center; }
.barras-cat__fila .nombre { color: var(--tinta-media); }
.barras-cat__fila .importe { text-align: right; font-weight: 600; }

/* --------------------------------------------------------------- Acceso */

.pagina-auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(900px 500px at 15% -10%, var(--brillo-1) 0%, transparent 55%),
        radial-gradient(800px 500px at 110% 110%, var(--brillo-2) 0%, transparent 50%),
        var(--fondo);
}

.tarjeta-auth {
    width: 100%;
    max-width: 430px;
    background: var(--panel);
    border-radius: 20px;
    padding: 38px 36px 34px;
    box-shadow: var(--sombra);
}
.tarjeta-auth--ancha { max-width: 560px; }
.marca--auth { padding: 0 0 26px; justify-content: flex-start; }

.marca-auth { text-align: center; margin-bottom: 30px; }
.marca-auth__nombre {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
}
.marca-auth__lema {
    margin-top: 5px;
    color: var(--tinta-suave);
    font-size: 14px;
    font-weight: 500;
}
.tarjeta-auth h1 { font-size: 23px; margin-bottom: 6px; }
.tarjeta-auth .sub { color: var(--tinta-suave); margin-bottom: 24px; }
.tarjeta-auth .pie { margin-top: 22px; text-align: center; color: var(--tinta-suave); font-size: 13px; }

.lista-pasos { margin: 0 0 18px; padding-left: 18px; color: var(--tinta-media); }
.lista-pasos li { margin-bottom: 6px; }

.datos-conexion { display: grid; gap: 10px; margin: 18px 0 22px; }
.datos-conexion > div { display: flex; justify-content: space-between; padding: 11px 14px; background: var(--gris-suave); border-radius: var(--radio-s); }
.datos-conexion span { color: var(--tinta-suave); }
.datos-conexion .ok { color: var(--verde-tinta); }

.medidor-clave { height: 5px; border-radius: 999px; background: var(--gris-medio); overflow: hidden; margin-top: 8px; }
.medidor-clave span { display: block; height: 100%; width: 0; background: var(--rosa-tinta); transition: width .2s ease, background .2s ease; }

/* --------------------------------------------------------------- Utilidades */

.pila { display: flex; align-items: center; }
.pila .avatar { border: 2px solid var(--panel); margin-left: -9px; }
.pila .avatar:first-child { margin-left: 0; }

.fila-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.navegador-mes { flex-wrap: nowrap; gap: 12px; width: 100%; }
.navegador-mes > .icono-boton { flex: 0 0 auto; }
.navegador-mes .sub { margin-bottom: 0; }
.espaciador { margin-left: auto; }
.tenue { color: var(--tinta-suave); }
.media { color: var(--tinta-media); }
.pequeno { font-size: 13px; }
.negrita { font-weight: 600; }
.centrado { text-align: center; }
.derecha-txt { text-align: right; }
.mb-0 { margin-bottom: 0; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.oculto { display: none !important; }
.recorte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.positivo { color: var(--verde-tinta); }
.negativo { color: var(--rosa-tinta); }

.split { display: grid; grid-template-columns: minmax(0, 318px) minmax(0, 1fr); }
.split__izq { border-right: 1px solid var(--borde); min-width: 0; }
.split__der { min-width: 0; }

.cabecera-ficha { display: flex; align-items: center; gap: 16px; padding: 24px 26px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.cabecera-ficha h1 { font-size: 23px; }
.cabecera-ficha .sub { color: var(--tinta-suave); margin-top: 2px; }
.cabecera-ficha__acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.dialogo { position: fixed; inset: 0; background: var(--velo); z-index: 80; display: none; padding: 24px; overflow: auto; }
.dialogo.abierto { display: grid; place-items: start center; }
.dialogo__caja { background: var(--panel); border-radius: 18px; width: 100%; max-width: 620px; padding: 26px; margin-top: 6vh; box-shadow: 0 24px 60px rgba(0,0,0,.2); }
.dialogo__cabecera { display: flex; align-items: center; margin-bottom: 18px; }
.dialogo__cabecera h3 { font-size: 18px; }
.dialogo__cerrar { margin-left: auto; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--tinta-suave); }
.dialogo__cerrar:hover { color: var(--tinta); }


/* ------------------------------------------------------------------ Tonos */

.tono { background: var(--t-gris-bg); color: var(--t-gris-tinta); }
.tono--azul  { background: var(--t-azul-bg);  color: var(--t-azul-tinta); }
.tono--ambar { background: var(--t-ambar-bg); color: var(--t-ambar-tinta); }
.tono--lila  { background: var(--t-lila-bg);  color: var(--t-lila-tinta); }
.tono--verde { background: var(--t-verde-bg); color: var(--t-verde-tinta); }
.tono--rosa  { background: var(--t-rosa-bg);  color: var(--t-rosa-tinta); }
.tono--agua  { background: var(--t-agua-bg);  color: var(--t-agua-tinta); }
.tono--gris  { background: var(--t-gris-bg);  color: var(--t-gris-tinta); }

/* Punto de color, para listas y leyendas */
.punto-tono {
    width: 9px; height: 9px; border-radius: 50%;
    display: inline-block; flex: 0 0 9px;
    background: currentColor;
}

/* ==========================================================================
   Modo noche
   Se aplica de dos maneras:
     · data-tema="oscuro"  → el usuario lo ha elegido expresamente
     · data-tema="auto"    → sigue la preferencia del sistema operativo
   ========================================================================== */

:root[data-tema="oscuro"] {
    --fondo:        #0e0e0f;
    --panel:        #171718;
    --panel-alt:    #1d1d1f;
    --tinta:        #ededee;
    --tinta-media:  #b2b2b6;
    --tinta-suave:  #85858a;
    --tinta-tenue:  #4d4d51;
    --borde:        #2a2a2d;
    --borde-fuerte: #3b3b40;
    --gris-suave:   #202022;
    --gris-medio:   #2a2a2d;
    --verde:        #35cf78;
    --verde-claro:  #15321f;
    --verde-tinta:  #6ee7a0;
    --lima:         #d7e846;
    --amarillo:     #e6de4a;
    --lila:         #241f42;
    --lila-tinta:   #b6a7ff;
    --azul:         #17233f;
    --azul-tinta:   #93b4ff;
    --rosa:         #3a1626;
    --rosa-tinta:   #ff96ba;
    --contraste-bg:    #ededee;
    --contraste-tinta: #131314;
    --contraste-suave: rgba(0,0,0,.55);
    --contraste-bg-hover: #ffffff;
    --lima-hover:   #e3f45f;
    --t-azul-bg:   #16233f;  --t-azul-tinta:   #93b4ff;
    --t-ambar-bg:  #342a13;  --t-ambar-tinta:  #f0c674;
    --t-lila-bg:   #241f42;  --t-lila-tinta:   #b6a7ff;
    --t-verde-bg:  #15321f;  --t-verde-tinta:  #6ee7a0;
    --t-rosa-bg:   #3a1626;  --t-rosa-tinta:   #ff96ba;
    --t-agua-bg:   #12302f;  --t-agua-tinta:   #63d6d0;
    --t-gris-bg:   #25252a;  --t-gris-tinta:   #9a9aa2;

    --ok-bg:        #15321f;
    --ok-borde:     #1f4a2d;
    --ok-tinta:     #7ceaab;
    --error-bg:     #3a1626;
    --error-borde:  #56203b;
    --error-tinta:  #ffa3c2;
    --atencion-bg:    #332a12;
    --atencion-borde: #4e4020;
    --atencion-tinta: #f1d98f;
    --velo:         rgba(0,0,0,.62);
    --brillo-1:     #1c2413;
    --brillo-2:     #10231a;
    --sombra:       0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-tema="auto"] {
        --fondo:        #0e0e0f;
        --panel:        #171718;
        --panel-alt:    #1d1d1f;
        --tinta:        #ededee;
        --tinta-media:  #b2b2b6;
        --tinta-suave:  #85858a;
        --tinta-tenue:  #4d4d51;
        --borde:        #2a2a2d;
        --borde-fuerte: #3b3b40;
        --gris-suave:   #202022;
        --gris-medio:   #2a2a2d;
        --verde:        #35cf78;
        --verde-claro:  #15321f;
        --verde-tinta:  #6ee7a0;
        --lima:         #d7e846;
        --amarillo:     #e6de4a;
        --lila:         #241f42;
        --lila-tinta:   #b6a7ff;
        --azul:         #17233f;
        --azul-tinta:   #93b4ff;
        --rosa:         #3a1626;
        --rosa-tinta:   #ff96ba;
        --contraste-bg:    #ededee;
        --contraste-tinta: #131314;
        --contraste-suave: rgba(0,0,0,.55);
    --contraste-bg-hover: #ffffff;
        --lima-hover:   #e3f45f;
        --t-azul-bg:   #16233f;  --t-azul-tinta:   #93b4ff;
        --t-ambar-bg:  #342a13;  --t-ambar-tinta:  #f0c674;
        --t-lila-bg:   #241f42;  --t-lila-tinta:   #b6a7ff;
        --t-verde-bg:  #15321f;  --t-verde-tinta:  #6ee7a0;
        --t-rosa-bg:   #3a1626;  --t-rosa-tinta:   #ff96ba;
        --t-agua-bg:   #12302f;  --t-agua-tinta:   #63d6d0;
        --t-gris-bg:   #25252a;  --t-gris-tinta:   #9a9aa2;

        --ok-bg:        #15321f;
        --ok-borde:     #1f4a2d;
        --ok-tinta:     #7ceaab;
        --error-bg:     #3a1626;
        --error-borde:  #56203b;
        --error-tinta:  #ffa3c2;
        --atencion-bg:    #332a12;
        --atencion-borde: #4e4020;
        --atencion-tinta: #f1d98f;
        --velo:         rgba(0,0,0,.62);
        --brillo-1:     #1c2413;
        --brillo-2:     #10231a;
        --sombra:       0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35);
        color-scheme: dark;
    }
}

/* El mapa se muestra siempre en claro, también con la aplicación en modo
   noche: sobre un mapa oscuro cuesta distinguir carreteras y topónimos. */
:root[data-tema="oscuro"] #mapa,
:root[data-tema="oscuro"] .mapa { background: #e9e9e9; border-color: var(--borde-fuerte); }

/* Al imprimir, siempre en claro. */
@media print {
    :root, :root[data-tema="oscuro"], :root[data-tema="auto"] {
        --fondo: #ffffff;
        --panel: #ffffff;
        --panel-alt: #fafafa;
        --tinta: #101010;
        --tinta-media: #444444;
        --tinta-suave: #777777;
        --borde: #dddddd;
        --borde-fuerte: #cccccc;
        --gris-suave: #f5f5f5;
        --gris-medio: #eeeeee;
        --contraste-bg: #101010;
        --contraste-tinta: #ffffff;
        color-scheme: light;
    }
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1180px) {
    /* En una sola columna, primero el contenido de la pestaña y después
       la información lateral: si no, hay que bajar toda la actividad
       reciente para llegar al itinerario o al presupuesto. */
    .split { grid-template-columns: 1fr; }
    .split__der { order: 1; }
    .split__izq { order: 2; border-right: 0; border-bottom: 0; border-top: 1px solid var(--borde); }
    .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .app { padding: 0; }
    .marco { border-radius: 0; flex-direction: column; }

    /* Barra lateral convertida en fila de iconos */
    .lateral {
        width: 100%; flex: none;
        border-right: 0; border-bottom: 1px solid var(--borde);
        padding: 12px 14px;
        position: sticky; top: 0; z-index: 30;
        background: var(--panel);
    }
    .marca { padding: 0 0 10px; font-size: 19px; }
    .nav { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; }
    .nav::-webkit-scrollbar { display: none; }
    .nav__enlace span:not(.cuenta) { display: none; }
    .nav__enlace { padding: 10px; }
    .nav__grupo .nav__sub { display: none; }
    .nav__grupo > .nav__enlace > svg:last-child,
    .nav__enlace .espaciador { display: none; }
    .lateral__pie { margin-top: 10px; padding-top: 10px; flex-direction: row; }

    /* Cabecera */
    .barra-superior { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
    .buscador { flex: 1 1 100%; order: 2; }
    .barra-superior__acciones { order: 1; margin-left: 0; width: 100%; justify-content: flex-end; }
    .menu-flotante { right: 14px; left: 14px; top: 58px; min-width: 0; }

    .seccion, .migas, .cabecera-ficha { padding-left: 14px; padding-right: 14px; }
    .seccion { padding-top: 18px; padding-bottom: 18px; }
    .pestanas { padding: 0 14px; gap: 18px; }

    /* Migas: la fecha de actividad pasa a su propia línea */
    .migas { flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; row-gap: 6px; }
    .migas__derecha { margin-left: 0; width: 100%; font-size: 12px; }

    /* Título de sección: el texto arriba y los botones debajo */
    .titulo-pagina { flex-direction: column; align-items: stretch; gap: 14px; }
    .titulo-pagina h1 { font-size: 21px; }
    .titulo-pagina__acciones { margin-left: 0; }
    .titulo-pagina__acciones form { flex: 1 1 100%; }

    /* Ficha de ruta */
    .cabecera-ficha { padding-top: 18px; padding-bottom: 18px; gap: 12px; }
    .cabecera-ficha h1 { font-size: 20px; }
    .avatar--l { width: 46px; height: 46px; font-size: 15px; }
    .cabecera-ficha__acciones { margin-left: 0; width: 100%; }

    /* Rejillas y formularios a una columna */
    .rejilla, .rejilla--2, .rejilla--3, .rejilla--4,
    .fila, .fila--3, .fila--4 { grid-template-columns: 1fr !important; }
    .tarjeta { padding: 16px; }
    .kpi { padding: 15px 16px; }
    .kpi__valor { font-size: 22px; }
    .barras-cat__fila { grid-template-columns: 96px 1fr; row-gap: 4px; }
    .barras-cat__fila .importe { grid-column: 2; text-align: right; }

    /* Fichas de lista: el dato de la derecha baja debajo */
    .item { flex-wrap: wrap; padding: 15px 16px; }
    .item__meta { margin-left: 0; width: 100%; text-align: left; padding-top: 10px; }
    .item__meta .barra-progreso { width: 100% !important; }

    /* Ventanas emergentes a pantalla casi completa */
    .dialogo { padding: 0; }
    .dialogo__caja { margin-top: 0; border-radius: 0; min-height: 100vh; padding: 20px 16px 40px; }

    /* Calendario compacto */
    .dia { min-height: 74px; padding: 5px 4px; }
    .dia__num { font-size: 11px; }
    .dia__num a { display: none; }
    .evento { font-size: 10px; padding: 3px 5px; border-left-width: 2px; }
    .calendario__cabecera div { padding: 8px 5px; font-size: 10px; }

    .flashes { left: 14px; right: 14px; width: auto; }
}

@media (max-width: 560px) {
    /* Los nombres de los días del calendario, abreviados */
    .calendario__cabecera div { font-size: 0; padding: 8px 2px; }
    .calendario__cabecera div::first-letter { font-size: 10px; }
    .dia { min-height: 62px; }
    .pestanas { gap: 14px; font-size: 13.5px; }
    .boton { padding: 9px 13px; }
}

@media print {
    .lateral, .barra-superior, .pestanas, .titulo-pagina__acciones, .cabecera-ficha__acciones, .flashes { display: none !important; }
    .app { padding: 0; }
    .marco { box-shadow: none; border-radius: 0; }
    body { background: #fff; }
}