/* CRM multiempresa. Un solo archivo, sin dependencias externas. */

:root {
    --petroleo: #0f4c5c;
    --petroleo-oscuro: #0a3742;
    --petroleo-vivo: #17718a;
    --petroleo-suave: #e3eef1;
    --fondo: #f4f6f8;
    --superficie: #ffffff;
    --superficie-suave: #f8fafb;
    --tinta: #16212a;
    --tinta-suave: #5f6f7a;
    --linea: #e3e8ec;
    --linea-fuerte: #cbd5db;
    --ambar: #e8a33d;
    --ambar-suave: #fdf3e0;
    --rojo: #c2413b;
    --rojo-suave: #fdecea;
    --verde: #18805a;
    --verde-suave: #e4f5ee;

    --fuente: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --radio: 10px;
    --radio-grande: 16px;
    --sombra: 0 1px 2px rgba(16, 33, 42, .05), 0 4px 16px rgba(16, 33, 42, .05);
    --sombra-alta: 0 2px 4px rgba(16, 33, 42, .06), 0 12px 32px rgba(16, 33, 42, .10);
    --anillo: 0 0 0 4px rgba(23, 113, 138, .18);
    --paso: .16s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; margin: 0 0 .375rem; letter-spacing: -.02em; }
h2 { font-size: 1.0625rem; line-height: 1.3; font-weight: 650; margin: 0 0 1rem; letter-spacing: -.005em; }
p { margin: 0 0 1rem; }
a { color: var(--petroleo-vivo); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--paso); }
a:hover { color: var(--petroleo-oscuro); }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; background: var(--petroleo-suave); padding: .1em .4em; border-radius: 5px; }

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: 4px; }

.apoyo { color: var(--tinta-suave); font-size: .9375rem; max-width: 70ch; }
.detalle { color: var(--tinta-suave); font-size: .875rem; font-weight: 400; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sube { color: var(--verde); }
.baja { color: var(--rojo); }
.neutro { color: var(--tinta-suave); }

.saltar { position: absolute; left: -999px; top: 0; background: var(--ambar); color: var(--tinta); padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: 0; }

/* --- Marco de la aplicación ------------------------------------------------ */

.marco { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; }

.lateral {
    background: linear-gradient(180deg, #0c3945 0%, #0a2c36 100%);
    color: #fff;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.empresa-activa { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: center; padding: .25rem .5rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.empresa-sigla { grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: linear-gradient(135deg, #f0b455, #e08f2a); color: #2b1c05; font-weight: 750; font-size: 1.125rem; }
.empresa-nombre { font-size: 1.0625rem; font-weight: 650; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.empresa-rol { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .65); }
.empresa-cambiar { grid-column: 1 / -1; justify-self: start; margin-top: .875rem; font-size: .8125rem; color: rgba(255, 255, 255, .85); text-decoration: none; padding: .3rem .7rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; transition: background var(--paso), border-color var(--paso); }
.empresa-cambiar:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }

.menu { display: flex; flex-direction: column; gap: .125rem; }
.menu a {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: rgba(255, 255, 255, .74);
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 500;
    padding: .575rem .75rem;
    border-radius: var(--radio);
    transition: background var(--paso), color var(--paso);
}
.menu svg { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--ambar); }
.menu a[aria-current="page"] svg { stroke: var(--ambar); opacity: 1; }

.cuenta { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: center; font-size: .8125rem; padding: 1rem .5rem 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.cuenta-inicial { grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, .14); font-weight: 650; font-size: .9375rem; }
.cuenta-nombre { margin: 0; font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-acciones { display: flex; flex-wrap: wrap; gap: .125rem .75rem; align-items: center; }
.cuenta-acciones form { margin: 0; }
.cuenta-enlace { color: rgba(255, 255, 255, .7); text-decoration: none; }
.cuenta-enlace:hover, .cuenta-enlace[aria-current="page"] { color: var(--ambar); }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: rgba(255, 255, 255, .7); cursor: pointer; transition: color var(--paso); }
.enlace:hover { color: var(--ambar); }

.contenido { padding: 2.25rem 2.75rem 4rem; max-width: 80rem; width: 100%; }

/* --- Piezas comunes --------------------------------------------------------- */

.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.encabezado .apoyo { margin: 0; }

.meses { display: flex; gap: .5rem; }
.meses a { text-decoration: none; font-weight: 500; color: var(--tinta); padding: .45rem .9rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); font-size: .9375rem; box-shadow: 0 1px 2px rgba(16, 33, 42, .04); transition: border-color var(--paso), box-shadow var(--paso), color var(--paso); }
.meses a:hover { border-color: var(--petroleo-vivo); color: var(--petroleo); box-shadow: var(--sombra); }

