/*
2026-08-17
/opt/ballenas/web/estilos.css  (destino en vpsfran: hosting de ballenas.dnns.es)
Hoja de estilos de BallenasDNNS con el tema Sunset Ride estandar de DNNS:
claro por defecto (crema + naranja) y oscuro opcional (purpura + coral).
El tema oscuro se activa con html[data-tema="oscuro"], que fija tema.js.
*/

:root {
    /* Tema CLARO: es el de por defecto en todas las webs DNNS. */
    --fondo:        #fdf6f0;
    --fondo-alt:    #f6ece3;
    --panel:        #ffffff;
    --borde:        #e8d9cc;
    --borde-fuerte: #d3bdac;
    --texto:        #2d1f1a;
    --texto-suave:  #6b5548;
    --texto-tenue:  #9a8375;
    --acento:       #e06030;
    --acento-suave: #fbe4d8;
    --verde:        #2f8f66;
    --rojo:         #d1503f;
    --morado:       #7a4fd0;
    --sombra:       0 1px 2px rgba(45, 31, 26, .06), 0 10px 30px -20px rgba(45, 31, 26, .45);
}

html[data-tema="oscuro"] {
    --fondo:        #12101a;
    --fondo-alt:    #1a1726;
    --panel:        #252237;
    --borde:        #332e48;
    --borde-fuerte: #453e60;
    --texto:        #f0ebe5;
    --texto-suave:  #b6acc4;
    --texto-tenue:  #857c96;
    --acento:       #f5845e;
    --acento-suave: #34243a;
    --verde:        #5dd39e;
    --rojo:         #ff6b6b;
    --morado:       #b07aff;
    --sombra:       0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -20px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

.mono {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---------- Barra superior ---------- */
.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--panel);
    border-bottom: 1px solid var(--borde);
}

.barra-int {
    max-width: 78rem;
    margin: 0 auto;
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logotipo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
}

.logotipo strong { color: var(--acento); font-weight: 700; }
.logotipo .icono { font-size: 1.25rem; }

.menu { display: flex; align-items: center; gap: .75rem; }

.estado {
    font-size: .8125rem;
    color: var(--texto-suave);
    padding: .25rem .6rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    white-space: nowrap;
}

.estado.ok     { color: var(--verde);  border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.estado.parcial{ color: var(--acento); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.estado.error  { color: var(--rojo);   border-color: color-mix(in srgb, var(--rojo) 45%, transparent); }

.btn-icono {
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    color: var(--texto);
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .5rem;
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color .15s ease, background .15s ease;
}

.btn-icono:hover { border-color: var(--acento); }
.btn-icono:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Contenido ---------- */
.contenido {
    max-width: 78rem;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .9rem;
}

.tarjeta {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .6rem;
    padding: .95rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    box-shadow: var(--sombra);
}

.rotulo {
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-tenue);
}

.dato {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    letter-spacing: -.02em;
}

.dato.verde { color: var(--verde); }
.dato.rojo  { color: var(--rojo); }
.apunte { font-size: .8125rem; color: var(--texto-tenue); }

/* ---------- Aviso ---------- */
.aviso {
    background: var(--acento-suave);
    border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
    border-radius: .6rem;
    padding: .8rem 1.1rem;
    font-size: .9375rem;
    color: var(--texto);
}

/* ---------- Bloques y tablas ---------- */
.bloque { display: flex; flex-direction: column; gap: .9rem; }

.bloque-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

h1 { margin: 0; font-size: 1.35rem; font-weight: 620; letter-spacing: -.02em; }
h2 { margin: .1rem 0 0; font-size: 1rem; font-weight: 600; word-break: break-all; }
h3 { margin: 1.4rem 0 .6rem; font-size: .9375rem; font-weight: 600; }

.controles { display: flex; gap: .5rem; }

.controles input, .controles select {
    background: var(--panel);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: .45rem;
    padding: .45rem .7rem;
    font: inherit;
    font-size: .875rem;
}

.controles input { min-width: 14rem; }
.controles input:focus-visible, .controles select:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
}

.marco-tabla {
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .6rem;
    box-shadow: var(--sombra);
}

.tabla { border-collapse: collapse; width: 100%; font-size: .875rem; }

.tabla th, .tabla td {
    padding: .6rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.tabla thead th {
    position: sticky;
    top: 0;
    background: var(--fondo-alt);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-tenue);
    font-weight: 600;
}

.tabla thead th[data-orden] { cursor: pointer; user-select: none; }
.tabla thead th[data-orden]:hover { color: var(--acento); }
.tabla thead th.activa { color: var(--acento); }

.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--fondo-alt); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla.compacta tbody tr { cursor: default; }

