:root {
    --fondo: #0b1220;
    --panel: #111a2e;
    --borde: #1f2a44;
    --acento: #22b8cf;
}
body { background: radial-gradient(circle at 20% 0%, #13203a 0, var(--fondo) 55%) fixed; min-height: 100vh; }
.app-nav { background: rgba(11, 18, 32, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--borde); }
.app-nav .nav-link.active { color: var(--acento) !important; }
.selector-empresa { max-width: 340px; background-color: var(--panel); }
.card { background: var(--panel); border-color: var(--borde); }

/* Login */
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 400px; }

/* Inicio */
.tarjeta-accion {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    height: 120px; border-radius: 14px; background: var(--panel); border: 1px solid var(--borde);
    color: inherit; text-decoration: none; transition: transform .12s, border-color .12s;
}
.tarjeta-accion i { font-size: 1.8rem; color: var(--acento); }
.tarjeta-accion span { font-weight: 600; }
.tarjeta-accion:hover { transform: translateY(-2px); border-color: var(--acento); }
.tarjeta-accion .contador { position: absolute; top: 10px; right: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: .8rem 1rem; height: 100%; }
.kpi-t { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #8b9bb8; }
.kpi-v { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.15rem; font-weight: 600; margin-top: .2rem; }

/* Subida */
.zona-subida {
    border: 2px dashed var(--borde); border-radius: 16px; padding: 2.2rem 1rem; text-align: center;
    background: rgba(17, 26, 46, .6); transition: border-color .15s, background .15s;
}
.zona-subida.activa { border-color: var(--acento); background: rgba(34, 184, 207, .08); }

/* Borradores / Registros */
.barra-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.area-trabajo { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: .75rem; height: calc(100vh - 215px); min-height: 420px; }
.area-trabajo.sin-visor { grid-template-columns: minmax(0, 1fr) 0; }
.area-trabajo.sin-visor .visor { display: none; }
.grid-606 { border-radius: 10px; overflow: hidden; border: 1px solid var(--borde); }
.tabulator { font-size: .82rem; background-color: var(--panel); }
.tabulator .tabulator-header .tabulator-col { background: #16213a; }
.tabulator-row .tabulator-cell { padding: 5px 6px; }
.tabulator-row .tabulator-cell .sub { font-size: .72rem; max-width: 150px; }
.tabulator-cell .num { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.tabulator-cell.calc { background: rgba(34, 184, 207, .06); color: #9fe6f0; }
.tabulator-cell.dudoso { background: rgba(255, 193, 7, .18) !important; box-shadow: inset 0 0 0 1px rgba(255, 193, 7, .55); }
.dudoso-muestra { background: rgba(255, 193, 7, .25); padding: 0 .3rem; border-radius: 3px; }

.visor { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.visor-barra { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .5rem; border-bottom: 1px solid var(--borde); }
.visor-cuerpo { flex: 1; overflow: auto; background: #0a0f1a; display: flex; align-items: flex-start; justify-content: center; }
.visor-cuerpo img { max-width: 100%; transform-origin: top center; transition: transform .1s; }
.visor-cuerpo iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.visor-errores { max-height: 140px; overflow: auto; padding: .4rem .6rem; border-top: 1px solid var(--borde); }
.visor-errores:empty { display: none; }
.texto-ocr { white-space: pre-wrap; font-size: .75rem; color: #c8d3e6; }

.tabla-reporte { max-height: 60vh; }
.tabla-reporte thead th { position: sticky; top: 0; background: #16213a; z-index: 1; }

@media (max-width: 991px) {
    .area-trabajo { grid-template-columns: 1fr; grid-template-rows: 1fr 50vh; height: auto; }
    .area-trabajo .grid-606 { height: 60vh; }
    .area-trabajo.sin-visor { grid-template-rows: 1fr 0; }
}