/*
   Hoja de estilos propia, sin framework.

   El proyecto arranca sin Bootstrap a proposito: la pantalla central del
   producto es un planificador tipo timeline con drag and drop, y esa no la
   resuelve ninguna rejilla generica. Empezar con tokens propios evita tener que
   deshacer estilos ajenos cuando llegue.
*/

:root {
    --tinta: #10243b;
    --tinta-suave: #5a6b7d;
    --linea: #dde4ec;
    --fondo: #f4f7fa;
    --papel: #ffffff;
    --marca: #0f766e;
    --marca-clara: #ccfbf1;

    /* El texto que va encima de la marca. Se recalculan cuando un inquilino
       pone su color, para que un tono claro no deje los botones con letras
       blancas sobre fondo casi blanco. */
    --sobre-marca: #ffffff;
    --sobre-marca-clara: #115e59;
    --alerta: #b91c1c;
    --aviso: #b45309;
    --aviso-suave: #fef3c7;
    --radio: 10px;
    --sombra: 0 1px 2px rgba(16, 36, 59, .06), 0 4px 16px rgba(16, 36, 59, .06);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--fondo);
    color: var(--tinta);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }

.lead { color: var(--tinta-suave); margin: 0 0 1.5rem; max-width: 62ch; }

.page-logo { display: block; height: 44px; margin: 0 0 .75rem; }

/* Visible para lectores de pantalla, invisible en la pagina: el titulo tiene
   que existir en el arbol de accesibilidad aunque lo represente una imagen. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.text-muted { color: var(--tinta-suave); }
.small { font-size: .875rem; }

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

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px;
    flex: 0 0 232px;
    background: var(--papel);
    border-right: 1px solid var(--linea);
    padding: 1.25rem 0;
}

.sidebar-brand { padding: 0 1.25rem 1.35rem; }
.sidebar-brand img { display: block; max-width: 100%; }

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

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.5rem;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
}

.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-user { color: var(--tinta-suave); font-size: .875rem; }

.app-content { flex: 1; padding: 1.75rem 1.5rem 2rem; }

.footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--linea);
    color: var(--tinta-suave);
    font-size: .8rem;
}

.footer-powered { display: inline-flex; align-items: center; gap: .5rem; }
.footer-powered img { display: block; }

/* --- Navegacion ------------------------------------------------------- */

.nav-list { list-style: none; margin: 0; padding: 0; }

.nav-list a,
.nav-list span {
    display: block;
    padding: .5rem 1.25rem;
    color: var(--tinta);
    text-decoration: none;
    font-size: .925rem;
    border-left: 3px solid transparent;
}

.nav-list a:hover { background: var(--fondo); }

.nav-list a.active {
    background: var(--marca-clara);
    border-left-color: var(--marca);
    font-weight: 600;
}

.nav-disabled span { color: #9fb0c0; cursor: default; }

.nav-section {
    margin: 1.5rem 0 .25rem;
    padding: 0 1.25rem;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9fb0c0;
}

/* --- Selector de empresa e idioma ------------------------------------- */

.tenant-selector { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.tenant-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); }
.tenant-current { font-weight: 600; }

.lang-selector { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--tinta-suave); }

select, input {
    font: inherit;
    padding: .35rem .5rem;
    border: 1px solid var(--linea);
    border-radius: 6px;
    background: var(--papel);
    color: var(--tinta);
}

/* --- Tarjetas y tablas ------------------------------------------------ */

.cards { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }

.card {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: .9rem 1.1rem;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

/* Recordatorios del registro: una linea por tipo, y los enlaces a cada semana
   separados, que pegados se leen como una sola fecha. */
.reminders { display: flex; flex-direction: column; gap: .3rem; }
.reminders .btn-link { margin-right: .6rem; }

/* Una brecha del plan con sus salidas: la tarjeta ocupa el ancho, no es un
   indicador suelto de una fila de tarjetas. */
.advice { margin-bottom: 1rem; gap: .35rem; }
.advice h3 { margin: 0; font-size: 1rem; }
.advice .lead { margin: 0; font-size: 1.05rem; font-weight: 600; }
.advice table { margin-top: .5rem; }

.card-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-suave); }
.card-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.card-value-sm { font-size: .95rem; font-weight: 600; }

.grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
}

.grid th, .grid td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--linea); }
.grid th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); background: #fafcfe; }
.grid tbody tr:last-child td { border-bottom: none; }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Arbol ------------------------------------------------------------ */

.tree, .tree ul { list-style: none; margin: 0; padding-left: 1.2rem; }
.tree > li { padding-left: 0; }
.tree li { padding: .28rem 0; }
.tree-name { font-weight: 600; }
.tree-type { margin-left: .5rem; font-size: .72rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .05em; }
.tree-entity { margin-left: .5rem; font-size: .78rem; color: var(--tinta-suave); }
.tree-count {
    margin-left: .5rem;
    background: var(--marca-clara);
    color: var(--sobre-marca-clara);
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .72rem;
    font-weight: 600;
}

