/* ============================================================
   PANEL — acceso y area interna
   Colores desde tema.css.
   ============================================================ */

/* ============================================================
   1. PANTALLA DE ACCESO
   ============================================================ */
.acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

/* Costado de marca */
.acceso__marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--esp-7);
    background: var(--color-marca);
    color: var(--color-texto-invertido);
    overflow: hidden;
}

/* Mismo motivo del logotipo que en la portada: los dos colibries
   insinuados como luz de color sobre el negro. */
.acceso__marca::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 22% 68%, rgb(var(--marca-verde-rgb) / 0.22) 0%, transparent 62%),
        radial-gradient(ellipse 60% 45% at 34% 32%, rgb(var(--marca-azul-rgb) / 0.24) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 86% 38%, rgb(var(--marca-rojo-rgb) / 0.20) 0%, transparent 62%),
        radial-gradient(circle at 64% 50%, rgb(var(--marca-dorado-rgb) / 0.14) 0%, transparent 44%);
    pointer-events: none;
}

.acceso__marca > * { position: relative; z-index: 1; }

/* Logotipo completo en el costado de marca. */
.acceso__logo {
    display: block;
    width: min(320px, 78%);
    height: auto;
}

.acceso__nombre {
    font-family: var(--fuente-titulo);
    font-size: var(--texto-xl);
    font-weight: var(--peso-medio);
    color: var(--color-texto-invertido);
}

.acceso__bajada {
    font-size: 0.625rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-acento-claro);
    margin-top: var(--esp-1);
}

.acceso__lema {
    font-family: var(--fuente-titulo);
    font-size: var(--texto-2xl);
    font-weight: var(--peso-normal);
    line-height: 1.25;
    color: var(--color-texto-invertido);
    max-width: 18ch;
}

.acceso__nota {
    font-size: var(--texto-sm);
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

/* Costado del formulario */
.acceso__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--esp-6);
    background: var(--color-fondo);
}

.acceso__caja { width: 100%; max-width: 360px; }

.acceso__titulo {
    font-size: var(--texto-xl);
    font-weight: var(--peso-normal);
    margin-bottom: var(--esp-2);
}

.acceso__subtitulo {
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
    margin-bottom: var(--esp-6);
}

.acceso__volver {
    display: inline-block;
    margin-top: var(--esp-5);
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
}
.acceso__volver:hover { color: var(--color-acento-oscuro); }

@media (max-width: 860px) {
    .acceso { grid-template-columns: 1fr; }
    .acceso__marca {
        min-height: 200px;
        padding: var(--esp-5);
        gap: var(--esp-5);
    }
    .acceso__logo { width: min(240px, 62%); }
    .acceso__lema { font-size: var(--texto-lg); max-width: none; }
    .acceso__nota { display: none; }
}

/* ============================================================
   2. ESTRUCTURA DEL PANEL
   ============================================================ */
.panel { min-height: 100vh; background: var(--color-superficie); }

/* Barra superior */
.panel-barra {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--alto-barra);
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    padding: 0 var(--esp-5);
    background: var(--color-marca);
    color: var(--color-texto-invertido);
    border-bottom: 1px solid var(--color-acento-oscuro);
}

.panel-barra__marca {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin-right: auto;
    min-width: 0;
}

.panel-barra__logo {
    display: block;
    height: 40px;
    width: auto;
}

.panel-barra__textos {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.panel-barra__nombre {
    font-family: var(--fuente-titulo);
    font-size: var(--texto-md);
    color: var(--color-texto-invertido);
}

.panel-barra__modulo {
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-acento-claro);
}

.panel-barra__usuario {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    font-size: var(--texto-sm);
}

.panel-barra__nombre-usuario { color: var(--color-texto-invertido); }

.panel-barra__rol {
    font-size: var(--texto-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-acento-claro);
}

