/*
 * DECLARA YA — capa de marca sobre Filament v3 (sin build de Tailwind).
 * Se registra via FilamentAsset y se sirve como CSS plano. Solo ajusta
 * color de lienzo, tipografia de encabezados y pulido del login para dar
 * identidad fintech (navy + azul + verde) manteniendo el modo claro.
 *
 * Paleta:
 *   Navy    #14233D  (texto/encabezados)
 *   Azul    #1B7FE0  (primario)
 *   Verde   #37B34A  (exito)
 *   Canvas  #F4F7FB  (fondo)
 */

:root {
    --dya-navy: #14233D;
    --dya-blue: #1B7FE0;
    --dya-green: #37B34A;
    --dya-canvas: #F4F7FB;
}

/* Lienzo general de la app */
.fi-body,
.fi-simple-layout {
    background-color: var(--dya-canvas);
}

/* Encabezados de pagina en navy para jerarquia seria */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    color: var(--dya-navy);
    letter-spacing: -0.01em;
}

/* Marca en la barra lateral: texto de grupos de navegacion en navy suave */
.fi-sidebar-group-label {
    color: var(--dya-navy);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

/* Sidebar limpio en blanco con borde sutil */
.fi-sidebar {
    border-color: rgba(20, 35, 61, 0.08);
}

/* ============================================================
   TOPBAR INSTITUCIONAL (estilo portal SAT)
   Barra navy compacta, texto claro, separacion clara del contenido.
   ============================================================ */

.fi-topbar > nav {
    background-color: var(--dya-navy) !important;
    /* Separacion visual clara entre la barra y el contenido */
    box-shadow: 0 1px 0 0 rgba(20, 35, 61, 0.25), 0 4px 12px -6px rgba(20, 35, 61, 0.35);
    --tw-ring-color: rgba(255, 255, 255, 0.06);
}

/* Iconos/controles nativos del topbar en tono claro para contraste sobre navy */
.fi-topbar > nav .fi-icon-btn {
    color: #C7D4E6;
}
.fi-topbar > nav .fi-icon-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
}

/* Los paneles desplegables (menu de usuario, configuracion) abren en claro:
   restauramos texto oscuro para que sigan siendo legibles. */
.fi-topbar .fi-dropdown-panel {
    color: var(--dya-navy);
}

/* ---- Navegacion superior (top navigation): items claros sobre navy ---- */

.fi-topbar > nav .fi-topbar-item-label {
    color: #D6E0EE;
}
.fi-topbar > nav .fi-topbar-item-icon,
.fi-topbar > nav .fi-topbar-group-toggle-icon {
    color: #9FB4CE;
}
.fi-topbar > nav .fi-topbar-item-button:hover,
.fi-topbar > nav .fi-topbar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
/* Item activo: resaltado azul de marca */
.fi-topbar > nav .fi-topbar-item.fi-active .fi-topbar-item-button {
    background-color: rgba(27, 127, 224, 0.20) !important;
}
.fi-topbar > nav .fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-topbar > nav .fi-topbar-item.fi-active .fi-topbar-item-icon,
.fi-topbar > nav .fi-topbar-item.fi-active .fi-topbar-group-toggle-icon {
    color: #ffffff !important;
}

/* ---- Boton "Configuracion" (trigger en el topbar) ---- */

.dya-config-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #C7D4E6;
    padding: 0.32rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 75ms, border-color 75ms, color 75ms;
}
.dya-config-trigger:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(27, 127, 224, 0.6);
}
.dya-config-trigger__icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
}
.dya-config-trigger__rfc {
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.dya-config-trigger__chev {
    width: 1rem;
    height: 1rem;
    opacity: 0.6;
    flex: none;
}

/* ---- Contenido del dropdown de Configuracion (panel claro) ---- */

.dya-config {
    padding: 0.85rem 1rem;
    min-width: 15rem;
}
.dya-config__eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6B7A90;
}
.dya-config__name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--dya-navy);
    margin-top: 0.15rem;
}
.dya-config__rfc {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: #48566B;
}
.dya-config__efirma {
    margin-top: 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.dya-config__efirma-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
    flex: none;
}
.dya-config__efirma-date {
    font-weight: 500;
    opacity: 0.85;
}
.dya-config__efirma--ok {
    color: #1E7B32;
    background: rgba(55, 179, 74, 0.12);
    border-color: rgba(55, 179, 74, 0.3);
}
.dya-config__efirma--bad {
    color: #B42318;
    background: rgba(224, 60, 60, 0.1);
    border-color: rgba(224, 60, 60, 0.3);
}
.dya-config__efirma--none {
    color: #96690C;
    background: rgba(224, 168, 0, 0.12);
    border-color: rgba(224, 168, 0, 0.3);
}
.dya-config__soon {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(20, 35, 61, 0.08);
    font-size: 0.72rem;
    color: #8A97A8;
}

