/*
    Skualo, mar adentro: sistema de diseño compartido con la app (PortalTrabajadores_Mobile, rama jaime).
    Los valores salen de Resources/Styles/Colors.xaml y MarAdentro.xaml de la app. Si cambian allá, cambian aquí.
    Todo va con prefijo "mar-" para no chocar con app.css ni con Radzen mientras las pantallas se migran.
    Guía de uso: DESIGN.md en la raíz del repo.
*/

:root {
    /* ── Mar ─────────────────────────────────────────────────────────────── */
    --mar-abismo: #1E0B45;
    --mar-profundo: #3B1580;
    --mar-skualo: #6C2CC4;
    --mar-laguna: #9B6CF0;
    --mar-foam: #EFE7FB;
    --mar-foam-borde: #E2D4FB;
    --mar-arena: #FFF7EA;

    /* ── Acción ──────────────────────────────────────────────────────────── */
    --mar-mango: #FFB03A;
    --mar-mango-sombra: #D98A12;
    --mar-mango-suave: #FFF1D6;
    --mar-mango-tinta: #8A5A00;
    --mar-oro: #E2A93B;

    /* ── Texto ───────────────────────────────────────────────────────────── */
    --mar-tinta: #1F1033;
    --mar-tinta-suave: #5B4E73;
    --mar-sobre-mar: #FFFFFF;
    --mar-sobre-mar-suave: #D9CCF5;
    --mar-sobre-mar-vidrio: rgba(255, 255, 255, .15);

    /* ── Estados ─────────────────────────────────────────────────────────── */
    --mar-exito: #1D7A43;
    --mar-exito-suave: #E6F6EC;
    --mar-error: #A3271C;
    --mar-error-suave: #FDE8E6;
    --mar-error-sombra: #6E160F;

    /* ── Módulos (tinta / fondo suave) ──────────────────────────────────── */
    --mar-mod-liquidaciones: #1F6FB2;
    --mar-mod-liquidaciones-suave: #E4F1FB;
    --mar-mod-vacaciones: #1D7A43;
    --mar-mod-vacaciones-suave: #E6F6EC;
    --mar-mod-permisos: #9A3412;
    --mar-mod-permisos-suave: #FFEDD5;
    --mar-mod-anticipos: #2F4F9E;
    --mar-mod-anticipos-suave: #E8EDF8;
    --mar-mod-certificados: #A3136F;
    --mar-mod-certificados-suave: #FBE6F2;
    --mar-mod-documentos: #6C2CC4;
    --mar-mod-documentos-suave: #EFE7FB;
    --mar-mod-denuncias: #7A1D6B;
    --mar-mod-denuncias-suave: #F6E6F3;

    --mar-brush: linear-gradient(180deg, var(--mar-abismo) 0%, var(--mar-profundo) 100%);

    /* ── Letras ──────────────────────────────────────────────────────────── */
    --mar-font-titulo: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --mar-font-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ── Tamaños (1rem = 16px; el mínimo de texto es 15px) ─────────────── */
    --mar-radio-tarjeta: 20px;
    --mar-radio-boton: 18px;
    --mar-radio-icono: 14px;
    --mar-sombra-tarjeta: 0 6px 20px rgba(59, 21, 128, .08);
    --mar-sombra-capa: 0 12px 40px rgba(30, 11, 69, .30);
    --mar-enfoque: 0 0 0 3px var(--mar-arena), 0 0 0 6px var(--mar-skualo);
}

/* ── Textos ─────────────────────────────────────────────────────────────── */

.mar-texto-display { font-family: var(--mar-font-titulo); font-weight: 600; font-size: 1.875rem; line-height: 1.1; color: var(--mar-tinta); margin: 0; }
.mar-texto-titulo { font-family: var(--mar-font-titulo); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--mar-tinta); margin: 0; }
.mar-texto-subtitulo { font-family: var(--mar-font-titulo); font-weight: 500; font-size: 1.25rem; line-height: 1.2; color: var(--mar-tinta); margin: 0; }
.mar-texto-cuerpo { font-family: var(--mar-font-texto); font-weight: 400; font-size: 1.0625rem; line-height: 1.45; color: var(--mar-tinta); margin: 0; }
.mar-texto-cuerpo-fuerte { font-family: var(--mar-font-texto); font-weight: 700; font-size: 1.0625rem; line-height: 1.4; color: var(--mar-tinta); margin: 0; }
.mar-texto-ayuda { font-family: var(--mar-font-texto); font-weight: 600; font-size: .9375rem; line-height: 1.4; color: var(--mar-tinta-suave); margin: 0; }
.mar-texto-numero { font-family: var(--mar-font-titulo); font-weight: 700; font-size: 2.125rem; line-height: 1; color: var(--mar-profundo); margin: 0; }