.panel-barra__salir {
    font-size: var(--texto-sm);
    color: rgba(255, 255, 255, 0.72);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radio-md);
    padding: var(--esp-2) var(--esp-3);
    cursor: pointer;
    font-family: var(--fuente-texto);
    transition: border-color var(--transicion), color var(--transicion);
}
.panel-barra__salir:hover { border-color: var(--color-acento); color: var(--color-acento-claro); }

/* Cuerpo: menu lateral + contenido */
.panel-cuerpo {
    display: grid;
    grid-template-columns: var(--ancho-menu) 1fr;
    align-items: start;
}

.panel-menu {
    position: sticky;
    top: var(--alto-barra);
    min-height: calc(100vh - var(--alto-barra));
    padding: var(--esp-5) var(--esp-3);
    background: var(--color-fondo);
    border-right: 1px solid var(--color-borde);
}

.panel-menu__grupo {
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-texto-tenue);
    padding: var(--esp-3) var(--esp-3) var(--esp-2);
}

.panel-menu__link {
    display: block;
    padding: var(--esp-3);
    margin-bottom: 2px;
    font-size: var(--texto-sm);
    color: var(--color-texto);
    border-radius: var(--radio-md);
    border-left: 2px solid transparent;
    transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.panel-menu__link:hover { background: var(--color-superficie); }

.panel-menu__link--activo {
    background: var(--color-primario-tenue);
    border-left-color: var(--color-acento);
    color: var(--color-primario);
    font-weight: var(--peso-medio);
}

.panel-menu__link--inactivo {
    color: var(--color-texto-tenue);
    cursor: default;
}
.panel-menu__link--inactivo:hover { background: none; color: var(--color-texto-tenue); }

.panel-contenido {
    padding: var(--esp-6);
    max-width: var(--ancho-panel);
}

.panel-titulo {
    font-size: var(--texto-xl);
    font-weight: var(--peso-normal);
    margin-bottom: var(--esp-2);
}

.panel-subtitulo {
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
    margin-bottom: var(--esp-6);
}

/* Tarjeta de contenido del panel */
.bloque {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--esp-5);
    margin-bottom: var(--esp-5);
}

.bloque__titulo {
    font-family: var(--fuente-texto);
    font-size: var(--texto-sm);
    font-weight: var(--peso-fuerte);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    margin-bottom: var(--esp-4);
}

.lista-simple { margin: 0; padding-left: var(--esp-5); color: var(--color-texto-suave); font-size: var(--texto-sm); }
.lista-simple li { margin-bottom: var(--esp-2); }

@media (max-width: 900px) {
    .panel-cuerpo { grid-template-columns: 1fr; }
    .panel-menu {
        position: static;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--color-borde);
        padding: var(--esp-3);
        display: flex;
        flex-wrap: wrap;
        gap: var(--esp-2);
    }
    .panel-menu__grupo { display: none; }
    .panel-menu__link { margin: 0; border-left: 0; border-bottom: 2px solid transparent; }
    .panel-menu__link--activo { border-left: 0; border-bottom-color: var(--color-acento); }
    .panel-contenido { padding: var(--esp-4); }
    .panel-barra { padding: 0 var(--esp-4); }
    .panel-barra__nombre-usuario { display: none; }
    .panel-barra__logo { height: 34px; }
    .panel-barra__nombre { display: none; }
}

/* ============================================================
   3. COMPONENTES DEL PANEL
   ============================================================ */

/* Encabezado de pantalla con acciones a la derecha */
.panel-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--esp-4);
    margin-bottom: var(--esp-5);
}
.panel-encabezado__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

/* ------------------------------------------------------------
   Filtros
   ------------------------------------------------------------ */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--esp-3);
    padding: var(--esp-4);
    margin-bottom: var(--esp-5);
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
}
.filtros .campo { margin-bottom: 0; }
.filtros .campo input,
.filtros .campo select { min-width: 190px; }

/* ------------------------------------------------------------
   Tablas
   ------------------------------------------------------------ */
