/* ============================================================
   Standard Compraventas — Detector de Firmas
   Capa de pulido (ADITIVA). No cambia la estética: reutiliza las
   variables de marca de style.css y solo añade movimiento,
   jerarquía visual y detalles de interacción.
   Cargar SIEMPRE después de style.css.
   ============================================================ */

:root {
    --ui-nav-h: 58px;                        /* alto de la navbar sticky */
    --ui-ease:  cubic-bezier(.22,.61,.36,1); /* salida suave, sin rebote */
    --sombra-hover: 0 10px 28px rgba(26,26,46,0.13), 0 2px 6px rgba(0,0,0,0.06);
}

/* ------------------------------------------------------------
   1. Micro-interacciones
   ------------------------------------------------------------ */

/* Las cards se levantan apenas al pasar el cursor. */
.card {
    transition: transform 0.22s var(--ui-ease), box-shadow 0.22s var(--ui-ease);
}
.container > .card:hover,
.container > .row .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-hover);
}
/* Nunca dentro de un modal ni en la tarjeta del login. */
.modal .card:hover,
.login-page .card:hover { transform: none; }

/* Botones: se elevan al hover y se hunden al hacer clic. */
.btn {
    transition: transform 0.14s var(--ui-ease), box-shadow 0.14s var(--ui-ease), filter 0.14s;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn-primary:hover { box-shadow: 0 7px 20px rgba(192,0,0,0.42); }

/* Brillo diagonal que cruza las tarjetas métricas del dashboard. */
.card.text-bg-primary,
.card.text-bg-success,
.card.text-bg-warning,
.card.text-bg-info { position: relative; overflow: hidden; }

.card.text-bg-primary::after,
.card.text-bg-success::after,
.card.text-bg-warning::after,
.card.text-bg-info::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-18deg);
    transition: left 0.65s var(--ui-ease);
    pointer-events: none;
}
.card.text-bg-primary:hover::after,
.card.text-bg-success:hover::after,
.card.text-bg-warning:hover::after,
.card.text-bg-info:hover::after { left: 115%; }

/* El icono grande de la métrica respira al pasar por encima. */
.card .card-body i.fs-1 { transition: transform 0.3s var(--ui-ease), opacity 0.3s; }
.card.text-bg-primary:hover i.fs-1,
.card.text-bg-success:hover i.fs-1,
.card.text-bg-warning:hover i.fs-1,
.card.text-bg-info:hover i.fs-1 {
    transform: scale(1.08) rotate(-4deg);
    opacity: 1;
}

/* Número de página: sella con un golpe suave. */
.pagina-num { transition: transform 0.18s var(--ui-ease), box-shadow 0.18s var(--ui-ease); }
tr:hover .pagina-num {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(192,0,0,0.36);
}

/* ------------------------------------------------------------
   2. Tablas: filas legibles de un vistazo
   ------------------------------------------------------------ */

/* Filo rojo en la fila activa: da foco sin recolorear la fila. */
.table-hover > tbody > tr {
    transition: box-shadow 0.15s var(--ui-ease);
}
.table-hover > tbody > tr:hover {
    box-shadow: inset 3px 0 0 0 var(--std-rojo-interaccion);
}

/* Encabezado fijo al hacer scroll en tablas largas (solo escritorio).
   La clase .ui-fit la pone el JS únicamente cuando la tabla cabe sin
   scroll horizontal; si no cabe, se conserva el contenedor con scroll
   y no se activa el sticky (dentro de un overflow no funcionaría). */
@media (min-width: 992px) {
    .card-body > .table-responsive.ui-fit { overflow: visible; }

    .card-body > .table-responsive.ui-fit table.table > thead > tr > th {
        position: sticky;
        top: var(--ui-nav-h);
        z-index: 5;
        background-color: var(--std-blanco);
    }
    .card-body > .table-responsive.ui-fit table.table > thead.table-dark > tr > th {
        background-color: var(--std-rojo);
    }
}

/* Estado vacío: menos crudo que una celda con texto suelto. */
.tabla-vacia {
    padding: 2.2rem 1rem;
    color: var(--std-texto-3);
}
.tabla-vacia i { font-size: 2.2rem; opacity: 0.35; display: block; margin-bottom: 0.5rem; }

/* ------------------------------------------------------------
   3. Firmas: que la ausencia salte a la vista
   ------------------------------------------------------------ */