/* Sobre el mar (encabezado morado) */
.mar-sobre-mar { color: var(--mar-sobre-mar); }

/* Solo para lectores de pantalla */
.mar-solo-lector {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.mar-sobre-mar-suave { color: var(--mar-sobre-mar-suave); }

/* ── Botones ────────────────────────────────────────────────────────────── */
/* Sirven en <button> y en <a>. Va un solo .mar-boton-principal por pantalla. */

.mar-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-sizing: border-box;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--mar-radio-boton);
    font-family: var(--mar-font-texto);
    font-weight: 800;
    font-size: 1.0625rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}

.mar-boton:focus-visible { outline: none; box-shadow: var(--mar-enfoque); }
.mar-boton-bloque { display: flex; width: 100%; }
.mar-boton i { font-size: 1.1em; }

.mar-boton-principal {
    min-height: 58px;
    background: var(--mar-mango);
    color: var(--mar-tinta);
    box-shadow: 0 5px 0 var(--mar-mango-sombra);
    margin-bottom: 5px; /* espacio para la sombra sólida */
}
.mar-boton-principal:hover { background: #FFBA52; color: var(--mar-tinta); }
.mar-boton-principal:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--mar-mango-sombra); }
.mar-boton-principal:focus-visible { box-shadow: 0 5px 0 var(--mar-mango-sombra), var(--mar-enfoque); }

.mar-boton-secundario {
    min-height: 56px;
    background: #FFFFFF;
    color: var(--mar-profundo);
    box-shadow: inset 0 0 0 2px var(--mar-foam-borde);
}
.mar-boton-secundario:hover { background: var(--mar-foam); color: var(--mar-profundo); }
.mar-boton-secundario:focus-visible { box-shadow: inset 0 0 0 2px var(--mar-foam-borde), var(--mar-enfoque); }

.mar-boton-texto {
    min-height: 48px;
    padding: 0 1rem;
    background: transparent;
    color: var(--mar-skualo);
}
.mar-boton-texto:hover { background: var(--mar-foam); color: var(--mar-profundo); }

.mar-boton-peligro {
    min-height: 56px;
    background: var(--mar-error);
    color: #FFFFFF;
    box-shadow: 0 5px 0 var(--mar-error-sombra);
    margin-bottom: 5px;
}
.mar-boton-peligro:hover { background: #B33024; color: #FFFFFF; }
.mar-boton-peligro:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--mar-error-sombra); }
.mar-boton-peligro:focus-visible { box-shadow: 0 5px 0 var(--mar-error-sombra), var(--mar-enfoque); }

/* Morado: el "Sí" de una confirmación que no borra nada */
.mar-boton-confirmar {
    min-height: 56px;
    background: var(--mar-skualo);
    color: #FFFFFF;
    box-shadow: 0 5px 0 var(--mar-profundo);
    margin-bottom: 5px;
}
.mar-boton-confirmar:hover { background: #7A3AD6; color: #FFFFFF; }
.mar-boton-confirmar:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--mar-profundo); }
.mar-boton-confirmar:focus-visible { box-shadow: 0 5px 0 var(--mar-profundo), var(--mar-enfoque); }

.mar-boton:disabled,
.mar-boton[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
    pointer-events: none;
}

.mar-boton-girando {
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    border: 3px solid currentColor;
    border-right-color: transparent;
    animation: mar-girar .8s linear infinite;
}

/* ── Tarjetas ───────────────────────────────────────────────────────────── */

.mar-tarjeta {
    background: #FFFFFF;
    border-radius: var(--mar-radio-tarjeta);
    padding: 16px;
    box-shadow: var(--mar-sombra-tarjeta);
    color: var(--mar-tinta);
    font-family: var(--mar-font-texto);
}

.mar-icono-modulo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mar-radio-icono);
    font-size: 1.5rem;
    background: var(--mar-mod-suave, var(--mar-foam));
    color: var(--mar-mod, var(--mar-skualo));
}

