:root {
    --notaria-navy: #0b2033;
    --notaria-navy-2: #12334e;
    --notaria-blue: #1f5c7a;
    --notaria-accent: #2d7896;
    --notaria-ice: #edf4f7;
    --notaria-bg: #f4f6f8;
    --notaria-border: #dbe2e8;
    --notaria-text: #1f2933;
    --notaria-muted: #667784;
    --notaria-success: #197447;
    --notaria-warning: #9a6700;
    --notaria-danger: #b42318;
}

html, body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--notaria-bg);
    color: var(--notaria-text);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

a {
    color: var(--notaria-blue);
}

    a:hover {
        color: var(--notaria-navy);
    }


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    background: linear-gradient( 135deg, var(--notaria-navy) 0%, var(--notaria-navy-2) 100% );
    border-bottom: 3px solid rgba(255,255,255,.08);
}

.brand-logo {
    display: block;
    width: min(560px, 78vw);
    height: auto;
}


/* ============================================================
   NAVEGACIÓN
   ============================================================ */

.site-nav {
    background: rgba(6, 24, 38, .52);
    border-top: 1px solid rgba(255,255,255,.08);
}

    .site-nav .nav-link {
        color: rgba(255,255,255,.86) !important;
        font-size: .92rem;
        font-weight: 600;
        padding-top: .85rem;
        padding-bottom: .85rem;
    }

        .site-nav .nav-link:hover,
        .site-nav .nav-link:focus {
            color: #fff !important;
        }


/* ============================================================
   CONTENIDO
   ============================================================ */

.site-main {
    min-height: calc(100vh - 370px);
}

.page-shell {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}


/* ============================================================
   TARJETAS
   ============================================================ */

