/* Reset ligero y escala tipográfica. Nada específico de una pantalla. */

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

/*
 * ======================================================================================
 * `[hidden]` GANA SIEMPRE. Y ES UN FALLO QUE VUELVE, POR ESO ESTÁ AQUÍ Y NO EN UNA HOJA
 * DE PANTALLA.
 * ======================================================================================
 *
 * El atributo `hidden` lo oculta la hoja del USER-AGENT con `[hidden] { display: none }`.
 * Cualquier regla de AUTOR que declare `display` sobre ese mismo elemento gana, por débil que
 * sea su especificidad: las hojas de autor pesan más que las del navegador, y ahí la
 * especificidad ni siquiera se compara. El elemento se queda visible con el atributo puesto y
 * nada falla en ninguna parte.
 *
 * Es exactamente lo que rompió DOS filtros a la vez cuando la tanda 82 dio a la fila de una
 * tabla de datos `display: grid` (tarjeta) y `display: table-row` (>=768):
 * `opportunity-list-filter.js` (buscador de cliente de Oportunidades) y el filtro del resumen
 * de adjuntos de un proyecto (hoy `row-filter.js`) seguían marcando `row.hidden = true`
 * correctamente y se seguían viendo TODAS las filas. Ya se había pagado antes, en pequeño, con
 * `.notif__badge[hidden]` y `.presentation[hidden]`, resueltos uno a uno.
 *
 * Se arregla en el CSS y de forma general, no parcheando cada script: cualquier filtro futuro
 * que use `hidden` sobre una fila —o sobre lo que sea— funciona sin acordarse de esto.
 *
 * `!important` es el mecanismo, no un atajo: es lo que la propia especificación recomienda en
 * su hoja de estilos sugerida, precisamente para que un `display` de autor no pueda deshacerlo.
 * Si alguna vez hace falta un elemento con `hidden` puesto y aun así visible, la respuesta es
 * NO usar `hidden` para eso (hay `.is-hidden` y `.field--collapsed` para ocultar por clase),
 * no debilitar esta regla.
 */
[hidden] {
    display: none !important;
}

/*
 * ======================================================================================
 * Reglas globales del design system (§7 y §2.6 de docs/06-design-system.md), tanda 72.
 * ======================================================================================
 */

/*
 * Foco de teclado visible en TODA la aplicación. Antes de esta regla había cero usos de
 * :focus-visible en las 30 hojas: quien navegaba con Tab veía el anillo por defecto del
 * navegador (que además cambia de un navegador a otro) o, donde alguna hoja hacía
 * `outline: none`, no veía nada en absoluto.
 *
 * Se usa :focus-visible y NO :focus a propósito: el navegador solo lo aplica cuando el foco
 * llega por teclado (o por otra vía que justifique mostrarlo), así que pulsar un botón con el
 * ratón no deja el anillo pegado. Ese es justamente el motivo por el que en su día se
 * escribieron los `outline: none` que esto sustituye.
 *
 * outline (y no box-shadow) para que sobreviva a un overflow:hidden del padre, y
 * outline-offset para que el anillo no se coma el borde del propio control.
 */
:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/*
 * Respeto a prefers-reduced-motion (§2.6). Una sola regla, aquí, y deja de ser un problema:
 * no se apaga la animación (poner 0s puede saltarse el evento transitionend del que depende
 * algún módulo), se reduce a 1ms.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/*
 * "Saltar al contenido": primer elemento enfocable de la página (§7). Fuera de pantalla hasta
 * que recibe el foco, momento en el que aparece anclado arriba a la izquierda. No se usa
 * display:none ni visibility:hidden porque los dos lo sacarían del orden de tabulación, que es
 * exactamente lo contrario de lo que se busca.
 */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: calc(var(--space-4) * -4);
    z-index: var(--z-tooltip);
    display: inline-flex;
    align-items: center;
    height: var(--field);
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--on-secondary);
    font: var(--text-label);
    letter-spacing: var(--tracking-label);
    box-shadow: var(--elev-3);
    transition: top var(--duration-fast) var(--ease-decelerate);
}

/*
 * El destino del salto (<main id="main" tabindex="-1">) recibe el foco de verdad, pero no lleva
 * anillo: rodear con un trazo azul toda el área de contenido, que ya ocupa la pantalla entera,
 * no informa de nada y sí ensucia. La confirmación visual de que el salto funcionó la da el
 * propio scroll y el siguiente Tab, que ya cae dentro del contenido.
 */
.content:focus,
.content:focus-visible {
    outline: none;
}

.skip-link:focus-visible {
    top: var(--space-4);
    text-decoration: none;
    /* El anillo por defecto sobra: aquí el propio salto a la vista ya señala el foco, y el
       azul sobre azul no contrastaría. Se marca con el borde blanco. */
    outline: 2px solid var(--surface-container-lowest);
    outline-offset: -4px;
}

