/* =============================================================================
   La marca sobre MudBlazor.

   Lo que se puede decir en C# esta en Helpers/TemaRam.cs (paleta, tipografia,
   radios). Aca va lo que el MudTheme no alcanza a expresar: el shell del mockup
   (util\Mockups\Carta Gantt.dc.html, lineas 36-146) y los items del menu.

   Todo con var(--token) del sistema de diseno: prohibe hex y px sueltos donde
   exista un token (_adherence.oxlintrc.json). Los px que quedan son medidas del
   mockup que no tienen token (232px del menu, 22px del logo, etc.).
   ============================================================================= */

/* El shell del mockup trabaja a 14px, no a los 16px del body del design system. */
body {
    font-size: 14px;
}

/* Barra de scroll del mockup (lineas 31-32). */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--ram-gray-40);
    border-radius: 8px;
}

/* Foco visible: anillo azul, nunca se elimina (guidelines del DS). */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Sombras tintadas en navy en vez de la escala negra de Material. */
:root {
    --mud-elevation-1: 0 1px 2px rgba(26, 36, 73, .08);
    --mud-elevation-2: 0 4px 12px rgba(26, 36, 73, .10);
    --mud-elevation-3: 0 4px 12px rgba(26, 36, 73, .10);
    --mud-elevation-4: 0 12px 32px rgba(26, 36, 73, .14);
    --mud-elevation-5: 0 12px 32px rgba(26, 36, 73, .14);
    --mud-elevation-6: 0 12px 32px rgba(26, 36, 73, .14);
    --mud-elevation-7: 0 24px 60px rgba(26, 36, 73, .20);
    --mud-elevation-8: 0 24px 60px rgba(26, 36, 73, .20);
}

/* -----------------------------------------------------------------------------
   Menu lateral
   -------------------------------------------------------------------------- */

.menu-lateral.mud-drawer {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    border: 0;
}

.menu-marca {
    flex: none;
    padding: 0 20px 22px;
}

/* El mockup usa 22px, pero ahi el logo era solo una palabra. El de RAM lleva
   isotipo y bajada, y a 22px la bajada no se lee. */
.menu-logo {
    height: 28px;
    display: block;
}

.menu-kicker {
    margin-top: 14px;
    font-size: var(--text-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-inverse-secondary);
    font-weight: var(--weight-bold);
}

/* El nav es lo unico que scrollea; marca y pie quedan fijos. */
.menu-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px;
}

.menu-pie {
    flex: none;
    padding: 16px 20px 0;
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.menu-pie-kicker {
    font-size: var(--text-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    font-weight: var(--weight-bold);
}

.menu-pie-nombre {
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    color: var(--text-inverse);
    font-size: 15px;
}

.menu-pie-cliente {
    font-size: var(--text-caption);
    color: var(--text-inverse-secondary);
    margin-top: 2px;
}

/* -----------------------------------------------------------------------------
   Items del menu

   Se estilan por etiqueta —toda ancla dentro del menu es un item— y no por clase,
   porque el Class que recibe MudNavLink NO va a parar al <a>: lo pone en el <div
   class="mud-nav-item"> que lo envuelve. NavGrupo, en cambio, es un <a> propio.
   Apuntando a "a" los dos quedan iguales sin depender de detalles internos.

   Los selectores arrastran .menu-lateral y .mud-navmenu para ganar en especificidad, y el
   hover y el activo van ademas con !important. No es pereza: MudBlazor pinta el item activo
   con selectores de hasta siete clases —el peor es
   ".mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(...):hover:not(...)"— y ademas
   fija "font-weight:500 !important" en ".mud-nav-link.active". Sin esto el item activo se ve
   bien hasta que le pasas el mouse por encima, y ahi vuelve al gris de Material.
   -------------------------------------------------------------------------- */

.nav-ram.mud-navmenu {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-nav .mud-nav-item {
    margin: 0;
}

.menu-lateral .menu-nav .mud-navmenu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: var(--weight-medium);
    color: var(--text-inverse-secondary);
    background: transparent;
    text-decoration: none;
    min-height: 0;
    /* El mockup no fija line-height: hereda el 1.6 del body del design system, y de ahi
       salen los 38.8px de alto de cada item. MudBlazor si lo fija, asi que hay que repetirlo. */
    line-height: var(--leading-body);
    transition: background var(--dur-fast) var(--ease-standard);
}

/* MudNavLink envuelve el contenido en un div propio; con display:contents el icono y
   el texto participan del mismo flex que en NavGrupo. */
.menu-lateral .menu-nav .mud-navmenu a > div {
    display: contents;
}

.menu-lateral .menu-nav .mud-navmenu a:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--text-inverse-secondary);
}