/* Cada módulo fija su par de colores; lo usan IconoModulo, TarjetaTramite y quien lo necesite. */
.mar-mod-liquidaciones { --mar-mod: var(--mar-mod-liquidaciones); --mar-mod-suave: var(--mar-mod-liquidaciones-suave); }
.mar-mod-vacaciones { --mar-mod: var(--mar-mod-vacaciones); --mar-mod-suave: var(--mar-mod-vacaciones-suave); }
.mar-mod-permisos { --mar-mod: var(--mar-mod-permisos); --mar-mod-suave: var(--mar-mod-permisos-suave); }
.mar-mod-anticipos { --mar-mod: var(--mar-mod-anticipos); --mar-mod-suave: var(--mar-mod-anticipos-suave); }
.mar-mod-certificados { --mar-mod: var(--mar-mod-certificados); --mar-mod-suave: var(--mar-mod-certificados-suave); }
.mar-mod-documentos { --mar-mod: var(--mar-mod-documentos); --mar-mod-suave: var(--mar-mod-documentos-suave); }
.mar-mod-denuncias { --mar-mod: var(--mar-mod-denuncias); --mar-mod-suave: var(--mar-mod-denuncias-suave); }

/* ── Etiqueta de estado ─────────────────────────────────────────────────── */
/* El color nunca va solo: siempre lleva la palabra. */

.mar-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--mar-font-texto);
    font-weight: 800;
    font-size: .9375rem;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--mar-profundo);
    background: var(--mar-foam);
}
.mar-etiqueta-aprobado, .mar-etiqueta-firmado { color: var(--mar-exito); background: var(--mar-exito-suave); }
.mar-etiqueta-rechazado { color: var(--mar-error); background: var(--mar-error-suave); }
.mar-etiqueta-porfirmar, .mar-etiqueta-nuevo { color: var(--mar-mango-tinta); background: var(--mar-mango-suave); }
.mar-etiqueta-cerrado { color: var(--mar-tinta-suave); background: var(--mar-foam-borde); }

/* ── Trámites paso a paso ───────────────────────────────────────────────── */
/* Vacaciones, permisos y anticipos: una pregunta por pantalla, centrada sobre la arena.
   .mar-tramite-ancho deja espacio a un calendario de dos meses al lado de su resumen. */

.mar-tramite {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.mar-tramite.mar-tramite-ancho { max-width: 1120px; }

/* Botones del final: el mango y, debajo, "Cancelar" de texto */
.mar-tramite-botones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Un campo con su etiqueta arriba (un mensaje opcional, un monto) */
.mar-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--mar-font-texto);
}

.mar-campo-etiqueta {
    font-weight: 800;
    font-size: 1.0625rem;
    color: var(--mar-tinta);
}

.mar-campo textarea,
.mar-campo input {
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    border: 2px solid var(--mar-foam-borde);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--mar-tinta);
    font-family: var(--mar-font-texto);
    font-size: 1.0625rem;
    line-height: 1.4;
}

.mar-campo textarea { min-height: 110px; resize: vertical; }

.mar-campo textarea::placeholder,
.mar-campo input::placeholder { color: var(--mar-tinta-suave); opacity: .8; }

.mar-campo textarea:focus,
.mar-campo input:focus { outline: none; border-color: var(--mar-skualo); box-shadow: 0 0 0 4px var(--mar-foam); }

/* Lista de TarjetaSolicitud ("Mis solicitudes") */
.mar-lista-solicitudes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Grillas de Radzen ──────────────────────────────────────────────────── */
/* En escritorio se mantienen las grillas (decisión 2026-10-26). Envuelve la RadzenDataGrid en .mar-grilla
   y queda como una tarjeta blanca: encabezado Foam, filas altas en Nunito y paginador con píldoras. */

.mar-grilla {
    --rz-text-font-family: var(--mar-font-texto);
    --rz-grid-background-color: #FFFFFF;
    --rz-grid-border: none;
    --rz-grid-border-radius: var(--mar-radio-tarjeta);
    --rz-grid-shadow: var(--mar-sombra-tarjeta);
    --rz-grid-data-border-shadow: none;
    --rz-grid-header-background-color: var(--mar-foam);
    --rz-grid-header-color: var(--mar-profundo);
    --rz-grid-header-font-size: .9375rem;
    --rz-grid-header-font-weight: 800;
    --rz-grid-header-text-transform: none;
    --rz-grid-header-cell-border: none;
    --rz-grid-header-cell-border-bottom: none;
    --rz-grid-header-sorted-background-color: var(--mar-foam-borde);
    --rz-grid-sort-icon-color: var(--mar-skualo);
    --rz-grid-cell-color: var(--mar-tinta);
    --rz-grid-cell-font-size: 1rem;
    --rz-grid-cell-line-height: 1.4;
    --rz-grid-cell-padding: 14px 16px;
    --rz-grid-cell-border: none;
    --rz-grid-right-cell-border: none;
    --rz-grid-bottom-cell-border: 1px solid var(--mar-foam);
    --rz-grid-stripe-background-color: #FFFFFF;
    --rz-grid-stripe-odd-background-color: #FFFFFF;
    --rz-grid-hover-background-color: #FBF8FF;
    --rz-grid-hover-color: var(--mar-tinta);
    --rz-grid-filter-background-color: #FFFFFF;
    --rz-grid-filter-font-size: .9375rem;
    --rz-grid-loading-indicator-color: var(--mar-skualo);
    --rz-pager-background-color: #FFFFFF;
    --rz-pager-border: none;
    --rz-pager-summary-color: var(--mar-tinta-suave);
    --rz-pager-summary-font-size: .9375rem;
    --rz-pager-numeric-button-color: var(--mar-profundo);
    --rz-pager-numeric-button-border-radius: 999px;
    --rz-pager-numeric-button-hover-background-color: var(--mar-foam);
    --rz-pager-numeric-button-hover-color: var(--mar-profundo);
    --rz-pager-numeric-button-selected-background-color: var(--mar-skualo);
    --rz-pager-numeric-button-selected-color: #FFFFFF;
    --rz-pager-numeric-button-min-width: 40px;
    --rz-pager-button-border-radius: 999px;
    font-family: var(--mar-font-texto);
}