.portal-card {
    border: 1px solid rgba(11,32,51,.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(11, 32, 51, .08);
}

.portal-card-sm {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.portal-card-md {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.portal-card-lg {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.portal-card .card-body {
    padding: clamp(1.4rem, 3vw, 2.35rem);
}


/* ============================================================
   TEXTOS
   ============================================================ */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .65rem;
    color: var(--notaria-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.page-title {
    margin-bottom: .45rem;
    color: var(--notaria-navy);
    font-weight: 750;
    letter-spacing: -.025em;
}

.page-lead {
    margin-bottom: 0;
    color: var(--notaria-muted);
    line-height: 1.6;
}


/* ============================================================
   FORMULARIOS
   ============================================================ */

.form-label {
    color: var(--notaria-navy);
    font-size: .9rem;
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 46px;
    border-color: #ccd7df;
    border-radius: 10px;
}

textarea.form-control {
    min-height: auto;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--notaria-accent);
    box-shadow: 0 0 0 .2rem rgba(45,120,150,.14);
}


/* ============================================================
   BOTONES
   ============================================================ */

.btn-notaria {
    color: #fff;
    background: var(--notaria-navy);
    border-color: var(--notaria-navy);
    border-radius: 10px;
    font-weight: 650;
    padding: .7rem 1.15rem;
}

    .btn-notaria:hover,
    .btn-notaria:focus {
        color: #fff;
        background: var(--notaria-navy-2);
        border-color: var(--notaria-navy-2);
    }

.btn-outline-notaria {
    color: var(--notaria-navy);
    background: #fff;
    border: 1px solid #b9c7d1;
    border-radius: 10px;
    font-weight: 650;
    padding: .7rem 1.15rem;
}

    .btn-outline-notaria:hover {
        color: #fff;
        background: var(--notaria-navy);
        border-color: var(--notaria-navy);
    }


/* ============================================================
   TARJETAS DE ACCIÓN
   ============================================================ */

.action-tile {
    display: block;
    height: 100%;
    padding: 1.35rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--notaria-border);
    border-radius: 14px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .action-tile:hover {
        color: inherit;
        transform: translateY(-2px);
        border-color: #a9bfcc;
        box-shadow: 0 12px 25px rgba(11,32,51,.08);
    }

.action-tile-title {
    color: var(--notaria-navy);
    font-weight: 750;
    margin-bottom: .35rem;
}

.action-tile-text {
    color: var(--notaria-muted);
    font-size: .92rem;
    margin-bottom: 0;
}


/* ============================================================
   ESTADOS
   ============================================================ */

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .35rem .7rem;
    background: var(--notaria-ice);
    color: var(--notaria-navy);
    font-size: .82rem;
    font-weight: 700;
}


/* ============================================================
   MENSAJES
   ============================================================ */

.alert-soft {
    padding: 1rem 1.1rem;
    border: 1px solid #d6e5eb;
    border-radius: 12px;
    background: #f1f7f9;
    color: #284b5e;
}

.message-label {
    display: block;
    margin-top: 1rem;
    font-size: .93rem;
    font-weight: 600;
}


/* ============================================================
   TABLAS
   ============================================================ */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--notaria-border);
    border-radius: 12px;
}

.table-notaria {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

    .table-notaria th {
        padding: .85rem .8rem;
        background: #eef3f6;
        color: var(--notaria-navy);
        font-size: .82rem;
        font-weight: 750;
        text-align: left;
        white-space: nowrap;
    }

    .table-notaria td {
        padding: .85rem .8rem;
        border-top: 1px solid #e5eaee;
        vertical-align: middle;
        font-size: .9rem;
    }

    .table-notaria tr:hover td {
        background: #fbfcfd;
    }

    .table-notaria input[type="submit"],
    .table-notaria input[type="button"] {
        margin: .15rem .2rem .15rem 0;
        padding: .42rem .65rem;
        border: 1px solid #b9c7d1;
        border-radius: 8px;
        background: #fff;
        color: var(--notaria-navy);
        font-weight: 650;
    }

        .table-notaria input[type="submit"]:hover,
        .table-notaria input[type="button"]:hover {
            background: var(--notaria-navy);
            color: #fff;
        }


/* ============================================================
   DETALLES
   ============================================================ */

.detail-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: .65rem 1rem;
    padding: 1rem 0;
}

.detail-label {
    color: var(--notaria-muted);
    font-size: .88rem;
    font-weight: 700;
}

.detail-value {
    color: var(--notaria-text);
    overflow-wrap: anywhere;
}


/* ============================================================
   HERO
   ============================================================ */

.hero-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 22px;
    background: linear-gradient( 135deg, #fff 0%, #edf4f7 100% );
    border: 1px solid #dbe6eb;
    box-shadow: 0 22px 55px rgba(11,32,51,.08);
}

    .hero-panel::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        right: -90px;
        top: -120px;
        border-radius: 50%;
        background: rgba(45,120,150,.09);
    }

.hero-title {
    color: var(--notaria-navy);
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.06;
    font-weight: 780;
    letter-spacing: -.045em;
}

.hero-copy {
   /* max-width: 720px;*/
    color: var(--notaria-muted);
    font-size: 1.06rem;
    line-height: 1.7;
}

.promise-strip {
    border-left: 4px solid var(--notaria-accent);
    background: #f2f7f9;
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.1rem;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    background: #071724;
    color: rgba(255,255,255,.78);
}

    .site-footer h6 {
        color: #fff;
        font-weight: 750;
    }

    .site-footer a {
        color: rgba(255,255,255,.82);
        text-decoration: none;
    }

        .site-footer a:hover {
            color: #fff;
        }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.11);
    color: rgba(255,255,255,.55);
    font-size: .84rem;
}


/* ============================================================
   CAMPO CÓDIGO
   ============================================================ */

.code-input {
    text-align: center;
    font-size: 1.65rem;
    letter-spacing: .45rem;
    font-weight: 750;
}


/* ============================================================
   PANEL INTERNO
   ============================================================ */

.internal-badge {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: #e9eef2;
    color: #536572;
    font-size: .75rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .08em;
}


/* ============================================================
   RESPONSIVE GENERAL
   ============================================================ */