.miga { margin: 0 0 .75rem; font-size: .875rem; }
.miga a { text-decoration: none; font-weight: 500; }
.miga a::before { content: "← "; }

.aviso { background: var(--ambar-suave); border: 1px solid #f3d9a6; color: #5b3d08; padding: .75rem 1rem; border-radius: var(--radio); max-width: 70ch; }
.aviso-error { background: var(--rojo-suave); border-color: #f3c4c0; color: #7d2622; }
.vacio { background: var(--superficie-suave); border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); padding: 1.25rem 1.5rem; color: var(--tinta-suave); max-width: 70ch; }

.bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; min-width: 0; }
.bloque .apoyo:last-child, .bloque .vacio:last-child { margin-bottom: 0; }
.bloque .vacio { border: 0; padding: 0; background: none; }

.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }

/* --- Cifra principal e indicadores ----------------------------------------- */

.cifra-principal {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: 1.75rem 2rem;
    border-radius: var(--radio-grande);
    color: #fff;
    background: linear-gradient(125deg, #0b3a47 0%, #0f4c5c 45%, #17718a 100%);
    box-shadow: var(--sombra-alta);
}
.cifra-principal::after { content: ""; position: absolute; right: -6rem; top: -8rem; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 163, 61, .28), rgba(232, 163, 61, 0)); pointer-events: none; }
.cifra-monto { font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 1; font-weight: 750; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: #fff; margin: 0 0 .625rem; }
.cifra-nota { color: rgba(255, 255, 255, .78); margin: 0 0 1.125rem; max-width: 70ch; font-size: .9375rem; }
.cifra-principal .apoyo, .cifra-principal .detalle { color: rgba(255, 255, 255, .78); }
.cifra-principal a { color: #fff; }
.comparaciones { position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; }
.comparaciones li { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: .3rem .875rem .3rem .35rem; }
.comparaciones strong { font-variant-numeric: tabular-nums; font-size: .875rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--tinta-suave); }
.comparaciones .sube strong { color: var(--verde); }
.comparaciones .baja strong { color: var(--rojo); }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.indicadores > div { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 1.125rem 1.375rem; transition: box-shadow var(--paso), transform var(--paso); }
.indicadores > div:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.indicadores dt { font-size: .8125rem; font-weight: 500; color: var(--tinta-suave); }
.indicadores dd { margin: .375rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.indicadores dd.texto { font-size: 1.125rem; letter-spacing: 0; }
.indicadores dd .detalle { display: block; letter-spacing: 0; margin-top: .125rem; }

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

.tabla { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla th, .tabla td { padding: .7rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla thead th { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; padding-top: .5rem; padding-bottom: .5rem; }
.tabla thead th.num, .tabla td.num { text-align: right; }
.tabla tbody th { font-weight: 550; }
.tabla tbody tr { transition: background var(--paso); }
.tabla tbody tr:hover { background: var(--superficie-suave); }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .detalle { display: block; }
.tabla tr.anulada td { color: var(--tinta-suave); text-decoration: line-through; }
.tabla tr.no-cuenta td { color: var(--tinta-suave); }
.tabla tr.no-cuenta .detalle { display: inline; }
.tabla tr.anulada .detalle { text-decoration: none; display: inline; }
.tabla-enlaces tbody tr:hover { background: var(--petroleo-suave); }
.tabla-enlaces a { font-weight: 550; text-decoration: none; }
.tabla-enlaces a:hover { text-decoration: underline; }
.tabla td.sube, .tabla td.baja { font-weight: 600; }
.bloque > .tabla { margin-bottom: .75rem; }
.bloque > .tabla:last-child { margin-bottom: 0; }

.proporcion { display: block; height: 6px; background: var(--petroleo-suave); border-radius: 999px; margin-top: .45rem; overflow: hidden; }
.proporcion span { display: block; height: 100%; background: linear-gradient(90deg, var(--petroleo), var(--petroleo-vivo)); border-radius: 999px; }

.ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .625rem 1.5rem; margin: 0; font-size: .9375rem; }
.ficha dt { color: var(--tinta-suave); }
.ficha dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }

/* --- Gráfico ---------------------------------------------------------------- */

.grafico-marco { overflow-x: auto; }
.grafico { display: block; width: 100%; min-width: 38rem; height: auto; }
.grafico .barra { fill: var(--petroleo-vivo); rx: 4px; transition: fill var(--paso); }
.grafico .barra-hoy { fill: var(--ambar); }
.grafico .barra-mayor { fill: var(--petroleo); }
.grafico .valor { fill: var(--tinta); font-size: 10.5px; font-weight: 600; }
.grafico .barra:hover { fill: var(--petroleo-oscuro); }
.grafico .eje { stroke: var(--linea-fuerte); stroke-width: 1; }
.grafico .guia { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 3 4; }
.grafico text { font-family: var(--fuente); fill: var(--tinta-suave); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico .dia { fill: var(--tinta); }
.grafico .dia-semana { font-size: 10px; }
.grafico .dia-futuro { fill: #b3bec5; }

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

label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .3rem; }
input[type="email"], input[type="password"], input[type="search"], input[type="text"], input[type="date"], textarea, select {
    font: inherit;
    color: inherit;
    padding: .625rem .875rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    background: var(--superficie);
    transition: border-color var(--paso), box-shadow var(--paso);
}
input[type="email"], input[type="password"], input[type="search"], input[type="text"], textarea { width: 100%; }
textarea { resize: vertical; }
select { max-width: 100%; padding-right: 2.25rem; }
input:hover, textarea:hover, select:hover { border-color: #a9b8c0; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 0; border-color: var(--petroleo-vivo); box-shadow: var(--anillo); border-radius: var(--radio); }
::placeholder { color: #9aa8b0; }

.boton { display: inline-block; font: inherit; font-weight: 600; font-size: .9375rem; color: #fff; background: var(--petroleo); border: 1px solid transparent; border-radius: var(--radio); padding: .625rem 1.25rem; cursor: pointer; box-shadow: 0 1px 2px rgba(16, 33, 42, .12); transition: background var(--paso), box-shadow var(--paso), transform var(--paso); }
.boton:hover { background: var(--petroleo-vivo); box-shadow: 0 4px 12px rgba(15, 76, 92, .25); }
.boton:active { transform: translateY(1px); box-shadow: none; }
a.boton { text-decoration: none; color: #fff; }
a.boton:hover { color: #fff; }
.boton-chico { padding: .35rem .8rem; font-size: .8125rem; white-space: nowrap; border-radius: 8px; }
.boton-secundario { background: var(--superficie); color: var(--petroleo); border-color: var(--linea-fuerte); }
.boton-secundario:hover { background: var(--petroleo-suave); border-color: var(--petroleo-vivo); box-shadow: none; }
a.boton-secundario, a.boton-secundario:hover { color: var(--petroleo); }
.boton-peligro { background: var(--rojo); }
.boton-peligro:hover { background: #a3322d; box-shadow: 0 4px 12px rgba(194, 65, 59, .25); }

.formulario { display: grid; gap: .25rem; margin-bottom: 1.5rem; }
.formulario input { margin-bottom: 1rem; }
.formulario .boton { justify-self: start; }

.buscador { margin: 1rem 0 1.5rem; max-width: 44rem; }
.buscador-fila { display: flex; gap: .5rem; }
.buscador-fila input { flex: 1; min-width: 0; box-shadow: 0 1px 2px rgba(16, 33, 42, .04); }

.lista-empresas { display: grid; gap: .75rem; max-width: 34rem; }
.empresa-opcion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 1.125rem 1.375rem; cursor: pointer; transition: border-color var(--paso), box-shadow var(--paso), transform var(--paso); }
.empresa-opcion:hover { border-color: var(--petroleo-vivo); box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.empresa-opcion[aria-current="true"] { border-color: var(--petroleo-vivo); box-shadow: var(--anillo); }
.empresa-opcion-nombre { font-size: 1.125rem; font-weight: 650; }
.empresa-opcion-nota { font-size: .8125rem; font-weight: 600; color: var(--verde); background: var(--verde-suave); padding: .2rem .7rem; border-radius: 999px; }

/* --- Seguimiento: filtros, etiquetas, tareas y notas ------------------------ */

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.filtros, .paginas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; font-size: .9375rem; }
.filtros a, .paginas a { text-decoration: none; font-weight: 500; color: var(--tinta); padding: .375rem .9rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); transition: border-color var(--paso), background var(--paso), color var(--paso); }
.filtros a:hover, .paginas a:hover { border-color: var(--petroleo-vivo); color: var(--petroleo); }
.filtros a[aria-current="true"] { background: var(--petroleo); border-color: var(--petroleo); color: #fff; box-shadow: 0 2px 8px rgba(15, 76, 92, .25); }
.paginas span { color: var(--tinta-suave); padding: 0 .5rem; }

.formulario-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.formulario-linea .campo-ancho { flex: 1 1 14rem; min-width: 0; }
.formulario-linea .campo-ancho select { width: 100%; }
.formulario-linea-sin-borde { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 1rem; }
.formulario-nota { display: grid; gap: .625rem; margin-bottom: 1.25rem; max-width: 46rem; }
.formulario-nota .boton { justify-self: start; }

.etiquetas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.etiqueta { display: inline-flex; align-items: center; gap: .5rem; background: var(--petroleo-suave); color: var(--petroleo-oscuro); border-radius: 999px; padding: .3rem .85rem; font-size: .875rem; font-weight: 500; text-decoration: none; transition: background var(--paso); }
a.etiqueta:hover { background: #d2e4e9; }
.etiqueta a { text-decoration: none; color: inherit; }
.etiqueta-conteo { color: var(--tinta-suave); font-variant-numeric: tabular-nums; font-weight: 600; }
.etiqueta-quitar { font: inherit; font-size: .8125rem; background: none; border: 0; padding: 0; color: var(--tinta-suave); cursor: pointer; }
.etiqueta-quitar:hover { color: var(--rojo); text-decoration: underline; }

.lista-tareas { list-style: none; padding: 0; margin: 0; }
.lista-tareas li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--linea); }
.lista-tareas li:last-child { border-bottom: 0; }
.tarea-titulo { display: block; font-weight: 550; }
.tarea-hecha .tarea-titulo { color: var(--tinta-suave); text-decoration: line-through; }

.notas { list-style: none; padding: 0; margin: 0; max-width: 46rem; display: grid; gap: .75rem; }
.notas li { padding: .875rem 1rem; background: var(--superficie-suave); border: 1px solid var(--linea); border-radius: var(--radio); }
.nota-texto { margin: 0 0 .25rem; overflow-wrap: anywhere; }
.notas .detalle { margin: 0; }

/* --- Reportes ---------------------------------------------------------------- */

.filtro-reporte { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 0 0 1.5rem; padding: 1.125rem 1.375rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.filtro-reporte .campo { min-width: 0; }
.atajos { display: flex; flex-wrap: wrap; gap: .5rem; flex-basis: 100%; font-size: .8125rem; }
.atajos a { text-decoration: none; font-weight: 500; padding: .25rem .7rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie-suave); transition: border-color var(--paso), background var(--paso); }
.atajos a:hover { border-color: var(--petroleo-vivo); background: var(--petroleo-suave); }

/* --- Scorecard ---------------------------------------------------------------- */

.barra-scorecard { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.barra-scorecard .atajos { flex-basis: auto; font-size: .875rem; }
.atajos a[aria-current="true"] { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }

.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1.25rem; font-size: .8125rem; color: var(--tinta-suave); margin: 0 0 1.25rem; }
.leyenda .origen { margin: 0 .25rem 0 0; }
.origen { display: inline-block; vertical-align: middle; margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.origen-auto { background: var(--petroleo-suave); color: var(--petroleo-oscuro); }
.origen-manual { background: var(--ambar-suave); color: #7a5410; }
.origen-calculo { background: #eceff2; color: var(--tinta-suave); }

.tabla-marco { overflow-x: auto; }
.tabla-scorecard { min-width: 46rem; font-size: .875rem; }
.tabla-scorecard tbody th { font-weight: 500; min-width: 13rem; }
.tabla-scorecard th, .tabla-scorecard td { vertical-align: middle; padding: .55rem .5rem; }
.tabla-scorecard thead th { white-space: normal; vertical-align: bottom; }
.tabla-scorecard thead th:nth-last-child(-n+2) { max-width: 5.5rem; }
.tabla-scorecard .origen { margin-left: .375rem; padding: 0 .4rem; font-size: .625rem; }
.tabla-scorecard tr.grupo th { padding-top: 1.125rem; padding-bottom: .375rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--petroleo); border-bottom: 1px solid var(--linea-fuerte); background: none; }
.tabla-scorecard tr.grupo:hover { background: none; }
.tabla-scorecard tbody tr:first-child.grupo th { padding-top: .25rem; }
.tabla-scorecard td:nth-last-child(2) { border-left: 1px solid var(--linea); }
.tabla-scorecard td.sube, .tabla-scorecard td.baja { font-weight: 600; }

.carga-grupo { border: 0; padding: 0; margin: 0 0 1.5rem; }
.carga-grupo legend { padding: 0; margin-bottom: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--petroleo); }
.carga-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem 1.25rem; }
.carga-campo { display: flex; flex-direction: column; min-width: 0; }
.carga-campo label { flex: 1; font-weight: 550; }
.carga-campo input { font-variant-numeric: tabular-nums; }
.carga-campo .detalle { margin-top: .3rem; font-size: .8125rem; }
.casillas legend { padding: 0; margin-bottom: .5rem; font-weight: 600; font-size: .875rem; grid-column: 1 / -1; }

/* --- Usuarios ---------------------------------------------------------------- */

.clave-nueva { background: var(--ambar-suave); border: 1px solid #f0cf90; border-radius: var(--radio-grande); padding: 1.125rem 1.375rem; margin-bottom: 1.5rem; max-width: 46rem; }
.clave-nueva p { margin: 0 0 .5rem; }
.clave-nueva p:last-child { margin-bottom: 0; color: #6b5120; font-size: .9375rem; }
.clave-valor { display: inline-block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.25rem; letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; background: var(--superficie); border: 1px dashed #e0b866; border-radius: 8px; padding: .25rem .75rem; }

.bloque-angosto { max-width: 30rem; }
.bloque-angosto .formulario { margin-bottom: 1rem; }

.casillas { border: 0; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; }
.casillas label { display: flex; align-items: center; gap: .625rem; font-weight: 500; font-size: .9375rem; margin: 0; padding: .5rem .75rem; border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer; transition: border-color var(--paso), background var(--paso); }
.casillas label:hover { border-color: var(--petroleo-vivo); background: var(--superficie-suave); }
.casillas input { width: 1.05rem; height: 1.05rem; accent-color: var(--petroleo); }

.acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.separado { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }

.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { padding: .25rem 0; }

/* --- Páginas sin sesión (ingreso, errores) ---------------------------------- */

body.suelto {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        radial-gradient(60rem 40rem at 85% -10%, rgba(232, 163, 61, .22), rgba(232, 163, 61, 0) 60%),
        linear-gradient(140deg, #082a33 0%, #0f4c5c 55%, #17718a 100%);
}
.suelto-caja { background: var(--superficie); border-radius: 20px; padding: 2.25rem 2.25rem 1.75rem; width: 100%; max-width: 26.5rem; box-shadow: 0 24px 64px rgba(4, 22, 28, .45); }
.suelto-marca { display: flex; align-items: center; gap: .625rem; margin: 0 0 1.5rem; font-weight: 700; letter-spacing: .02em; color: var(--petroleo); }
.suelto-marca span { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: linear-gradient(135deg, #f0b455, #e08f2a); color: #2b1c05; font-size: .8125rem; font-weight: 800; }
.suelto-caja h1 { margin-bottom: 1.25rem; font-size: 1.5rem; }
.suelto-caja .formulario .boton { justify-self: stretch; padding: .75rem 1.25rem; margin-top: .25rem; }
.suelto-caja .apoyo { margin-bottom: 0; font-size: .875rem; }

/* --- Pantallas angostas ------------------------------------------------------ */

@media (max-width: 60rem) {
    .marco { grid-template-columns: minmax(0, 1fr); }
    .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .875rem 1.25rem; overflow: visible; }
    .empresa-activa { border-bottom: 0; padding: 0; }
    .empresa-cambiar { grid-column: auto; margin: 0 0 0 .5rem; }
    .empresa-activa { grid-template-columns: auto minmax(0, 1fr) auto; }
    .menu { flex-direction: row; order: 3; flex-basis: 100%; overflow-x: auto; gap: .25rem; padding-bottom: .125rem; }
    .menu a { white-space: nowrap; padding: .45rem .75rem; }
    .menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ambar); }
    .cuenta { margin-top: 0; margin-left: auto; padding: 0; border-top: 0; }
    .contenido { padding: 1.5rem 1.25rem 3rem; }
    .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 34rem) {
    h1 { font-size: 1.375rem; }
    .bloque { padding: 1.125rem; overflow-x: auto; }
    .cifra-principal { padding: 1.375rem 1.25rem; }
    .comparaciones li { border-radius: var(--radio); }
    .buscador-fila { flex-direction: column; }
    .buscador-fila .boton { align-self: flex-start; }
    .cuenta-nombre { display: none; }
}

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