/* ============================================================
   OrtaLegal · Visual v0.3
   Capa estética sobre el MVP técnico.
   Paleta basada en azul jurídico, oro suave y fondos cálidos.
   ============================================================ */

:root{
    --ol-navy:#0b2845;
    --ol-navy-2:#12395d;
    --ol-navy-3:#071a2d;
    --ol-gold:#bd9250;
    --ol-gold-2:#d7bd7c;
    --ol-gold-soft:#f5ead7;
    --ol-cream:#f7f3ec;
    --ol-paper:#fffdf8;
    --ol-white:#ffffff;
    --ol-ink:#102033;
    --ol-muted:#6f7886;
    --ol-line:#e8ded0;
    --ol-line-2:#efe8dd;
    --ol-green:#2f7657;
    --ol-red:#a43a34;
    --ol-amber:#9a6a1f;
    --ol-shadow:0 18px 42px rgba(16,32,51,.08);
    --ol-shadow-soft:0 10px 24px rgba(16,32,51,.06);
    --ol-radius:22px;
    --ol-radius-sm:14px;

    --azul:var(--ol-navy);
    --azul-2:var(--ol-navy-2);
    --dorado:var(--ol-gold);
    --dorado-2:var(--ol-gold-2);
    --fondo:var(--ol-cream);
    --blanco:var(--ol-paper);
    --texto:var(--ol-ink);
    --muted:var(--ol-muted);
    --linea:var(--ol-line);
    --oro:var(--ol-gold);
    --radio:var(--ol-radius);
    --sombra:var(--ol-shadow);
}

*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
    font-family:"Inter","Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    background:
        radial-gradient(circle at 0 0, rgba(189,146,80,.13), transparent 30rem),
        linear-gradient(180deg,#fbfaf7 0%,var(--ol-cream) 100%);
    color:var(--ol-ink);
    text-rendering:geometricPrecision;
}