.mar-grilla .rz-data-grid {
    overflow: hidden;
    border-radius: var(--mar-radio-tarjeta);
    box-shadow: var(--mar-sombra-tarjeta);
}

.mar-grilla .rz-grid-table thead th,
.mar-grilla .rz-column-title,
.mar-grilla .rz-column-title-content {
    font-family: var(--mar-font-texto);
    font-weight: 800;
}

.mar-grilla .rz-cell-filter .rz-textbox,
.mar-grilla .rz-cell-filter .rz-dropdown,
.mar-grilla .rz-cell-filter .rz-datepicker {
    border-radius: 12px;
    font-family: var(--mar-font-texto);
}

.mar-grilla .rz-pager {
    padding: 12px 16px;
    border-top: 1px solid var(--mar-foam);
}

.mar-grilla .rz-pager-page,
.mar-grilla .rz-pager-element {
    border-radius: 999px;
    font-weight: 700;
}

/* ── Página "mar adentro" ───────────────────────────────────────────────── */
/* Las pantallas migradas ponen esta clase en su contenedor: fondo arena y letra Nunito. */

.mar-pagina {
    background: var(--mar-arena);
    color: var(--mar-tinta);
    font-family: var(--mar-font-texto);
    font-size: 1.0625rem;
}

/* ── Movimiento ─────────────────────────────────────────────────────────── */

@keyframes mar-girar { to { transform: rotate(360deg); } }

@keyframes mar-nadar {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-18px, 3px); }
}

@media (prefers-reduced-motion: reduce) {
    .mar-boton { transition: none; }
    .mar-boton-girando { animation-duration: 2.4s; }
}

/* ---------- Ventana del visor (Dialogos.AbrirVisorAsync) ----------
   El contenido lo dibuja VisorPdf; aquí solo el tamaño de la ventana de Radzen.
   Casi a pantalla completa en escritorio y completa en celular. */
.rz-dialog.visor-mar {
    height: min(920px, 94vh);
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--mar-arena);
}

.rz-dialog.visor-mar .visor-mar-contenido {
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
}