/* Una firma faltante se marca con filo rojo y tinte muy leve. */
.firma-cell-vacia {
    box-shadow: inset 3px 0 0 0 var(--std-borde-rojo);
    background: linear-gradient(90deg, rgba(254,242,242,0.85), rgba(254,242,242,0));
}
.firma-cell-vacia:hover { background: var(--std-tinte-rojo); }

/* Mientras carga el recorte, un destello ocupa su lugar (sin salto de layout). */
.firma-thumb {
    background-image: linear-gradient(100deg, #f3f4f6 30%, #fafafa 50%, #f3f4f6 70%);
    background-size: 300% 100%;
    animation: uiShimmer 1.3s linear infinite;
}
.firma-thumb.ui-lista { animation: none; background-image: none; }
@keyframes uiShimmer {
    from { background-position: 150% 0; }
    to   { background-position: -150% 0; }
}

/* El lápiz de editar entra deslizándose en vez de aparecer de golpe. */
.btn-editar {
    transform: translateX(4px);
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s var(--ui-ease);
}
.firma-cell:hover .btn-editar { transform: translateX(0); }

/* Fila oculta cuando el filtro "solo faltantes" está activo. */
.firmas-grid tbody tr.ui-oculta { display: none; }

/* Control de filtro inyectado en la cabecera de la card de firmas. */
.ui-filtro-firmas {
    display: inline-flex;
    gap: 0.25rem;
    background: rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 0.15rem;
}
.ui-filtro-firmas button {
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.85);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    transition: background 0.18s, color 0.18s;
}
.ui-filtro-firmas button:hover { color: #fff; background: rgba(255,255,255,0.14); }
.ui-filtro-firmas button.activo { background: #fff; color: var(--std-rojo); }

/* ------------------------------------------------------------
   4. Entrada de la página (progresiva: sin JS no pasa nada)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .ui-rv {
        opacity: 0;
        transform: translateY(14px);
    }
    .ui-rv.ui-visible {
        opacity: 1;
        transform: none;
        transition: opacity 0.5s var(--ui-ease), transform 0.5s var(--ui-ease);
    }

    .alert { animation: uiAlertIn 0.35s var(--ui-ease) both; }
    @keyframes uiAlertIn {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: none; }
    }

    .modal.fade .modal-dialog {
        transform: translateY(12px) scale(0.98);
        transition: transform 0.25s var(--ui-ease), opacity 0.25s;
    }
    .modal.show .modal-dialog { transform: none; }
}

/* ------------------------------------------------------------
   5. Accesibilidad y detalles de sistema
   ------------------------------------------------------------ */

/* Anillo de foco visible y de marca (solo para teclado). */
.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--std-rojo-interaccion);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(197,48,48,0.16);
}

/* Barra de desplazamiento discreta en tono de marca. */
* { scrollbar-width: thin; scrollbar-color: #dcc2c2 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #dcc2c2;
    border: 2px solid var(--std-fondo);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--std-rojo-interaccion); }

/* Selección de texto en tinte de marca. */
::selection { background: rgba(197,48,48,0.18); color: var(--std-texto); }

/* Enlaces con subrayado que crece desde la izquierda. */
.card-body a:not(.btn):not(.dropdown-item) {
    background-image: linear-gradient(var(--std-rojo-interaccion), var(--std-rojo-interaccion));
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.25s var(--ui-ease);
}
.card-body a:not(.btn):not(.dropdown-item):hover { background-size: 100% 1.5px; }

/* ------------------------------------------------------------
   6. Volver arriba
   ------------------------------------------------------------ */
.ui-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--grad-cta);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 6px 20px rgba(192,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s, transform 0.25s var(--ui-ease), visibility 0.25s;
    z-index: 1040;
}
.ui-top.visible { opacity: 1; visibility: visible; transform: none; }
.ui-top:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* ------------------------------------------------------------
   7. Aviso flotante (copiar al portapapeles, etc.)
   ------------------------------------------------------------ */
.ui-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 16px);
    background: var(--std-texto);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s var(--ui-ease);
    z-index: 1080;
}
.ui-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* Celdas copiables de "Contratos por página". */
.ui-copiable { cursor: copy; border-radius: 6px; transition: background 0.15s; }
.ui-copiable:hover { background: var(--std-tinte-rojo); }

/* ------------------------------------------------------------
   8. Sin animación si el sistema lo pide
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .card:hover, .btn:hover, tr:hover .pagina-num, .ui-top:hover { transform: none; }
    .firma-thumb { animation: none; background-image: none; }
    .card.text-bg-primary::after, .card.text-bg-success::after,
    .card.text-bg-warning::after, .card.text-bg-info::after { display: none; }
}