body.dark{
    --ol-cream:#071522;
    --ol-paper:#0e2237;
    --ol-white:#0e2237;
    --ol-ink:#f5f0e7;
    --ol-muted:#b3bfcb;
    --ol-line:#26405a;
    --ol-line-2:#1d344d;
    --ol-shadow:0 18px 46px rgba(0,0,0,.32);
    --fondo:var(--ol-cream);
    --blanco:var(--ol-paper);
    --texto:var(--ol-ink);
    --muted:var(--ol-muted);
    --linea:var(--ol-line);
    background:
        radial-gradient(circle at 0 0, rgba(189,146,80,.12), transparent 30rem),
        linear-gradient(180deg,#071522 0%,#081a2d 100%);
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

/* ---------- Header ---------- */

.topbar{
    position:sticky;
    top:0;
    z-index:50;
    height:78px;
    background:rgba(255,253,248,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--ol-line-2);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
}

body.dark .topbar{background:rgba(8,26,45,.88)}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.brand-logo-full{
    width:154px;
    height:54px;
    object-fit:contain;
    object-position:left center;
    display:block;
    filter:drop-shadow(0 2px 2px rgba(11,40,69,.06));
}

.brand-logo-symbol{
    width:42px;
    height:42px;
    object-fit:contain;
    display:block;
}

.brand-wording{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding-left:2px;
}

.brand-wording strong{
    font-size:15px;
    letter-spacing:.01em;
    color:var(--ol-navy);
}

body.dark .brand-wording strong{color:#fff}

.brand-wording small{
    color:var(--ol-muted);
    font-size:12px;
}

.iso{display:none}

.top-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.pill{
    border:1px solid var(--ol-line);
    background:rgba(255,255,255,.74);
    color:var(--ol-ink);
    padding:9px 14px;
    border-radius:999px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow:0 4px 12px rgba(16,32,51,.04);
    transition:.18s ease;
}

body.dark .pill{background:rgba(14,34,55,.86)}

.pill:hover{
    transform:translateY(-1px);
    border-color:rgba(189,146,80,.55);
}

.pill.gold{
    background:linear-gradient(135deg,var(--ol-gold),var(--ol-gold-2));
    border-color:rgba(189,146,80,.55);
    color:#132033;
    font-weight:700;
}

/* ---------- Layout ---------- */

.layout{
    display:grid;
    grid-template-columns:292px minmax(0,1fr);
    min-height:calc(100vh - 78px);
}

.sidebar{
    background:
        linear-gradient(180deg,rgba(255,253,248,.86),rgba(247,243,236,.92)),
        radial-gradient(circle at 0 0,rgba(189,146,80,.16),transparent 20rem);
    border-right:1px solid var(--ol-line-2);
    color:var(--ol-ink);
    padding:28px 18px;
}

body.dark .sidebar{
    background:linear-gradient(180deg,#0b2035,#081a2d);
}

.nav-title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:var(--ol-muted);
    margin:8px 14px 16px;
    font-weight:800;
}

.nav{
    display:grid;
    gap:7px;
}

.nav a{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 14px 13px 16px;
    border-radius:16px;
    color:var(--ol-ink);
    font-weight:720;
    font-size:14px;
    letter-spacing:-.01em;
    border:1px solid transparent;
    transition:.18s ease;
}

body.dark .nav a{color:#eaf0f5}

.nav a::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:999px;
    background:var(--ol-gold);
    box-shadow:0 0 0 4px rgba(189,146,80,.13);
    flex:0 0 7px;
}

.nav a:hover{
    background:rgba(255,255,255,.78);
    border-color:var(--ol-line);
    box-shadow:var(--ol-shadow-soft);
    transform:translateX(2px);
}

body.dark .nav a:hover{background:rgba(255,255,255,.07)}

.content{
    max-width:1280px;
    width:100%;
    margin:0 auto;
    padding:42px 42px 60px;
}

.content.solo{
    max-width:1180px;
}

/* ---------- Hero / headings ---------- */

.hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 82% -20%, rgba(215,189,124,.34), transparent 28rem),
        linear-gradient(135deg,var(--ol-navy),var(--ol-navy-2));
    color:#fff;
    border-radius:32px;
    padding:34px 36px;
    box-shadow:var(--ol-shadow);
    border:1px solid rgba(255,255,255,.12);
}

.hero::after{
    content:"";
    position:absolute;
    right:-85px;
    top:-110px;
    width:260px;
    height:260px;
    border:1px solid rgba(215,189,124,.42);
    border-radius:50%;
}

.hero h1{
    margin:0 0 10px;
    font-size:34px;
    line-height:1.05;
    letter-spacing:-.045em;
}

.hero p{
    margin:0;
    max-width:790px;
    color:#dce7ef;
    line-height:1.65;
}

.hero .meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:20px;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--ol-line);
    background:rgba(255,255,255,.78);
    color:var(--ol-ink);
    font-size:13px;
    font-weight:700;
}

.hero .badge,
.login-copy .badge{
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.20);
    color:#fff;
}

/* ---------- Cards / grids ---------- */

.grid{
    display:grid;
    gap:20px;
    margin-top:22px;
}

.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.card{
    background:rgba(255,253,248,.94);
    border:1px solid var(--ol-line);
    border-radius:24px;
    box-shadow:var(--ol-shadow-soft);
    padding:22px;
}

body.dark .card{background:rgba(14,34,55,.96)}

.card h2,
.card h3{
    margin:0 0 14px;
    color:var(--ol-ink);
    letter-spacing:-.035em;
}

.metric strong{
    display:block;
    font-size:34px;
    line-height:1;
    letter-spacing:-.055em;
    margin-bottom:7px;
    color:var(--ol-navy);
}

body.dark .metric strong{color:#fff}

.metric span,
.muted{
    color:var(--ol-muted);
}

/* ---------- Toolbar ---------- */

.toolbar{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-end;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.toolbar h2{
    font-size:28px;
    letter-spacing:-.045em;
}

/* ---------- Forms ---------- */

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.form-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-grid .wide{grid-column:1/-1}

label{
    display:block;
    font-size:12px;
    line-height:1.2;
    color:var(--ol-muted);
    font-weight:800;
    letter-spacing:.02em;
    margin-bottom:7px;
}

input,
select,
textarea,
input[type=date],
input[type=datetime-local],
input[type=number],
input[type=file]{
    width:100%;
    border:1px solid var(--ol-line);
    border-radius:15px;
    background:rgba(255,255,255,.82);
    color:var(--ol-ink);
    padding:12px 14px;
    outline:0;
    transition:.16s ease;
}

body.dark input,
body.dark select,
body.dark textarea{
    background:rgba(8,26,45,.72);
}

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(189,146,80,.74);
    box-shadow:0 0 0 4px rgba(189,146,80,.13);
}

textarea{
    min-height:96px;
    resize:vertical;
}

.checkline{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--ol-ink);
    font-weight:650;
    line-height:1.45;
}