.col-num {
    text-align: right;
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.col-pos { width: 3rem; color: var(--texto-tenue); text-align: right; }

td.cartera {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: var(--texto-suave);
}

.vacio { text-align: center; color: var(--texto-tenue); padding: 2rem; white-space: normal; }

.pastilla {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .3rem;
    font-size: .75rem;
    letter-spacing: .02em;
}

.pastilla.entrada { background: color-mix(in srgb, var(--verde) 18%, transparent); color: var(--verde); }
.pastilla.salida  { background: color-mix(in srgb, var(--rojo) 18%, transparent); color: var(--rojo); }
.pastilla.cross   { background: color-mix(in srgb, var(--morado) 18%, transparent); color: var(--morado); }

/* ---------- Ficha lateral ---------- */
.ficha {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(38rem, 100%);
    background: var(--fondo);
    border-left: 1px solid var(--borde);
    box-shadow: -20px 0 40px -30px rgba(0, 0, 0, .6);
    padding: 1.4rem 1.5rem 3rem;
    overflow-y: auto;
    z-index: 40;
}

.ficha-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.ficha-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem;
}

.ficha-cifras > div {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .5rem;
    padding: .7rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ficha-cifras .dato { font-size: 1.05rem; }

.velo {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 10, .45);
    z-index: 30;
}

/* ---------- Pie ---------- */
.pie {
    border-top: 1px solid var(--borde);
    padding: 1.1rem 1.25rem 2rem;
    max-width: 78rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    font-size: .8125rem;
    color: var(--texto-tenue);
}

@media (max-width: 45rem) {
    .controles input { min-width: 8rem; }
    .ficha { padding: 1.1rem 1.1rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Pestañas de vista ---------- */
.pestanas {
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    gap: .25rem;
}

.pestana {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: .9375rem;
    padding: .55rem .9rem;
    cursor: pointer;
}

.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.pestana:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.btn-texto {
    background: none;
    border: 1px solid var(--borde);
    border-radius: .45rem;
    color: var(--texto-suave);
    font: inherit;
    font-size: .8125rem;
    padding: .3rem .7rem;
    cursor: pointer;
}

.btn-texto:hover { border-color: var(--acento); color: var(--acento); }

/* ---------- Formularios de ajustes ---------- */
.formulario {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .6rem;
    padding: .9rem 1rem;
}

.formulario input, .formulario select {
    background: var(--fondo);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: .45rem;
    padding: .45rem .7rem;
    font: inherit;
    font-size: .875rem;
    min-width: 9rem;
    flex: 1 1 9rem;
}

.formulario input:disabled, .formulario select:disabled, .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn {
    background: var(--acento);
    border: 1px solid var(--acento);
    color: #fff;
    border-radius: .45rem;
    padding: .45rem 1.1rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover { filter: brightness(1.08); }
.btn.secundario { background: transparent; color: var(--texto-suave); border-color: var(--borde); }

.btn-mini {
    background: none;
    border: 1px solid var(--borde);
    color: var(--texto-suave);
    border-radius: .35rem;
    padding: .2rem .55rem;
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}

.btn-mini:hover { border-color: var(--rojo); color: var(--rojo); }

.check {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: var(--texto-suave);
    white-space: nowrap;
}

.panel-aviso {
    background: var(--acento-suave);
    border: 1px solid color-mix(in srgb, var(--acento) 40%, transparent);
    border-radius: .6rem;
    padding: .85rem 1.1rem;
    font-size: .9375rem;
}

.vista { display: flex; flex-direction: column; gap: 1.1rem; }
.texto { color: var(--texto-suave); max-width: 68ch; margin: 0; font-size: .9375rem; }

.pastilla.tipo    { background: var(--acento-suave); color: var(--acento); }
.pastilla.oculta  { background: var(--fondo-alt); color: var(--texto-tenue); }
.pastilla.normal  { background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); }
.con-etiqueta     { color: var(--texto); font-weight: 600; font-family: inherit; }
.etiqueta-ficha   { font-size: .8125rem; color: var(--acento); }
.fuerte           { font-weight: 600; }
td.verde          { color: var(--verde); }
td.rojo           { color: var(--rojo); }

/* ---------- Ventana de acceso ---------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 10, .5);
    display: grid;
    place-items: center;
    z-index: 50;
    padding: 1rem;
}

.caja-login {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: .7rem;
    padding: 1.5rem;
    width: min(24rem, 100%);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    box-shadow: var(--sombra);
}

.caja-login h2 { margin: 0; font-size: 1.15rem; }

.caja-login input {
    background: var(--fondo);
    border: 1px solid var(--borde);
    color: var(--texto);
    border-radius: .45rem;
    padding: .55rem .75rem;
    font: inherit;
}

.caja-login .botones { display: flex; gap: .5rem; justify-content: flex-end; }
.error { color: var(--rojo); font-size: .875rem; margin: 0; }

/* ---------- Ocultar de verdad ----------
   Las reglas de display (grid en .modal, flex en .vista) ganan al atributo
   hidden del HTML, que solo aporta un display:none de la hoja del navegador.
   Sin esto, la ventana de acceso y las pestañas ocultas se ven igualmente. */
[hidden] { display: none !important; }