@media (max-width: 767.98px) {

    .brand-logo {
        width: min(430px, 92vw);
    }

    .page-shell {
        padding-top: 1.25rem;
        padding-bottom: 2rem;
    }

    .portal-card .card-body {
        padding: 1.25rem;
    }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .detail-value {
        margin-bottom: .65rem;
    }
}


/* ============================================================
   ESTRUCTURA PARA FONDO AMBIENTAL
   ============================================================ */

.site-frame {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient( circle at 12% 20%, rgba(45,120,150,.055), transparent 28% ), radial-gradient( circle at 85% 62%, rgba(11,32,51,.045), transparent 30% );
}


/* ============================================================
   ROMBOS ANIMADOS
   ============================================================ */

/*
    Se mantiene exactamente la estructura existente:

    ambient-bg
        ambient-diamond diamond-1
        ambient-diamond diamond-2
        ...
*/


.ambient-diamond {
    position: absolute;
    display: block;
    border: 1px solid rgba(45,120,150,.20);
    background: rgba(255,255,255,.18);
    box-shadow: 0 0 22px rgba(45,120,150,.03);
    transform: rotate(45deg);
    opacity: .38;
    animation-name: diamondFloatVisible;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    will-change: transform, opacity;
}


/* ============================================================
   ROMBO 1
   Superior izquierdo
   ============================================================ */

.diamond-1 {
    left: 5%;
    top: 20%;
    width: 78px;
    height: 78px;
    animation-duration: 11s;
    animation-delay: -2s;
}


/* ============================================================
   ROMBO 2
   Inferior izquierdo
   ============================================================ */

.diamond-2 {
    left: 20%;
    top: 72%;
    width: 38px;
    height: 38px;
    animation-duration: 14s;
    animation-delay: -7s;
}


/* ============================================================
   ROMBO 3
   Superior derecho
   ============================================================ */

.diamond-3 {
    right: 8%;
    top: 21%;
    width: 64px;
    height: 64px;
    animation-duration: 13s;
    animation-delay: -4s;
}


/* ============================================================
   ROMBO 4
   Inferior derecho
   ============================================================ */

.diamond-4 {
    right: 24%;
    top: 72%;
    width: 92px;
    height: 92px;
    animation-duration: 16s;
    animation-delay: -10s;
}


/* ============================================================
   ROMBO 5
   Superior central
   ============================================================ */

.diamond-5 {
    left: 48%;
    top: 17%;
    width: 30px;
    height: 30px;
    animation-duration: 10s;
    animation-delay: -5s;
}


/* ============================================================
   ROMBO 6
   Centro derecho
   ============================================================ */

.diamond-6 {
    left: 58%;
    top: 58%;
    width: 48px;
    height: 48px;
    animation-duration: 12s;
    animation-delay: -8s;
}


/* ============================================================
   ANIMACIÓN MÁS VISIBLE
   ============================================================ */

@keyframes diamondFloatVisible {

    0% {
        transform: translate3d( 0, 0, 0 ) rotate(45deg);
        opacity: .22;
    }


    20% {
        transform: translate3d( 18px, -18px, 0 ) rotate(55deg);
        opacity: .36;
    }


    40% {
        transform: translate3d( 34px, -40px, 0 ) rotate(68deg);
        opacity: .50;
    }


    60% {
        transform: translate3d( 12px, -62px, 0 ) rotate(82deg);
        opacity: .58;
    }


    80% {
        transform: translate3d( -28px, -22px, 0 ) rotate(98deg);
        opacity: .42;
    }


    100% {
        transform: translate3d( -42px, 34px, 0 ) rotate(115deg);
        opacity: .25;
    }
}


/* ============================================================
   ACCESO FUNCIONARIOS
   ============================================================ */