.checkline input{
    width:auto;
    margin-top:2px;
}

/* ---------- Buttons / notices ---------- */

.btn{
    border:1px solid transparent;
    border-radius:15px;
    padding:11px 15px;
    background:linear-gradient(135deg,var(--ol-navy),var(--ol-navy-2));
    color:#fff;
    cursor:pointer;
    font-weight:800;
    display:inline-flex;
    align-items:center;
    gap:9px;
    box-shadow:0 8px 18px rgba(11,40,69,.12);
    transition:.17s ease;
}

.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(11,40,69,.16);
}

.btn.gold{
    background:linear-gradient(135deg,var(--ol-gold),var(--ol-gold-2));
    color:#132033;
}

.btn.ghost{
    background:rgba(255,255,255,.55);
    color:var(--ol-ink);
    border-color:var(--ol-line);
    box-shadow:none;
}

body.dark .btn.ghost{background:rgba(255,255,255,.06)}

.btn.danger{
    background:linear-gradient(135deg,#9f2f2a,#c94a3d);
    color:#fff;
}

.btn.small{
    padding:7px 11px;
    font-size:.9rem;
    border-radius:12px;
}

.notice{
    border:1px solid var(--ol-line);
    border-radius:18px;
    padding:13px 15px;
    margin:16px 0;
    background:rgba(255,253,248,.90);
    box-shadow:var(--ol-shadow-soft);
}

.notice.ok{
    background:#edf7f1;
    border-color:#bddbc8;
    color:var(--ol-green);
}

.notice.bad{
    background:#fff0ee;
    border-color:#efc6c1;
    color:var(--ol-red);
}

.linkbox input{
    margin-top:8px;
    width:100%;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- Tables ---------- */

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 9px;
}

th{
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--ol-muted);
    font-weight:900;
    padding:0 12px;
}

td{
    background:rgba(255,255,255,.74);
    padding:14px 13px;
    border-top:1px solid var(--ol-line);
    border-bottom:1px solid var(--ol-line);
    font-size:14px;
    vertical-align:middle;
}

body.dark td{background:rgba(8,26,45,.72)}

td:first-child{
    border-left:1px solid var(--ol-line);
    border-radius:15px 0 0 15px;
}

td:last-child{
    border-right:1px solid var(--ol-line);
    border-radius:0 15px 15px 0;
}

.status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:850;
    border:1px solid transparent;
}

.status.ok,
.ok{
    background:#e8f5ee;
    color:var(--ol-green);
}

.status.bad,
.bad{
    background:#ffefed;
    color:var(--ol-red);
}

.status.warn,
.warn{
    background:#fff7e6;
    color:var(--ol-amber);
}

/* ---------- Login ---------- */

.login-wrap{
    min-height:calc(100vh - 78px);
    display:grid;
    grid-template-columns:minmax(0,1fr) 440px;
    gap:30px;
    align-items:center;
    max-width:1220px;
    margin:0 auto;
    padding:42px;
}

.login-copy{
    position:relative;
    overflow:hidden;
    min-height:520px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:42px;
    border-radius:34px;
    background:
        linear-gradient(180deg,rgba(11,40,69,.24),rgba(11,40,69,.92)),
        radial-gradient(circle at 78% 12%,rgba(215,189,124,.38),transparent 24rem),
        linear-gradient(135deg,var(--ol-navy),var(--ol-navy-2));
    color:#fff;
    box-shadow:var(--ol-shadow);
}

.login-copy::before{
    content:"";
    position:absolute;
    top:36px;
    left:36px;
    width:180px;
    height:98px;
    background:url('/assets/img/logo-full.png') left center/contain no-repeat;
    filter:brightness(0) invert(1) drop-shadow(0 10px 20px rgba(0,0,0,.16));
    opacity:.98;
}

.login-copy::after{
    content:"";
    position:absolute;
    right:-115px;
    top:-115px;
    width:330px;
    height:330px;
    border-radius:50%;
    border:1px solid rgba(215,189,124,.45);
}