/* --- Inicio de sesion ------------------------------------------------- */

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 14px;
    box-shadow: var(--sombra);
    padding: 2rem;
}

.login-brand { margin-bottom: 1.75rem; }
.login-brand img { display: block; width: 100%; max-width: 220px; }
.login-brand p { margin: .5rem 0 0; font-size: .78rem; color: var(--tinta-suave); }

.login-help { color: var(--tinta-suave); font-size: .9rem; margin: 0 0 1rem; }
.login-error { color: var(--alerta); font-size: .875rem; margin: 1rem 0 0; }

.login-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linea);
    font-size: .78rem;
    color: var(--tinta-suave);
}

.field { display: block; margin-bottom: 1rem; }
.field span { display: block; font-size: .78rem; color: var(--tinta-suave); margin-bottom: .3rem; }
.field input { width: 100%; padding: .5rem .65rem; }
.field textarea { width: 100%; padding: .5rem .65rem; font: inherit; }
/* Casilla y texto en la misma linea: sin esto la casilla hereda el ancho
   completo de los campos y queda sola, lejos de lo que dice. */
.field.checkbox { display: flex; align-items: center; gap: .5rem; }
.field.checkbox input { width: auto; padding: 0; margin: 0; }
.field.checkbox span { display: inline; margin: 0; font-size: .9rem; color: inherit; }

.btn-primary {
    display: inline-block;
    width: 100%;
    padding: .6rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--marca);
    color: var(--sobre-marca);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary:disabled { opacity: .6; cursor: default; }

