/* ============================================================
   LexProperty — hoja de estilos
   Paleta: azul marino #1A2E4A · dorado #C9A84C · gris #F5F6F8
   ============================================================ */
:root{
  --navy:#1A2E4A; --navy-700:#13233b; --gold:#C9A84C; --gold-dark:#a98c34;
  --bg:#F5F6F8; --white:#fff; --line:#e3e6ec; --text:#1f2733; --muted:#6b7480;
  --danger:#b3261e; --ok:#1f7a44; --radius:10px; --shadow:0 2px 14px rgba(26,46,74,.08);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
/* El atributo `hidden` debe ganar SIEMPRE: reglas como .overlay{display:grid},
   .btn{display:inline-flex} o .field{display:flex} anularían el [hidden] del
   navegador. Sin esto, el overlay de "Generando…", el modal de regenerar, los
   botones del wizard y los campos condicionales aparecen aunque tengan hidden. */
[hidden]{display:none !important}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.5}
a{color:var(--navy);text-decoration:none}
h1,h2,h3{color:var(--navy);line-height:1.2}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.main{padding:28px 20px 60px}
.muted{color:var(--muted)}
.small{font-size:.85rem}
code{background:#eef0f4;padding:1px 6px;border-radius:4px;font-size:.85em}

/* Topbar */
.topbar{background:var(--navy);color:#fff}
/* min-height (no height fija): si el nav no cabe en una línea, la barra crece
   en vez de cortar el contenido contra el borde superior de la pantalla.
   El contenedor del topbar es más ancho que el del contenido (1100px): con la
   insignia de jurisdicción y el switcher ES/EN el nav ya no cabía en 1100. */
.topbar .container{max-width:1340px}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:4px 14px;min-height:62px;padding:6px 0;flex-wrap:wrap}
.brand__mark{font-weight:700;font-size:1.25rem;color:#fff;letter-spacing:.3px}
.brand__mark span{color:var(--gold)}
.brand small{display:block;color:#9fb0c7;font-size:.7rem;letter-spacing:.5px}
.brand--center{display:block;text-align:center;margin-bottom:18px}
.topnav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
/* nowrap: un enlace ("Nuevo contrato", "ES / EN") jamás debe partirse en
   varias líneas al encogerse el flex; si falta espacio, envuelve el nav. */
.navlink{color:#dce3ee;padding:8px 10px;border-radius:8px;font-weight:500;font-size:.92rem;white-space:nowrap}
.topnav .lang-switch{white-space:nowrap}
.navlink:hover{background:rgba(255,255,255,.1)}
.navlink--muted{color:#94a3b8}
.navlink.is-active{background:var(--gold);color:var(--navy)}

/* Footer */
.footer{border-top:1px solid var(--line);background:#fff;padding:18px 0;margin-top:40px;font-size:.85rem;color:var(--muted)}
.footer .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Hero */
.hero{text-align:center;padding:48px 0 30px}
.hero__title{font-size:2.3rem;margin:0 0 14px}
.hero__sub{max-width:680px;margin:0 auto 26px;color:var(--muted);font-size:1.08rem}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:30px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.feature__icon{font-size:1.8rem}
.feature h3{margin:.5rem 0 .3rem}
.feature p{margin:0;color:var(--muted);font-size:.92rem}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:8px;
  padding:10px 18px;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;transition:.15s}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover{background:var(--navy-700)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--navy)}
.btn--ghost:hover{border-color:var(--navy)}
.btn--danger-ghost{background:#fff;border-color:#f0c7c4;color:var(--danger)}
.btn--lg{padding:13px 26px;font-size:1rem}
.btn--sm{padding:6px 12px;font-size:.82rem}
.btn--block{width:100%;justify-content:center}
.spacer{flex:1}

/* Campos */
.field{margin-bottom:14px;display:flex;flex-direction:column}
.field label{font-weight:600;font-size:.85rem;margin-bottom:5px;color:#33415c}
.field label small{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,46,74,.12)}
textarea{resize:vertical}
.grid{display:grid;gap:0 18px}
.grid--2{grid-template-columns:1fr 1fr}
.field--full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:8px;font-weight:500;font-size:.9rem;margin:6px 0}
.check input{width:auto}
input.invalid,select.invalid,textarea.invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(179,38,30,.1)}
.err-msg{color:var(--danger);font-size:.8rem;margin-top:4px}

/* Paneles / cards */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.panel__title{margin:0 0 18px;font-size:1.25rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:18px 0}
.cards--2{grid-template-columns:1fr 2fr}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card h3{margin:0 0 12px}
.card--wide{overflow:auto}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.9rem}
.dl dt{color:var(--muted)} .dl dd{margin:0}
.list{list-style:none;margin:0;padding:0;font-size:.9rem;display:flex;flex-direction:column;gap:6px}

/* Wizard */
.steps{display:flex;list-style:none;padding:0;margin:0 0 22px;gap:8px;flex-wrap:wrap}
.step{flex:1;min-width:120px;display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-weight:600;font-size:.9rem}
.step span{width:26px;height:26px;border-radius:50%;background:#e9edf3;color:var(--muted);display:grid;place-items:center;font-size:.85rem}
.step.is-active{border-color:var(--navy);color:var(--navy)}
.step.is-active span{background:var(--navy);color:#fff}
.step.is-done span{background:var(--gold);color:var(--navy)}
.wizard-step{display:none;margin-bottom:18px}
.wizard-step.is-active{display:block;animation:fade .2s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.wizard__nav{display:flex;align-items:center;gap:10px;margin-top:18px}

/* Partes */
.parties{margin-bottom:22px}
.parties__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.parties__head h3{margin:0}
.party{border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px;background:#fbfcfe}
.party__bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.party__index{color:var(--navy)}
.party__remove{background:#fff;border:1px solid var(--line);border-radius:6px;width:28px;height:28px;cursor:pointer;color:var(--danger)}

/* Cláusulas — toolbar, leyenda, acordeón por categoría */
.clauses-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.clauses-toolbar input[type=search]{flex:1;min-width:200px}
.clause-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-bottom:12px}
.clause-legend .lvl{background:#f3f5f9;border-radius:20px;padding:2px 10px}
.clauses-host{display:flex;flex-direction:column;gap:10px}
.clause-cat{border:1px solid var(--line);border-radius:10px;background:#fbfcfe;overflow:hidden}
.clause-cat>summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:600;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;background:#f3f5f9}
.clause-cat>summary::-webkit-details-marker{display:none}
.clause-cat__count{font-weight:500;font-size:.8rem;color:var(--muted)}
.clause-cat .clause{border:none;border-top:1px solid var(--line);border-radius:0;background:#fff}
.lvl{font-size:.78rem}
.lvl--required{color:var(--danger)} .lvl--recommended{color:var(--gold-dark)} .lvl--optional{color:var(--muted)}
.clause__why{cursor:help;color:var(--navy);font-size:.85rem;margin-left:auto;opacity:.7}
.clause__head input:disabled{opacity:.6}

/* Cláusulas (admin / vista clásica) */
.clauses{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.clause{border:1px solid var(--line);border-radius:10px;padding:14px;background:#fff}
.clause__head{display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.clause__desc{margin:6px 0 0;color:var(--muted);font-size:.85rem}
.clause__fields{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.clause.is-on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}

/* Tablas */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table th{background:#f3f5f9;color:#33415c;font-size:.78rem;text-transform:uppercase;letter-spacing:.4px}
.table tr:last-child td{border-bottom:none}
.table tr.is-current{background:#fcf7e9}
.actions{display:flex;gap:10px;font-size:1.05rem}
.actions a,.link-btn{cursor:pointer;background:none;border:none;font-size:1.05rem}
.empty{text-align:center;color:var(--muted);padding:26px}

/* Badges / status */
.badge{display:inline-block;background:#e9edf3;color:#33415c;border-radius:20px;padding:2px 9px;font-size:.72rem;font-weight:700}
.badge--gold{background:var(--gold);color:var(--navy)}
.status{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700}
.status--draft{background:#eef0f4;color:#5b6675}
.status--generated{background:#e2f0e8;color:var(--ok)}
.status--finalized{background:#e2e9f5;color:var(--navy)}
.status--archived{background:#f4e6e5;color:var(--danger)}
.status-select{border:1px solid var(--line);border-radius:20px;padding:4px 10px;font-size:.78rem;font-weight:700;cursor:pointer}
.tag{font-size:.7rem;padding:1px 7px;border-radius:5px;background:#e9edf3;text-transform:capitalize;margin-right:5px}
.tag--seller{background:#e2e9f5} .tag--buyer{background:#e2f0e8}

/* Filtros / paginación */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.filters select,.filters input{min-width:140px}
.pagination{display:flex;gap:6px;margin:18px 0;flex-wrap:wrap}
.page{padding:7px 13px;border:1px solid var(--line);border-radius:7px;background:#fff}
.page.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Encabezado de página */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.page-head h1{margin:0 0 4px}
.page-head__actions{display:flex;gap:8px;flex-wrap:wrap}
.section-title{margin:26px 0 10px}
.subnav{display:flex;gap:8px;flex-wrap:wrap}
/* La subnav vive sobre fondo claro: necesita su propio color (no el del topbar). */
.subnav .navlink{color:var(--navy);background:#eef1f6;border:1px solid var(--line);padding:7px 14px}
.subnav .navlink:hover{background:#e1e7f0;border-color:var(--navy)}
.subnav .navlink.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Flash / toast */
.flash{padding:12px 16px;border-radius:8px;margin:14px 0;font-size:.9rem}
.flash--error{background:#f9e7e6;color:var(--danger);border:1px solid #f0c7c4}
.flash--success{background:#e3f1e9;color:var(--ok);border:1px solid #bfe3cd}
.toast-host{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:60}
.toast{background:var(--navy);color:#fff;padding:13px 18px;border-radius:9px;box-shadow:var(--shadow);font-size:.9rem;max-width:320px;animation:slide .25s}
.toast--ok{background:var(--ok)} .toast--err{background:var(--danger)}
@keyframes slide{from{opacity:0;transform:translateX(20px)}to{opacity:1}}

/* Overlay / spinner */
.overlay{position:fixed;inset:0;background:rgba(15,25,40,.55);display:grid;place-items:center;z-index:70}
.overlay__box{background:#fff;border-radius:14px;padding:34px 40px;text-align:center}
.overlay__box--form{text-align:left;width:min(460px,92vw)}
.overlay__box--form textarea{width:100%}
.overlay__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.spinner{width:42px;height:42px;border:4px solid #e3e6ec;border-top-color:var(--navy);border-radius:50%;margin:0 auto 14px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Auth */
.auth-body{background:linear-gradient(160deg,var(--navy),var(--navy-700));min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{background:#fff;border-radius:14px;padding:34px;width:min(380px,94vw);box-shadow:0 20px 50px rgba(0,0,0,.3)}
/* El logotipo del topbar es blanco (fondo navy); sobre la tarjeta blanca del
   login debe ser navy para no fundirse con el fondo. El "ex" sigue dorado. */
.auth-card .brand__mark{color:var(--navy)}
.auth-title{text-align:center;font-size:1.3rem;margin:0 0 16px}
.auth-foot{text-align:center;margin-top:14px;font-size:.85rem}

/* Admin cláusulas (sortable) */
.clause-cat-group{border:1px solid var(--line);border-radius:9px;margin-bottom:10px;background:#fff;overflow:hidden}
.clause-cat-group>summary{cursor:pointer;list-style:none;padding:10px 14px;background:#f3f5f9;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.clause-cat-group>summary::-webkit-details-marker{display:none}
.clause-cat-group .clause-cat__count{font-weight:500;font-size:.8rem;color:var(--muted)}
.clause-cat-group .sortable{padding:8px}
.sortable{list-style:none;padding:0;margin:0}
.sortable__item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:8px}
.sortable__item.dragging{opacity:.45}
.drag-handle{cursor:grab;color:var(--muted);font-size:1.1rem;padding-top:2px}
.sortable__item details{flex:1}
.sortable__item summary{cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:600}
.clause-code{font-family:monospace;font-size:.8rem;color:var(--gold-dark)}
.clause-form{margin-top:12px}
.applic{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:10px 0;background:#fbfcfe}
.applic legend{font-weight:600;font-size:.85rem;color:var(--navy);padding:0 6px}
.checks-row{display:flex;flex-wrap:wrap;gap:6px 16px}
.checks-row .check{margin:2px 0}
.radios{display:flex;gap:14px;flex-wrap:wrap}
.radio{display:inline-flex;align-items:center;gap:6px;font-size:.9rem}
.radio input{width:auto}
.rule-preview{margin:10px 0 0;font-size:.85rem;color:#33415c;background:#eef3fb;border-left:3px solid var(--navy);padding:8px 12px;border-radius:4px}
.clause-warn{margin:10px 0 0;font-size:.85rem;color:#8a5a00;background:#fff7e6;border-left:3px solid var(--gold-dark);padding:8px 12px;border-radius:4px}
.clause-warn[hidden]{display:none}
.markup-help{margin:0 0 16px;background:#eef3fb;border:1px solid var(--line);border-radius:var(--radius)}
.markup-help>summary{cursor:pointer;padding:10px 14px;font-weight:600;color:var(--navy)}
.markup-help__body{padding:0 14px 12px}
.markup-help__table{border-collapse:collapse;font-size:.85rem;margin:4px 0 10px}
.markup-help__table th,.markup-help__table td{text-align:left;padding:4px 16px 4px 0;border-bottom:1px solid var(--line)}
.markup-help__table th{color:var(--muted);font-weight:600}
.markup-help code{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.rt-toolbar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:6px 0 4px}
.rt-btn{font-size:.8rem;padding:2px 9px;border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;line-height:1.5;color:var(--text)}
.rt-btn:hover{background:#eef3fb;border-color:var(--navy)}
.rt-b{font-weight:700}.rt-i{font-style:italic}.rt-u{text-decoration:underline}
.rt-color{width:30px;height:26px;padding:0;border:1px solid var(--line);border-radius:4px;cursor:pointer;background:#fff}
.rt-insert{font-size:.8rem;padding:3px 4px;border:1px solid var(--line);border-radius:4px;background:#fff;max-width:170px}
.rt-preview-wrap{margin:6px 0 0}
.rt-preview-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:3px}
.rt-preview{font-size:.9rem;line-height:1.5;border:1px dashed var(--line);border-radius:4px;padding:8px 11px;background:#fff;min-height:1.6em}
.rt-preview .rt-empty{color:var(--muted)}
.rt-token{background:#e7f0ff;border:1px solid #b9d2ff;border-radius:3px;padding:0 3px}
.rt-var{background:#fff3cd;border:1px solid #ffe08a;border-radius:3px;padding:0 3px;font-family:monospace;font-size:.85em}
.clause-form__actions{display:flex;gap:10px;margin-top:8px}
textarea.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
.hint{margin-top:14px;font-size:.83rem;color:var(--muted);background:#f7f9fc;border-radius:8px;padding:12px}
.upload-panel{margin-bottom:18px}
.upload-panel>summary{display:inline-flex;list-style:none;cursor:pointer}
.upload-panel>summary::-webkit-details-marker{display:none}
.upload-panel[open]>summary{margin-bottom:12px}
.upload-panel__body{margin:0}
.upload-form{max-width:760px}
.tpl-edit-row td{background:#f7f9fc}
.tenant-reset-row td{background:#f7f9fc}
.reset-form{display:flex;align-items:center;gap:10px;margin:8px 0;flex-wrap:wrap}
.reset-email{min-width:220px;font-size:.9rem}
.var-dict{margin-top:18px}
.var-dict summary{cursor:pointer;list-style:none}
.var-dict summary::-webkit-details-marker{display:none}
.var-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:12px}
.var-group h4{margin:0 0 4px;color:var(--navy)}
.var-table{font-size:.84rem}
.var-table th,.var-table td{padding:7px 10px}
.var-chip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;background:#eef0f4;color:var(--navy);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px;cursor:pointer;white-space:nowrap}
.var-chip:hover{border-color:var(--navy);background:#e4e8ef}
.var-chip--copied{background:var(--ok);color:#fff;border-color:var(--ok)}
@media(max-width:760px){.var-groups{grid-template-columns:1fr}}
.tpl-edit{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tpl-edit h4{margin:0 0 8px;color:var(--navy)}
@media(max-width:760px){.tpl-edit{grid-template-columns:1fr}}
.new-clause{margin-top:14px}
.new-clause>summary{display:inline-flex;list-style:none}

@media(max-width:760px){
  .grid--2{grid-template-columns:1fr}
  .cards--2{grid-template-columns:1fr}
  .clauses{grid-template-columns:1fr}
  .topnav .navlink{padding:6px 9px;font-size:.85rem}
}

/* Insignia de jurisdicción activa del sitio (topbar) */
.jur-badge{border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:5px 12px}
a.jur-badge:hover{background:var(--gold);color:var(--navy)}

/* Insignia de jurisdicción en el listado de cláusulas */
.badge--jur{background:#fff7e6;color:#8a5a00;border:1px solid var(--gold-dark)}

/* Botones de término de suscripción (Mensual/Anual) lado a lado, con precio */
.billing-terms{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.billing-terms .inline-form{margin:0}
.billing-terms .btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px}
.billing-terms__price{font-size:.85rem;font-weight:600;opacity:.9}
@media (max-width:560px){.billing-terms{grid-template-columns:1fr}}