/* Activo: fondo azul lleno y texto blanco en bold (mockup, navItem() linea 2958).
   "active" la pone MudNavLink; "activo", NavGrupo. */
.menu-lateral .menu-nav .mud-navmenu a.active:not(.mud-nav-link-disabled),
.menu-lateral .menu-nav .mud-navmenu a.activo {
    font-weight: var(--weight-bold) !important;
    color: var(--text-inverse) !important;
    background: var(--surface-accent) !important;
}

/* MudNavLink marca el item activo con una barra lateral; el mockup no la tiene. */
.menu-lateral .menu-nav .mud-navmenu a::before,
.menu-lateral .menu-nav .mud-navmenu a::after {
    content: none;
}

/* MudBlazor apaga el outline de sus nav-links. El design system pide lo contrario: el
   anillo de foco nunca se elimina (guidelines, "Interaction states"). */
.menu-lateral .menu-nav .mud-navmenu a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.nav-icono {
    flex: none;
}

.nav-texto {
    min-width: 0;
}

/* Nivel 4 (las tres subpaginas de Recursos): mas compacto y con vineta en vez de icono. */
.menu-lateral .menu-nav .mud-navmenu .nav-item-n4 a,
.menu-lateral .menu-nav .mud-navmenu a.nav-item-n4 {
    padding: 8px 12px;
    gap: 9px;
    color: rgba(255, 255, 255, .68);
}

.nav-vineta {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: currentColor;
    flex: none;
    opacity: .75;
}

/* El caret solo pliega: no navega y no se lleva el color del item. */
.nav-caret {
    margin-left: auto;
    font-size: 10px;
    opacity: .7;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.nav-caret:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .12);
}

/* Guia vertical de los hijos de un grupo. */
.nav-hijos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 16px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.nav-hijos-n3 {
    margin-left: 14px;
}

/* -----------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */

.barra-superior.mud-appbar {
    background: var(--surface-card);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none;
}

.barra-superior .mud-toolbar {
    height: 100%;
    padding: 14px 28px;
    gap: 16px;
}

/* En escritorio el menu es fijo, asi que la hamburguesa sobra. */
.barra-hamburguesa {
    display: none;
}

@media (max-width: 959.98px) {
    .barra-hamburguesa {
        display: inline-flex;
    }

    .barra-superior .mud-toolbar {
        padding: 14px 16px;
    }
}

.pagina-encabezado {
    flex: 1 1 260px;
    min-width: 0;
}

