/* ==========================================================================
   Actos FD - hoja de estilos compartida por las pantallas de listado de actos
   (general, comerciales, coordinador, padre/socio y tienda).

   Todo cuelga de .afd para que nada se escape al resto de la aplicacion.
   El color de acento lo elige cada pagina con una clase modificadora:
     .afd-violet  .afd-indigo  .afd-blue  .afd-amber  .afd-emerald
   ========================================================================== */

.afd {
    --afd-a1: #6366f1;
    --afd-a2: #a855f7;
    --afd-accent: #6366f1;
    --afd-accent-strong: #4f46e5;
    --afd-soft: #eef2ff;
    --afd-ring: rgba(99, 102, 241, .28);

    --afd-ink: #0f172a;
    --afd-ink-soft: #475569;
    --afd-ink-faint: #94a3b8;
    --afd-line: #e2e8f0;
    --afd-surface-alt: #f8fafc;

    --afd-ok: #16a34a;
    --afd-warn: #f59e0b;
    --afd-bad: #dc2626;

    --afd-radius: 1rem;
    --afd-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .18);
}

.afd-violet  { --afd-a1: #6366f1; --afd-a2: #a855f7; --afd-accent: #7c3aed; --afd-accent-strong: #6d28d9; --afd-soft: #f3f0ff; --afd-ring: rgba(124, 58, 237, .28); }
.afd-indigo  { --afd-a1: #6366f1; --afd-a2: #4f46e5; --afd-accent: #4f46e5; --afd-accent-strong: #4338ca; --afd-soft: #eef2ff; --afd-ring: rgba(79, 70, 229, .28); }
.afd-blue    { --afd-a1: #3b82f6; --afd-a2: #1e3a8a; --afd-accent: #2563eb; --afd-accent-strong: #1d4ed8; --afd-soft: #eff6ff; --afd-ring: rgba(37, 99, 235, .28); }
.afd-amber   { --afd-a1: #f59e0b; --afd-a2: #d97706; --afd-accent: #d97706; --afd-accent-strong: #b45309; --afd-soft: #fffbeb; --afd-ring: rgba(217, 119, 6, .28); }
.afd-emerald { --afd-a1: #10b981; --afd-a2: #059669; --afd-accent: #059669; --afd-accent-strong: #047857; --afd-soft: #ecfdf5; --afd-ring: rgba(5, 150, 105, .28); }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.afd .afd-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--afd-a1) 0%, var(--afd-a2) 100%);
    box-shadow: 0 12px 32px -16px rgba(15, 23, 42, .55);
}

/* Brillo diagonal: da profundidad sin cargar la cabecera. */
.afd .afd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}

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

.afd .afd-hero h2 {
    letter-spacing: -.01em;
    text-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}

.afd .afd-hero .header-icon i {
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .35));
}

/* Indicadores de la cabecera. */
.afd .afd-kpi {
    border-radius: .7rem;
    padding: .4rem .6rem;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: background-color .2s ease, transform .2s ease;
}

.afd .afd-kpi:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

.afd .afd-kpi-label {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .8;
}

.afd .afd-kpi-value {
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.afd .afd-kpi .progress {
    background-color: rgba(255, 255, 255, .25);
    height: 4px;
}

.afd .afd-kpi .progress-bar {
    background-color: #fff;
}

/* --------------------------------------------------------------------------
   Tarjetas / paneles
   -------------------------------------------------------------------------- */

.afd .card {
    border-radius: var(--afd-radius);
    box-shadow: var(--afd-shadow) !important;
}

.afd .bg-light {
    background-color: var(--afd-surface-alt) !important;
}

/* Cabecera de panel plegable. */
.afd .afd-panel-head {
    cursor: pointer;
    user-select: none;
    transition: background-color .18s ease;
}

.afd .afd-panel-head:hover {
    background-color: var(--afd-soft) !important;
}

.afd .afd-chevron {
    transition: transform .25s ease;
}

.afd .afd-panel-head.is-open .afd-chevron {
    transform: rotate(180deg);
}

.afd .afd-collapse {
    animation: afd-slide-down .22s ease both;
}

/* --------------------------------------------------------------------------
   Filtros
   -------------------------------------------------------------------------- */

.afd .afd-filters .form-label {
    color: var(--afd-ink-soft);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}

.afd .afd-filters .form-control,
.afd .afd-filters .form-select {
    border: 1px solid var(--afd-line) !important;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.afd .afd-filters .form-control:hover,
.afd .afd-filters .form-select:hover {
    border-color: var(--afd-accent) !important;
}

.afd .afd-filters .form-control:focus,
.afd .afd-filters .form-select:focus {
    border-color: var(--afd-accent) !important;
    box-shadow: 0 0 0 .2rem var(--afd-ring) !important;
}

/* Pista de teclado: Enter lanza la busqueda. */
.afd .afd-hint {
    font-size: .7rem;
    color: var(--afd-ink-faint);
}

.afd .afd-hint kbd {
    background: #fff;
    border: 1px solid var(--afd-line);
    border-bottom-width: 2px;
    border-radius: .3rem;
    color: var(--afd-ink-soft);
    font-size: .65rem;
    padding: .05rem .3rem;
}

/* Boton principal. */
.afd .afd-btn {
    background: linear-gradient(135deg, var(--afd-a1) 0%, var(--afd-a2) 100%);
    color: #fff;
    border: 0;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.afd .afd-btn:hover:not(:disabled) {
    color: #fff;
    filter: saturate(1.12);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(15, 23, 42, .5) !important;
}

.afd .afd-btn:active:not(:disabled) {
    transform: translateY(0);
}

.afd .afd-btn:disabled {
    opacity: .6;
}

.afd .afd-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .22rem var(--afd-ring) !important;
}

/* Interruptores. */
.afd .custom-switch {
    cursor: pointer;
    width: 2.35em;
    height: 1.2em;
    transition: background-color .18s ease, border-color .18s ease;
}

/* El tema de BootstrapBlazor pinta el interruptor marcado con su propio color:
   se fuerza para que siga el acento de la pantalla. */
.afd .custom-switch:checked {
    background-color: var(--afd-accent) !important;
    border-color: var(--afd-accent) !important;
}

.afd .custom-switch:focus-visible {
    box-shadow: 0 0 0 .2rem var(--afd-ring) !important;
}

/* --------------------------------------------------------------------------
   Barra de herramientas de resultados
   -------------------------------------------------------------------------- */

.afd .afd-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1.1rem;
    background: #fff;
    border-bottom: 1px solid var(--afd-line);
}

.afd .afd-toolbar-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--afd-ink);
}