.tabla-contenedor {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    overflow-x: auto;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-sm);
}

.tabla th {
    padding: var(--esp-3) var(--esp-4);
    text-align: left;
    font-weight: var(--peso-fuerte);
    font-size: var(--texto-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}

.tabla td {
    padding: var(--esp-3) var(--esp-4);
    border-bottom: 1px solid var(--color-borde);
    vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--color-superficie); }

.tabla__acciones { text-align: right; white-space: nowrap; }
.tabla__grupo td {
    background: var(--color-primario-tenue);
    font-family: var(--fuente-titulo);
    font-size: var(--texto-md);
    color: var(--color-primario);
}
.tabla__hijo .tabla__sangria { padding-left: var(--esp-6); }
.tabla__numero { text-align: right; font-variant-numeric: tabular-nums; }

.tabla-vacia {
    padding: var(--esp-7) var(--esp-4);
    text-align: center;
    color: var(--color-texto-suave);
    font-size: var(--texto-sm);
}

/* ------------------------------------------------------------
   Etiquetas de estado
   ------------------------------------------------------------ */
.etiqueta {
    display: inline-block;
    padding: 2px var(--esp-2);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    line-height: 1.6;
    border-radius: var(--radio-full);
    white-space: nowrap;
}
.etiqueta--activo      { background: var(--color-exito-tenue);       color: var(--color-exito); }
.etiqueta--baja        { background: var(--color-error-tenue);       color: var(--color-error); }
.etiqueta--suspendido  { background: var(--color-error-tenue);       color: var(--color-error); }
.etiqueta--vacaciones  { background: var(--color-info-tenue);        color: var(--color-info); }
.etiqueta--incapacidad { background: var(--color-advertencia-tenue); color: var(--color-advertencia); }
.etiqueta--permiso     { background: var(--color-advertencia-tenue); color: var(--color-advertencia); }
.etiqueta--neutra      { background: var(--color-superficie-2);      color: var(--color-texto-suave); }
.etiqueta--acento      { background: var(--color-acento-tenue);      color: var(--color-acento-oscuro); }

/* ------------------------------------------------------------
   Avatar
   ------------------------------------------------------------ */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radio-full);
    background: var(--color-primario);
    color: var(--color-texto-invertido);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    letter-spacing: 0.04em;
    overflow: hidden;
    flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--grande { width: 96px; height: 96px; font-size: var(--texto-xl); font-family: var(--fuente-titulo); }

.persona { display: flex; align-items: center; gap: var(--esp-3); }
.persona__nombre { font-weight: var(--peso-medio); }
.persona__dato { font-size: var(--texto-xs); color: var(--color-texto-suave); }

/* ------------------------------------------------------------
   Ficha: cabecera y datos
   ------------------------------------------------------------ */
.ficha-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-5);
    padding: var(--esp-5);
    margin-bottom: var(--esp-5);
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-top: 2px solid var(--color-acento);
    border-radius: var(--radio-lg);
}
.ficha-cabecera__datos { flex: 1 1 260px; }
.ficha-cabecera__nombre { font-size: var(--texto-xl); margin-bottom: var(--esp-1); }
.ficha-cabecera__puesto { color: var(--color-texto-suave); font-size: var(--texto-sm); margin: 0 0 var(--esp-3); }
.ficha-cabecera__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

.datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--esp-4);
    margin: 0;
}
.datos__campo { margin: 0; }
.datos__etiqueta {
    display: block;
    font-size: var(--texto-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-texto-tenue);
    margin-bottom: 2px;
}
.datos__valor { margin: 0; font-size: var(--texto-base); }
.datos__valor--vacio { color: var(--color-texto-tenue); }

/* ------------------------------------------------------------
   Formularios en rejilla
   ------------------------------------------------------------ */
.form-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 var(--esp-4);
}
.form-rejilla .campo--ancho { grid-column: 1 / -1; }

