/* ============================================================
   Cuadrare · paleta de marca
   ============================================================ */
:root {
    /* Paleta CUADRARE — Jet Black / High Tech / Balance (mint) / Platinum.
       Se conservan los nombres --brand-* heredados para no romper referencias;
       sus VALORES son ahora los de la marca, con contraste legible en tema claro. */

    /* Oscuros (texto, superficies oscuras, botones primarios) */
    --brand-navy:        #0E191D;   /* High Tech — primario oscuro */
    --brand-navy-deep:   #0B1011;   /* Jet Black */

    /* Acento mint (Balance) y su versión legible como texto/enlace */
    --brand-mint:        #96E2D3;   /* Balance — acento de marca (fondos/píldoras/activos) */
    --brand-mint-soft:   #C2EFE6;
    --brand-blue:        #1C8C7B;   /* teal legible (mint oscurecido) para enlaces/texto acento */
    --brand-blue-soft:   #2BAE9A;

    /* Claros (fondos, texto secundario, líneas) */
    --brand-bg:          #EDF1F0;   /* fondo de página (platino frío) */
    --brand-bg-soft:     #E0EAE9;   /* Platinum */
    --brand-ink:         #0E191D;   /* texto principal */
    --brand-muted:       #69787A;   /* texto secundario */
    --brand-line:        #D7E0DE;   /* bordes/divisores */

    /* Superficies oscuras de marca (hero, scan, badges con icono, avatares) */
    --brand-gradient:    linear-gradient(135deg, #0B1011 0%, #16363D 100%);
    --brand-gradient-soft: linear-gradient(135deg, #E6EFEE 0%, #D5E5E2 100%);
    --brand-shadow:      0 8px 24px rgba(14, 25, 29, .12);
}

/* Puente con las variables de Bootstrap: enlaces, focus, checks, etc. heredan la marca */
:root {
    --bs-primary:            #0E191D;
    --bs-primary-rgb:        14, 25, 29;
    --bs-link-color:         #1C8C7B;
    --bs-link-color-rgb:     28, 140, 123;
    --bs-link-hover-color:   #14705F;
    --bs-body-font-family:   "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 .2rem rgba(28, 140, 123, .18);
}
.form-check-input:checked {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(28, 140, 123, .18); }

html, body { height: 100%; }
body {
    background: var(--brand-bg);
    color: var(--brand-ink);
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    letter-spacing: .005em;
}

/* Acento serif itálico de marca (Times New Roman Italic) — taglines y subtítulos */
.brand-italic, .text-accent {
    font-family: "Times New Roman", Times, Georgia, serif;
    font-style: italic;
}

/* Override Bootstrap primario para alinearlo con la marca */
.btn-primary {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-navy-deep);
    border-color: var(--brand-navy-deep);
}
.btn-outline-primary {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}
.text-primary { color: var(--brand-navy) !important; }
.bg-primary { background-color: var(--brand-navy) !important; }
.link-primary, a.link-primary { color: var(--brand-blue); }
.nav-pills .nav-link.active { background-color: var(--brand-mint); color: var(--brand-navy-deep); }

/* Botón/píldora de acento mint (CTA secundario tipo "escanear documento") */
.btn-mint {
    background-color: var(--brand-mint);
    border-color: var(--brand-mint);
    color: var(--brand-navy-deep);
    font-weight: 600;
}
.btn-mint:hover, .btn-mint:focus {
    background-color: var(--brand-mint-soft);
    border-color: var(--brand-mint-soft);
    color: var(--brand-navy-deep);
}
.btn-outline-mint {
    color: var(--brand-blue);
    border-color: var(--brand-mint);
    background: transparent;
}
.btn-outline-mint:hover {
    background-color: var(--brand-mint);
    color: var(--brand-navy-deep);
}
/* Píldora/etiqueta mint reutilizable (badges de sección de los mockups) */
.pill-mint {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--brand-mint);
    color: var(--brand-navy-deep);
    border-radius: 999px;
    padding: .25rem .8rem;
    font-size: .8rem; font-weight: 600;
}
.text-accent-color { color: var(--brand-blue) !important; }

/* Marca: wordmark de texto para sitios donde no usamos la imagen */
.brand-wordmark {
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-navy);
}
.brand-wordmark--on-dark { color: var(--brand-bg-soft); }
.brand-wordmark--accent { color: var(--brand-blue); }

