/*
 * Pantallas de carga y estados vacíos unificados de Toscana.
 *
 * ESTADO VACÍO (sin datos): logo de Toscana en marca de agua con el texto encima.
 * Markup: helper_empty_state() en PHP o tkEmptyHtml() en JS.
 */

.tk-empty-state {
    display: grid;
    place-items: center;
    padding: 16px;
    text-align: center;
}

/* Logo y texto ocupan la misma celda: el texto queda sobre la marca de agua */
.tk-empty-state > * {
    grid-area: 1 / 1;
}

.tk-empty-state-mark {
    width: 180px;
    max-width: 70%;
    height: auto;
    opacity: .1;
    pointer-events: none;
    user-select: none;
}

.tk-empty-state-body {
    position: relative;
    max-width: 520px;
    padding: 0 8px;
}

.tk-empty-state-title {
    font-size: 1.6rem;
    font-weight: 300;
    color: #666;
    line-height: 1.3;
}

.tk-empty-state-subtitle {
    font-size: .9rem;
    color: #6c7a82;
    margin-top: 6px;
}

.tk-empty-state-subtitle:empty {
    display: none;
}

.tk-empty-state-extra {
    margin-top: 12px;
}

.tk-empty-state-extra:empty {
    display: none;
}

/* Variante compacta (widgets, columnas y modales angostos) */
.tk-empty-state-sm .tk-empty-state-mark {
    width: 120px;
}

.tk-empty-state-sm .tk-empty-state-title {
    font-size: 1.2rem;
}

.tk-empty-state-sm .tk-empty-state-subtitle {
    font-size: .8rem;
}

/*
 * PANTALLA DE CARGA unificada de Toscana.
 * Marca (ícono + anillo que gira) con título y subtítulo opcionales.
 * Markup: helper_loader() en PHP o tkLoaderHtml() en JS (templates/head.php).
 */

.tk-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: #1a343d;
}

.tk-loader-mark {
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tk-loader-mark img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.tk-loader-mark::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #e3e8eb;
    border-top-color: #1a343d;
    animation: tkLoaderSpin .9s linear infinite;
}

.tk-loader-title {
    font-size: 1rem;
    font-weight: 700;
}

.tk-loader-subtitle {
    font-size: .85rem;
    color: #6c7a82;
    margin-top: 2px;
}

.tk-loader-title:empty,
.tk-loader-subtitle:empty {
    display: none;
}

/* Variante compacta (tablas y secciones pequeñas) */
.tk-loader-sm {
    gap: 10px;
}

.tk-loader-sm .tk-loader-mark {
    width: 56px;
    height: 56px;
}

.tk-loader-sm .tk-loader-mark img {
    width: 28px;
    height: 28px;
}

.tk-loader-sm .tk-loader-title {
    font-size: .9rem;
}

@keyframes tkLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tk-loader-mark::before {
        animation-duration: 2.5s;
    }
}

/* ===== Carga global (redValidator): pantalla completa sobre todo, incluidos los modales ===== */
.loader2 {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .45);
}

.loader2 .tk-loader {
    min-width: min(320px, 100%);
    max-width: 420px;
    padding: 28px 32px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

/* ===== DataTables: "Procesando..." cubre toda la tabla, por encima de encabezados y filtros ===== */
div.dataTables_wrapper {
    position: relative;
}

div.dataTables_wrapper div.dataTables_processing {
    position: absolute;
    inset: 0;
    z-index: 50;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(255, 255, 255, .85);
    font-size: inherit;
}

div.dataTables_wrapper div.dataTables_processing > .tk-loader {
    position: absolute;
    /* En tablas largas queda cerca del encabezado en vez de perderse en la mitad */
    top: min(50%, 200px);
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
}