/* ============================================================
   Standard Compraventas — Detector de Firmas
   Tema visual según Manual de Marca (MARCA Standard.md)
   ============================================================ */

:root {
    /* Rojos de marca */
    --std-rojo:            #C00000;
    --std-rojo-interaccion:#C53030;
    --std-rojo-brillante:  #E00000;
    --std-rojo-oscuro:     #7F1D1D;
    --std-amarillo:        #FFE000;

    /* Superficies */
    --std-fondo:           #f0f2f5;
    --std-tinte-rojo:      #FEF2F2;
    --std-borde-rojo:      #FECACA;
    --std-blanco:          #ffffff;
    --std-input:           #fafbff;

    /* Texto */
    --std-texto:           #1a1a2e;
    --std-texto-2:         #555;
    --std-texto-3:         #888;

    /* Acentos */
    --std-ambar:           #D97706;
    --std-verde:           #06d6a0;
    --std-verde-oscuro:    #028a5e;
    --std-verde-excel:     #1d6f42;

    /* Gradientes */
    --grad-header:  linear-gradient(135deg, #C00000 0%, #E00000 50%, #C00000 100%);
    --grad-acento:  linear-gradient(90deg, #C53030 0%, #D97706 50%, #C53030 100%);
    --grad-rojo:    linear-gradient(135deg, #C53030, #7F1D1D);
    --grad-verde:   linear-gradient(135deg, #06d6a0, #028a5e);
    --grad-ambar:   linear-gradient(135deg, #D97706, #7F1D1D);
    --grad-cta:     linear-gradient(135deg, #C00000, #7F1D1D);

    /* Sombras */
    --sombra-card:   0 2px 8px rgba(0,0,0,0.06);
    --sombra-metric: 0 4px 15px rgba(0,0,0,0.12);
    --sombra-nav:    0 2px 12px rgba(0,0,0,0.25);

    /* Overrides de Bootstrap */
    --bs-primary:       #C00000;
    --bs-primary-rgb:   192, 0, 0;
    --bs-link-color:    #C53030;
    --bs-link-color-rgb: 197, 48, 48;
    --bs-link-hover-color: #7F1D1D;
    --bs-border-radius: 0.5rem;

    /* compatibilidad con reglas previas */
    --primary-color: #C53030;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
body {
    font-family: 'Segoe UI', system-ui, Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--std-fondo);
    color: var(--std-texto);
}

h1, h2, h3, h4, h5, h6 { color: var(--std-texto); }
h4 { font-weight: 700; }

a { text-decoration: none; }

/* ------------------------------------------------------------
   Navbar de marca
   ------------------------------------------------------------ */
.navbar {
    background: var(--grad-header) !important;
    box-shadow: var(--sombra-nav);
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 3px solid transparent;
    border-image: var(--grad-acento) 1;
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.navbar-brand i { color: var(--std-amarillo); }

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    border-radius: 8px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    transition: background 0.15s, color 0.15s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    background: rgba(255,255,255,0.14);
}
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    background: rgba(0,0,0,0.18);
}

.dropdown-menu {
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(26,26,46,0.18), 0 2px 8px rgba(0,0,0,0.08);
    padding: 0.4rem;
    overflow: hidden;
}
.dropdown-item {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.5rem 0.8rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--std-tinte-rojo);
    color: var(--std-rojo-interaccion);
}

/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */
.card {
    border-radius: 14px;
    border: none;
    box-shadow: var(--sombra-card);
}
.card.shadow { box-shadow: var(--sombra-metric) !important; }

.card-header {
    border-radius: 14px 14px 0 0 !important;
    font-weight: 700;
    border-bottom: none;
}

/* Encabezados de card por color de marca */
.card-header.bg-primary,
.card-header.bg-dark {
    background: var(--grad-rojo) !important;
    color: #fff !important;
}
/* Cualquier título dentro de un encabezado de color va en blanco */
.card-header.bg-primary :is(h1,h2,h3,h4,h5,h6,small),
.card-header.bg-dark :is(h1,h2,h3,h4,h5,h6,small),
.card-header.bg-success :is(h1,h2,h3,h4,h5,h6,small),
.card-header.bg-info :is(h1,h2,h3,h4,h5,h6,small) {
    color: #fff !important;
}
.card-header.bg-success {
    background: var(--grad-verde) !important;
    color: #fff !important;
}
.card-header.bg-info {
    background: var(--grad-ambar) !important;
    color: #fff !important;
}
.card-header.bg-light {
    background: var(--std-tinte-rojo) !important;
    color: var(--std-texto) !important;
    border-bottom: 1px solid var(--std-borde-rojo);
}

/* Tarjetas métricas del dashboard */
.card.text-bg-primary {
    background: var(--grad-rojo) !important;
    color: #fff !important;
}
.card.text-bg-success {
    background: var(--grad-verde) !important;
    color: #fff !important;
}
.card.text-bg-warning {
    background: var(--grad-ambar) !important;
    color: #fff !important;
}
.card.text-bg-info {
    background: linear-gradient(135deg, #C00000, #D97706) !important;
    color: #fff !important;
}
.card.text-bg-primary h3,
.card.text-bg-success h3,
.card.text-bg-warning h3,
.card.text-bg-info h3 { font-weight: 800; margin-bottom: 0.2rem; }
.card.text-bg-primary h6,
.card.text-bg-success h6,
.card.text-bg-warning h6,
.card.text-bg-info h6 { font-weight: 600; opacity: 0.92; margin-bottom: 0; }

.card.text-bg-primary i,
.card.text-bg-success i,
.card.text-bg-warning i,
.card.text-bg-info i { opacity: 0.85; }

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.btn {
    border-radius: 8px;
    font-weight: 600;
}
.btn:active { transform: scale(0.985); }

.btn-primary {
    background: var(--grad-cta);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(192,0,0,0.35);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--grad-cta);
    color: #fff;
    filter: brightness(1.07);
}

.btn-info {
    background: var(--std-rojo-interaccion);
    border-color: var(--std-rojo-interaccion);
    color: #fff;
}
.btn-info:hover, .btn-info:focus {
    background: #a52929; border-color: #a52929; color: #fff;
}

.btn-warning {
    background: var(--std-ambar);
    border-color: var(--std-ambar);
    color: #fff;
}
.btn-warning:hover, .btn-warning:focus {
    background: #b5620a; border-color: #b5620a; color: #fff;
}

.btn-danger {
    background: var(--std-rojo-oscuro);
    border-color: var(--std-rojo-oscuro);
    color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
    background: #641616; border-color: #641616; color: #fff;
}

.btn-success {
    background: var(--std-verde-excel);
    border-color: var(--std-verde-excel);
    color: #fff;
}
.btn-success:hover, .btn-success:focus {
    background: #17603a; border-color: #17603a; color: #fff;
}

.btn-secondary {
    background: #6b7280;
    border-color: #6b7280;
    color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus {
    background: #555b63; border-color: #555b63; color: #fff;
}

/* Botones outline */
.btn-outline-success {
    color: var(--std-verde-excel);
    border-color: var(--std-verde-excel);
}
.btn-outline-success:hover {
    background: var(--std-verde-excel); border-color: var(--std-verde-excel); color: #fff;
}
.btn-outline-info {
    color: var(--std-rojo-interaccion);
    border-color: var(--std-rojo-interaccion);
}
.btn-outline-info:hover {
    background: var(--std-rojo-interaccion); border-color: var(--std-rojo-interaccion); color: #fff;
}
.btn-outline-danger {
    color: var(--std-rojo-oscuro);
    border-color: var(--std-rojo-oscuro);
}
.btn-outline-danger:hover {
    background: var(--std-rojo-oscuro); border-color: var(--std-rojo-oscuro); color: #fff;
}

/* ------------------------------------------------------------
   Tablas
   ------------------------------------------------------------ */
.table {
    --bs-table-hover-bg: var(--std-tinte-rojo);
}
.table th {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table td { vertical-align: middle; font-size: 0.875rem; }

.table-dark {
    --bs-table-bg: #C00000;
    --bs-table-color: #ffffff;
    --bs-table-border-color: #a30000;
}
.table-dark th { border-color: #a30000; }

.table > thead { border-bottom: 2px solid var(--std-borde-rojo); }

/* ------------------------------------------------------------
   Formularios
   ------------------------------------------------------------ */
label, .form-label {
    font-weight: 600;
    color: var(--std-texto-2);
    font-size: 0.85rem;
}

.form-control, .form-select {
    border: 1.5px solid #e2e5ea;
    border-radius: 10px;
    background-color: var(--std-input);
    color: var(--std-texto);
    transition: border-color 0.18s, box-shadow 0.18s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--std-rojo-interaccion);
    box-shadow: 0 0 0 3px rgba(197,48,48,0.12);
    background-color: #fff;
}

/* ------------------------------------------------------------
   Badges
   ------------------------------------------------------------ */
.badge {
    font-weight: 700;
    padding: 0.4em 0.7em;
    border-radius: 999px;
    letter-spacing: 0.3px;
}
.badge.bg-secondary {
    background: var(--std-rojo-interaccion) !important;
    color: #fff;
}

/* ------------------------------------------------------------
   Zona drag & drop
   ------------------------------------------------------------ */
.border-dashed {
    border: 2px dashed var(--std-borde-rojo) !important;
    cursor: pointer;
    transition: all 0.25s ease;
    background-color: var(--std-input);
    border-radius: 14px !important;
}
.border-dashed:hover,
.border-dashed.dragover,
.dropzone-hover {
    border-color: var(--std-rojo-interaccion) !important;
    background-color: var(--std-tinte-rojo);
}

/* ------------------------------------------------------------
   Miniaturas de firmas
   ------------------------------------------------------------ */
.img-thumbnail {
    border-radius: 8px;
    border: 1px solid var(--std-borde-rojo);
    transition: transform 0.25s ease;
    background: #fff;
}
.img-thumbnail:hover { transform: scale(1.12); }

/* ------------------------------------------------------------
   Progreso
   ------------------------------------------------------------ */
.progress {
    border-radius: 999px;
    background-color: #eceff3;
    height: 20px;
}
.progress-bar {
    font-size: 0.72rem;
    font-weight: 700;
}

/* ------------------------------------------------------------
   Alertas y modales
   ------------------------------------------------------------ */
.alert { border-radius: 12px; border: none; font-weight: 500; }
.alert-success { background: #e7f8f1; color: #087f5b; }
.alert-danger  { background: var(--std-tinte-rojo); color: #b02a37; }
.alert-warning { background: #fff8e1; color: #856404; }

.modal-content { border: none; border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,0.4); overflow: hidden; }
.modal-header { border-radius: 16px 16px 0 0; border-bottom: none; }
.modal-header:not(.bg-warning) { background: var(--grad-rojo); color: #fff; }
.modal-header:not(.bg-warning) .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.modal-header.bg-warning { background: var(--std-ambar) !important; color: #fff; }

/* ------------------------------------------------------------
   Utilidades varias
   ------------------------------------------------------------ */
.text-danger { color: var(--std-rojo) !important; }
.text-muted  { color: var(--std-texto-3) !important; }

footer { border-top: 1px solid #e2e5ea; }

@media (max-width: 768px) {
    .container { padding-left: 10px; padding-right: 10px; }
    .card-header h6 { font-size: 0.9rem; }
}

/* ============================================================
   Pantalla de carga con animación (1 → 100%)
   ============================================================ */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a0808 0%, #3B0F0F 55%, #1a0808 100%);
}
.loading-overlay.show { display: flex; }

.loader-stage {
    width: min(90vw, 420px);
    text-align: center;
    color: #fff;
    padding: 1rem;
}

.loader-anim {
    position: relative;
    height: 200px;
    margin-bottom: 1.5rem;
}

/* Documento PDF dibujado en CSS */
.pdf-doc {
    position: absolute;
    left: -38px;
    top: -48px;
    width: 76px;
    height: 96px;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.4);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 12px;
}
.pdf-doc::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    border-width: 0 0 20px 20px;
    border-style: solid;
    border-color: transparent transparent #eceff3 #eceff3;
    border-top-right-radius: 9px;
}
.pdf-doc span {
    font: 800 14px 'Segoe UI', sans-serif;
    color: #C00000;
    letter-spacing: 1px;
}

/* Grupo que agrupa PDF + cohete para volar juntos */
.fly-group {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 0;
    height: 0;
}

.loader-shadow {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 84px;
    height: 15px;
    margin-left: -42px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    filter: blur(3px);
}

.rocket { display: none; }

/* ---- Modo LOGIN: PDF saltando ---- */
.loading-overlay.mode-bounce .pdf-doc {
    animation: pdfJump 0.95s ease-in-out infinite;
}
.loading-overlay.mode-bounce .loader-shadow {
    animation: pdfShadow 0.95s ease-in-out infinite;
}
@keyframes pdfJump {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-70px) rotate(6deg); }
}
@keyframes pdfShadow {
    0%, 100% { transform: scaleX(1);   opacity: 0.4; }
    50%      { transform: scaleX(0.55); opacity: 0.12; }
}

/* ---- Modo SUBIDA: PDF saliendo a volar con cohete ---- */
.loading-overlay.mode-rocket .loader-shadow { display: none; }
.loading-overlay.mode-rocket .rocket { display: block; }

.loading-overlay.mode-rocket .fly-group {
    animation: flyDiag 1.7s ease-in infinite;
}
.loading-overlay.mode-rocket .pdf-doc {
    animation: pdfWobble 0.4s ease-in-out infinite alternate;
}
.rocket {
    position: absolute;
    left: -74px;
    top: 20px;
    transform: rotate(45deg);
    transform-origin: 50% 35%;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.rk-flame, .rk-flame2 {
    transform-origin: 24px 50px;
    animation: flameFlick 0.1s infinite alternate;
}
.rk-flame2 { animation-duration: 0.08s; }
@keyframes flyDiag {
    0%   { transform: translate(-140px, 95px);  opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(160px, -200px); opacity: 0; }
}
@keyframes flameFlick {
    from { transform: scaleY(0.65); opacity: 0.8; }
    to   { transform: scaleY(1.3);  opacity: 1; }
}
@keyframes pdfWobble {
    from { transform: rotate(-3deg); }
    to   { transform: rotate(3deg); }
}

/* Texto y barra de progreso del loader */
.loader-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    opacity: 0.95;
}
.loader-progress {
    height: 12px;
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
    overflow: hidden;
}
.loader-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #C53030, #D97706, #C53030);
    border-radius: 999px;
    transition: width 0.25s ease;
}
.loader-percent {
    margin-top: 0.7rem;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 0.5px;
}

@media (prefers-reduced-motion: reduce) {
    .pdf-doc, .fly-group, .flame, .loader-shadow { animation: none !important; }
}

/* ------------------------------------------------------------
   Logo de marca en la navbar (reemplaza el texto del brand)
   ------------------------------------------------------------ */
.navbar-brand.brand-logo {
    padding: 0;
    gap: 0;
    animation: brandIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.brand-logo-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.65);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.brand-logo-chip img {
    height: 30px;
    width: auto;
    display: block;
    border-radius: 4px;
}
/* destello que barre el logo cada pocos segundos */
.brand-logo-chip::after {
    content: "";
    position: absolute;
    top: 0;
    left: -140%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: brandShine 5.5s ease-in-out infinite;
    pointer-events: none;
}
.navbar-brand.brand-logo:hover .brand-logo-chip {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 24px rgba(0,0,0,0.38), 0 0 0 3px rgba(255,224,0,0.55);
}
.navbar-brand.brand-logo:hover .brand-logo-chip::after {
    animation: brandShine 0.9s ease-out;
}
.navbar-brand.brand-logo:active .brand-logo-chip {
    transform: translateY(0) scale(0.99);
}
@keyframes brandShine {
    0%, 72%   { left: -140%; }
    88%, 100% { left: 140%; }
}
@keyframes brandIn {
    from { opacity: 0; transform: translateX(-14px) scale(0.9); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .navbar-brand.brand-logo,
    .brand-logo-chip::after { animation: none; }
    .brand-logo-chip { transition: none; }
}

/* ------------------------------------------------------------
   Firmas detectadas: una fila por página, una columna por rol
   ------------------------------------------------------------ */
.firmas-grid { margin-bottom: 0; }
.firmas-grid thead th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.firmas-grid th.col-pagina   { width: 88px; text-align: center; }
.firmas-grid th.col-acciones { width: 104px; }
.firmas-grid tbody td { vertical-align: middle; padding: 0.55rem 0.5rem; }
.firmas-grid tbody tr + tr { border-top: 2px solid #eceff3; }

.pagina-cell { text-align: center; }
.pagina-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--grad-rojo);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 3px 10px rgba(192,0,0,0.28);
}

.firma-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 1.6rem 0.35rem 0.35rem;
    border-radius: 10px;
    transition: background 0.15s ease;
}
.firma-cell:hover { background: var(--std-tinte-rojo); }
.firma-cell + .firma-cell { margin-top: 0.4rem; border-top: 1px dashed #e6e6e6; }

.firma-thumb {
    flex: 0 0 auto;
    height: 54px;
    width: 112px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--std-borde-rojo);
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.firma-thumb:hover { transform: scale(1.04); box-shadow: 0 4px 12px rgba(0,0,0,0.16); }
.firma-cell-vacia .firma-thumb { opacity: 0.6; filter: grayscale(1); }
.firma-thumb-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1.3rem;
}

.firma-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.firma-info .badge { align-self: flex-start; font-size: 0.66rem; font-weight: 700; }
.firma-nombre {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--std-texto);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.firma-coords { font-size: 0.67rem; color: var(--std-texto-3); }

.btn-editar {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 0.1rem 0.35rem;
    border: none;
    background: transparent;
    color: var(--std-texto-3);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.firma-cell:hover .btn-editar { opacity: 1; }
.btn-editar:hover { color: var(--std-rojo-interaccion); }

.sin-region { font-size: 0.78rem; color: #bbb; font-style: italic; white-space: nowrap; }

/* Nota bajo el porcentaje del loader (avisos de duración) */
.loader-nota {
    margin-top: 0.7rem;
    max-width: 320px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(255,255,255,0.8);
}

/* ============================================================
   Pagina de error (404)
   ============================================================ */
.error-page {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: var(--std-fondo);
}
.error-card {
    background: var(--std-blanco);
    border-radius: 18px;
    padding: 48px 40px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 18px 50px rgba(26, 26, 46, .10);
    border-top: 6px solid var(--std-rojo);
}
.error-badge {
    width: 72px; height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--std-tinte-rojo);
    color: var(--std-rojo);
    font-size: 34px;
}
.error-code {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: var(--std-rojo);
    letter-spacing: -2px;
}
.error-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--std-texto);
    margin: 12px 0 8px;
}
.error-text {
    color: var(--std-texto-2);
    margin-bottom: 26px;
}
.error-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.error-actions .btn-primary {
    background: var(--std-rojo); border-color: var(--std-rojo);
}
.error-actions .btn-primary:hover {
    background: var(--std-rojo-interaccion); border-color: var(--std-rojo-interaccion);
}
.error-brand {
    margin-top: 28px;
    font-size: 12px;
    color: var(--std-texto-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}