/* ---- Tarjeta de estado e.firma (pagina Credenciales, fondo claro) ---- */

.dya-efirma-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.85rem;
}
.dya-efirma-card__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: currentColor;
    flex: none;
}
.dya-efirma-card__date {
    font-weight: 500;
    opacity: 0.85;
}
.dya-efirma-card--ok {
    color: #1E7B32;
    background: rgba(55, 179, 74, 0.1);
    border-color: rgba(55, 179, 74, 0.3);
}
.dya-efirma-card--bad {
    color: #B42318;
    background: rgba(224, 60, 60, 0.08);
    border-color: rgba(224, 60, 60, 0.3);
}
.dya-efirma-card--none {
    color: #96690C;
    background: rgba(224, 168, 0, 0.1);
    border-color: rgba(224, 168, 0, 0.3);
}

/* ============================================================
   DECLARACION ANUAL (Fase 4)
   ============================================================ */

.dya-decl-eyebrow {
    font-size: 0.85rem;
    color: #48566B;
}
.dya-decl-eyebrow strong {
    color: var(--dya-navy);
}

.dya-decl-note {
    font-size: 0.85rem;
    color: #96690C;
    background: rgba(224, 168, 0, 0.1);
    border: 1px solid rgba(224, 168, 0, 0.3);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
}