.form-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    align-items: center;
    padding-top: var(--esp-4);
    border-top: 1px solid var(--color-borde);
    margin-top: var(--esp-2);
}

.campo__ayuda {
    display: block;
    margin-top: var(--esp-1);
    font-size: var(--texto-xs);
    color: var(--color-texto-suave);
}

/* Casillas de areas de apoyo */
.casillas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--esp-2);
    max-height: 240px;
    overflow-y: auto;
    padding: var(--esp-3);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-md);
}
.casillas label {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--texto-sm);
    font-weight: var(--peso-normal);
    margin: 0;
    cursor: pointer;
}
.casillas input[type="checkbox"] { margin: 0; }

/* Botones pequenos para acciones de tabla */
.btn--mini {
    padding: var(--esp-1) var(--esp-2);
    font-size: var(--texto-xs);
}

/* Paginacion */
.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-top: var(--esp-4);
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
}
.paginacion ul { display: flex; gap: var(--esp-1); list-style: none; margin: 0; padding: 0; }
.paginacion li a,
.paginacion li.active span {
    display: block;
    padding: var(--esp-1) var(--esp-3);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
}
.paginacion li.active span { background: var(--color-primario); color: var(--color-texto-invertido); border-color: var(--color-primario); }
.paginacion li.disabled span { padding: var(--esp-1) var(--esp-3); color: var(--color-texto-tenue); }

@media (max-width: 700px) {
    .filtros .campo input,
    .filtros .campo select { min-width: 0; width: 100%; }
    .filtros .campo { flex: 1 1 100%; }
    .paginacion { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   4. TABLERO DE INICIO
   Diseno visual, no una rejilla de contadores (seccion 22).
   ============================================================ */

.tablero-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--esp-4);
    margin-bottom: var(--esp-5);
}

.tarjeta-dato {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
    padding: var(--esp-5);
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-top: 3px solid var(--color-borde-fuerte);
    border-radius: var(--radio-lg);
}

.tarjeta-dato__numero {
    font-family: var(--fuente-titulo);
    font-size: var(--texto-2xl);
    line-height: 1;
    color: var(--color-primario);
}

.tarjeta-dato__titulo {
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
}

/* El filete superior es lo que da la lectura rapida: verde bien,
   rojo mal, dorado en seguimiento. */
.tarjeta-dato--exito   { border-top-color: var(--color-exito); }
.tarjeta-dato--error   { border-top-color: var(--color-error); }
.tarjeta-dato--info    { border-top-color: var(--color-info); }
.tarjeta-dato--acento  { border-top-color: var(--color-acento); }
.tarjeta-dato--neutro  { border-top-color: var(--color-borde-fuerte); }

.tarjeta-dato--exito .tarjeta-dato__numero { color: var(--color-exito); }
.tarjeta-dato--error .tarjeta-dato__numero { color: var(--color-error); }

/* ------------------------------------------------------------
   Ocupacion por area
   ------------------------------------------------------------ */
.tablero-columnas {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--esp-5);
    align-items: start;
}

.area-lista { display: flex; flex-direction: column; gap: var(--esp-4); }

.area-fila__encabezado {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-bottom: var(--esp-2);
}

.area-fila__nombre { font-weight: var(--peso-medio); font-size: var(--texto-sm); }

.area-fila__conteo {
    font-size: var(--texto-sm);
    color: var(--color-exito);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.area-fila__conteo--incompleto { color: var(--color-error); }

.area-barra {
    height: 6px;
    background: var(--color-superficie-2);
    border-radius: var(--radio-full);
    overflow: hidden;
}

.area-barra__relleno {
    display: block;
    height: 100%;
    background: var(--color-exito);
    border-radius: var(--radio-full);
    transition: width var(--transicion);
}
.area-barra__relleno--incompleto { background: var(--color-error); }

/* ------------------------------------------------------------
   Alertas
   ------------------------------------------------------------ */
.alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); }

