/* ═══════════════════════════════════════════════════════════════════════════
   ERPJRC CORE — UNA sola hoja de estilos con tokens.
   (La deuda de Sport, con tres CSS solapados, NO se hereda.)
   Paleta: navy premium + oro JRC de acento + rojo solo como detalle.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0a0f1c; --bg2:#101a2e; --panel:#16213a; --panel2:#1b2846; --line:#273450;
  --oro:#c8960c; --oro-suave:#d4af5f; --oro-claro:#e9cd82; --oro-prof:#a8842f;
  --claro:#eef2f8; --muted:#a3adbf; --muted2:#7b8598; --rojo:#e2574c;
  --ok:#3fa46a; --warn:#e08a2e; --crit:#e2574c; --info:#5b8ab8;
  /* interior claro */
  --int-bg:#f0f2f7; --int-card:#ffffff; --int-ink:#1c2333; --int-muted:#66708a;
  --int-line:#e1e5ef; --int-suave:#f7f8fb;
  --f-disp:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-ui:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --sb-w:236px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--f-ui);font-size:14.5px;background:var(--int-bg);color:var(--int-ink)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--oro-suave);outline-offset:2px}
::selection{background:#3a2f10;color:var(--oro-claro)}

/* ══════════ REGLA DE ORO: la ventana se ve entera, solo scrollea la lista ══════════ */
.app{display:flex;height:100vh;overflow:hidden}

/* ══════════ Lateral ══════════ */
.sb{width:var(--sb-w);flex:0 0 var(--sb-w);background:var(--bg2);border-right:1px solid var(--line);
    display:flex;flex-direction:column;padding:18px 0 12px;color:var(--claro)}
.sb-brand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 12px 14px;
    border-bottom:1px solid var(--line)}
.sb-brand img{width:104px;height:auto}
.sb-brand .t{font-family:var(--f-disp);font-weight:800;font-size:19px;letter-spacing:.06em}
.sb-brand .t .a{color:var(--oro-suave)}
.sb-brand .s{font-size:9.5px;letter-spacing:.3em;color:var(--oro-suave);text-transform:uppercase}
.sb-nav{flex:1 1 auto;overflow:auto;padding:10px 10px 4px}
.sb-sec{font-size:12px;font-weight:800;color:var(--oro);letter-spacing:.1em;margin:14px 8px 5px}
.sb-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#c6cddb;
    font-size:13.5px;font-weight:500;border-left:3px solid transparent}