.btn-link {
    border: none;
    background: none;
    color: var(--marca);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.tenant-list { display: flex; flex-direction: column; gap: .5rem; }

.tenant-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: var(--papel);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tenant-option:hover { border-color: var(--marca); background: #f6fffd; }
.tenant-option .tenant-name { font-weight: 600; }
.tenant-option .tenant-roles { color: var(--tinta-suave); font-size: .78rem; margin-left: auto; }

.badge-demo {
    background: var(--marca-clara);
    color: var(--sobre-marca-clara);
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* --- Arranque y errores del framework --------------------------------- */

.loading-progress { display: block; width: 6rem; height: 6rem; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: #e0e6ee; stroke-width: .5rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--marca); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 2), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { text-align: center; color: var(--tinta-suave); font-size: .85rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "..."); }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fef3c7;
    border-top: 1px solid #fcd34d;
    padding: .7rem 1.25rem;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .6rem; }

/* --- Cabecera de pagina, paneles y formularios ------------------------ */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.page-head .btn-primary { width: auto; padding-left: 1.25rem; padding-right: 1.25rem; }

.panel {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
    max-width: 900px;
}

.panel h2 { margin-top: 0; font-size: 1.05rem; }
.panel h2 + p { margin-top: -.4rem; }
.panel h3 { font-size: .9rem; margin: 1.25rem 0 .5rem; }

.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.panel-head h2 { margin-bottom: .25rem; }
.panel-head p { margin: 0; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-bottom: .5rem;
}

.form-grid .field { margin-bottom: 0; }
.field select { width: 100%; padding: .5rem .65rem; }
.field input:disabled { background: var(--fondo); color: var(--tinta-suave); }
.hint { display: block; margin-top: .3rem; font-size: .72rem; color: var(--tinta-suave); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.actions-danger { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--linea); align-items: flex-end; }
.actions .btn-primary, .actions .btn-secondary, .actions .btn-danger,
.week-actions .btn-primary, .week-actions .btn-secondary, .week-actions .btn-danger,
.add-row .btn-primary, .add-row .btn-secondary { width: auto; padding-left: 1.25rem; padding-right: 1.25rem; }

.btn-secondary {
    padding: .6rem 1rem;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: var(--papel);
    color: var(--tinta);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.btn-danger {
    padding: .6rem 1rem;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    background: #fff5f5;
    color: var(--alerta);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary:disabled, .btn-danger:disabled { opacity: .6; cursor: default; }

.ok { color: #15803d; font-size: .85rem; font-weight: 600; }
.warn { color: #b45309; font-weight: 600; }

/* --- Distintivos ------------------------------------------------------ */

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: .05rem .55rem;
    margin-right: .3rem;
    font-size: .7rem;
    font-weight: 600;
    background: var(--fondo);
    color: var(--tinta-suave);
    white-space: nowrap;
}

/* Texto que va justo antes de una insignia. La insignia solo separa por la
   derecha, asi que pegada a una palabra se lee como una sola. */
.pill-label { margin-right: .35rem; }

/* ---------------------------------------------------------------------------
   La linea de tiempo del planificador.

   Rejilla de columnas iguales: una por tramo. La columna del nombre queda
   pegada a la izquierda porque al desplazarse un trimestre entero se pierde de
   vista quien es cada fila, y una barra sin nombre no dice nada.
   --------------------------------------------------------------------------- */
.timeline {
    overflow-x: auto;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: #fff;
}

.timeline-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--linea);
    min-height: 2.6rem;
}

/* La pista es la rejilla de tramos, y las barras son hijas suyas colocadas con
   grid-column. Asi una asignacion de tres semanas ocupa tres columnas de
   verdad, en vez de quedarse dibujada en la primera. */
.timeline-track {
    flex: 1;
    display: grid;
    align-items: center;
}

/* Mientras se arrastra, las barras dejan de recibir eventos: si no, la barra
   de otro proyecto se come el drop y no se puede soltar justo donde hace
   falta, que suele ser encima de lo que ya hay. */
.timeline.arrastrando .timeline-bar { pointer-events: none; }

.timeline-row:last-child { border-bottom: none; }

.timeline-head {
    background: var(--fondo);
    font-size: .72rem;
    color: var(--tinta-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
    min-height: 2rem;
}

.timeline-name {
    position: sticky;
    left: 0;
    z-index: 3;
    flex: none;
    width: 11rem;
    background: #fff;
    border-right: 1px solid var(--linea);
    padding: .4rem .6rem;
    font-size: .82rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timeline-head .timeline-name { background: var(--fondo); }

.timeline-cell {
    border-right: 1px solid #eef2f7;
    padding: .2rem;
    position: relative;
    min-width: 2.2rem;
}

/* El tramo que no es laborable se distingue del que esta libre: uno no se
   puede usar y el otro si. */
.timeline-cell.off { background: repeating-linear-gradient(
    45deg, transparent, transparent 4px, #f1f5f9 4px, #f1f5f9 8px); }

.timeline-cell.today { box-shadow: inset 2px 0 0 var(--marca); }

/* Marca el sitio donde caeria lo que se esta arrastrando. Sin ella se suelta a
   ciegas y hay que deshacerlo mirando las fechas. */
.timeline-cell.drop { background: var(--marca-clara); }

.timeline-bar {
    z-index: 2;
    height: 1.7rem;
    margin: 0 .1rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: .2rem;
    padding: 0 .2rem;
    font-size: .72rem;
    color: #fff;
    cursor: grab;
    overflow: hidden;
    white-space: nowrap;
}

.timeline-bar:active { cursor: grabbing; }

.timeline-bar.confirmed { background: var(--marca); }
.timeline-bar.tentative { background: #94a3b8; }

/* Lo cancelado o rechazado se ve pero no se arrastra: es historia, y moverla
   cambiaria un plan que ya se decidio no hacer. */
.timeline-bar.closed {
    background: transparent;
    color: var(--tinta-suave);
    border: 1px dashed var(--linea);
    cursor: default;
}

.timeline-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Los tiradores de los extremos: cambian la duracion en vez de mover. Van
   dentro de la barra para que no haga falta apuntar a un pixel. */
.timeline-grip {
    width: .5rem;
    align-self: stretch;
    cursor: col-resize;
    border-radius: 3px;
    background: rgba(255, 255, 255, .45);
    flex: none;
}

.timeline-bar.closed .timeline-grip { display: none; }

.timeline-legend {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: .5rem 0 0;
    font-size: .78rem;
    color: var(--tinta-suave);
}

.timeline-key {
    display: inline-block;
    width: .9rem;
    height: .7rem;
    border-radius: 3px;
    margin-right: .3rem;
    vertical-align: -1px;
}

/* Lista sin vinetas ni sangria: enumera, no jerarquiza. */
.plain { list-style: none; margin: .4rem 0 0; padding: 0; }
.plain > li { padding: .18rem 0; }

.badge-on { background: var(--marca-clara); color: var(--sobre-marca-clara); }
.badge-off { background: #f1f5f9; color: #64748b; }

/* Una entrada del menu que el plan no trae. Se atenua, no se esconde: el
   cliente tiene que poder ver que existe, y quien vende, algo que ensenar.
   La insignia va pequena y a la derecha para que no rompa la fila. */
.nav-sin-plan { opacity: .55; }

/* La ayuda del modulo: a un lado y sin tapar la pantalla, porque se lee
   mientras se trabaja y no en vez de trabajar. */
.ayuda-boton { float: right; }
.ayuda-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(28rem, 92vw);
    background: #fff; border-left: 1px solid #e2e8f0; box-shadow: -8px 0 24px rgba(15,23,42,.08);
    z-index: 40; display: flex; flex-direction: column;
}
.ayuda-cabecera {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 1rem; border-bottom: 1px solid #e2e8f0;
}
.ayuda-cuerpo { padding: 1rem; overflow-y: auto; line-height: 1.55; }
.ayuda-cuerpo h3 { margin: 1.25rem 0 .4rem; font-size: .95rem; }
.ayuda-cuerpo h3:first-child { margin-top: 0; }
.ayuda-cuerpo ul { margin: .2rem 0 .2rem 1.1rem; }
.nav-sin-plan .badge { font-size: .65rem; margin-left: .4rem; padding: .05rem .3rem; }
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-platform { background: #ede9fe; color: #5b21b6; }

.row-off td { opacity: .55; }
.d-block { display: block; }
.mt { margin-top: 1rem; }

/* --- Segundo factor --------------------------------------------------- */

.step-title { font-size: 1.05rem; margin: 0 0 .5rem; }

.steps { padding-left: 1.1rem; margin: 0 0 1rem; font-size: .9rem; }
.steps li { margin-bottom: .65rem; }

.shared-key {
    display: block;
    margin-top: .4rem;
    padding: .6rem;
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1rem;
    letter-spacing: .06em;
    text-align: center;
    word-break: break-all;
}

.otpauth-link { color: var(--marca); font-weight: 600; }

/* El codigo QR. Fondo blanco fijo y sin invertir con el tema oscuro: un lector
   espera modulos oscuros sobre claro, y al reves muchos no leen. El recuadro
   blanco tambien le da la zona de silencio que el SVG ya trae dentro. */
.qr {
    width: 12rem;
    max-width: 100%;
    margin: .6rem auto;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 6px;
}

.qr svg { display: block; width: 100%; height: auto; }

.code-row { display: flex; gap: .6rem; align-items: stretch; }
.code-row input { flex: 1; padding: .5rem .65rem; font-size: 1.1rem; letter-spacing: .18em; text-align: center; }
.code-row .btn-primary { width: auto; padding-left: 1.25rem; padding-right: 1.25rem; }

.recovery {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #fcd34d;
    border-radius: var(--radio);
    background: #fffbeb;
}

.recovery h3 { margin-top: 0; }

.recovery-codes {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .4rem;
    margin: .75rem 0 1rem;
    padding: 0;
}

.recovery-codes li {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 6px;
    padding: .4rem;
    text-align: center;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .85rem;
}

.login-notice {
    margin: 1rem 0 0;
    padding: .6rem .75rem;
    border-radius: 8px;
    background: var(--marca-clara);
    color: var(--sobre-marca-clara);
    font-size: .85rem;
}

.login-card-wide { max-width: 520px; }

/* --- Dialogo ---------------------------------------------------------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 36, 59, .35);
    z-index: 900;
}

.modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: var(--papel);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(16, 36, 59, .25);
    padding: 1.5rem;
    z-index: 901;
}

.modal h2 { margin-top: 0; }

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linea);
}

.modal-actions .btn-primary, .modal-actions .btn-danger { width: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.modal-actions .btn-danger { margin-right: auto; }

.role-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .4rem; }
.role-option { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.role-option input { width: auto; }

/* --- Pantallas estrechas ---------------------------------------------- */

/*
   Debajo de 860 px la barra lateral fija deja de caber: el contenido se sale
   y aparece un desplazamiento horizontal en toda la pagina, que es la peor
   forma de leer una tabla. El menu pasa arriba y se convierte en una fila que
   se desplaza sola.

   Importa mas de lo que parece: este producto se consulta desde el telefono
   -registrar la semana, aprobar horas- y el documento pide accesibilidad
   WCAG 2.2 AA, que incluye poder usarlo sin desplazamiento en dos ejes.
*/
@media (max-width: 860px) {
    .app-shell { flex-direction: column; }

    .sidebar {
        width: auto;
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--linea);
        padding: .75rem 0 .25rem;
    }

    .sidebar-brand { padding: 0 1rem .75rem; }
    .sidebar-brand img { height: 26px; }

    /* Las secciones y sus listas se alinean en una sola fila desplazable. */
    .sidebar .nav-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: .25rem;
        padding: 0 1rem .5rem;
    }

    .nav-list a, .nav-list span {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: 6px 6px 0 0;
        padding: .4rem .7rem;
    }

    .nav-list a.active { border-left-color: transparent; border-bottom-color: var(--marca); }

    .nav-section {
        margin: .5rem 0 0;
        padding: 0 1rem;
    }

    .topbar { flex-wrap: wrap; align-items: flex-start; padding: .6rem 1rem; }
    .topbar-right { flex-wrap: wrap; gap: .6rem; }

    .app-content { padding: 1.25rem 1rem 2rem; }
    .footer { padding: .75rem 1rem; }

    .cards { gap: .6rem; }
    .card { min-width: 130px; flex: 1 1 130px; }

    .form-grid { grid-template-columns: 1fr; }
    .modal { padding: 1.1rem; }
    .modal-actions { flex-wrap: wrap; }
    .modal-actions .btn-danger { margin-right: 0; order: 1; width: 100%; }
}

/*
   Las tablas no se comprimen: se desplazan dentro de su propio contenedor.
   Encogerlas hasta que quepan hace ilegibles las columnas de importes, que es
   justo lo que se viene a mirar.
*/
.grid { display: block; overflow-x: auto; white-space: nowrap; }
.grid thead, .grid tbody { display: table; width: 100%; }

/* --- Capacidad -------------------------------------------------------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.filters .field { margin-bottom: 0; }
.filters .btn-primary { width: auto; padding: .5rem 1.1rem; }

/*
   De bruta a neta, con cada resta a la vista. Es la explicacion que hay que
   poder dar cuando alguien pregunta por que faltan horas: un total solo
   provoca la pregunta, no la responde.
*/
.waterfall {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1.5rem;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    font-size: .82rem;
}

.wf-item {
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    color: var(--tinta-suave);
}

.wf-item strong { font-size: 1.05rem; color: var(--tinta); }
.wf-loss strong { color: var(--alerta); }
.wf-net strong { color: var(--marca); }
.wf-minus { color: #9fb0c0; font-size: 1.1rem; padding: 0 .2rem; }

.bars {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: 180px;
    padding: 0 .25rem;
    overflow-x: auto;
}

.bar-col { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 48px; }

.bar-track {
    position: relative;
    width: 34px;
    height: 140px;
    display: flex;
    align-items: flex-end;
}

.bar-gross, .bar-net { position: absolute; bottom: 0; width: 100%; border-radius: 4px 4px 0 0; }
.bar-gross { background: var(--marca-clara); }
.bar-net { background: var(--marca); }

.bar-label { font-size: .68rem; color: var(--tinta-suave); white-space: nowrap; }

/* --- Calendarios ------------------------------------------------------ */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;
}

.calendar-grid .panel { max-width: none; margin-bottom: 0; }
.calendar-grid h3 { margin: 0; font-size: 1rem; }

.holiday-list { list-style: none; margin: .5rem 0; padding: 0; font-size: .85rem; }

.holiday-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem 0;
    border-bottom: 1px solid var(--linea);
}

.holiday-list li:last-child { border-bottom: none; }
.holiday-date { color: var(--tinta-suave); min-width: 92px; font-variant-numeric: tabular-nums; }
.holiday-name { flex: 1; }

.add-holiday { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.add-holiday input { flex: 1 1 110px; min-width: 0; }
.add-holiday .btn-secondary { padding: .35rem .8rem; }

.week-strip { display: inline-flex; gap: .15rem; }

.week-day {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 5px;
    font-size: .65rem;
    font-weight: 600;
}

.week-day.on { background: var(--marca-clara); color: var(--sobre-marca-clara); }
.week-day.off { background: var(--fondo); color: #9fb0c0; }

.dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: baseline;
}

/* --- Pestañas, mantenimiento y carga masiva --------------------------- */

.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.head-actions .btn-primary, .head-actions .btn-secondary { width: auto; padding: .5rem 1.1rem; }

.btn-export { padding: .5rem 1.1rem; white-space: nowrap; }

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 1.25rem 0 1rem;
    border-bottom: 1px solid var(--linea);
}

.tab {
    padding: .5rem .9rem;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--tinta-suave);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.tab:hover { color: var(--tinta); }
.tab.on { color: var(--tinta); border-bottom-color: var(--marca); font-weight: 600; }

.modal-wide { width: min(880px, calc(100vw - 2rem)); }

.upload-row input[type=file] {
    width: 100%;
    padding: .5rem;
    border: 1px dashed var(--linea);
    border-radius: 8px;
    background: var(--fondo);
}

.value-bad { color: var(--alerta); }

.warn-list {
    list-style: none;
    margin: .5rem 0;
    padding: .75rem 1rem;
    border-left: 3px solid #fcd34d;
    background: #fffbeb;
    font-size: .85rem;
}

.warn-list li { margin-bottom: .35rem; }
.warn-list li:last-child { margin-bottom: 0; }

.forgot-link { margin: .85rem 0 0; text-align: center; font-size: .82rem; }
.forgot-link a { color: var(--marca); text-decoration: none; }
.forgot-link a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Planificador: oferta contra demanda
   -------------------------------------------------------------------------- */

.tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--linea);
    margin: 1.2rem 0 1rem;
    flex-wrap: wrap;
}

.tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .55rem .9rem;
    font: inherit;
    color: var(--tinta-suave);
    cursor: pointer;
}

.tab:hover { color: var(--tinta); }

.tab-on {
    color: var(--marca);
    border-bottom-color: var(--marca);
    font-weight: 600;
}

.card-warn { border-color: var(--aviso); }
.card-warn .card-value { color: var(--aviso); }

.callout {
    border-radius: 8px;
    padding: .7rem .9rem;
    margin: 1rem 0;
    font-size: .93rem;
}

.callout-warn {
    background: var(--aviso-suave);
    border-left: 3px solid var(--aviso);
}

/* La barra tentativa va detras de la confirmada: se lee cuanto hay
   comprometido de verdad y cuanto es todavia una intencion. */
.bar-tentative {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--marca-clara);
    border-radius: 3px 3px 0 0;
}

.bar-over { background: var(--aviso) !important; }

.meter {
    position: relative;
    height: 8px;
    background: var(--fondo);
    border-radius: 4px;
    overflow: hidden;
    min-width: 90px;
}

/* La marca del 100 %: sin ella la escala de 130 no dice donde esta el limite. */
.meter::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 76.9%;
    width: 1px;
    background: var(--tinta-suave);
    opacity: .45;
}

.meter-fill { height: 100%; border-radius: 4px; }
.meter-none { background: transparent; }
.meter-low { background: var(--marca-clara); }
.meter-ok { background: var(--marca); }
.meter-over { background: var(--aviso); }

.issues {
    list-style: none;
    padding: 0;
    margin: .8rem 0 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.issues-inline { margin: .8rem 0 .4rem; }

.issue {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .55rem .8rem;
    border-radius: 6px;
    background: var(--fondo);
    border-left: 3px solid var(--linea);
    font-size: .92rem;
}

.issue-overallocation { border-left-color: var(--aviso); }
.issue-absenceclash { border-left-color: var(--marca); }

/* Perfil: quien esta asignado no tiene lo que el trabajo exige. Rojo el que ya
   incumple; ambar el que va a dejar de cumplir. */
.issue-skillmismatch { border-left-color: var(--alerta); }
.issue-expiredcertification { border-left-color: var(--aviso); }

/* Los avisos de presupuesto se pintan por gravedad y no por tipo: lo que
   decide si algo se mira hoy es cuanto duele, no de que trata. */
/* El documento que sale, tal cual. Se lee para diagnosticar, asi que se
   conserva el formato y se deja desplazar en vez de recortarlo. */
.payload {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: .8rem;
    font-size: .78rem;
    line-height: 1.45;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* El aviso de que se esta trabajando dentro de un cliente ajeno. Ocupa el
   ancho completo y no se puede cerrar: es una advertencia, no un mensaje. */
.impersonation {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 1rem;
    background: var(--aviso-suave);
    border-bottom: 2px solid var(--aviso);
    color: #7c4a02;
    font-size: .85rem;
}

.impersonation.emergency {
    background: #fee2e2;
    border-bottom-color: var(--alerta);
    color: #7f1d1d;
}

.impersonation-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--aviso);
    flex: none;
}

.impersonation.emergency .impersonation-dot { background: var(--alerta); }

.impersonation-time { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Muestra de la marca: lo que se ve antes de imponerselo a toda la empresa. */
.brand-preview { display: flex; gap: .5rem; margin: .5rem 0 1rem; flex-wrap: wrap; }

.brand-swatch {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
}

.brand-swatch.soft { border: 1px solid var(--linea); }

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: .5rem;
}

.brand-logo img { max-height: 60px; max-width: 100%; }

.issue-critical { border-left-color: var(--alerta); }
.issue-warning { border-left-color: var(--aviso); }
.issue-info { border-left-color: var(--linea); }

.issue-kind {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-suave);
}

.row-warn > td { background: var(--aviso-suave); }

/* Una fila que sigue ahi pero no es la que manda: se lee, no se destaca. */
.row-muted > td { color: var(--tinta-suave); }
.row-off { opacity: .55; }
.text-warn { color: var(--aviso); }

/* --------------------------------------------------------------------------
   Registro de tiempo
   -------------------------------------------------------------------------- */

.timer {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .7rem .9rem;
    margin: 1rem 0;
    box-shadow: var(--sombra);
}

.timer-on { border-color: var(--marca); background: var(--marca-clara); }

.timer-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-suave);
}

