/* ============================================================
   Espacio BSK · Hoja de estilos común — fiel al mockup original
   Tokens BSK: tinta #15130F, papel #FBFAF7, acento oliva #85965A,
   amarillo #EAD15A, salvia #9BB192. Space Grotesk + IBM Plex Sans.
   Se sobreescriben desde Administración → Apariencia.
   ============================================================ */
/* ---- Cabinet Grotesk autoalojada (assets/fonts/, sin CDN) ---- */
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --font:'Cabinet Grotesk','IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-display:'Cabinet Grotesk','Space Grotesk',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Tipografia canonica compartida por el nucleo y todos los modulos (origen unico de verdad).
     Cabinet Grotesk va empaquetada por el core; el mono cae a la pila del sistema (JetBrains si se sirve). */
  --bsk-font-sans:'Cabinet Grotesk','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bsk-font-display:'Cabinet Grotesk','Space Grotesk',system-ui,sans-serif;
  --bsk-font-mono:'JetBrains Mono',ui-monospace,'SF Mono','IBM Plex Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --font-size:15.5px;
  --c-primary:#15130F;      /* tinta */
  --c-secondary:#85965A;    /* acento oliva (hover/focos) */
  --c-accent:#EAD15A;       /* amarillo canario */
  --c-sage:#9BB192;         /* salvia */
  --c-bg:#FBFAF7;           /* papel */
  --c-surface2:#F6F4EE;
  --c-field:#F4F2EB;
  --c-text:#15130F; --c-text-soft:#6A6459; --c-faint:#9A9488;
  --c-header:#FFFFFF;
  --c-card:#FFFFFF;
  --c-border:#E6E2D9; --c-border-strong:#D6D1C5;
  --c-btn:#15130F; --c-btn2:#6A6459;
  --c-danger:#AD3B36; --c-ok:#5F7A3D; --c-warn:#8a6d00;
  --radius:11px; --radius-sm:6px; --maxw:1240px;
  --shadow:0 6px 22px -14px rgba(20,18,12,.3);
}
*{box-sizing:border-box}
/* Reserva fija del hueco de la barra de scroll: evita que las paginas cortas
   (sin scroll) se vean desplazadas a la derecha respecto a las largas */
html{scrollbar-gutter:stable}
body{margin:0;font-family:var(--font);font-size:var(--font-size);line-height:1.5;
  background:var(--c-bg);color:var(--c-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit;text-decoration:none}
/* Subrayado solo en enlaces de contenido (párrafos y celdas), nunca en menús ni tarjetas */
main p a:not(.btn), main td a:not(.btn){text-decoration:underline;
  text-decoration-color:var(--c-border-strong);text-underline-offset:3px}
main p a:not(.btn):hover, main td a:not(.btn):hover{text-decoration-color:var(--c-secondary)}
.admin-menu a, .admin-menu a:hover{text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em}
code,pre,.mono{font-family:var(--font-mono);font-size:.93em}
::selection{background:color-mix(in srgb, var(--c-secondary) 22%, transparent)}
:focus-visible{outline:3px solid color-mix(in srgb, var(--c-secondary) 45%, transparent);outline-offset:2px;border-radius:4px}

/* ---- Topbar (blanca, como el mockup) ---- */
.topbar{background:var(--c-header);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:flex-start;gap:22px;padding:0 32px;height:72px;color:var(--c-text)}
.tb-backslot{width:104px;flex-shrink:0;display:flex} /* hueco SIEMPRE reservado: la marca no se mueve */
.tb-backslot.hide{visibility:hidden}
.topbar-brand{display:flex;align-items:center;gap:18px;color:var(--c-text)}
.topbar-brand img{height:34px;width:auto;display:block}
.logo-texto{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1}
.logo-texto small{display:block;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-soft)}
.topbar-brand .div{width:1px;height:30px;background:var(--c-border-strong)}
.topbar-brand .tb-mod{display:flex;flex-direction:column;line-height:1.1}
.topbar-brand strong{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.01em}
.topbar-brand small{font-size:11px;color:var(--c-faint);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.topbar-user{display:flex;align-items:center;gap:12px}
.topbar-user .who{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.topbar-user .who b{font-size:13.5px;font-weight:600}
.topbar-user .who span{font-size:11px;color:var(--c-faint)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--c-primary);color:#fff;display:grid;
  place-items:center;font-family:var(--font-display);font-weight:600;font-size:13px}
.inline{display:inline}

/* ---- Navegación ---- */
.mainnav{background:var(--c-bg);border-bottom:1px solid var(--c-border);padding:0 32px;
  display:flex;gap:2px;flex-wrap:wrap;position:sticky;top:72px;z-index:25}
.nav-link{padding:11px 14px;color:var(--c-text-soft);font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px}
.nav-link:hover{color:var(--c-text)}
.nav-link.active{color:var(--c-text);font-weight:600;border-bottom-color:var(--c-primary)}

/* ---- Contenido ---- */
.container{max-width:var(--maxw);margin:0 auto;padding:40px 32px 96px}
.footer{max-width:var(--maxw);margin:0 auto;padding:28px 32px 48px;border-top:1px solid var(--c-border);
  color:var(--c-faint);font-size:12.5px;text-align:center}

/* ---- Hero del dashboard (mockup) ---- */
.hero{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:40px}
.hero .htext{flex:1;min-width:280px}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-secondary);margin-bottom:14px}
.hero h1{font-weight:600;letter-spacing:-.02em;font-size:38px;line-height:1.05;margin:0 0 12px}
.hero p{font-size:16px;color:var(--c-text-soft);margin:0;max-width:54ch}
.search{position:relative;width:320px}
.search input, .search input[type=text]{width:100%;font-size:14.5px;background:var(--c-card);border:1px solid var(--c-border-strong);
  border-radius:100px;padding:12px 16px 12px 44px;outline:none;transition:.15s}
.search input:focus, .search input[type=text]:focus{border-color:var(--c-secondary);background:var(--c-card);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c-secondary) 16%, transparent)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--c-faint)}

/* ---- Banner reanudar (mockup) ---- */
.resume{display:flex;align-items:center;gap:18px;background:var(--c-primary);color:#fff;
  border-radius:var(--radius);padding:18px 22px;margin-bottom:44px}