.pagina-crumb {
    font-size: var(--text-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: var(--weight-bold);
    line-height: var(--leading-body);
}

.pagina-titulo {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 22px;
    letter-spacing: var(--tracking-heading);
    /* Igual que en el menu: el mockup hereda 1.6, y con eso la barra mide 84px. */
    line-height: var(--leading-body);
    margin-top: 2px;
}

/* -----------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */

.contenido.mud-main-content {
    background: var(--surface-subtle);
    min-height: 100vh;
}

/* Padding de pagina del mockup (linea 280). Va en el contenedor y no en los hijos: una
   pagina con varios bloques de primer nivel lo recibiria una vez por bloque.
   El padding-top suma la barra superior, que es fija y tapa el contenido. */
.contenido.mud-main-content {
    padding: calc(var(--mud-appbar-height) + 26px) 28px 40px;
}

/* Pantallas fuera de la aplicacion (ver Components/Layout/LayoutVacio.razor).

   El contenedor de snackbars de MudBlazor tiene margen propio y empuja el contenido unos
   60px hacia abajo. Con MudLayout no se nota, pero aca dejaba una franja blanca arriba, del
   color del body. Se pinta el body en vez de pelear con el margen del snackbar. */
body:has(.layout-vacio) {
    background: var(--surface-subtle);
}

.layout-vacio {
    min-height: 100vh;
    background: var(--surface-subtle);
}

/* -----------------------------------------------------------------------------
   Tablas de datos

   Calcadas de la grilla del mockup (Carta Gantt.dc.html, lineas 286-313). Se
   escriben una sola vez aca y las heredan todas las pantallas del banco de datos.
   -------------------------------------------------------------------------- */

.ram-panel {
    max-width: 1120px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ram-tabla.mud-table {
    background: transparent;
}

/* Los !important son contra los selectores de MudTable, que llegan a cuatro clases con la
   variante dense. Sin ellos la cabecera queda en 14px normal en vez del overline del mockup. */
.ram-tabla .mud-table-head th {
    font-family: var(--font-body) !important;
    font-size: var(--text-overline) !important;
    letter-spacing: var(--tracking-overline) !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
    font-weight: var(--weight-bold) !important;
    line-height: var(--leading-body) !important;
    padding: 11px 7px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    white-space: nowrap;
}

.ram-tabla .mud-table-body td {
    font-size: 14px !important;
    color: var(--text-primary);
    padding: 11px 7px !important;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.ram-tabla .mud-table-head th:first-child,
.ram-tabla .mud-table-body td:first-child {
    padding-left: 20px;
}

.ram-tabla .mud-table-head th:last-child,
.ram-tabla .mud-table-body td:last-child {
    padding-right: 20px;
}

.ram-tabla .mud-table-body tr:hover td {
    background: var(--surface-subtle);
}

.ram-tabla .mud-table-body tr:last-child td {
    border-bottom: 0;
}

/* Las columnas numericas van en cifras de ancho fijo para que se lean en columna. */
.ram-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ram-num-fuerte {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
    font-weight: var(--weight-bold);
}

.ram-celda-sec {
    color: var(--text-secondary);
}

.ram-celda-titulo {
    font-weight: var(--weight-semibold);
}

/* Banda de ayuda al pie de la tabla. */
.ram-panel-pie {
    padding: 14px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--surface-subtle);
    text-wrap: pretty;
}

.ram-panel-vacio {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

/* Barra de acciones sobre la tabla. */
.ram-barra {
    max-width: 1120px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.ram-barra-texto {
    flex: 1;
    min-width: 240px;
    font-size: 13px;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.ram-contador {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Botones

   No se usa MudButton: el tema lo pone en mayusculas siguiendo el design system,
   y el mockup los escribe en sentence case. Estos son los del mockup.
   -------------------------------------------------------------------------- */

.ram-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}

.ram-btn:disabled {
    opacity: .4;
    cursor: default;
}

.ram-btn-primario {
    background: var(--surface-accent);
    color: var(--text-on-accent);
}

.ram-btn-primario:hover:not(:disabled) {
    background: var(--ram-navy);
}

.ram-btn-outline {
    background: var(--surface-card);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.ram-btn-outline:hover:not(:disabled) {
    border-color: var(--border-accent);
}

/* Botones chicos de cada fila. */
.ram-btn-fila {
    padding: 6px 11px;
    font-size: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    white-space: nowrap;
}

.ram-btn-fila-editar {
    color: var(--text-accent);
}

.ram-btn-fila-editar:hover {
    border-color: var(--border-accent);
    background: var(--surface-accent-soft);
}

.ram-btn-fila-eliminar {
    color: var(--text-secondary);
}

.ram-btn-fila-eliminar:hover {
    border-color: var(--status-alert);
    color: var(--status-alert);
}

.ram-acciones {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* -----------------------------------------------------------------------------
   Formularios dentro de los modales
   -------------------------------------------------------------------------- */

.ram-grid-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ram-campo-ancho {
    grid-column: 1 / -1;
}

.ram-label {
    display: block;
    font-size: var(--text-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: var(--weight-bold);
}

.ram-input {
    width: 100%;
    margin-top: 7px;
    padding: 9px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    outline: none;
    background: var(--surface-card);
}

.ram-input:focus {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-focus);
}

.ram-input-error {
    border-color: var(--status-alert);
}

.ram-error {
    font-size: 12px;
    color: var(--status-alert);
    margin-top: 5px;
}

.ram-ayuda {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 5px;
}

.ram-par {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
}

.ram-par > div {
    flex: 1;
    min-width: 0;
}

.ram-par-signo {
    font-weight: var(--weight-bold);
    color: var(--text-secondary);
}

/* Panel del calculo en vivo dentro del modal. */
.ram-calculo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.ram-calculo-cifra {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Franja de marca del modal del kit, igual que en el mockup (linea 1443). */
.modal-card::before {
    content: "";
    display: block;
    height: 4px;
    flex: none;
    background: var(--ram-gradient-mark);
}

/* Chip de estado dentro de una tabla. Cuadrado (radio 2px) y en overline, como el badge
   del mockup (linea 297): la marca es angular, nada de pill. */
.ram-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ram-chip-acento {
    background: var(--surface-accent-soft);
    color: var(--text-accent);
}

.ram-chip-neutro {
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.ram-chip-ok {
    background: var(--surface-success-soft);
    color: #0f7d55;
}

.ram-chip-aviso {
    background: var(--status-warning-soft);
    color: #8a5c00;
}

.ram-chip-alerta {
    background: var(--status-alert-soft);
    color: #a51b2c;
}

/* -----------------------------------------------------------------------------
   Detalle dentro de un modal: agregar lineas a una lista (la dotacion de una
   cuadrilla, los recursos de una tarea).
   -------------------------------------------------------------------------- */

.ram-bloque {
    margin-top: 18px;
}

/* Fila para elegir y agregar: el select ocupa lo que sobra. */
.ram-agregar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
}

.ram-agregar .ram-input {
    margin-top: 0;
}

.ram-agregar > select {
    flex: 1;
    min-width: 0;
}

.ram-cantidad {
    width: 90px;
    flex: none;
}

.ram-lista {
    margin-top: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ram-lista-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle);
}

.ram-lista-fila:last-child {
    border-bottom: 0;
}

.ram-lista-nombre {
    flex: 1;
    min-width: 0;
}

.ram-lista-dato {
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Subtitulo bajo el nombre, dentro de una celda de tabla. */
.ram-celda-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
    text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
   Secuencia de actividades de una plantilla WBS. Es la unica lista del sistema
   donde cada fila se edita en el lugar (cuadrilla, horas, peso y predecesora),
   asi que va como grilla y no como las listas simples de agregar y quitar.
   -------------------------------------------------------------------------- */

.ram-secuencia {
    margin-top: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ram-secuencia-cabecera,
.ram-secuencia-fila {
    display: grid;
    grid-template-columns: 28px 1fr 150px 70px 70px 60px 120px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.ram-secuencia-fila:last-child {
    border-bottom: 0;
}

.ram-secuencia-cabecera {
    background: var(--surface-subtle);
    font-size: var(--text-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--text-secondary);
}

.ram-secuencia-fila {
    font-size: 13px;
}

/* Los campos editables de la fila van compactos: la grilla ya es angosta. */
.ram-secuencia-fila .ram-input {
    margin-top: 0;
    padding: 5px 7px;
    font-size: 12px;
}

.ram-sec-orden {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.ram-sec-num {
    text-align: right;
}

.ram-sec-acciones {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.ram-sec-acciones .ram-btn-fila {
    padding: 4px 7px;
}

.ram-sec-acciones .ram-btn-fila:disabled {
    opacity: .35;
    cursor: default;
}

/* El cotejo de recursos, bajo el nombre de la tarea. */
.ram-sec-cotejo {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    text-wrap: pretty;
}

.ram-texto-alerta {
    color: var(--status-alert);
}

.ram-texto-aviso {
    color: #8a5c00;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Panel de formulario (Configuración)

   El resto de las pantallas son tabla + modal. Configuración no: se edita en la
   propia página, así que el panel necesita encabezado, cuerpo con aire y un pie
   que además lleva el botón de guardar.
   ───────────────────────────────────────────────────────────────────────────── */

.ram-panel-titulo {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ram-panel-cuerpo {
    padding: 20px;
}

/* El pie con acción alinea el texto a la izquierda y el botón a la derecha, y se
   apila en pantalla angosta para que el botón no quede pegado al borde. */
.ram-panel-pie-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Un dato que se muestra pero no se edita: mismo alto que un input, para que la
   grilla no se desalinee, pero sin borde ni fondo de campo. */
.ram-dato-fijo {
    padding: 9px 0;
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

/* El hito no tiene duración: se marca junto al nombre para que la columna en
   guion no se lea como un dato faltante. */
.ram-chip-hito {
    background: var(--surface-accent-soft);
    color: var(--text-accent);
    margin-left: 8px;
    vertical-align: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Casillas de selección múltiple (predecesoras de una actividad general)

   Van en columnas y no en una lista vertical: nueve actividades en una columna
   obligan a scrollear el modal para ver la última.
   ───────────────────────────────────────────────────────────────────────────── */

.ram-casillas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 4px 16px;
    margin-top: 8px;
}

.ram-casilla {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    text-wrap: pretty;
}

.ram-casilla:hover {
    background: var(--surface-subtle);
}

.ram-casilla input {
    margin-top: 2px;
    accent-color: var(--surface-accent);
    flex: none;
}

/* La fase, al lado del nombre: la misma actividad se lee distinto según sea
   preliminar o de cierre. */
.ram-casilla-fase {
    color: var(--text-tertiary);
    font-size: 11px;
    margin-left: 6px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   La carta Gantt

   Dos paneles que comparten el alto de fila: a la izquierda el árbol de
   actividades, a la derecha la línea de tiempo, que scrollea sola en horizontal.
   El alto de fila (30px) está duplicado en el .razor como constante: si se
   cambia acá, hay que cambiarlo allá o las barras dejan de coincidir con sus
   filas.
   ═════════════════════════════════════════════════════════════════════════════ */

.ram-gantt {
    max-width: none;
}

.ram-gantt-marco {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.ram-gantt-lista {
    flex: none;
    width: 470px;
    border-right: 1px solid var(--border-default);
    background: var(--surface-card);
}

.ram-gantt-tiempo {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* Las cuatro columnas del panel izquierdo. El encabezado usa la misma grilla
   para que los títulos caigan sobre sus columnas. */
.ram-gantt-fila-lista {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) 130px 62px 68px;
    align-items: center;
    height: 30px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
    cursor: default;
}

.ram-gantt-fila-lista.es-grupo {
    background: var(--surface-subtle);
    font-weight: var(--weight-bold);
    cursor: pointer;
}

.ram-gantt-encabezado {
    /* 50px = alto de la escala (26 de mes + 24 de día), para que la primera fila
       de la lista arranque a la misma altura que la primera barra. */
    height: 50px;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-default);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ram-gantt-encabezado > span {
    padding: 0 8px;
}

.ram-gantt-nombre {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ram-gantt-caret {
    flex: none;
    width: 12px;
    color: var(--text-tertiary);
    font-size: 10px;
}

.ram-gantt-sec {
    padding: 0 8px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ram-gantt-der {
    padding: 0 12px 0 8px;
    text-align: right;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* ── La escala ─────────────────────────────────────────────────────────────── */

.ram-gantt-escala,
.ram-gantt-dias {
    position: relative;
    height: 26px;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.ram-gantt-dias {
    height: 24px;
    border-bottom: 1px solid var(--border-default);
}

.ram-gantt-mes,
.ram-gantt-dia {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-tertiary);
    border-left: 1px solid var(--border-subtle);
    overflow: hidden;
}

.ram-gantt-mes {
    justify-content: flex-start;
    padding-left: 8px;
    font-weight: var(--weight-bold);
    color: var(--text-secondary);
}

.ram-gantt-dia.inhabil {
    background: var(--surface-subtle);
    color: var(--text-disabled, #9aa0ad);
}

/* ── El cuerpo ─────────────────────────────────────────────────────────────── */

.ram-gantt-cuerpo {
    position: relative;
}

/* El fondo de los días que no se trabajan. Explica por qué una barra se estira
   sin que nadie esté trabajando. */
.ram-gantt-franja {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(26, 36, 73, .035);
    pointer-events: none;
}

.ram-gantt-barra {
    position: absolute;
    height: 18px;
    border-radius: 3px;
    background: var(--surface-accent);
    opacity: .9;
}

.ram-gantt-barra.es-grupo {
    height: 10px;
    margin-top: 4px;
    border-radius: 2px;
    background: var(--ram-navy, #1a2449);
    opacity: .55;
}

.ram-gantt-barra.es-critica {
    background: var(--status-alert);
}

.ram-gantt-barra.en-conflicto {
    background: repeating-linear-gradient(45deg,
        var(--status-warning, #e0a900) 0 6px,
        var(--surface-accent) 6px 12px);
}

/* La holgura: cuánto se puede atrasar la tarea sin correr el proyecto. Va como
   una prolongación tenue de la barra, no como otra barra. */
.ram-gantt-holgura {
    position: absolute;
    height: 8px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg,
        var(--border-default) 0 3px,
        transparent 3px 6px);
    pointer-events: none;
}

/* Un hito no dura: se dibuja como rombo, que es la convención de cualquier carta. */
.ram-gantt-rombo {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--ram-navy, #1a2449);
    transform: rotate(45deg);
}

/* La fecha comprometida con el cliente, de arriba abajo de la carta. */
.ram-gantt-hito-control {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed var(--status-alert);
    opacity: .55;
    pointer-events: none;
}

.ram-chip-critica {
    background: var(--status-alert);
    color: #fff;
}

/* ── Controles de la barra superior ────────────────────────────────────────── */

.ram-grupo-botones {
    display: inline-flex;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ram-zoom,
.ram-interruptor {
    padding: 7px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--weight-bold);
    color: var(--text-secondary);
    background: var(--surface-card);
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.ram-zoom + .ram-zoom {
    border-left: 1px solid var(--border-subtle);
}

.ram-interruptor {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.ram-zoom.activo,
.ram-interruptor.activo {
    background: var(--surface-accent);
    color: var(--text-inverse);
    border-color: var(--surface-accent);
}

/* ── Resumen y avisos ──────────────────────────────────────────────────────── */

.ram-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    max-width: 1120px;
    margin-bottom: 16px;
}

.ram-resumen-dato {
    padding: 14px 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.ram-resumen-rotulo {
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ram-resumen-cifra {
    margin-top: 4px;
    font-family: var(--font-display, inherit);
    font-size: 22px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.ram-resumen-cifra-chica {
    font-size: 16px;
}

.ram-resumen-nota {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.ram-aviso {
    max-width: 1120px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border-left: 3px solid;
    font-size: 13px;
    text-wrap: pretty;
}

.ram-aviso-alerta {
    background: var(--surface-alert-soft, #fdf0f2);
    border-color: var(--status-alert);
}

.ram-aviso-aviso {
    background: var(--status-warning-soft);
    border-color: #8a5c00;
}

/* ═════════════════════════════════════════════════════════════════════════════
   Checklist de cierre y comparación de líneas base
   ═════════════════════════════════════════════════════════════════════════════ */

.ram-checklist {
    padding: 4px 0;
}

.ram-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.ram-check:last-child {
    border-bottom: none;
}

/* La marca lleva el peso visual: se tiene que poder barrer la lista de un
   vistazo y ver dónde están los problemas sin leer nada. */
.ram-check-marca {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--weight-bold);
    color: #fff;
}

.ram-check.cumple .ram-check-marca {
    background: #0f7d55;
}

.ram-check.falla .ram-check-marca {
    background: var(--status-alert);
}

.ram-check-texto {
    flex: 1;
    min-width: 0;
}

.ram-check-titulo {
    font-size: 13px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.ram-check-detalle {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
    text-wrap: pretty;
}

.ram-check.falla .ram-check-detalle {
    color: var(--text-primary);
}

/* El enlace de "ir a arreglarlo" comparte el aspecto de los botones de fila,
   pero es un <a>: se puede abrir en otra pestaña. */
.ram-check a.ram-btn-fila {
    flex: none;
    text-decoration: none;
    line-height: 1.6;
}

.ram-texto-ok {
    color: #0f7d55;
    font-weight: var(--weight-bold);
}

/* ── Tabla simple, dentro de un modal ──────────────────────────────────────── */

.ram-tabla-scroll {
    max-height: 52vh;
    overflow: auto;
}

.ram-tabla-simple {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ram-tabla-simple th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-default);
}

.ram-tabla-simple td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}

.ram-tabla-simple tbody tr:hover {
    background: var(--surface-subtle);
}

/* ═════════════════════════════════════════════════════════════════════════════
   Panel de inicio
   ═════════════════════════════════════════════════════════════════════════════ */

/* Dos columnas en escritorio, una sola cuando no entran. El minmax evita que la
   columna de compromisos quede demasiado angosta para leer una fecha. */
.ram-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
    max-width: 1120px;
    align-items: start;
}

/* La marca neutra no es un estado: es un número que interesa mirar. */
.ram-check-marca-neutra {
    width: auto;
    min-width: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--surface-accent);
}

.ram-check.neutro {
    border-top: 1px solid var(--border-subtle);
}

/* ── Hitos de control ──────────────────────────────────────────────────────── */

.ram-hito {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.ram-hito:last-of-type {
    border-bottom: none;
}

/* La fecha como bloque de calendario: es el dato que se busca de un vistazo. */
.ram-hito-fecha {
    flex: none;
    width: 46px;
    padding: 5px 0;
    text-align: center;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text-secondary);
}

.ram-hito.falla .ram-hito-fecha {
    background: var(--surface-alert-soft, #fdf0f2);
    color: var(--status-alert);
}

.ram-hito-dia {
    font-family: var(--font-display, inherit);
    font-size: 19px;
    font-weight: var(--weight-bold);
    line-height: 1.1;
}

.ram-hito-mes {
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ram-enlace {
    color: var(--text-accent);
    font-weight: var(--weight-bold);
    text-decoration: none;
}

.ram-enlace:hover {
    text-decoration: underline;
}

/* El contenido de solo lectura cuando el programa está comprometido. El atributo
   inert ya apaga la interacción; esto lo hace visible, porque un formulario que
   no responde sin explicación se lee como una pantalla rota. */
.contenido-bloqueado {
    opacity: .62;
    filter: saturate(.6);
}

.ram-aviso-bloqueo {
    background: var(--surface-accent-soft);
    border-color: var(--surface-accent);
}

.ram-aviso-bloqueo .ram-enlace {
    margin-left: 6px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   Tarjetas de índice de grupo
   ═════════════════════════════════════════════════════════════════════════════ */

.ram-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
    max-width: 1120px;
}

.ram-tarjeta {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
}

.ram-tarjeta:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(26, 36, 73, .1));
}

/* La cifra primero: entrar a un mantenedor vacío no es lo mismo que entrar a uno
   con ochenta filas, y eso se decide antes de hacer clic. */
.ram-tarjeta-cifra {
    flex: none;
    min-width: 40px;
    padding: 4px 8px;
    text-align: center;
    border-radius: var(--radius-sm);
    background: var(--surface-accent-soft);
    color: var(--text-accent);
    font-family: var(--font-display, inherit);
    font-size: 19px;
    font-weight: var(--weight-bold);
}

.ram-tarjeta-titulo {
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.ram-tarjeta-detalle {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-secondary);
    text-wrap: pretty;
}

/* La tarjeta que no cuenta nada: la flecha va discreta, no compite con las
   cifras de al lado. */
.ram-tarjeta-cifra.ram-tarjeta-ir {
    background: var(--surface-subtle);
    color: var(--text-tertiary);
}

/* Las flechas de dependencia. Van por debajo de las barras y no reciben clics:
   son una ayuda de lectura, no un control. */
.ram-gantt-flechas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

.ram-gantt-flechas path {
    fill: none;
    stroke: var(--text-tertiary, #9aa0ad);
    stroke-width: 1.2;
    opacity: .75;
}

.ram-gantt-flechas path.es-critica {
    stroke: var(--status-alert);
    opacity: .9;
}

/* La punta hereda el color del trazo de su path. */
.ram-gantt-flechas marker path {
    fill: currentColor;
    stroke: none;
}

/* ── Banda de carga de cuadrillas ──────────────────────────────────────────── */

/* El separador entre la carta y la banda de carga. */
.ram-gantt-separador {
    border-top: 2px solid var(--border-default);
}

.ram-gantt-banda {
    position: relative;
    height: 30px;
    border-bottom: 1px solid var(--border-subtle);
}

.ram-gantt-bloque {
    position: absolute;
    top: 8px;
    height: 14px;
    border-radius: 2px;
    background: var(--surface-accent);
    opacity: .75;
}