.alerta {
    padding: var(--esp-3);
    font-size: var(--texto-sm);
    border-left: 3px solid var(--color-borde-fuerte);
    border-radius: var(--radio-sm);
    background: var(--color-superficie);
}
.alerta--error { border-left-color: var(--color-error); background: var(--color-error-tenue); }
.alerta--aviso { border-left-color: var(--color-advertencia); background: var(--color-advertencia-tenue); }
.alerta--info  { border-left-color: var(--color-info); background: var(--color-info-tenue); }

.alerta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
    .tablero-columnas { grid-template-columns: 1fr; }
}

/* ============================================================
   5. CALENDARIO DE PERSONAL (seccion 24)
   Matriz de empleados por dias: es como se lee un rol de trabajo.
   ============================================================ */

.calendario-contenedor {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    overflow-x: auto;
}

.calendario {
    border-collapse: collapse;
    font-size: var(--texto-sm);
    width: 100%;
}

/* La columna del empleado se queda fija al desplazar el mes a lo ancho. */
.calendario__empleado {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 210px;
    max-width: 210px;
    padding: var(--esp-2) var(--esp-4);
    text-align: left;
    font-weight: var(--peso-normal);
    background: var(--color-fondo);
    border-right: 1px solid var(--color-borde);
    border-bottom: 1px solid var(--color-borde);
}

thead .calendario__empleado {
    z-index: 3;
    background: var(--color-superficie);
    font-size: var(--texto-xs);
    font-weight: var(--peso-fuerte);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
}

.calendario__dia {
    min-width: 38px;
    padding: var(--esp-2) 0;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    line-height: 1.2;
}

.calendario__dia--finde { background: var(--color-superficie-2); }

.calendario__dia--hoy {
    background: var(--color-primario);
    color: var(--color-texto-invertido);
}

.calendario__dia-semana {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

.calendario__dia-numero {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
}

.calendario__grupo td {
    padding: var(--esp-2) var(--esp-4);
    background: var(--color-primario-tenue);
    font-family: var(--fuente-titulo);
    font-size: var(--texto-md);
    color: var(--color-primario);
    position: sticky;
    left: 0;
}

.calendario__celda {
    padding: var(--esp-1);
    text-align: center;
    border-bottom: 1px solid var(--color-borde);
}

.calendario__celda--hoy { background: var(--color-primario-tenue); }

/* La marca es un cuadro de color con una letra: de lejos se lee el patron
   del mes, de cerca el detalle. */
.calendario__marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    border-radius: var(--radio-sm);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    cursor: default;
}

.calendario__marca--programado  { background: var(--color-primario-tenue); color: var(--color-primario); }
.calendario__marca--asistencia  { background: var(--color-exito-tenue);    color: var(--color-exito); }
.calendario__marca--retardo     { background: var(--color-advertencia-tenue); color: var(--color-advertencia); }
.calendario__marca--falta       { background: var(--color-error-tenue);    color: var(--color-error); }
.calendario__marca--vacaciones  { background: var(--color-info-tenue);     color: var(--color-info); }
.calendario__marca--permiso     { background: var(--color-acento-tenue);   color: var(--color-acento-oscuro); }
.calendario__marca--comision    { background: var(--color-acento);         color: var(--color-primario-oscuro); }
.calendario__marca--incapacidad { background: var(--color-advertencia-tenue); color: var(--color-advertencia); }
.calendario__marca--descanso    { background: var(--color-superficie-2);   color: var(--color-texto-tenue); }
.calendario__marca--sinhorario  { background: var(--color-error);          color: var(--color-texto-invertido); }
.calendario__marca--neutro      { background: var(--color-superficie-2);   color: var(--color-texto-suave); }

.calendario-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3) var(--esp-5);
}

.calendario-leyenda__item {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--texto-sm);
    color: var(--color-texto-suave);
}