.resume .mono-badge{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-sm);padding:8px 12px;color:#fff}
.resume .rt{display:flex;flex-direction:column;line-height:1.3}
.resume .rt .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ADA89C}
.resume .rt b{font-family:var(--font-display);font-weight:500;font-size:16px}
.resume .go{margin-left:auto;font-size:13.5px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius-sm);padding:10px 18px;transition:.15s;white-space:nowrap}
.resume .go:hover{background:#fff;color:var(--c-primary)}

/* ---- Secciones (mockup) ---- */
.section{margin-bottom:52px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--c-border)}
.sec-head h2{font-size:21px;margin:0}
.sec-head .count{font-family:var(--font-mono);font-size:12px;color:var(--c-faint)}
.sec-head .meta{margin-left:auto;font-size:13px;color:var(--c-faint)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:20px}

/* ---- Tarjeta de territorio / módulo (tcard del mockup) ---- */
.tcard{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;transition:.18s;position:relative;color:var(--c-text)}
.tcard:hover{border-color:var(--c-border-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.tcard .top{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.mono-sq{width:46px;height:46px;border-radius:9px;border:1.5px solid var(--c-primary);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.02em;flex-shrink:0;transition:.18s}
.tcard:hover .mono-sq{background:var(--c-primary);color:#fff}
.tcard .tt{line-height:1.2}
.tcard .tt .terr{font-family:var(--font-display);font-weight:600;font-size:17px}
.tcard .tt .norm{font-size:12px;color:var(--c-faint);margin-top:3px}
.tcard .years{font-size:12px;color:var(--c-text-soft);margin-bottom:16px}
.tcard .years b{font-family:var(--font-mono);color:var(--c-text);font-weight:500}
.tcard p.tdesc{font-size:13px;color:var(--c-text-soft);margin:0 0 16px;line-height:1.45}
.tcard .cfoot{display:flex;align-items:center;gap:10px;margin-top:auto}
.selmini{position:relative;flex:1}
.selmini select{width:100%;font-family:var(--font-mono);font-size:13px;color:var(--c-text);background:var(--c-field);
  border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:9px 30px 9px 12px;appearance:none;cursor:pointer;outline:none;transition:.15s}
.selmini select:focus{border-color:var(--c-secondary)}
.selmini::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid var(--c-text-soft);
  border-bottom:2px solid var(--c-text-soft);transform:translateY(-65%) rotate(45deg);pointer-events:none}
.open-btn{font-family:var(--font);font-size:13.5px;font-weight:600;color:#fff;background:var(--c-primary);border:none;
  border-radius:var(--radius-sm);padding:10px 15px;cursor:pointer;transition:.15s;white-space:nowrap;display:inline-block;text-align:center}
.open-btn:hover{background:var(--c-secondary)}
.pill{position:absolute;top:16px;right:16px;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--c-secondary);border:1px solid color-mix(in srgb, var(--c-secondary) 35%, var(--c-border));
  border-radius:100px;padding:3px 9px}
.pill.soon{color:var(--c-faint);border-color:var(--c-border-strong)}

/* compatibilidad con vistas existentes */
.module-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px;
  display:flex;flex-direction:column;gap:12px;transition:.18s;position:relative;color:var(--c-text)}
.module-card:hover{border-color:var(--c-border-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.module-card h3{margin:0;font-size:15.5px}
.module-card p{margin:0;font-size:13px;color:var(--c-text-soft);flex:1;line-height:1.45}
.module-card small{color:var(--c-faint);font-size:12px}
.module-icon{width:46px;height:46px;border-radius:9px;border:1.5px solid var(--c-primary);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:16px;transition:.18s}
.module-card:hover .module-icon{background:var(--c-primary);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:20px}

/* ---- Tarjetas / paneles genéricos ---- */
.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.card h2{margin:0 0 6px;font-size:19px}
.card .desc{color:var(--c-text-soft);font-size:13px;margin:0 0 16px}

/* ---- Botones genéricos ---- */
.btn{display:inline-block;border:1px solid transparent;border-radius:var(--radius-sm);padding:9px 16px;font-size:13.5px;
  font-weight:600;cursor:pointer;text-align:center;font-family:var(--font);transition:.15s;text-decoration:none!important}
.btn-primary{background:var(--c-btn);color:#fff}
.btn-primary:hover{background:var(--c-secondary)}
.btn-secondary,.btn-ghost{background:transparent;color:var(--c-text-soft);border-color:var(--c-border-strong)}
.btn-secondary:hover,.btn-ghost:hover{background:var(--c-secondary);color:#fff;border-color:var(--c-secondary)}
.btn-danger{background:var(--c-danger);color:#fff}
.btn-danger:hover{filter:brightness(1.1)}
.btn-neutral{background:var(--c-surface2);color:var(--c-text);border-color:var(--c-border)}
.btn-neutral:hover{background:var(--c-secondary);color:#fff;border-color:var(--c-secondary)}
.btn[disabled]{background:var(--c-border-strong);color:var(--c-text-soft);cursor:not-allowed}
.btn:active{transform:translateY(1px)}

/* ---- Formularios ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--c-text);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.05em}
.field input,.field select,.field textarea,
input[type=text],input[type=number],input[type=password],input[type=email],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--c-border);border-radius:var(--radius-sm);
  font-size:14.5px;font-family:var(--font);background:var(--c-field);color:var(--c-text);transition:.15s}
input:hover,select:hover,textarea:hover{border-color:var(--c-border-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c-secondary);background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c-secondary) 16%, transparent)}
input[type=color]{padding:3px;height:42px;background:#fff;cursor:pointer}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--c-primary);transform:scale(1.15);cursor:pointer}
input[type=file]{background:transparent;border:1px dashed var(--c-border-strong);cursor:pointer;padding:7px}
input[type=file]::file-selector-button{background:var(--c-primary);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:9px 14px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;margin-right:12px;transition:.15s}
input[type=file]::file-selector-button:hover{background:var(--c-secondary)}
input::placeholder,textarea::placeholder{color:var(--c-faint)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236A6459' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
select:disabled,input:disabled,textarea:disabled{background:var(--c-surface2);color:var(--c-faint);cursor:not-allowed}
.field .hint{font-size:11.5px;color:var(--c-text-soft);margin-top:4px;text-transform:none;letter-spacing:0;font-weight:400}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
/* Botonera dentro de un form-grid: centrada en altura con el input contiguo (que lleva label encima) */
.form-grid .form-actions{align-self:end;margin-bottom:17px}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}.hero h1{font-size:30px}.search{width:100%}}
fieldset{border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:14px 16px;margin:0 0 16px}
legend{font-family:var(--font-display);font-weight:600;font-size:13px;padding:0 8px}

/* ---- Tablas ---- */
table.data{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--c-card)}
table.data th{background:var(--c-surface2);color:var(--c-text-soft);text-align:left;padding:10px 12px;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--c-border-strong)}
table.data td{padding:9px 12px;border-bottom:1px solid var(--c-border)}
table.data tr:hover td{background:color-mix(in srgb, var(--c-secondary) 24%, white)}
body.density-compact table.data td{padding:5px 9px}
.num{text-align:right;font-family:var(--font-mono);font-size:.95em}

/* ---- Alertas / badges ---- */
.alert{padding:11px 15px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:13.5px;border:1px solid}
.alert-success{background:#F0F4EA;color:#42531F;border-color:#C8D4AE}
.alert-error{background:#F8ECEA;color:#7C2622;border-color:#E4C2BE}
.alert-info{background:var(--c-surface2);color:var(--c-text);border-color:var(--c-border-strong)}
.alert-warning{background:#FBF4D6;color:#6B5A10;border-color:var(--c-accent)}
.badge{display:inline-block;border-radius:100px;padding:3px 11px;font-size:10.5px;font-weight:600;border:1px solid transparent;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em}
.badge-borrador{background:#FBF4D6;color:#6B5A10;border-color:var(--c-accent)}
.badge-validado{background:#F0F4EA;color:#42531F;border-color:var(--c-sage)}
.badge-desvalidado{background:#F8ECEA;color:#7C2622;border-color:#D9A8A4}
.empty{padding:50px;text-align:center;color:var(--c-faint);font-size:14px;background:var(--c-surface2);
  border:1px dashed var(--c-border-strong);border-radius:var(--radius)}
.empty .big{font-size:34px}

/* ---- Login (degradado BSK + panel vertical) ---- */
.auth-body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:var(--font);padding:20px;
  background:linear-gradient(115deg,#E9D261 0%,#F2E9B8 22%,#FBFAF7 46%,#E3E6D2 68%,#9FB089 100%);background-attachment:fixed}
.auth-box{background:var(--c-card);border-radius:18px;box-shadow:0 22px 60px -18px rgba(21,19,15,.30);
  padding:64px 46px 34px;width:100%;max-width:408px;display:flex;flex-direction:column;min-height:640px}
.auth-brand{text-align:center;margin-bottom:34px}
.auth-brand img{height:56px}
.auth-brand h1{margin:26px 0 6px;font-size:26px;letter-spacing:-.02em}
.auth-brand p{margin:0;color:var(--c-text-soft);font-size:14px}
.auth-foot{margin-top:auto;padding-top:38px;text-align:center;color:var(--c-faint);font-size:11.5px;line-height:1.7}
.auth-foot b{display:block;color:var(--c-text-soft);font-weight:600}
.auth-box .btn{width:100%;padding:14px;font-size:15px;border-radius:9px;margin-top:8px}
.auth-box .field{margin-bottom:18px}

/* ---- Utilidades ---- */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.muted{color:var(--c-text-soft)}.small{font-size:12px}
.ver{font-size:10px;color:var(--c-faint);font-weight:400;font-family:var(--font-mono);letter-spacing:0}
tr.row-click{cursor:pointer}

/* ---- Administración: menú lateral (botones limpios) + panel ---- */
.admin-shell{display:flex;gap:32px;align-items:flex-start}
.admin-menu{width:224px;flex-shrink:0;position:sticky;top:96px}
.admin-eyebrow{margin-bottom:14px}
.admin-menu ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.admin-menu a{display:flex;align-items:center;height:40px;padding:0 14px;font-size:13.5px;font-weight:500;
  color:var(--c-text-soft);border-radius:var(--radius-sm);transition:.15s} /* 40px = misma caja que .btn */
.admin-menu a:hover{background:var(--c-secondary);color:#fff}
.admin-menu a.active{background:var(--c-primary);color:#fff;font-weight:600}
.admin-menu a:active{transform:translateY(1px)} /* mismo efecto de pulsacion que los botones */
.admin-panel{flex:1;min-width:0}
.admin-panel > .card:last-child{margin-bottom:0}
@media(max-width:860px){.admin-shell{flex-direction:column}.admin-menu{width:100%;position:static}
  .admin-menu ol{flex-direction:row;flex-wrap:wrap}}


/* ---- Pestañas (ficha del expediente) ---- */
.tabbar{display:flex;gap:4px;flex-wrap:wrap;align-items:flex-end;border-bottom:1px solid var(--c-border-strong);
  margin:18px 0 22px;position:sticky;top:72px;background:var(--c-bg);z-index:20;padding-top:8px}
.tab-btn{border:1px solid transparent;background:transparent;padding:9px 14px;font-family:var(--font);
  font-size:13.5px;font-weight:600;color:var(--c-text-soft);cursor:pointer;border-radius:8px 8px 0 0;
  transition:.15s;white-space:nowrap}
.tab-btn:hover{background:var(--c-secondary);color:#fff}
.tab-btn.active{background:var(--c-card);color:var(--c-text);border-color:var(--c-border-strong);
  border-bottom-color:var(--c-card);margin-bottom:-1px}
.tab-btn .badge{margin-left:6px}
[data-panel]{display:none}
[data-panel].activo{display:block;animation:despliega .15s ease-out}

/* ---- Desplegable (details.reveal) y herramientas de tabla ---- */
details.reveal{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:20px}
details.reveal>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 22px;
  font-family:var(--font-display);font-weight:600;font-size:15px;user-select:none}
details.reveal>summary::-webkit-details-marker{display:none}
details.reveal>summary::before{content:'+';font-family:var(--font-mono);width:26px;height:26px;flex-shrink:0;
  border:1.5px solid var(--c-primary);border-radius:7px;display:grid;place-items:center;font-size:15px;transition:.18s}
details.reveal[open]>summary::before{content:'–';background:var(--c-primary);color:#fff}
details.reveal>summary:hover::before{background:var(--c-secondary);border-color:var(--c-secondary);color:#fff}
details.reveal .reveal-body{padding:14px 22px 22px;border-top:1px solid var(--c-border)}
.table-tools{display:flex;align-items:center;gap:14px;margin:2px 0 16px}
.table-tools .search{width:300px}
.table-tools .search input{padding-top:9px;padding-bottom:9px;font-size:13.5px}
.toolbar{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.toolbar .btn{height:40px;display:inline-flex;align-items:center}
.toolbar .search input{height:40px}
.toolbar .search{width:320px}
.toolbar .search input{padding-top:10px;padding-bottom:10px;font-size:13.5px}
.panel-plegable{animation:despliega .18s ease-out}
@keyframes despliega{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- Modal de confirmación propio ---- */
dialog.bsk-modal{border:1px solid var(--c-border);border-radius:var(--radius);padding:0;width:min(92vw,420px);
  box-shadow:0 24px 70px -20px rgba(21,19,15,.35);background:var(--c-card);color:var(--c-text);font-family:var(--font)}
dialog.bsk-modal::backdrop{background:rgba(21,19,15,.45)}
.bsk-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--c-border)}
.bsk-modal-titulo{font-family:var(--font-display);font-weight:700;font-size:15.5px}
.bsk-modal-x{background:none;border:none;font-size:22px;line-height:1;color:var(--c-text-soft);cursor:pointer;
  width:30px;height:30px;border-radius:7px;transition:.15s}
.bsk-modal-x:hover{background:var(--c-secondary);color:#fff}
.bsk-modal-msg{margin:0;padding:20px;font-size:14.5px;color:var(--c-text)}
.bsk-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:0 20px 20px}
dialog.bsk-modal[open]{animation:despliega .16s ease-out}

/* ---- Avisos: x de cierre y salida suave ---- */
.alert{position:relative;padding-right:42px}
.alert-x{position:absolute;top:7px;right:8px;background:none;border:none;font-size:19px;line-height:1;
  color:inherit;opacity:.55;cursor:pointer;width:26px;height:26px;border-radius:6px;transition:.15s}
.alert-x:hover{opacity:1;background:rgba(21,19,15,.08)}
.alert-saliendo{opacity:0;transform:translateY(-4px);transition:.26s}

/* ============================================================
   Componentes reutilizables para módulos — Espacio BSK
   Disponibles en todos los módulos sin incluir nada adicional.
   Documentación: /docs/GUIA_ESTILOS.md
   ============================================================ */

/* Ocultar inputs file nativos cuando se usan drop zones personalizadas */
.drop-zone input[type=file],
.drop-zone-sm input[type=file] { display: none; }

/* ---- Pestañas tipo segmented control ---- */
.mod-tabs { display:flex;gap:4px;background:var(--c-surface2);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:4px;margin-bottom:28px;max-width:600px }
.mod-tab { flex:1;padding:9px 12px;border:none;background:transparent;color:var(--c-text-soft);
  font-size:13.5px;font-weight:500;cursor:pointer;border-radius:calc(var(--radius) - 3px);
  font-family:var(--font);transition:.15s }
.mod-tab.active { background:var(--c-card);color:var(--c-text);font-weight:600;
  box-shadow:0 1px 4px rgba(0,0,0,.08) }
.mod-tab:hover:not(.active) { color:var(--c-text);background:var(--c-field) }
.mod-panel { display:none }
.mod-panel.active { display:block }

/* ---- Drop zone grande ---- */
.drop-zone { border:2px dashed var(--c-border-strong);border-radius:var(--radius);
  padding:44px 24px;text-align:center;cursor:pointer;transition:.18s;margin-bottom:16px }
.drop-zone:hover, .drop-zone.over { border-color:var(--c-secondary);
  background:color-mix(in srgb,var(--c-secondary) 6%,var(--c-bg)) }
.dz-icon { font-size:34px;margin-bottom:10px;line-height:1 }
.dz-title { font-size:15px;color:var(--c-text);margin-bottom:4px }
.dz-hint { font-size:12px;color:var(--c-faint) }

/* ---- Drop zones pequeñas en paralelo ---- */
.drop-pair { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px }
.drop-zone-sm { border:2px dashed var(--c-border-strong);border-radius:var(--radius);
  padding:22px 12px;text-align:center;cursor:pointer;font-size:13px;
  color:var(--c-text-soft);transition:.18s }
.drop-zone-sm:hover, .drop-zone-sm.over { border-color:var(--c-secondary);
  background:color-mix(in srgb,var(--c-secondary) 6%,var(--c-bg)) }
.drop-zone-sm.loaded { border-color:var(--c-secondary);color:var(--c-secondary) }
.dz-sm-icon { font-size:22px;margin-bottom:6px }

/* ---- Stat cards (métricas con número grande) ---- */
.stat-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;margin-bottom:16px }
.stat-card { background:var(--c-surface2);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:14px;text-align:center }
.stat-value { display:block;font-family:var(--font-display);font-size:28px;
  font-weight:700;color:var(--c-secondary) }
.stat-label { display:block;font-size:11px;color:var(--c-faint);
  text-transform:uppercase;letter-spacing:.06em;margin-top:4px }

/* ---- Log de proceso ---- */
.process-log { max-height:140px;overflow-y:auto;margin-bottom:12px;
  display:flex;flex-direction:column;gap:3px }
.process-log::-webkit-scrollbar { width:4px }
.process-log::-webkit-scrollbar-track { background:var(--c-surface2) }
.process-log::-webkit-scrollbar-thumb { background:var(--c-border-strong);border-radius:2px }
.log-line { font-size:13px;padding:5px 10px;border-radius:var(--radius-sm) }
.log-ok   { background:color-mix(in srgb,var(--c-ok)   12%,transparent);color:var(--c-ok) }
.log-warn { background:color-mix(in srgb,var(--c-warn) 12%,transparent);color:var(--c-warn) }
.log-info { background:var(--c-surface2);color:var(--c-text-soft) }

/* ---- Navegador de registros prev / next ---- */
.record-nav { display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;padding:10px 14px;background:var(--c-surface2);
  border:1px solid var(--c-border);border-radius:var(--radius) }
.record-nav-info { font-size:13px;color:var(--c-text-soft) }

/* ---- Subpanel interior ---- */
.subpanel { background:var(--c-surface2);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:16px;margin-bottom:14px }
.subpanel-title { font-size:14px;font-weight:600;margin-bottom:10px;color:var(--c-text) }
.subpanel-list { max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:4px }
.subpanel-list::-webkit-scrollbar { width:4px }
.subpanel-list::-webkit-scrollbar-track { background:var(--c-surface2) }
.subpanel-list::-webkit-scrollbar-thumb { background:var(--c-border-strong);border-radius:2px }
.list-item { background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);padding:8px 12px;font-size:12.5px;
  display:flex;align-items:center;gap:10px }

/* ---- Fila clave / valor (ficha de entidad) ---- */
.kv-row { display:flex;align-items:flex-start;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--c-border);font-size:13.5px }
.kv-row:last-child { border-bottom:none }
.kv-label { color:var(--c-faint);width:120px;flex-shrink:0;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;padding-top:2px;font-weight:600 }
.kv-value { color:var(--c-text);word-break:break-all }

/* ---- Caja de resultados positivos ---- */
.results-box { background:color-mix(in srgb,var(--c-ok) 8%,var(--c-card));
  border:1px solid color-mix(in srgb,var(--c-ok) 30%,var(--c-border));
  border-radius:var(--radius);padding:16px;margin-bottom:14px }
.results-title { font-size:13px;font-weight:600;color:var(--c-ok);margin-bottom:10px }
.results-item { background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:6px;font-size:13px }

/* ============================================================
   Dashboard — Pestañas (Favoritos + Áreas)
   ============================================================ */
.dash-tabs { display:flex;gap:4px;flex-wrap:wrap;align-items:flex-end;
  border-bottom:1px solid var(--c-border-strong);margin:0 0 28px;
  position:sticky;top:113px;background:var(--c-bg);z-index:18;padding-top:8px }
.dash-tab { border:1px solid transparent;background:transparent;
  padding:10px 16px;font-family:var(--font);font-size:13.5px;font-weight:600;
  color:var(--c-text-soft);cursor:pointer;border-radius:8px 8px 0 0;
  transition:.15s;white-space:nowrap;margin-bottom:-1px }
.dash-tab:hover { background:var(--c-secondary);color:#fff }
.dash-tab.active { background:var(--c-primary);color:#fff;
  border-color:var(--c-primary);border-bottom-color:var(--c-primary) }
.dash-panel { display:none }
.dash-panel.active { display:block;animation:despliega .15s ease-out }

/* ============================================================
   Tarjeta de módulo en el dashboard — estrella de favorito
   ============================================================
   El wrapper .tcard-fav-wrap quita el padding propio de .tcard y
   delega el padding interno al hijo .tcard-link, para que la zona
   sensible al click cubra todo el cuerpo de la tarjeta excepto la
   esquina superior derecha (que tiene la estrella).

   .tcard-corner agrupa pill + estrella en la esquina superior
   derecha, apilados verticalmente. Cualquier futuro control extra
   en esa esquina entra en este mismo contenedor.

   .fav-star es un SVG con silueta. Color base gris suave; al activar
   .is-fav se rellena de verde oliva (--c-secondary). El hover sigue
   siendo ámbar para indicar interactividad.
   ============================================================ */
.tcard-fav-wrap { padding: 0; overflow: visible; position: relative }
.tcard-fav-wrap .tcard-link {
  display: flex; flex-direction: column; padding: 24px;
  color: inherit; text-decoration: none; flex: 1
}
.tcard-fav-wrap .tcard-link .cfoot .open-btn { width: 100% }

.tcard-corner {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.tcard-corner > * { pointer-events: auto }
/* Dentro de .tcard-corner el pill se sitúa por flujo, no absoluto */
.tcard-corner .pill { position: static }

.fav-star {
  width: 22px; height: 22px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center;
  color: var(--c-faint);
  transition: color .15s, transform .12s;
}
.fav-star svg { display: block; pointer-events: none; }
.fav-star svg path {
  fill: none;
  stroke: currentColor;
}
.fav-star.is-fav { color: var(--c-secondary) }
.fav-star.is-fav svg path { fill: currentColor }
.fav-star:hover { color: var(--c-warn); transform: scale(1.12) }
.fav-star.busy { opacity: .4; cursor: wait; transform: none }
.fav-star:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 3px; border-radius: 4px }

/* ============================================================
   Appearance admin — Grupos visuales
   ============================================================ */
.appearance-group { margin-top:22px;padding-top:18px;
  border-top:1px solid var(--c-border) }
.appearance-group:first-of-type { margin-top:0;padding-top:0;border-top:none }
.appearance-group-title { font-family:var(--font-display);font-weight:600;
  font-size:13.5px;color:var(--c-text-soft);text-transform:uppercase;
  letter-spacing:.08em;margin:0 0 14px }
.logo-block { display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap }
.logo-preview { background:var(--c-surface2);border:1px solid var(--c-border);
  border-radius:var(--radius-sm);padding:12px;display:grid;place-items:center;
  min-width:120px;min-height:74px }
.logo-preview img { max-height:46px;max-width:200px;display:block }
.logo-preview .muted { font-size:12px;color:var(--c-text-soft) }
.logo-picker { flex:1;min-width:260px }

/* ============================================================
   Cabeceras de columna ordenables (componente global canónico)
   HTML: <th class="sortable" data-col="N" data-type="str|num">Título <span class="sort-icon" aria-hidden="true"></span></th>
   JS común: añade exclusivamente .sort-asc o .sort-desc al <th>.
   El texto de la cabecera nunca cambia de tamaño, peso ni espaciado.
   ============================================================ */
table.data thead th.sortable {
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  white-space:nowrap;
}
table.data thead th.sortable:hover { color:var(--c-secondary) }
table.data thead th.sortable .sort-icon {
  display:inline-block;
  width:1em;
  margin-left:3px;
  color:var(--c-faint);
  font-family:var(--font);
  font-size:10px;
  font-weight:400;
  line-height:1;
  text-align:center;
  vertical-align:baseline;
}
table.data thead th.sortable .sort-icon::before { content:'↕' }
table.data thead th.sortable.sort-asc .sort-icon::before { content:'↑' }
table.data thead th.sortable.sort-desc .sort-icon::before { content:'↓' }
table.data thead th.sortable.sort-asc .sort-icon,
table.data thead th.sortable.sort-desc .sort-icon { color:var(--c-secondary) }

/* Listados de copias: reserva espacio estable para MB y su indicador. */
.backup-sortable-table thead th.backup-size {
  width:72px;
  min-width:72px;
  white-space:nowrap;
}


/* Cabecera específica para móviles */
@media (max-width: 700px) {
  .topbar{min-height:56px;padding:7px 10px;gap:7px;flex-wrap:nowrap}
  .topbar .tb-backslot{flex:0 0 auto}
  .topbar .tb-backslot .btn{padding:7px 8px;font-size:12px}
  .topbar-brand{min-width:0;gap:7px;flex:1}
  .topbar-brand img{height:27px;max-width:72px;object-fit:contain}
  .topbar-brand .logo-texto{font-size:18px}
  .topbar-brand .div{height:24px;margin:0 1px}
  .topbar-brand .tb-mod{min-width:0;line-height:1.02}
  .topbar-brand .tb-mod strong{display:flex;align-items:baseline;gap:3px;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-brand .tb-mod .ver{font-size:8px;font-weight:500;opacity:.72;white-space:nowrap}
  .topbar-brand .tb-mod small{display:none}
  .topbar-user{flex:0 0 auto;gap:5px}
  .topbar-user .who{display:none}
  .topbar-user .avatar{width:30px;height:30px;font-size:11px}
  .topbar-user .btn{padding:7px 8px;font-size:0}
  .topbar-user a[href*="admin"]::before{content:'⚙';font-size:15px}
  .topbar-user form button::before{content:'↪';font-size:15px}
  .tb-account-trigger{gap:0}
}
@media (max-width: 430px) {
  .topbar-brand img{height:24px;max-width:58px}
  .topbar-brand .div{display:none}
  .topbar-brand .tb-mod strong{font-size:13px}
  .topbar .tb-backslot:not(.hide) + .topbar-brand img{display:none}
}

/* ============================================================
   Ajuste móvil: cabecera sin logotipo y pestañas del dashboard
   adhesivas, con fondo opaco para ocultar el contenido al pasar.
   ============================================================ */
@media (max-width: 700px) {
  /* En móvil se conserva siempre el mismo contenido: título y versión,
     sin mostrar el logotipo corporativo. */
  .topbar-brand img,
  .topbar-brand .logo-texto,
  .topbar-brand .div {
    display:none !important;
  }
  .topbar-brand {
    gap:0;
  }
  .topbar-brand .tb-mod {
    display:flex;
    min-width:0;
  }
  .topbar-brand .tb-mod strong {
    overflow:visible;
    text-overflow:clip;
  }

  /* La barra de áreas se queda bajo la cabecera y actúa como máscara:
     las tarjetas se desplazan por detrás, pero nunca se ven por encima
     de su línea divisoria inferior. */
  .dash-tabs {
    position:sticky;
    top:56px;
    z-index:24;
    background:var(--c-bg) !important;
    margin-bottom:18px !important;
    padding-top:8px;
    isolation:isolate;
  }
  .dash-tabs::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-8px;
    height:8px;
    background:var(--c-bg);
    pointer-events:none;
  }
  .dash-tabs::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    background:var(--c-border-strong);
    pointer-events:none;
  }
}


/* Corrección móvil 1.4.16: título fijo y altura real de cabecera */
@media (max-width:700px){
  .topbar{height:56px!important;min-height:56px!important;padding:7px 10px!important}
  .topbar-brand{display:flex!important;flex:1 1 auto!important;min-width:0!important;gap:0!important}
  .topbar-brand>img,.topbar-brand>.logo-texto,.topbar-brand>.div{display:none!important}
  .topbar-brand .tb-mod{display:flex!important;min-width:0!important;line-height:1!important}
  .topbar-brand .tb-mod strong{font-size:0!important;display:flex!important;align-items:baseline!important;gap:4px!important;white-space:nowrap!important;overflow:visible!important}
  .topbar-brand .tb-mod strong::before{content:"Espacio BSK";font-size:14px!important;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;color:var(--c-text)}
  .topbar-brand .tb-mod strong .ver{display:inline!important;font-size:8px!important;font-weight:500!important;opacity:.72!important}
  .topbar-brand .tb-mod small{display:none!important}
}

/* ============================================================
   Tarjeta canónica de módulo del dashboard
   Una sola estructura para Favoritos y áreas, con o sin selector.
   ============================================================ */
.cards {
  align-items: stretch;
}
.cards > .tcard-module-standard {
  height: 100%;
}
.tcard.tcard-module-standard {
  min-height: 0;
  padding: 12px 24px;
  box-sizing: border-box;
  overflow: hidden;
}
.tcard-module-standard .tcard-meta {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.tcard-module-standard .fav-star {
  position: static;
  margin: 0;
  flex: 0 0 auto;
}
.tcard-module-standard .pill {
  position: static;
  margin: 0;
  flex: 0 0 auto;
}
.tcard-module-standard .tcard-main-content {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.tcard-module-standard .tcard-identity {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 13px;
}
.tcard-module-standard .mono-sq {
  flex: 0 0 46px;
}
.tcard-module-standard .mono-sq.has-module-icon {
  font-size: 25px;
  line-height: 1;
}
.tcard-module-standard .tcard-title {
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.tcard-module-standard .tcard-version {
  margin: 5px 0 14px 59px;
  color: var(--c-faint);
  font-size: 12px;
  line-height: 1.2;
}
.tcard-module-standard .tdesc {
  display: -webkit-box;
  min-height: calc(1.45em * 3);
  max-height: calc(1.45em * 3);
  margin: 0;
  overflow: hidden;
  color: var(--c-text-soft);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.tcard-module-standard .tcard-footer {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.tcard-module-standard .tcard-quick-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0;
}
.tcard-module-standard .tcard-controls {
  display: flex;
  min-height: 42px;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 0;
}
.tcard-module-standard .tcard-controls-empty {
  visibility: hidden;
}
.tcard-module-standard .tcard-quick-field {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.tcard-module-standard .tcard-quick-label {
  color: var(--c-text);
  font-size: 12px;
  white-space: nowrap;
}
.tcard-module-standard .tcard-quick-field .selmini {
  width: 100%;
  min-width: 0;
}
.tcard-module-standard .open-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  text-align: center;
}
@media (max-width: 640px) {
  .tcard.tcard-module-standard {
    min-height: 0;
    padding: 12px 20px;
  }
  .tcard-module-standard .tcard-meta {
    margin-bottom: 10px;
  }
  .tcard-module-standard .tcard-quick-field {
    grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
    gap: 8px;
  }
}
/* Administración: paneles de rol con el mismo desplegable nativo que Copias de seguridad. */
details.role-permissions { margin-bottom:20px; }
details.role-permissions > summary { cursor:pointer;padding:16px 22px;font-family:var(--font-display);font-size:15px;user-select:none; }
details.role-permissions .role-permissions-body { padding:14px 22px 22px;border-top:1px solid var(--c-border); }

/* Copias de seguridad: menos ancho para Nombre/Módulo y más para Contenido/Archivo. */
.backup-sortable-table { table-layout:fixed; }
.backup-sortable-table .backup-name { width:21%; }
.backup-sortable-table .backup-content { width:39%; }
.backup-sortable-table .backup-module-name { width:16%; }
.backup-sortable-table .backup-module-file { width:44%; }


/* ========================================================================== 
   Sistema visual global de Espacio BSK — fuente única para núcleo y módulos
   ========================================================================== */
:root{--bsk-font-size-display:38px;--bsk-font-size-title:21px;--bsk-font-size-title-small:17px;--bsk-font-size-subtitle:16px;--bsk-font-size-body:13.5px;--bsk-font-size-small:12px;--bsk-font-size-micro:10.5px;--bsk-color-text-primary:var(--c-text);--bsk-color-text-muted:var(--c-text-soft);--bsk-color-display:var(--bsk-color-text-primary);--bsk-color-title:var(--bsk-color-text-primary);--bsk-color-subtitle:var(--bsk-color-text-muted);--bsk-color-body:var(--bsk-color-text-primary);--bsk-color-small:var(--bsk-color-text-muted);--bsk-color-micro:var(--bsk-color-text-muted);--bsk-button-primary-bg:var(--c-primary);--bsk-button-primary-text:#fff;--bsk-button-primary-border:var(--c-primary);--bsk-button-normal-bg:var(--c-card);--bsk-button-normal-text:var(--c-text);--bsk-button-normal-border:var(--c-border-strong);--bsk-button-hover-bg:var(--c-secondary);--bsk-button-hover-text:#fff;--bsk-button-hover-border:var(--c-secondary);--bsk-button-height:40px;--bsk-button-width:160px;--bsk-button-radius:8px;--bsk-button-font-size:var(--bsk-font-size-body);--bsk-tabs-bg:var(--c-surface2);--bsk-tabs-border:var(--c-border);--bsk-tab-active-bg:var(--c-primary);--bsk-tab-active-text:#fff;--bsk-tab-hover-bg:var(--c-secondary);--bsk-tab-hover-text:#fff;--bsk-tab-height:44px;--bsk-tab-radius:8px}
.bsk-title-xl{margin:0;font-family:var(--font-display);font-size:var(--bsk-font-size-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--bsk-color-display)}
.bsk-title{margin:0;font-family:var(--font-display);font-size:var(--bsk-font-size-title);font-weight:600;line-height:1.2;color:var(--bsk-color-title)}
.bsk-title-small{margin:0;font-family:var(--font-display);font-size:var(--bsk-font-size-title-small);font-weight:600;line-height:1.25;color:var(--bsk-color-title)}
.bsk-subtitle{font-family:var(--font);font-size:var(--bsk-font-size-subtitle);line-height:1.45;color:var(--bsk-color-subtitle)}
.bsk-text{font-family:var(--font);font-size:var(--bsk-font-size-body);line-height:1.5;color:var(--bsk-color-body)}
.bsk-text-small{font-family:var(--font);font-size:var(--bsk-font-size-small);line-height:1.45;color:var(--bsk-color-small)}
.bsk-text-micro{font-family:var(--font);font-size:var(--bsk-font-size-micro);line-height:1.35;color:var(--bsk-color-micro)}
.ui-color-primary{color:var(--bsk-color-text-primary)!important}.ui-color-muted{color:var(--bsk-color-text-muted)!important}
.bsk-panel-title{margin:0 0 12px;font-family:var(--font-display);font-size:var(--bsk-font-size-small);font-weight:700;line-height:1.3;color:var(--bsk-color-title);text-transform:uppercase;letter-spacing:.035em}
.btn,.bsk-btn{display:inline-flex;min-height:var(--bsk-button-height);align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:1px solid var(--bsk-button-normal-border);border-radius:var(--bsk-button-radius);background:var(--bsk-button-normal-bg);color:var(--bsk-button-normal-text);font-family:var(--font);font-size:var(--bsk-button-font-size);font-weight:600;line-height:1.2;text-decoration:none;vertical-align:middle;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,opacity .15s,transform .05s}
.btn:hover,.btn:focus-visible,.bsk-btn:hover,.bsk-btn:focus-visible{background:var(--bsk-button-hover-bg);border-color:var(--bsk-button-hover-border);color:var(--bsk-button-hover-text)}
.btn-primary,.bsk-btn-primary{background:var(--bsk-button-primary-bg);border-color:var(--bsk-button-primary-border);color:var(--bsk-button-primary-text)}
.btn-primary:hover,.bsk-btn-primary:hover{background:var(--bsk-button-hover-bg);border-color:var(--bsk-button-hover-border);color:var(--bsk-button-hover-text)}
.btn-secondary,.btn-neutral,.btn-ghost{background:var(--bsk-button-normal-bg);border-color:var(--bsk-button-normal-border);color:var(--bsk-button-normal-text)}
.btn-secondary:hover,.btn-neutral:hover,.btn-ghost:hover{background:var(--bsk-button-hover-bg);border-color:var(--bsk-button-hover-border);color:var(--bsk-button-hover-text)}
.btn-danger,.bsk-btn-danger{background:var(--c-danger);border-color:var(--c-danger);color:#fff}.btn-danger:hover,.bsk-btn-danger:hover{background:var(--bsk-button-hover-bg);border-color:var(--bsk-button-hover-border);color:var(--bsk-button-hover-text);filter:none}
.bsk-btn-success{border-color:var(--c-ok);color:var(--c-ok)}.bsk-btn-warning{border-color:var(--c-warn);color:var(--c-warn)}
.btn[disabled],.bsk-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.btn-standard,.bsk-btn-standard{width:auto;min-width:var(--bsk-button-width)}.btn-compact,.bsk-btn-compact{min-height:32px;padding:5px 10px;font-size:var(--bsk-font-size-small)}
.tabbar,.bsk-tabs{display:flex;width:100%;align-items:stretch;gap:4px;padding:4px;margin:0 0 20px;background:var(--bsk-tabs-bg);border:1px solid var(--bsk-tabs-border);border-radius:calc(var(--bsk-tab-radius) + 3px);overflow-x:auto;scrollbar-width:thin}
.tab-btn,.bsk-tab{display:flex;flex:1 0 auto;min-height:var(--bsk-tab-height);align-items:center;justify-content:center;padding:8px 14px;border:0;border-radius:var(--bsk-tab-radius);background:transparent;color:var(--c-text-soft);font-family:var(--font);font-size:var(--bsk-font-size-body);font-weight:600;line-height:1.2;text-align:center;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.tab-btn:hover,.bsk-tab:hover{background:var(--bsk-tab-hover-bg);color:var(--bsk-tab-hover-text)}.tab-btn.active,.tab-btn.is-active,.bsk-tab.active,.bsk-tab.is-active{background:var(--bsk-tab-active-bg);color:var(--bsk-tab-active-text);border-color:transparent;box-shadow:none}
.visual-setting-row{padding:12px;border:1px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-surface2)}.visual-setting-controls{display:grid;grid-template-columns:minmax(90px,1fr) 52px;gap:8px;margin-bottom:10px}.visual-setting-controls input[type=color]{width:52px;height:42px;padding:3px}.style-preview{min-height:58px;display:flex;align-items:center;padding:12px;background:var(--c-card);border:1px dashed var(--c-border-strong);border-radius:var(--radius-sm);overflow:hidden}.style-preview-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:16px;background:var(--c-surface2);border:1px solid var(--c-border);border-radius:var(--radius)}.style-tabs-preview{margin-top:16px;margin-bottom:0}

.visual-setting-controls-single{grid-template-columns:1fr}.visual-setting-row .style-preview+.style-preview{margin-top:8px}


/* Dashboard: tarjeta completa clicable y ordenación drag&drop. */
.tcard-module-standard,
.tcard-module-standard[data-reorderable="1"],
.tcard-module-standard[data-reorderable="1"]:hover,
.tcard-module-standard[data-reorderable="1"]:active,
.tcard-module-standard * { cursor:pointer!important; }
.tcard-module-standard select,
.tcard-module-standard select *,
.tcard-module-standard option { cursor:default!important; }
.tcard-module-standard.is-dragging {
  opacity:.48;
  transform:scale(.985);
  box-shadow:none;
}
.cards.is-saving-order { opacity:.82; }

/* Copias de seguridad: prioriza una sola línea de acciones sin desbordar la tarjeta. */
.backup-sortable-table {
  width:100%;
  max-width:100%;
  table-layout:fixed;
}
.backup-sortable-table th,
.backup-sortable-table td {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.backup-sortable-table .backup-name { width:17%; }
.backup-sortable-table .backup-date { width:14%; }
.backup-sortable-table .backup-size {
  width:7%;
  min-width:0;
}
.backup-sortable-table .backup-content { width:37%; }
.backup-sortable-table .backup-actions {
  width:25%;
  padding-left:6px;
  padding-right:6px;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
}
.backup-sortable-table .backup-actions form.inline {
  display:inline-block;
  margin-left:4px;
  vertical-align:middle;
}
.backup-sortable-table .backup-actions .btn {
  min-height:34px;
  max-width:100%;
  padding:6px 9px;
  font-size:11.5px;
  white-space:nowrap;
}

/* Listado de copias de módulos: mismo espacio estable para acciones. */
.backup-sortable-table .backup-module-name { width:13%; }
.backup-sortable-table .backup-module-file { width:41%; }

@media (max-width:900px) {
  .backup-sortable-table .backup-name { width:15%; }
  .backup-sortable-table .backup-date { width:14%; }
  .backup-sortable-table .backup-size { width:8%; }
  .backup-sortable-table .backup-content { width:35%; }
  .backup-sortable-table .backup-actions { width:28%; padding-left:4px; padding-right:4px; }
  .backup-sortable-table .backup-module-name { width:12%; }
  .backup-sortable-table .backup-module-file { width:38%; }
  .backup-sortable-table .backup-actions .btn { padding-left:7px; padding-right:7px; font-size:11px; }
}

/* Dashboard: saludo principal más compacto. */
.hero h1 {
  font-size:32px;
  line-height:1.08;
}

/* Copias de seguridad: acciones con las dimensiones estándar de los botones globales. */
.backup-sortable-table .backup-actions .btn {
  min-height:38px;
  width:auto;
  min-width:0;
  padding:9px 16px;
  font-size:13.5px;
  line-height:1.35;
  white-space:nowrap;
}

@media (max-width:720px) {
  .hero h1 { font-size:27px; }
}


/* Copias de seguridad: Fecha -20%, MB -25%; espacio recuperado para Acciones. */
.backup-sortable-table .backup-date { width:11.2%; }
.backup-sortable-table .backup-size { width:5.25%; min-width:0; }
.backup-sortable-table .backup-actions { width:29.55%; }

@media (max-width:900px) {
  .backup-sortable-table .backup-date { width:11.2%; }
  .backup-sortable-table .backup-size { width:6%; }
  .backup-sortable-table .backup-actions { width:32.8%; }
}

/* ── Spinner global de "ocupado" para botones y enlaces (ver app.js) ── */
.bsk-btn-spinner {
  display:inline-block; width:13px; height:13px;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; vertical-align:-2px;
  animation:bskBtnSpin .7s linear infinite;
}
@keyframes bskBtnSpin { to { transform:rotate(360deg); } }
a.is-disabled { pointer-events:none; opacity:.7; }

/* iOS: evita el zoom automatico al enfocar un campo con fuente < 16px en movil.
   Forzar 16px en los controles de formulario lo desactiva sin bloquear el pinch-zoom. */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select,
  textarea { font-size: 16px !important; }
}


/* ============================================================
   Móvil: dashboard en 3 columnas, tarjeta compacta (solo logo + título).
   Mismos selectores que las reglas base, colocadas al final para prevalecer
   dentro del media query (sin !important).
   ============================================================ */
@media (max-width: 640px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .tcard.tcard-module-standard { padding: 12px 8px; min-height: 0; }
  .tcard-module-standard .tcard-meta,
  .tcard-module-standard .tcard-version,
  .tcard-module-standard .tdesc,
  .tcard-module-standard .tcard-footer { display: none; }
  .tcard-module-standard .tcard-main-content { gap: 0; }
  .tcard-module-standard .tcard-identity { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .tcard-module-standard .mono-sq { width: 40px; height: 40px; font-size: 14px; }
  .tcard-module-standard .tcard-title { font-size: 12px; line-height: 1.15; word-break: break-word; }
}


/* ---- Botones de accion en listados (icono). Mismo icono por accion en todo Admin. ---- */
.bsk-actions{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-wrap:nowrap}
.bsk-actions form{display:inline-flex;margin:0}
.bsk-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:34px;padding:0;border:1px solid var(--c-border,#E4E0D5);border-radius:8px;background:var(--c-surface2,#F3F0E7);color:var(--c-text-soft,#6A6459);cursor:pointer;transition:.15s;vertical-align:middle;text-decoration:none;flex:0 0 auto}
.bsk-iconbtn:hover,.bsk-iconbtn:focus{background:#ECE6D8;color:var(--c-text,#15130F);border-color:var(--c-text-soft,#b8b2a6);outline:none}
.bsk-iconbtn svg{width:17px;height:17px;display:block}
.bsk-iconbtn.is-danger{background:#FBEEEE}
.bsk-iconbtn.is-danger:hover,.bsk-iconbtn.is-danger:focus{background:#fadbdb;color:#dc2626;border-color:#f0b8b8}
.bsk-iconbtn.is-accent{background:#FBF4DC}
.bsk-iconbtn.is-accent:hover,.bsk-iconbtn.is-accent:focus{background:#f5e9bd;color:#B58900;border-color:#e7d98c}
.bsk-iconbtn.is-on{background:#E7F4E7;color:#1f9d3a;border-color:#bfe3bf}
.bsk-iconbtn.is-on:hover,.bsk-iconbtn.is-on:focus{background:#d6ecd6;color:#157a2c;border-color:#9fd29f}
.bsk-iconbtn.is-off{background:var(--c-surface2,#F3F0E7);color:#9aa0a6;border-color:var(--c-border,#E4E0D5)}
.bsk-iconbtn.is-off:hover,.bsk-iconbtn.is-off:focus{background:#ECE6D8;color:#6b7075;border-color:var(--c-text-soft,#b8b2a6)}
.bsk-iconbtn.is-disabled,.bsk-iconbtn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}