/* Logo en imagen (login + auth screens) */
.brand-logo-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: var(--brand-shadow);
}

/* ----- Auth screens secundarias (forgot/reset/verify/invite) ----- */
.login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 0% 0%, rgba(150, 226, 211, .22), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(14, 25, 29, .10), transparent 45%),
        var(--brand-bg);
    padding: 2rem 1rem;
}
.login-card {
    background: #fff;
    border-radius: 18px;
    padding: 2.25rem;
    max-width: 440px; width: 100%;
    box-shadow: var(--brand-shadow);
    border: 1px solid var(--brand-line);
}
.login-logo-banner {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    margin: 0 auto 1.25rem;
}
.login-logo-banner img { width: 44px; height: 44px; }
.login-logo-banner .brand-wordmark { font-size: 1.4rem; }
.login-logo {
    width: 64px; height: 64px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px; font-size: 1.8rem; color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 6px 18px rgba(27, 58, 92, .25);
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.doc-preview {
    max-width: 100%;
    max-height: 80vh;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    background: white;
}

/* ---------- Visor de documentos ---------- */
.viewer-root {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.viewer-root.card { overflow: hidden; }
.viewer-root.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: #111;
    border-radius: 0;
    box-shadow: none;
}

.viewer-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .65rem;
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid #dee2e6;
    flex-wrap: wrap;
}
.viewer-root.is-fullscreen .viewer-toolbar {
    background: rgba(25,25,28,.92);
    color: #fff;
    border-bottom-color: #333;
}
.viewer-root.is-fullscreen .viewer-toolbar .btn-outline-secondary {
    color: #e6e6e6;
    border-color: #4a4a4a;
}
.viewer-root.is-fullscreen .viewer-toolbar .btn-outline-secondary:hover {
    background: #2a2a2d;
    color: #fff;
}

.viewer-pane {
    position: relative;
    overflow: auto;
    max-height: 78vh;
    background: #f3f4f7;
    flex: 1 1 auto;
    min-height: 320px;
    cursor: default;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    touch-action: pan-x pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    /* Scroll oculto pero funcional: el pane sigue siendo scrollable, sólo no muestra
       las barras nativas (queda más limpio mientras se panea con el ratón). */
    scrollbar-width: none;
}
.viewer-pane::-webkit-scrollbar { display: none; }
.viewer-pane.is-pannable { cursor: grab; }
.viewer-pane.is-grabbing { cursor: grabbing; }
.viewer-pane.is-grabbing * { user-select: none !important; }

.viewer-root.is-fullscreen .viewer-pane {
    max-height: none;
    height: 100%;
    background: #111;
}

.viewer-img {
    display: block;
    /* auto margins en flex: centran cuando la imagen cabe; se colapsan a 0
       cuando la imagen es más grande que el pane, pegándola al inicio para
       que el scroll pueda recorrerla completa sin que sobresalga del marco. */
    margin: auto;
    max-width: none;
    height: auto;
    flex: 0 0 auto;
    pointer-events: none;        /* los eventos los captura el pane para el drag-pan */
    -webkit-user-drag: none;
    user-drag: none;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.viewer-pdf {
    width: 100%;
    height: 72vh;
    flex: 1 1 auto;
    border: 0;
    background: #fff;
    display: block;
}
.viewer-root.is-fullscreen .viewer-pdf { height: 100%; }

/* Fallback de PDF en móvil: iOS Safari/Android Chrome no rinden PDFs en <iframe>.
   En lugar de un cuadro en blanco, mostramos una tarjeta clicable con botones para
   abrir el PDF en el visor nativo del sistema o descargarlo. */
.viewer-pdf-mobile {
    flex: 1 1 auto;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2rem 1rem;
    background: #fff;
    text-align: center;
}
.viewer-pdf-mobile i.bi-file-earmark-pdf {
    font-size: 4rem;
    color: #d62828;
    line-height: 1;
}
.viewer-pdf-mobile-label {
    color: #6c757d;
    font-size: .9rem;
    word-break: break-all;
    max-width: 90%;
}
.viewer-pdf-mobile .btn { min-width: 12rem; }

.viewer-zoom-label {
    min-width: 3.2em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.field-missing { background-color: #fff3cd !important; }

.navbar-brand-logo {
    font-weight: 600;
    letter-spacing: .4px;
}