body {
    margin: 0;
    font: var(--text-body-md);
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*
 * Escala tipográfica: los 9 escalones cerrados de §2.2 de la v2, ni uno más. El shorthand
 * `font` trae peso, tamaño, interlineado y familia de una vez; letter-spacing va aparte
 * porque no cabe en él.
 */

h1 {
    margin: 0;
    font: var(--text-title-xl);
    letter-spacing: var(--tracking-title-xl);
}

h2 {
    margin: 0;
    font: var(--text-title-lg);
    letter-spacing: var(--tracking-title-lg);
}

h3 {
    margin: 0;
    font: var(--text-title-md);
}

a {
    color: var(--secondary);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

p { margin: 0; }

code, .mono {
    font-family: var(--font-mono);
    font-size: var(--text-mono-size);
}

/* Etiqueta: mayúsculas pequeñas de interfaz, en Geist. */
.label {
    font: var(--text-label);
    letter-spacing: var(--tracking-label);
}

.muted { color: var(--on-surface-variant); }

/* Párrafo de ayuda bajo un título de bloque (p. ej. la explicación del estado canónico en la
   ficha de proyecto): pegado al título y con un ancho de lectura acotado, porque un texto
   explicativo a todo el ancho de una tarjeta de 2400px es ilegible. Se combina con .muted
   para el color; aquí solo va la geometría. */
.help-text {
    margin-top: var(--space-1);
    max-width: 78ch;
}

/*
 * Cabecera de página canónica (§3.1 de la v2).
 *
 * Tres piezas y una sola acción primaria: overline (dónde estoy) + title-xl (qué estoy viendo)
 * + descripción (qué es esto). Nunca es una tarjeta: vive sobre el fondo, sin borde ni sombra,
 * y por eso aquí no hay `background` ni `border` — es una ausencia deliberada, no un olvido.
 */
.page-head {
    margin-bottom: var(--space-6);
}

/*
 * Overline: la sección a la que pertenece la pantalla. Es uno de los tres únicos sitios donde
 * los 11px son legítimos (§2.2), porque va en mayúsculas.
 */
.page-head__overline {
    display: block;
    margin-bottom: var(--space-1);
    font: var(--text-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

.page-head__meta {
    margin-top: var(--space-1);
    color: var(--on-surface-variant);
    font: var(--text-body-sm);
    /* Longitud de lectura acotada: una descripción a 1440px de ancho deja de leerse. */
    max-width: 78ch;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    font: var(--text-label);
    letter-spacing: var(--tracking-label);
    color: var(--on-surface-variant);
}

.back-link:hover { color: var(--secondary); text-decoration: none; }

/*
 * Separación vertical entre hermanos.
 *
 * OJO: solo para contenedores en flujo normal. Puesta sobre un grid o un flex aplica el
 * margen a los HIJOS del grid, y entonces la primera tarjeta queda más alta que las demás y
 * la fila se desalinea. Ya pasó una vez en la cartera de proyectos.
 * Para separar un bloque del siguiente, usar .stack en el PADRE o un margin propio.
 */
.stack-lg > * + * { margin-top: var(--space-6); }

/* Separación de un bloque respecto al anterior, sin tocar a sus hijos. */
.mt-lg { margin-top: var(--space-6); }
.mb-lg { margin-bottom: var(--space-6); }
/* Escalón intermedio para un aviso o nota dentro de una tarjeta (p. ej. el aviso de
   oportunidades pendientes de convertir en el panel), donde --space-6 separa de más. */
.mt-md { margin-top: var(--space-4); }
.mb-md { margin-bottom: var(--space-4); }

/* --- Cifras de anchura fija (tanda B de la v3) ---------------------------------------------
 * `tabular-nums` es la mejor idea del sistema de Stitch y aquí aplica igual: en cuanto dos
 * cifras se leen una encima de otra -- importes de una columna, porcentajes, códigos WBS,
 * códigos de proyecto y oportunidad, fechas en tabla -- el ancho proporcional del dígito hace
 * que las unidades bailen de fila en fila y la columna deje de escanearse de un vistazo.
 * `lining-nums` fuerza además cifras de altura uniforme: Plus Jakarta Sans no trae cifras de
 * estilo antiguo, pero declararlo evita que una familia de reserva las introduzca.
 *
 * Se declara UNA vez por clase existente, aquí, en vez de repetirlo hoja a hoja. Las 15
 * declaraciones sueltas que ya existían en otras hojas se conservan: son inofensivas (mismo
 * valor) y borrarlas tocaría nueve ficheros sin cambiar un píxel.
 *
 * `.mono` y `code` NO entran: ya usan --font-mono, que es monoespaciada por definición.
 *
 * `.table td` entra entero y a propósito: no existe ninguna clase de celda de fecha en todo el
 * producto (las fechas se pintan en un `<td>` pelado), y `tabular-nums` solo afecta a los
 * dígitos, así que sobre una celda de texto no cambia nada. */
.numeric,
.cell-amount,
.project-code,
.wbs__code,
.task-card__wbs,
.gantt__wbs,
.opp__amount,
.board__amount,
.table td,
.sheet-input--amount {
    font-variant-numeric: tabular-nums lining-nums;
}

/*
 * Recuento junto al título de la pantalla (maqueta v3: "38 proyectos activos", "142 clientes
 * registrados"). Va DENTRO del <h1>, así que hereda su línea base y baja a tamaño de etiqueta
 * para no competir con el título; el dato siempre lo calcula el servidor sobre la lista ya
 * servida, nunca un contador guardado aparte.
 */
.page-head__count {
    display: inline-flex;
    align-items: center;
    height: var(--control-xs);
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-container-high);
    color: var(--on-surface-variant);
    font-family: var(--font-label);
    font-size: var(--text-label-size);
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: middle;
}