.afd .afd-count {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--afd-soft);
    color: var(--afd-accent-strong);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .6rem;
    font-variant-numeric: tabular-nums;
}

.afd .afd-count-dirty {
    background: #ffedd5;
    color: #9a3412;
    border-color: #fdba74;
}

/* Buscador rapido dentro de los resultados. */
.afd .afd-search {
    position: relative;
    min-width: 14rem;
    flex: 0 1 22rem;
}

.afd .afd-search > i {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--afd-ink-faint);
    pointer-events: none;
    font-size: .8rem;
}

.afd .afd-search input {
    width: 100%;
    padding: .35rem 2rem .35rem 1.9rem;
    font-size: .82rem;
    border: 1px solid var(--afd-line);
    border-radius: 999px;
    background: var(--afd-surface-alt);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.afd .afd-search input:focus {
    outline: 0;
    background: #fff;
    border-color: var(--afd-accent);
    box-shadow: 0 0 0 .2rem var(--afd-ring);
}

.afd .afd-search-clear {
    position: absolute;
    right: .3rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--afd-ink-faint);
    line-height: 1;
    padding: .2rem .4rem;
    border-radius: 999px;
}

.afd .afd-search-clear:hover {
    color: var(--afd-bad);
    background: #fee2e2;
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.afd .afd-table-wrap {
    position: relative;
    max-height: 65vh;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.afd .afd-table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.afd .afd-table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 3px solid #fff;
    border-radius: 999px;
}

.afd .afd-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--afd-ink-faint);
}