.timer-info { display: flex; flex-direction: column; }

.timer select, .timer input { min-width: 12rem; }

.timer-clock {
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem;
    font-weight: 600;
    margin-left: auto;
    color: var(--marca);
}

.week-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.4rem;
}

.week-head h2 { margin: 0 0 .3rem; }

.week-totals { display: flex; flex-direction: column; align-items: flex-end; }

.week-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .9rem 0;
}

.week-grid th { vertical-align: bottom; }

/* Los dias sin capacidad -fin de semana, festivo- se ven apagados pero siguen
   siendo editables: se trabaja en festivo, y bloquear la celda obliga a
   imputar la hora en otro dia, que es peor que no tener el dato. */
.week-grid .day-off { background: var(--fondo); color: var(--tinta-suave); }

.cell-hours { padding: .25rem; }

.cell-input {
    width: 4.2rem;
    text-align: right;
    padding: .3rem .4rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.cell-input:hover { border-color: var(--linea); }

/* El selector de actividad del renglon: discreto, como el campo de horas.
   Es una eleccion que casi nunca se cambia y no debe competir con las
   celdas, que son lo que se teclea todos los dias. */
.cell-select {
    margin-top: .25rem;
    max-width: 12rem;
    padding: .15rem .3rem;
    border: 1px solid var(--linea);
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    color: var(--tinta-suave);
}

.cell-input:focus {
    border-color: var(--marca);
    background: var(--papel);
    outline: none;
}

.add-row { display: flex; gap: .5rem; align-items: center; margin: .8rem 0; }

.chip {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: .2rem .7rem;
    margin: 0 .3rem .3rem 0;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

.chip:hover { border-color: var(--marca); color: var(--marca); }

.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   El mapa de calor de disponibilidad.

   El numero son horas libres y el fondo es cuanto se usa. Solo el color no
   diria cuanto hueco hay -el 50 % de una persona y el de un area son cosas
   muy distintas- y solo el numero obligaria a compararlos de memoria.
   -------------------------------------------------------------------------- */

.heatmap td, .heatmap th { white-space: nowrap; }

.heat {
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid #fff;
}

/* Cuatro bandas y no un degradado continuo: un mapa de calor sirve para
   encontrar donde mirar, y para el numero exacto esta el propio numero. */
.heat-free  { background: #dbeafe; }
.heat-ok    { background: #dcfce7; }
.heat-tight { background: #fef3c7; }
.heat-over  { background: #fecaca; }

/* Capacidad cero no es disponibilidad, es que no hay nadie: una semana de
   festivos o alguien que todavia no ha entrado. Pintarla como "libre" seria
   decir justo lo contrario. */
.heat-none {
    background: repeating-linear-gradient(
        45deg, transparent, transparent 4px, #eef2f7 4px, #eef2f7 8px);
    color: var(--tinta-suave);
}

/* El camino recorrido al bajar. Sin el, bajar es un viaje de ida. */
.trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 1rem 0 .5rem;
    font-size: .9rem;
}

.trail .btn-link { padding: 0; }
.trail-sep { color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   La vista de dia.

   La rejilla semanal es un numero por celda y cabe apretada; aqui cada linea
   lleva descripcion y horario, asi que los campos se ven como campos.
   -------------------------------------------------------------------------- */

.day-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.4rem;
}

.day-head h2 { margin: 0 0 .3rem; }

/* Solo la primera letra. Con capitalize el espanol sale "Jueves, 10 De
   Septiembre De 2026": la regla de una mayuscula por palabra es del ingles. */
.day-head h2::first-letter { text-transform: uppercase; }

.day-grid td { vertical-align: top; }

/* La descripcion es lo que se lee para saber que paso: se le da el sitio. */
.day-grid td:nth-child(2) { width: 40%; }

/* Los campos de la vista de dia se ven aunque esten vacios: en la rejilla
   semanal el borde invisible funciona porque la celda es un numero y se
   adivina, pero un campo de texto en blanco sin borde no parece un campo. */
.day-grid .cell-input {
    border-color: var(--linea);
    background: var(--papel);
}

.cell-wide { width: 100%; text-align: left; }

/* Lo que propone la agenda. Se ve distinto de lo registrado a proposito: son
   dos cosas distintas y confundirlas seria dar por hecho lo que todavia no lo
   esta. */
.suggestions {
    margin: 1rem 0;
    padding: .8rem .9rem;
    border: 1px dashed var(--linea);
    border-radius: 10px;
    background: var(--fondo);
}

.suggestions-title {
    margin: 0 0 .5rem;
    font-size: .78rem;
    color: var(--tinta-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.suggestion {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .35rem 0;
    border-top: 1px solid var(--linea);
}

.suggestion:first-of-type { border-top: none; }

.suggestion-when {
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.suggestion-what { flex: 1; min-width: 10rem; }

.suggestion .btn-secondary { width: auto; padding: .35rem .8rem; }

/* La linea de alta: los campos en fila, y la descripcion ocupando lo que
   sobra porque es la que necesita sitio. */
.day-add {
    display: flex;
    gap: .6rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding: .9rem;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--papel);
}

.day-add .field { margin-bottom: 0; }
.day-add .field-wide { flex: 1; min-width: 14rem; }
.day-add select, .day-add input { padding: .5rem .65rem; }

.day-add .btn-secondary { width: auto; }

/* El interruptor de vista: dos botones pegados, y el activo marcado. Un
   desplegable de dos opciones esconde la mitad de lo que hay. */
.view-switch { display: inline-flex; }

.view-switch button {
    padding: .5rem .9rem;
    border: 1px solid var(--linea);
    background: var(--papel);
    color: var(--tinta);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.view-switch button:first-child { border-radius: 8px 0 0 8px; }
.view-switch button:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }

.view-switch button.on {
    background: var(--marca);
    border-color: var(--marca);
    color: var(--sobre-marca);
}

/* --------------------------------------------------------------------------
   Aprobaciones
   -------------------------------------------------------------------------- */

.approval {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .9rem 1rem;
    margin-bottom: .8rem;
    box-shadow: var(--sombra);
}

.approval-overdue { border-left: 3px solid var(--aviso); }

.approval-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.approval-who { display: flex; flex-direction: column; min-width: 14rem; }
.approval-scope { display: flex; flex-direction: column; gap: .2rem; }
.approval-hours { display: flex; flex-direction: column; margin-left: auto; text-align: right; }
.approval-due { text-align: right; min-width: 8rem; }

.approval-actions {
    display: flex;
    gap: .5rem;
    margin-top: .8rem;
}

.approval-actions .btn-primary,
.approval-actions .btn-secondary {
    width: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.approval details { margin-top: .6rem; }
.approval summary { cursor: pointer; color: var(--tinta-suave); }
.approval details .grid { margin-top: .5rem; }

.callout { background: var(--marca-clara); }

/* --------------------------------------------------------------------------
   Registro sin conexion
   -------------------------------------------------------------------------- */

.offline-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .8rem;
}

/* Lo que todavia solo esta en este equipo. Discontinuo y no rojo: no es un
   error, es algo a medio camino. */
.cell-pending { border-style: dashed; border-color: var(--aviso); }
.row-pending td { background: var(--aviso-suave); }

.offline-item {
    border-top: 1px solid var(--linea);
    padding: .9rem 0 .5rem;
}

.offline-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.offline-compare { margin: .6rem 0; }

.offline-compare tbody th {
    width: 9rem;
    text-align: left;
    font-weight: 500;
    color: var(--tinta-suave);
}

/* Lo que difiere es lo que hay que decidir: se marca para no tener que
   comparar a ojo. */
.offline-diff td { background: var(--aviso-suave); font-weight: 600; }

.offline-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --------------------------------------------------------------------------
   Replanificacion por ausencia
   -------------------------------------------------------------------------- */

.replan-cards { display: flex; flex-wrap: wrap; gap: .8rem; margin: .8rem 0 1rem; }
.replan-note { max-width: 36rem; margin-bottom: .4rem; }

.replan-item {
    border-top: 1px solid var(--linea);
    padding: 1rem 0 .6rem;
}

.replan-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}

/* Las tres opciones una al lado de otra: se decide comparando, y apiladas la
   tercera ya no se lee. */
.replan-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .8rem;
}

.replan-option {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .7rem .9rem;
}

.replan-option h3 { margin: 0 0 .4rem; font-size: .9rem; }

.replan-candidates {
    list-style: none;
    padding: 0;
    margin: .4rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.replan-candidates li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .3rem .6rem;
}

@media (max-width: 860px) {
    .approval-hours { margin-left: 0; text-align: left; }
    .approval-due { text-align: left; }
}

/* --------------------------------------------------------------------------
   Tablero de inicio
   -------------------------------------------------------------------------- */

.home-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.home-head .filters { margin: 0; }

.home-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1.4rem;
    align-items: start;
}

.alerts {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.alert {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .9rem;
    border-radius: 8px;
    border-left: 3px solid var(--linea);
    background: var(--papel);
    font-size: .93rem;
}

.alert .btn-link { margin-left: auto; }

.alert-danger { border-left-color: var(--alerta); background: #fef2f2; }
.alert-warning { border-left-color: var(--aviso); background: var(--aviso-suave); }
.alert-info { border-left-color: var(--marca); background: var(--marca-clara); }

/* Reparto de las horas por proyecto. Barras y no un anillo: comparar
   longitudes es facil, comparar angulos no, y aqui lo que importa es cual
   pesa mas. */
.share { display: flex; flex-direction: column; gap: .45rem; margin: .8rem 0 1.4rem; }

.share-row {
    display: grid;
    grid-template-columns: minmax(9rem, 18rem) 1fr auto;
    align-items: center;
    gap: .8rem;
}

.share-name { font-size: .92rem; }

.share-track {
    height: 10px;
    background: var(--fondo);
    border-radius: 5px;
    overflow: hidden;
}

.share-fill { height: 100%; background: var(--marca); border-radius: 5px; }
.share-internal { background: var(--tinta-suave); }

.share-hours {
    font-variant-numeric: tabular-nums;
    font-size: .9rem;
    color: var(--tinta-suave);
    min-width: 5rem;
    text-align: right;
}

@media (max-width: 860px) {
    .share-row { grid-template-columns: 1fr auto; }
    .share-track { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Tarifas y costos
   -------------------------------------------------------------------------- */

.ratecard {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra);
}

.ratecard-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .6rem;
}

.ratecard .grid { margin-top: .4rem; }

/* ---------------------------------------------------------------------------
   Gastos de la semana
   --------------------------------------------------------------------------- */

.expense-week .week-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
}

.row-selected td {
    background: var(--row-selected, rgba(59, 130, 246, .08));
}

.expense-editor {
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: .75rem;
}

.expense-receipts .upload-row {
    margin-top: .35rem;
}

.input-code {
    width: 5rem;
    text-transform: uppercase;
}

.field.grow {
    flex: 1 1 18rem;
}

/* --------------------------------------------------------------------------
   Tableros por rol: indicadores con su formula a la vista
   -------------------------------------------------------------------------- */

.kpi { cursor: help; }
.kpi:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.kpi-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    margin-left: .25rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .85em;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    opacity: .7;
}

.kpi-base { font-size: .75rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

.badge-bad { background: #fee2e2; color: var(--alerta); }

.kpi-policy { margin: 1.5rem 0; }
.kpi-policy summary { cursor: pointer; font-weight: 600; }
.kpi-kinds { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .5rem 0 .75rem; }
.kpi-policy .btn-secondary { width: auto; padding: .45rem 1.1rem; }

/* --------------------------------------------------------------------------
   Simulador de oportunidades
   -------------------------------------------------------------------------- */

.panel-ancho { max-width: none; }

.callout-ok {
    background: var(--marca-clara);
    border-left: 3px solid var(--marca);
}

.grid .num-input { width: 5.5rem; text-align: right; }
.grid td select, .grid td input { font: inherit; padding: .3rem .4rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--papel); }