.staff-access {
    color: rgba(255,255,255,.42) !important;
    font-size: .76rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

    .staff-access:hover,
    .staff-access:focus {
        color: rgba(255,255,255,.82) !important;
    }


/* ============================================================
   BOTONES ADICIONALES
   ============================================================ */

.btn-soft-warning {
    color: #765300;
    background: #fff9e8;
    border: 1px solid #ead596;
    border-radius: 10px;
    font-weight: 650;
    padding: .7rem 1.15rem;
}

    .btn-soft-warning:hover,
    .btn-soft-warning:focus {
        color: #5e4300;
        background: #fff3ca;
        border-color: #dabb61;
    }


.btn-soft-success {
    color: #145f3b;
    background: #edf8f2;
    border: 1px solid #acd6bf;
    border-radius: 10px;
    font-weight: 650;
    padding: .7rem 1.15rem;
}

    .btn-soft-success:hover,
    .btn-soft-success:focus {
        color: #0e4c2e;
        background: #dff2e7;
        border-color: #83c29f;
    }


/* ============================================================
   FORZAR MOVIMIENTO DE ROMBOS
   Agregar al FINAL de SubeTuDocto.css
   ============================================================ */

.ambient-bg .ambient-diamond {
    animation: romboMovimiento 8s ease-in-out infinite alternate !important;
    transform-origin: center center;
    will-change: transform, opacity;
    backface-visibility: hidden;
}


/* Cada rombo con velocidad distinta */

.ambient-bg .diamond-1 {
    animation-duration: 7s !important;
    animation-delay: -1s !important;
}


.ambient-bg .diamond-2 {
    animation-duration: 9s !important;
    animation-delay: -3s !important;
}


.ambient-bg .diamond-3 {
    animation-duration: 11s !important;
    animation-delay: -5s !important;
}


.ambient-bg .diamond-4 {
    animation-duration: 8s !important;
    animation-delay: -2s !important;
}


.ambient-bg .diamond-5 {
    animation-duration: 10s !important;
    animation-delay: -6s !important;
}


.ambient-bg .diamond-6 {
    animation-duration: 12s !important;
    animation-delay: -4s !important;
}

.diamond-7 {
    left: 11%;
    top: 46%;
    width: 52px;
    height: 52px;
    animation-duration: 9s !important;
    animation-delay: -4s !important;
}

.diamond-8 {
    right: 13%;
    top: 48%;
    width: 44px;
    height: 44px;
    animation-duration: 13s !important;
    animation-delay: -7s !important;
}


.diamond-9 {
    left: 43%;
    top: 76%;
    width: 62px;
    height: 62px;
    animation-duration: 11s !important;
    animation-delay: -9s !important;
}


@keyframes romboMovimiento {

    0% {
        transform: translate(0px, 0px) rotate(45deg);
        opacity: 0.22;
    }


    25% {
        transform: translate(30px, -25px) rotate(70deg);
        opacity: 0.45;
    }


    50% {
        transform: translate(55px, -55px) rotate(100deg);
        opacity: 0.60;
    }


    75% {
        transform: translate(-20px, -75px) rotate(135deg);
        opacity: 0.42;
    }


    100% {
        transform: translate(-50px, 35px) rotate(175deg);
        opacity: 0.25;
    }
}

/* ============================================================
   ESTADOS - COLORES PASTEL
   ============================================================ */

.estado-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}


/* RECIBIDA */

.estado-recibida {
    background-color: #eaf3fb;
    color: #2f5f85;
    border-color: #cbdff0;
}


/* EN PREPARACIÓN */

.estado-preparacion {
    background-color: #fff5db;
    color: #7a5a14;
    border-color: #eedca9;
}


/* LISTA PARA FIRMA */

.estado-lista {
    background-color: #e6f5ec;
    color: #2e6846;
    border-color: #c3dfcf;
}


/* OBSERVADA */

.estado-observada {
    background-color: #fdecec;
    color: #8a4343;
    border-color: #efcaca;
}


/* CERRADA */

.estado-cerrada {
    background-color: #edf1ef;
    color: #4d6256;
    border-color: #d5ded9;
}