.sb-it svg{width:17px;height:17px;stroke:#8b94a9;fill:none;stroke-width:1.8;flex:0 0 auto}
.sb-it:hover{background:#1b2a47}
.sb-it.act{background:#1e2f52;color:var(--oro-claro);border-left-color:var(--oro);font-weight:700}
.sb-it.act svg{stroke:var(--oro-suave)}
.sb-it .badge{margin-left:auto;background:var(--crit);color:#fff;font-size:10.5px;font-weight:800;
    border-radius:9px;padding:1px 6px;min-width:19px;text-align:center}
.sb-foot{border-top:1px solid var(--line);padding:10px 14px 2px;font-size:12.5px;color:var(--muted)}
.sb-foot .u{display:flex;align-items:center;gap:8px;color:var(--claro);font-weight:600;margin-bottom:6px}
.sb-foot .dot{width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,#d8b45e,#b8912f);
    color:#241a05;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.sb-foot a{display:block;padding:2px 0;color:var(--muted2)}
.sb-foot a:hover{color:var(--oro-suave)}

/* ══════════ Zona principal ══════════ */
.mn{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;background:var(--int-bg)}
.tp{flex:0 0 auto;display:flex;align-items:center;gap:14px;background:var(--int-card);
    border-bottom:1px solid var(--int-line);padding:11px 22px}
.tp h1{font-family:var(--f-disp);font-size:19px;font-weight:800}
.tp .sub{font-size:13px;color:var(--int-muted)}
.tp .der{margin-left:auto;display:flex;align-items:center;gap:10px}
.jrcmini{font-family:var(--f-disp);font-weight:800;font-size:12.5px;letter-spacing:.08em;color:#9aa3b8}
.jrcmini b{color:var(--oro)}
.bd{flex:1 1 auto;min-height:0;overflow:hidden;padding:18px 22px;display:flex;
    flex-direction:column;gap:14px}
.bd.scroll{overflow:auto}

/* ══════════ Tarjetas ══════════ */
.card{background:var(--int-card);border:1px solid var(--int-line);border-radius:10px;
      display:flex;flex-direction:column;min-height:0}
.card .hd{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:11px 16px;
    border-bottom:1px solid var(--int-line);font-family:var(--f-disp);font-weight:700;font-size:14.5px}
.card .hd .mini{margin-left:auto;font-size:12px;color:var(--int-muted);font-weight:500}
.card .cuerpo{padding:14px 16px;overflow:auto;min-height:0}
.card .scrollable{overflow:auto;min-height:0;flex:1 1 auto}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;flex:0 0 auto}
.kpi{background:var(--int-card);border:1px solid var(--int-line);border-radius:10px;padding:12px 16px}
.kpi.gold{border-top:3px solid var(--oro)}
.kpi .l{font-size:11.5px;font-weight:700;letter-spacing:.07em;color:var(--int-muted);text-transform:uppercase}
.kpi .v{font-family:var(--f-disp);font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .v small{font-size:13px;color:var(--int-muted);font-weight:600}

/* ══════════ Listas de acciones ══════════ */
.it{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--int-line)}
.it:last-child{border-bottom:0}
.stripe{width:4px;align-self:stretch;border-radius:2px;flex:0 0 auto;min-height:34px}
.s-1{background:var(--crit)} .s-2{background:var(--warn)} .s-3{background:var(--oro)}
.s-4{background:var(--info)} .s-5{background:var(--ok)}
.it .tt{font-weight:700;font-size:14px}
.it .dd{font-size:12.5px;color:var(--int-muted);margin-top:1px}
.it .imp{margin-left:auto;font-family:var(--f-disp);font-weight:800;font-size:15px;
    font-variant-numeric:tabular-nums;white-space:nowrap}
.it .acc{display:flex;gap:6px;flex:0 0 auto}

/* ══════════ Etiquetas ══════════ */
.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:5px;
    padding:2px 7px;text-transform:uppercase;white-space:nowrap}
.t-crit{background:#fdecea;color:#b3372d} .t-warn{background:#fdf1e0;color:#a96311}
.t-gold{background:#faf3df;color:#8a6a10} .t-info{background:#e9f0f8;color:#3d6a99}
.t-ok{background:#e8f5ee;color:#2c7a4e} .t-gris{background:#eef0f5;color:#66708a}
.pt{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block}
.p-ok{background:var(--ok)} .p-warn{background:var(--warn)} .p-crit{background:var(--crit)}
.p-gris{background:#b8c0d0}

/* ══════════ Botones ══════════ */
.btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:7px;padding:8px 14px;
    font-size:13px;font-weight:700;white-space:nowrap}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.btn-oro{background:linear-gradient(180deg,#e5c887,#d8b45e 20%,#b8912f);color:#241a05;
    box-shadow:0 2px 8px rgba(184,145,47,.28)}
.btn-oro:hover{filter:brightness(1.05)}
.btn-g{background:#fff;border:1px solid #cdd3e0;color:#3a445c}
.btn-g:hover{border-color:var(--oro-prof)}
.btn-rojo{background:#fdecea;border:1px solid #f3c6c1;color:#b3372d}
.btn-rojo:hover{background:#fbdcd8}
.btn.sm{padding:5px 10px;font-size:12px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ══════════ Tablas ══════════ */
.tabla-wrap{overflow:auto;min-height:0;flex:1 1 auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{position:sticky;top:0;z-index:1;font-size:11px;font-weight:800;letter-spacing:.06em;
   text-transform:uppercase;color:var(--int-muted);text-align:left;padding:9px 14px;
   border-bottom:1px solid var(--int-line);background:var(--int-suave)}
td{padding:9px 14px;border-bottom:1px solid var(--int-line);vertical-align:middle}
tbody tr:hover{background:#fafbfe}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.vacio{padding:34px 16px;text-align:center;color:var(--int-muted);font-size:13.5px}
.vacio b{display:block;font-family:var(--f-disp);font-size:15px;color:var(--int-ink);margin-bottom:4px}

/* ══════════ Formularios ══════════ */
.form{display:grid;gap:13px}
.form .fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
label{display:block;font-size:12px;font-weight:700;color:var(--int-muted);margin-bottom:4px;
      text-transform:uppercase;letter-spacing:.04em}
input[type=text],input[type=email],input[type=number],input[type=date],input[type=password],
select,textarea{width:100%;background:#fff;border:1px solid #cdd3e0;border-radius:7px;
    padding:8px 11px;color:var(--int-ink)}
input:focus,select:focus,textarea:focus{border-color:var(--oro-prof);outline:none;
    box-shadow:0 0 0 3px rgba(200,150,12,.13)}
textarea{min-height:78px;resize:vertical}
.ayuda{font-size:11.5px;color:var(--int-muted);margin-top:3px;text-transform:none;letter-spacing:0;font-weight:400}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--int-ink)}
.chk input{width:16px;height:16px}
.acciones{display:flex;gap:9px;align-items:center;padding-top:4px}
.acciones .der{margin-left:auto}

/* Barra de filtros */
.filtros{flex:0 0 auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.filtros input,.filtros select{width:auto;min-width:150px}
.filtros .der{margin-left:auto;display:flex;gap:8px}

/* ══════════ Avisos flash ══════════ */
.flashes{position:fixed;top:14px;right:14px;z-index:60;display:flex;flex-direction:column;gap:8px;
    max-width:400px}
.flash{padding:11px 15px;border-radius:9px;font-size:13.5px;font-weight:600;
    box-shadow:0 8px 26px rgba(20,30,50,.18);border:1px solid}
.flash.success{background:#e8f5ee;border-color:#bfe3cd;color:#22613d}
.flash.danger{background:#fdecea;border-color:#f3c6c1;color:#b3372d}
.flash.info{background:#e9f0f8;border-color:#c8dcef;color:#31597f}

/* ══════════ Hub de módulo ══════════ */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.hubcard{background:var(--int-card);border:1px solid var(--int-line);border-radius:11px;
    padding:16px;display:flex;flex-direction:column;gap:7px;border-top:3px solid var(--oro)}
.hubcard:hover{border-color:var(--oro-prof);transform:translateY(-1px)}
.hubcard b{font-family:var(--f-disp);font-size:15.5px}
.hubcard p{font-size:12.5px;color:var(--int-muted);line-height:1.5}
.hubcard.pendiente{opacity:.55;border-top-color:#c3cbdb;pointer-events:none}
.hubcard .fase{margin-top:auto;font-size:10px;font-weight:800;letter-spacing:.08em;
    color:var(--int-muted);text-transform:uppercase}

/* ══════════ Pestañas de ficha ══════════ */
.ptabs{flex:0 0 auto;display:flex;gap:6px;background:var(--int-card);padding:10px 22px 0;
    border-bottom:1px solid var(--int-line);overflow-x:auto}
.ptab{border:1px solid var(--int-line);border-bottom:0;border-radius:8px 8px 0 0;background:#f4f5f9;
    color:#535e78;font-size:13px;font-weight:600;padding:8px 14px;display:flex;gap:7px;
    align-items:center;white-space:nowrap}
.ptab.on{background:var(--int-bg);color:var(--int-ink);font-weight:700;border-top:3px solid var(--oro);
    position:relative;top:1px}
.ptab .b{font-size:10.5px;font-weight:800;background:#e7eaf2;border-radius:10px;padding:1px 7px;color:#5c6680}
.ptab .b.warn{background:#fdf1e0;color:#a96311}

/* Cabecera de ficha */
.fh{flex:0 0 auto;background:var(--int-card);border-bottom:1px solid var(--int-line);padding:14px 22px}
.fh .nom{font-family:var(--f-disp);font-size:20px;font-weight:800}
.fh .met{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap;font-size:12.5px;
    color:var(--int-muted)}

/* Línea de tiempo */
.tl-it{display:flex;gap:14px;padding:12px 16px;border-bottom:1px solid var(--int-line)}
.tl-it:last-child{border-bottom:0}
.tl-it .f{font-size:11.5px;color:var(--int-muted);font-variant-numeric:tabular-nums;min-width:56px;
    font-weight:700;padding-top:2px}
.tl-it .tt{font-size:13.5px;font-weight:600}
.tl-it .dd{font-size:12px;color:var(--int-muted);margin-top:1px;white-space:pre-wrap}

/* Datos clave-valor */
.kv{display:grid;grid-template-columns:130px 1fr;gap:5px 10px;font-size:13px}
.kv dt{color:var(--int-muted)}
.kv dd{font-weight:600}
.kv dd.falta{color:#a96311;font-weight:500}

/* Pipeline */
.pipe{display:flex;gap:12px;overflow-x:auto;min-height:0;flex:1 1 auto;padding-bottom:6px}
.pcol{flex:0 0 232px;display:flex;flex-direction:column;min-height:0;background:var(--int-card);
    border:1px solid var(--int-line);border-radius:10px}
.pcol .ph{flex:0 0 auto;padding:10px 13px;border-bottom:1px solid var(--int-line);
    display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800}
.pcol .ph .n{margin-left:auto;background:var(--int-suave);border-radius:9px;padding:1px 7px;
    font-size:11px;color:var(--int-muted)}
.pcol .pl{overflow:auto;min-height:0;padding:9px;display:flex;flex-direction:column;gap:8px}
.pcard{background:var(--int-suave);border:1px solid var(--int-line);border-radius:8px;padding:10px 11px}
.pcard:hover{border-color:var(--oro-prof)}
.pcard b{display:block;font-size:13px;font-weight:700;line-height:1.3}
.pcard span{display:block;font-size:11.5px;color:var(--int-muted);margin-top:3px}

/* ══════════ LOGIN ══════════ */
.lg{display:flex;height:100vh;overflow:hidden;background:
    radial-gradient(900px 480px at 78% 18%,rgba(212,175,95,.07),transparent 55%),
    radial-gradient(700px 500px at 15% 90%,#131f38,transparent 60%),var(--bg2)}
.lg-lat{width:clamp(375px,24vw,520px);flex:0 0 auto;background:rgba(10,15,28,.72);border-right:1px solid var(--line);
    display:flex;flex-direction:column;align-items:center;padding:38px 30px 26px;color:var(--claro)}
.lg-lat img{width:clamp(158px,11vw,210px);height:auto;margin-bottom:6px}
.lg-lat .t{font-family:var(--f-disp);font-weight:800;font-size:clamp(30px,2vw,40px);letter-spacing:.05em}
.lg-lat .t .a{color:var(--oro-suave)}
.lg-lat .s{font-size:clamp(11px,.78vw,14px);letter-spacing:.4em;color:var(--oro-suave);text-transform:uppercase;margin-top:2px}
.feat{width:100%;margin-top:clamp(26px, 3vh, 40px);display:flex;flex-direction:column}
.feat .f{display:flex;align-items:center;gap:13px;padding:clamp(13px, 1.5vh, 20px) 4px;
    border-top:1px solid #223252}
.feat .f:last-child{border-bottom:1px solid #223252}
.feat .ic{width:clamp(34px, 2.4vw, 44px);height:clamp(34px, 2.4vw, 44px);
    border:1px solid var(--oro-prof);border-radius:8px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;background:rgba(212,175,95,.06)}
.feat .ic svg{width:clamp(17px, 1.2vw, 22px);height:clamp(17px, 1.2vw, 22px);
    stroke:var(--oro-suave);fill:none;stroke-width:1.8}
.feat .tx b{display:block;font-size:clamp(13.5px, .95vw, 17px);font-weight:700}
.feat .tx span{font-size:clamp(11.5px, .8vw, 14px);color:var(--muted2)}
.lg-lema{margin-top:auto;font-size:clamp(12.5px, .88vw, 15px);color:var(--muted);
    display:flex;gap:8px;align-items:center}
.lg-lema svg{width:15px;height:15px;stroke:var(--oro-suave);fill:none;stroke-width:2;flex:0 0 auto}
.lg-der{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
    position:relative;padding:20px}
.lg-halo{position:absolute;width:clamp(620px, 45vw, 900px);height:clamp(620px, 45vw, 900px);
    border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(212,175,95,.12) 0%,rgba(212,175,95,.04) 45%,transparent 70%)}
.lg-card{width:clamp(398px, 27vw, 540px);max-width:100%;
    background:linear-gradient(180deg,#faf7f0,#f3efe4);
    border-radius:14px;padding:clamp(30px, 3vh, 46px) clamp(36px, 2.6vw, 52px) clamp(26px, 2.6vh, 40px);
    color:#1b2231;position:relative;
    border:1px solid var(--oro-prof);outline:1px solid rgba(200,150,12,.45);outline-offset:4px;
    box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 70px rgba(212,175,95,.13)}
.lg-card .cli{text-align:center;font-family:var(--f-disp);font-weight:800;
    font-size:clamp(15px, 1.05vw, 19px);letter-spacing:.12em;color:#232c40}
.lg-card .cli b{color:var(--oro)}
.lg-card .eyebrow{text-align:center;font-size:10px;font-weight:800;letter-spacing:.26em;
    color:var(--rojo);margin-top:10px}
.lg-card h2{text-align:center;font-family:var(--f-disp);font-size:clamp(27px, 2vw, 38px);
    font-weight:800;color:#1b2740;margin-top:8px}
.rule{width:64px;height:3px;border-radius:2px;margin:10px auto 8px;
    background:linear-gradient(90deg,var(--oro-claro),var(--oro-prof))}
.lg-card .hint{text-align:center;font-size:clamp(12.5px, .9vw, 16px);color:#6b7285;
    margin-bottom:clamp(16px, 1.8vh, 24px)}
.inp{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9d3c2;
    border-radius:9px;padding:clamp(2px, .5vh, 6px) clamp(12px, 1vw, 16px);
    margin-bottom:clamp(11px, 1.3vh, 16px);font-size:clamp(14.5px, .95vw, 17px)}
.inp svg{width:16px;height:16px;stroke:#9a917a;fill:none;stroke-width:1.8;flex:0 0 auto}
.inp input{border:0;background:transparent;padding:9px 0;flex:1 1 auto}
.inp input:focus{outline:none;box-shadow:none}
.inp .ojo{background:none;border:0;padding:0;display:flex;color:#9a917a}
.lg-btn{width:100%;margin-top:6px;padding:clamp(11px, 1.4vh, 17px) 0;border:0;border-radius:9px;
    font-family:var(--f-disp);font-weight:800;font-size:clamp(14px, 1vw, 18px);
    letter-spacing:.05em;color:#241a05;
    background:linear-gradient(180deg,#e5c887 0%,#d8b45e 18%,#b8912f 62%,#9c7726);
    box-shadow:0 6px 18px rgba(184,145,47,.35),inset 0 1px 0 rgba(255,240,200,.55)}
.lg-foot{margin-top:clamp(26px, 3vh, 40px);text-align:center;font-size:clamp(12px, .85vw, 14px);
    color:#cdd4e0}
.lg-foot span{display:block;color:var(--muted2);font-size:clamp(11px, .75vw, 13px);margin-top:2px}
.lg-flash{width:398px;max-width:100%;margin-bottom:12px;padding:10px 14px;border-radius:9px;
    font-size:13px;font-weight:600;background:rgba(226,87,76,.14);border:1px solid rgba(226,87,76,.4);
    color:#ffd7d3}
.lg-flash.success{background:rgba(63,164,106,.14);border-color:rgba(63,164,106,.4);color:#c9f0da}

/* ══════════ Página de error / centrada ══════════ */
.centro{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg2)}
.centro .caja{background:var(--int-card);border-radius:14px;padding:34px 40px;text-align:center;
    max-width:460px;border-top:3px solid var(--oro)}
.centro h1{font-family:var(--f-disp);font-size:44px;color:var(--oro)}
.centro p{color:var(--int-muted);margin:8px 0 18px}

/* ══════════ RESPONSIVE (solo dentro de @media: PC no se toca) ══════════ */
@media (max-width:980px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .app{flex-direction:column;height:auto;min-height:100vh;overflow:auto}
  .sb{width:100%;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;padding:10px;align-items:center;
      border-right:0;border-bottom:1px solid var(--line)}
  .sb-brand{border-bottom:0;padding:0 10px 0 0;flex-direction:row;gap:9px}
  .sb-brand img{width:38px}
  .sb-brand .s{display:none}
  .sb-nav{display:flex;gap:6px;overflow-x:auto;padding:0;flex:1 1 100%}
  .sb-sec{display:none}
  .sb-it{border-left:0;border-bottom:3px solid transparent;padding:7px 10px;white-space:nowrap}
  .sb-it.act{border-left:0;border-bottom-color:var(--oro)}
  .sb-foot{border-top:0;padding:0;display:flex;gap:12px;align-items:center;flex:0 0 auto}
  .sb-foot .u{margin:0}
  .bd{overflow:visible;padding:14px}
  .card,.tabla-wrap,.card .scrollable{overflow:visible}
  .grid2,.grid-fx{grid-template-columns:1fr !important}
  .lg{flex-direction:column;height:auto;min-height:100vh;overflow:auto}
  .lg-lat{width:100%;flex:0 0 auto;padding:26px 20px}
  .feat{display:none}
  .lg-der{padding:26px 16px}
  .lg-halo{display:none}
  .it{flex-wrap:wrap}
  .it .imp{margin-left:0}
}
@media (max-width:640px){
  .kpis{grid-template-columns:1fr}
  .form .fila{grid-template-columns:1fr}
  .tp{flex-wrap:wrap;gap:8px}
  th,td{padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* Rejillas reutilizables */
.grid2{display:grid;grid-template-columns:1fr 330px;gap:14px;flex:1 1 auto;min-height:0}
.grid-fx{display:grid;grid-template-columns:1fr 320px;gap:14px;flex:1 1 auto;min-height:0}
.col{display:flex;flex-direction:column;gap:14px;min-height:0}
.lin{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--int-line);
    font-size:13px}
.lin:last-child{border-bottom:0}
.lin .der{margin-left:auto;color:var(--int-muted)}

/* Cabeceras que ordenan: se pulsan y la lista se reordena */
th.orden{padding:0}
th.orden a{display:flex;align-items:center;gap:6px;padding:9px 14px;color:inherit}
th.orden a:hover{color:var(--oro-prof)}
th.orden .fl{font-size:9px;opacity:.35}
th.orden.on{color:var(--int-ink)}
th.orden.on .fl{opacity:1;color:var(--oro-prof)}
th.orden.num a{justify-content:flex-end}

/* Volver: siempre a la izquierda del título, en todas las ventanas */
.volver{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
    background:var(--int-suave);border:1px solid var(--int-line);border-radius:8px;
    padding:6px 12px 6px 9px;font-size:12.5px;font-weight:600;color:#4a5570}
.volver svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.volver:hover{border-color:var(--oro-prof);color:var(--int-ink);background:#fff}
@media (max-width:640px){ .volver span{display:none} .volver{padding:6px 9px} }