.login-copy h1{
    position:relative;
    z-index:1;
    font-size:44px;
    line-height:1.03;
    letter-spacing:-.06em;
    margin:0 0 14px;
    max-width:760px;
}

.login-copy p{
    position:relative;
    z-index:1;
    color:#e6edf3;
    line-height:1.7;
    font-size:16px;
    max-width:720px;
}

.login-card{
    background:rgba(255,253,248,.96);
    border:1px solid var(--ol-line);
    border-radius:30px;
    padding:30px;
    box-shadow:var(--ol-shadow);
}

body.dark .login-card{background:rgba(14,34,55,.96)}

.login-card h2{
    margin:0 0 6px;
    font-size:28px;
    letter-spacing:-.045em;
}

.login-card .row{
    margin-top:16px;
}

.login-card .btn{
    margin-top:20px;
    width:100%;
    justify-content:center;
}

.fineprint{
    color:var(--ol-muted);
    font-size:12px;
    line-height:1.55;
    margin-top:16px;
}

.progress{
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:16px;
    overflow:auto;
    padding-bottom:4px;
}

.step{
    white-space:nowrap;
    padding:9px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.68);
    border:1px solid var(--ol-line);
    font-size:13px;
    color:var(--ol-muted);
}

.step.done{
    background:#e8f5ee;
    color:var(--ol-green);
    border-color:#bddbc8;
}

.step.current{
    background:var(--ol-navy);
    color:#fff;
    border-color:var(--ol-navy);
}

/* ---------- Activity / audit ---------- */

.audit-line,
.timeline-line{
    display:flex;
    gap:12px;
    border-bottom:1px solid var(--ol-line);
    padding:12px 0;
}

.audit-dot{
    width:10px;
    height:10px;
    border-radius:99px;
    background:var(--ol-gold);
    margin-top:6px;
    box-shadow:0 0 0 4px rgba(189,146,80,.13);
    flex:0 0 10px;
}

.drawer-note{
    font-size:13px;
    color:var(--ol-muted);
    border-left:3px solid var(--ol-gold);
    padding-left:12px;
    line-height:1.55;
}

.action-stack{
    display:grid;
    gap:15px;
    margin-top:16px;
}

.cards-mini{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}

.tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:14px 0;
}

.tabs a{
    border:1px solid var(--ol-line);
    border-radius:999px;
    padding:8px 12px;
    background:rgba(255,255,255,.62);
    color:var(--ol-ink);
    font-weight:750;
}

.doc-upload{
    border:1px dashed var(--ol-gold);
    background:rgba(189,146,80,.10);
    border-radius:20px;
    padding:20px;
    text-align:center;
}

/* ---------- Responsive ---------- */

@media(max-width:1100px){
    .layout{grid-template-columns:245px minmax(0,1fr)}
    .content{padding:30px 24px 50px}
    .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:860px){
    .topbar{height:auto;min-height:74px;padding:12px 16px;align-items:flex-start}
    .brand-logo-full{width:128px;height:48px}
    .brand-wording{display:none}
    .layout{grid-template-columns:1fr}
    .sidebar{
        position:static;
        border-right:0;
        border-bottom:1px solid var(--ol-line);
        padding:12px 14px;
    }
    .nav-title{display:none}
    .nav{
        display:flex;
        gap:8px;
        overflow:auto;
        padding-bottom:2px;
    }
    .nav a{
        white-space:nowrap;
        flex:0 0 auto;
        padding:10px 12px;
    }
    .content{padding:22px 16px 44px}
    .grid.cols-4,
    .grid.cols-3,
    .grid.cols-2,
    .form-grid,
    .form-grid.cols3,
    .cards-mini,
    .login-wrap{
        grid-template-columns:1fr!important;
    }
    .login-wrap{padding:18px}
    .login-copy{
        min-height:380px;
        padding:34px 26px;
    }
    .login-copy h1{font-size:34px}
    table{display:block;overflow-x:auto}
}

@media(max-width:560px){
    .top-actions{gap:6px}
    .pill{padding:8px 10px}
    .hero{padding:28px 22px;border-radius:26px}
    .hero h1{font-size:28px}
    .card{padding:18px;border-radius:20px}
}