/* Resultado destacado (saldo a favor / a cargo) */
.dya-decl-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
}
.dya-decl-result__label {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}
.dya-decl-result__hint {
    display: block;
    font-size: 0.78rem;
    opacity: 0.8;
}
.dya-decl-result__amount {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.dya-decl-result--ok {
    color: #1E7B32;
    background: rgba(55, 179, 74, 0.1);
    border-color: rgba(55, 179, 74, 0.35);
}
.dya-decl-result--due {
    color: #14233D;
    background: rgba(27, 127, 224, 0.08);
    border-color: rgba(27, 127, 224, 0.3);
}

/* --- e.firma: formulario clasico + flash --- */
.dya-flash {
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.dya-flash--ok { color: #1E7B32; background: rgba(55, 179, 74, 0.12); border-color: rgba(55, 179, 74, 0.35); }
.dya-flash--bad { color: #9B2C2C; background: rgba(214, 69, 69, 0.12); border-color: rgba(214, 69, 69, 0.35); }

.dya-efirma-form { display: flex; flex-direction: column; gap: 1rem; }
.dya-field { display: flex; flex-direction: column; gap: 0.3rem; }
.dya-field__label { font-weight: 600; color: var(--dya-navy); font-size: 0.9rem; }
.dya-field__hint { font-size: 0.78rem; color: #5F6B7A; }
.dya-file {
    font-size: 0.88rem;
    color: var(--dya-navy);
    padding: 0.4rem 0.5rem;
    border: 1px dashed rgba(20, 35, 61, 0.25);
    border-radius: 0.5rem;
    background: rgba(20, 35, 61, 0.02);
    max-width: 26rem;
}
.dya-efirma-form__actions { margin-top: 0.4rem; }

/* --- Seguridad / 2FA --- */
.dya-2fa-status {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    margin-bottom: 1rem;
}
.dya-2fa-status__icon { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; }
.dya-2fa-status strong { color: var(--dya-navy); }
.dya-2fa-status p { font-size: 0.82rem; color: #5F6B7A; margin: 0; }
.dya-2fa-status--on { background: rgba(55, 179, 74, 0.1); border-color: rgba(55, 179, 74, 0.35); }
.dya-2fa-status--on .dya-2fa-status__icon { color: #1E7B32; }
.dya-2fa-status--off { background: rgba(224, 138, 27, 0.1); border-color: rgba(224, 138, 27, 0.35); }
.dya-2fa-status--off .dya-2fa-status__icon { color: #8A5410; }

.dya-2fa-setup { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.dya-2fa-qr {
    flex: 0 0 auto;
    background: #fff;
    padding: 0.6rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(20, 35, 61, 0.1);
    line-height: 0;
}
.dya-2fa-qr svg { width: 172px; height: 172px; }
.dya-2fa-setup__body { flex: 1 1 260px; }
.dya-2fa-steps { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--dya-navy); font-size: 0.9rem; }
.dya-2fa-steps li { margin-bottom: 0.3rem; }

.dya-2fa-confirm { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.dya-2fa-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.3rem;
    letter-spacing: 0.3em;
    text-align: center;
    width: 8.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(20, 35, 61, 0.2);
    border-radius: 0.5rem;
    color: var(--dya-navy);
}
.dya-2fa-input:focus { outline: 2px solid var(--dya-blue); outline-offset: 1px; }
.dya-2fa-input--wide {
    width: 20rem;
    max-width: 100%;
    letter-spacing: 0.12em;
    font-size: 1.05rem;
    text-align: left;
}
.dya-2fa-input--wide::placeholder { letter-spacing: normal; font-size: 0.85rem; }

.dya-2fa-recovery { margin-top: 1.5rem; }
.dya-2fa-recovery h4 { color: var(--dya-navy); font-weight: 700; margin: 0 0 0.2rem; }
.dya-2fa-recovery p { font-size: 0.82rem; color: #5F6B7A; margin: 0 0 0.6rem; }
.dya-2fa-codes {
    list-style: none;
    margin: 0.4rem 0;
    padding: 0.7rem 0.9rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    background: rgba(20, 35, 61, 0.03);
    border: 1px solid rgba(20, 35, 61, 0.08);
    border-radius: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--dya-navy);
}
.dya-2fa-recovery-preview { margin-top: 0.8rem; font-size: 0.85rem; }
.dya-2fa-recovery-preview summary { cursor: pointer; color: var(--dya-blue); }
.dya-2fa-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }

.dya-2fa-challenge { max-width: 30rem; margin: 0 auto; }
.dya-2fa-hint { font-size: 0.82rem; color: #5F6B7A; margin-top: 0.9rem; }

/* Badge de estado de la declaracion guardada, junto al eyebrow */
.dya-decl-saved {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
}
.dya-decl-saved--success { color: #1E7B32; background: rgba(55, 179, 74, 0.15); }
.dya-decl-saved--warning { color: #8A5410; background: rgba(224, 138, 27, 0.15); }

/* Devolucion: cabecera con monto y estado (listo / bloqueado) */
.dya-refund-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    margin-bottom: 1rem;
}
.dya-refund-head__label {
    display: block;
    font-weight: 700;
    color: var(--dya-navy);
}
.dya-refund-head__hint {
    display: block;
    font-size: 0.78rem;
    opacity: 0.85;
}
.dya-refund-head__amount {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--dya-navy);
}
.dya-refund-head--ready {
    background: rgba(55, 179, 74, 0.1);
    border-color: rgba(55, 179, 74, 0.35);
}
.dya-refund-head--blocked {
    background: rgba(224, 138, 27, 0.1);
    border-color: rgba(224, 138, 27, 0.35);
}

/* Checklist de requisitos con semaforo */
.dya-refund-reqs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.dya-refund-req {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.6rem 0.8rem;
    border-radius: 0.6rem;
    background: rgba(20, 35, 61, 0.02);
    border: 1px solid rgba(20, 35, 61, 0.06);
}
.dya-refund-req__dot {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-top: 0.35rem;
}
.dya-refund-req--ok .dya-refund-req__dot { background: var(--dya-green); }
.dya-refund-req--warn .dya-refund-req__dot { background: #E08A1B; }
.dya-refund-req--bad .dya-refund-req__dot { background: #D64545; }
.dya-refund-req__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.dya-refund-req__label {
    font-weight: 700;
    color: var(--dya-navy);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dya-refund-req__tag {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
}
.dya-refund-req--ok .dya-refund-req__tag { color: #1E7B32; background: rgba(55, 179, 74, 0.15); }
.dya-refund-req--warn .dya-refund-req__tag { color: #8A5410; background: rgba(224, 138, 27, 0.15); }
.dya-refund-req--bad .dya-refund-req__tag { color: #9B2C2C; background: rgba(214, 69, 69, 0.15); }
.dya-refund-req__detail {
    font-size: 0.82rem;
    color: #5F6B7A;
}
.dya-refund-req__ref {
    font-size: 0.72rem;
    color: #8A94A6;
}
.dya-refund-actions {
    margin-top: 1rem;
}

/* Tabla de desglose */
.dya-breakdown-scroll {
    overflow-x: auto;
}
.dya-breakdown {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.dya-breakdown thead th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B7A90;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid rgba(20, 35, 61, 0.12);
}
.dya-breakdown tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(20, 35, 61, 0.06);
    color: var(--dya-navy);
    vertical-align: top;
}
.dya-breakdown tbody tr:last-child td {
    font-weight: 700;
}
.dya-breakdown__muted {
    color: #7A8699;
    font-size: 0.8rem;
}
.dya-breakdown__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Guia manual */
.dya-decl-mode {
    font-size: 0.85rem;
    color: #14233D;
    background: var(--dya-canvas);
    border-radius: 0.5rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.8rem;
}
.dya-decl-steps {
    list-style: decimal;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #38465C;
}
.dya-decl-meta {
    margin-top: 0.8rem;
    font-size: 0.75rem;
    color: #7A8699;
}
.dya-decl-actions {
    margin-top: 0.9rem;
}

/* ---- Selector de ejercicio fiscal, lado derecho ---- */

.dya-fy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #C7D4E6;
    font-size: 0.75rem;
}
.dya-fy__label {
    font-weight: 600;
    letter-spacing: 0.02em;
}
.dya-fy__select {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.375rem;
    padding: 0.2rem 1.4rem 0.2rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    /* Flecha custom en claro */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23C7D4E6'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.35rem center;
    background-size: 1rem;
}
.dya-fy__select:hover {
    border-color: rgba(27, 127, 224, 0.7);
    background-color: rgba(27, 127, 224, 0.18);
}
.dya-fy__select option {
    color: #14233D;
    background: #ffffff;
}

/* ---- Responsive: en pantallas chicas compactamos las acciones ---- */

@media (max-width: 767px) {
    .dya-fy__label {
        display: none;
    }
    /* El trigger de Configuracion queda solo como icono de engrane */
    .dya-config-trigger__rfc,
    .dya-config-trigger__chev {
        display: none;
    }
    .dya-config-trigger {
        padding: 0.32rem 0.4rem;
    }
}

/* ---- Login / paginas simples ---- */

/* Fondo con degradado sobrio de canvas a un tinte azul muy leve */
.fi-simple-layout {
    background-image:
        radial-gradient(1200px 500px at 50% -10%, rgba(27, 127, 224, 0.08), transparent 70%),
        linear-gradient(180deg, var(--dya-canvas) 0%, #eef3fa 100%);
}

/* Tarjeta del login con sombra suave y borde navy tenue */
.fi-simple-main {
    border: 1px solid rgba(20, 35, 61, 0.06);
    box-shadow:
        0 10px 30px -12px rgba(20, 35, 61, 0.18),
        0 4px 10px -6px rgba(20, 35, 61, 0.10);
}

/* El "plate" del logo en el login depende de QUE VARIANTE usa cada panel, asi
   que se separa por panel. Antes esta regla era global y le ponia fondo navy a
   todo lo que cayera en .fi-logo: en el panel de contadores, que no tenia logo,
   Filament pintaba ahi el NOMBRE de la marca en texto casi negro y quedaba
   azul sobre azul. */
.fi-simple-layout .fi-logo {
    margin-inline: auto;
    padding: 0.7rem 1.1rem;
    border-radius: 0.75rem;
}

/* Contribuyente: logo variante CLARA -> necesita fondo oscuro. */
.fi-panel-app .fi-simple-layout .fi-logo {
    background-color: var(--dya-navy);
    box-shadow: 0 10px 24px -12px rgba(20, 35, 61, 0.55);
}

/* Contadores: logo variante OSCURA -> fondo blanco, y GRANDE. En el login hay
   espacio de sobra; la altura del provider (2.2rem) existe solo para que el
   logo no desborde la barra superior, que mide ~4rem. El !important es
   necesario porque Filament escribe la altura como estilo en linea. */
.fi-panel-contadores .fi-simple-layout .fi-logo {
    height: 4.75rem !important;
    padding: 1rem 1.6rem;
    background-color: #ffffff;
    border: 1px solid rgba(20, 35, 61, 0.08);
    border-radius: 1rem;
    box-shadow: 0 14px 30px -16px rgba(20, 35, 61, 0.35);
}

@media (max-width: 480px) {
    .fi-panel-contadores .fi-simple-layout .fi-logo {
        height: 3.6rem !important;
        padding: 0.8rem 1.2rem;
    }
}

/* Se intento rotular "Contadores" bajo el logo con un ::after, pero
   .fi-simple-header tambien contiene el encabezado y el subtitulo: al ser un
   flex column, el pseudo-elemento caia hasta el final, debajo del subtitulo.
   La identidad del panel la llevan el titulo de la pestana
   ("DECLARA YA · Contadores") y el encabezado de cada pagina. */

/* Botones primarios: un pelin mas de peso para lucir confiable */
.fi-btn {
    font-weight: 600;
}

/* Badges: bordes ligeramente mas definidos para lectura fiscal */
.fi-badge {
    font-weight: 600;
}