@media (max-width: 768px) {
    .rz-dialog.visor-mar {
        width: 100vw !important;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
}


/* ---------- Ingreso (dentro de MarcoIngreso) ----------
   Entrar, olvidé mi clave, nueva clave y elegir empresa. El marco está en MarcoIngreso.razor.css. */
.ingreso-encabezado {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ingreso-saludo {
    margin: 0;
    color: var(--mar-tinta-suave);
    font-weight: 700;
    font-size: 1rem;
}

.ingreso-titulo {
    margin: 0;
    color: var(--mar-tinta);
    font-family: var(--mar-font-titulo);
    font-weight: 600;
    font-size: 2.125rem;
    line-height: 1.15;
}

.ingreso-bajada {
    margin: 0;
    color: var(--mar-tinta-suave);
    font-size: 1.0625rem;
    line-height: 1.45;
}

    .ingreso-bajada strong { color: var(--mar-tinta); }

.ingreso-formulario {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Aviso dentro de la pantalla: rojo para errores, Foam para lo informativo */
.ingreso-aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--mar-foam);
    color: var(--mar-profundo);
    font-size: 1rem;
    line-height: 1.45;
}

    .ingreso-aviso i { margin-top: 3px; font-size: 1.15rem; flex-shrink: 0; }
    .ingreso-aviso.error { background: var(--mar-error-suave); color: var(--mar-error); }
    .ingreso-aviso.exito { background: var(--mar-exito-suave); color: var(--mar-exito); }

.ingreso-error-campo {
    color: var(--mar-error);
    font-weight: 700;
    font-size: 1rem;
}

.mar-campo input.con-error { border-color: var(--mar-error); }

/* Clave con "Mostrar" dentro de la caja */
.ingreso-clave { position: relative; display: block; }

.mar-campo .ingreso-clave input { padding-right: 132px; }

.ingreso-mostrar {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 12px;
    background: var(--mar-foam);
    color: var(--mar-skualo);
    font-family: var(--mar-font-texto);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}

    .ingreso-mostrar:focus-visible { outline: 3px solid var(--mar-skualo); }

.ingreso-enlace {
    align-self: center;
    border: none;
    background: none;
    padding: 6px 4px;
    color: var(--mar-skualo);
    font-family: var(--mar-font-texto);
    font-weight: 800;
    font-size: 1.0625rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

    .ingreso-enlace.derecha { align-self: flex-end; }
    .ingreso-enlace.suave { color: var(--mar-tinta-suave); font-weight: 700; font-size: 1rem; }
    .ingreso-enlace:focus-visible { outline: 3px solid var(--mar-skualo); border-radius: 6px; }

.ingreso-volver {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border: none;
    background: none;
    color: var(--mar-skualo);
    font-family: var(--mar-font-texto);
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.ingreso-separador { height: 2px; background: #F1E6D2; border: none; margin: 2px 0; }

.ingreso-tiendas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    color: var(--mar-tinta-suave);
    font-weight: 700;
    font-size: 1rem;
}

    .ingreso-tiendas span { display: flex; gap: 8px; }
    .ingreso-tiendas img { height: 40px; width: auto; display: block; }

/* Pastillas sobre el mar de "Entrar" */
.ingreso-pastillas { display: flex; flex-wrap: wrap; gap: 12px; }

.ingreso-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--mar-tinta);
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 6px 20px rgba(30, 11, 69, .25);
}

    .ingreso-pastilla .mar-icono-modulo { width: 34px; height: 34px; border-radius: 50%; font-size: .95rem; }

/* Pasos de "Necesito ayuda para entrar" y consejos de "Revisa tu correo" */
.ingreso-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ingreso-paso {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ingreso-paso-numero {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--mar-foam);
    color: var(--mar-skualo);
    font-family: var(--mar-font-titulo);
    font-weight: 600;
    font-size: 1.25rem;
}

.ingreso-paso p { margin: 4px 0 0; color: var(--mar-tinta-suave); font-size: 1.0625rem; line-height: 1.4; }

.ingreso-consejo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.0625rem;
    line-height: 1.45;
}

    .ingreso-consejo i { margin-top: 3px; width: 20px; color: var(--mar-skualo); text-align: center; flex-shrink: 0; }

.ingreso-icono-correo {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--mar-exito-suave);
    color: var(--mar-exito);
    font-size: 2rem;
}

/* Requisitos de la clave nueva */
.ingreso-requisitos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #FFFFFF;
}

    .ingreso-requisitos ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
    .ingreso-requisitos li { display: flex; align-items: center; gap: 10px; color: var(--mar-tinta-suave); font-size: 1rem; }
    .ingreso-requisitos li.cumple { color: var(--mar-exito); font-weight: 700; }

/* Empresas para elegir */
.ingreso-empresa {
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    padding: 16px 18px;
    border: 2px solid transparent;
    border-radius: var(--mar-radio-tarjeta);
    background: #FFFFFF;
    box-shadow: var(--mar-sombra-tarjeta);
    color: var(--mar-tinta);
    text-decoration: none;
    font-family: var(--mar-font-texto);
    text-align: left;
}

    .ingreso-empresa:hover { border-color: var(--mar-laguna); color: var(--mar-tinta); }
    .ingreso-empresa:focus-visible { outline: none; border-color: var(--mar-skualo); box-shadow: 0 0 0 4px var(--mar-foam); }

.ingreso-empresa-iniciales {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--mar-foam);
    color: var(--mar-skualo);
    font-family: var(--mar-font-titulo);
    font-weight: 600;
    font-size: 1.375rem;
}

.ingreso-empresa-nombre { flex: 1; min-width: 0; font-weight: 800; font-size: 1.1875rem; }
.ingreso-empresa > i { color: var(--mar-laguna); font-size: 1.2rem; }

@media (max-width: 900px) {
    .ingreso-titulo { font-size: 1.75rem; }
}

.ingreso-centrado { align-self: center; text-align: center; }