.afd .custom-table thead th {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .075em;
    font-weight: 800;
    color: var(--afd-ink-soft);
    border: none;
    padding: .85rem .75rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--afd-surface-alt);
    box-shadow: inset 0 -1px 0 var(--afd-line);
    white-space: nowrap;
}

.afd .sortable-header {
    cursor: pointer;
    user-select: none;
    transition: color .15s ease, background-color .15s ease;
}

.afd .sortable-header:hover {
    color: var(--afd-accent-strong) !important;
    background-color: var(--afd-soft) !important;
}

.afd .sortable-header:hover .afd-sort {
    opacity: 1;
}

/* Indicador de orden: reserva sitio siempre para que no baile la cabecera. */
.afd .afd-sort {
    display: inline-block;
    width: .85em;
    text-align: center;
    margin-left: .15rem;
    opacity: .35;
    transition: opacity .15s ease, color .15s ease;
}

.afd .afd-sort.is-active {
    opacity: 1;
    color: var(--afd-accent);
    font-weight: 900;
}

/* Columna por la que se esta ordenando. */
.afd .sortable-header:has(.afd-sort.is-active),
.afd .sortable-header.is-sorted {
    color: var(--afd-accent-strong) !important;
    background-color: var(--afd-soft) !important;
    box-shadow: inset 0 -2px 0 var(--afd-accent);
}

.afd .custom-table tbody td {
    padding: .5rem .75rem;
    border-color: #f1f5f9;
}

.afd .table-row {
    transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
    border-left: 3px solid transparent;
}

.afd .table-row:hover {
    background-color: var(--afd-soft) !important;
    border-left-color: var(--afd-accent);
}

/* Fila con un estado distinto al de la primera: marca discreta, porque en
   muchos listados la cumple casi todas las filas. */
.afd .table-row-diferente {
    background-color: #fffdf3 !important;
    border-left-color: #fcd34d !important;
}

.afd .table-row-diferente:hover {
    background-color: var(--afd-soft) !important;
}

/* Fila con cambios sin guardar: esta si tiene que cantar. */
.afd .table-row.is-dirty,
.afd .table-row.is-dirty:hover {
    background-color: #fff1e4 !important;
    border-left-color: #ea580c !important;
    box-shadow: inset 0 0 0 1px rgba(234, 88, 12, .22);
}

/* Fila recien guardada: destello verde que se apaga solo. */
.afd .table-row.is-saved {
    animation: afd-saved-flash 1.8s ease-out both;
    border-left-color: var(--afd-ok) !important;
}

/* Sub-tabla de documentos desplegada. */
.afd .table-row-expandido {
    border-left: 3px solid var(--afd-accent) !important;
    animation: afd-slide-down .22s ease both;
}

.afd .table-row-expandido:hover {
    background-color: var(--afd-soft) !important;
}

/* --------------------------------------------------------------------------
   Celdas
   -------------------------------------------------------------------------- */

.afd .text-indigo,
.afd .text-blue {
    color: var(--afd-accent-strong) !important;
}

.afd .bg-soft-info { background-color: #e0f2fe; }
.afd .text-darken-info { color: #0369a1; }
.afd .bg-soft-secondary { background-color: #f1f5f9; }
.afd .text-darken-secondary { color: #475569; }

.afd .custom-table .badge {
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: .45rem;
    padding: .3em .55em;
}

/* Semaforo FD / procesada. */
.afd .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}

.afd .table-row:hover .status-indicator {
    transform: scale(1.25);
}

/* Lo que falta llama la atencion; lo que esta bien no hace ruido. */
.afd .status-indicator.bg-danger {
    animation: afd-pulse 2.4s ease-in-out infinite;
}

.afd .status-readonly {
    font-size: 1.05rem;
    line-height: 1;
}

/* Campos editables dentro de la tabla: discretos hasta que se usan. */
.afd .bg-light-focus {
    background-color: transparent;
    border: 1px solid transparent !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.afd .table-row:hover .bg-light-focus {
    background-color: #fff;
    border-color: var(--afd-line) !important;
}

.afd .bg-light-focus:hover {
    border-color: var(--afd-accent) !important;
}

.afd .bg-light-focus:focus {
    background-color: #fff !important;
    border-color: var(--afd-accent) !important;
    box-shadow: 0 0 0 .18rem var(--afd-ring) !important;
}

.afd .bg-light-focus[readonly] {
    background-color: #f8fafc;
    color: var(--afd-ink-soft);
    cursor: default;
}

.afd .bg-light-focus[readonly]:hover {
    border-color: var(--afd-line) !important;
}

/* --------------------------------------------------------------------------
   Boton de guardar por fila
   -------------------------------------------------------------------------- */

.afd .btn-icon-save {
    background: transparent;
    color: #cbd5e1;
    font-size: 1rem;
    transition: color .18s ease, background-color .18s ease, transform .15s ease;
}

.afd .table-row:hover .btn-icon-save {
    color: var(--afd-accent);
    background: #fff;
}

.afd .btn-icon-save:hover:not(:disabled) {
    color: #fff !important;
    background: var(--afd-accent) !important;
    transform: scale(1.08);
}

.afd .btn-icon-save:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem var(--afd-ring) !important;
}

/* Con cambios pendientes el boton se enciende aunque no se pase el raton. */
.afd .table-row.is-dirty .btn-icon-save {
    color: #fff;
    background: #f97316;
    animation: afd-nudge 1.8s ease-in-out infinite;
}

.afd .table-row.is-dirty .btn-icon-save:hover:not(:disabled) {
    background: #ea580c !important;
    animation: none;
}

.afd .btn-icon-save.is-saved {
    color: #fff !important;
    background: var(--afd-ok) !important;
    animation: none;
}

.afd .btn-icon-save:disabled {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Estados vacios y carga
   -------------------------------------------------------------------------- */

.afd .afd-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--afd-ink-faint);
}

.afd .afd-empty i {
    font-size: 2.25rem;
    display: block;
    margin-bottom: .6rem;
    opacity: .5;
}

.afd .afd-empty p {
    margin: 0;
    font-size: .9rem;
}

/* Velo mientras se busca: la tabla anterior sigue visible pero apagada. */
.afd .afd-busy {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .72);
    font-weight: 600;
    color: var(--afd-accent-strong);
    animation: afd-fade-in .18s ease both;
}

/* Barra de progreso indeterminada sobre la tabla. */
.afd .afd-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 21;
    overflow: hidden;
    background: rgba(15, 23, 42, .06);
}

.afd .afd-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--afd-accent), transparent);
    animation: afd-indeterminate 1.1s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Barras de porcentaje de los resumenes
   -------------------------------------------------------------------------- */

.afd .progress {
    background-color: #eef2f7;
    border-radius: 999px;
    overflow: hidden;
}

.afd .progress-bar {
    border-radius: 999px;
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.afd .transition-all {
    transition: all .2s ease;
}

/* Diferencial de un par "parte / total": cuanto falta para completarlo.
   Fuera del ambito .afd a proposito: lo usa tambien el panel de Direccion. */
.afd-gap {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.afd-gap-falta {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.afd-gap-ok {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

/* Sobre el degradado de la cabecera hace falta un pill translucido. */
.afd-gap-hero {
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: .72rem;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.afd .alert {
    animation: afd-slide-down .22s ease both;
}

/* --------------------------------------------------------------------------
   Animaciones
   -------------------------------------------------------------------------- */

@keyframes afd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes afd-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes afd-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, .02); }
}

@keyframes afd-nudge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

@keyframes afd-saved-flash {
    0%   { background-color: #bbf7d0; }
    100% { background-color: transparent; }
}

@keyframes afd-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* --------------------------------------------------------------------------
   Preferencias del usuario y pantallas pequenas
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .afd *,
    .afd *::before,
    .afd *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media (max-width: 991.98px) {
    .afd .afd-hero { padding: 1.15rem; }
    .afd .afd-search { flex: 1 1 100%; }
    .afd .afd-toolbar { padding: .7rem .8rem; }
}