/* Modos de pantalla: Automático · Vertical · Horizontal (assets/layout.js).

   layout.js decide cuántas columnas caben y lo marca en <html>:
     data-cols="1"  una columna (teléfono vertical, modo Vertical)
     data-cols="2"  dos columnas (tableta acostada, laptop chica, teléfono acostado)
     data-cols="3"  columnas amplias (1280 px o más)
     data-short     poca altura (teléfono acostado)
     data-roomy     una columna con espacio de sobra (tableta vertical)
     data-page      la página (ficha, combate, dm…)
   Cada página reparte su contenido en .lay-grid > .lay-aside + .lay-main.
   Con una columna, .lay-grid/.lay-aside/.lay-main no hacen nada
   (display:contents) y la página se ve exactamente como antes.
   Va después del CSS de cada página: sus reglas ganan por especificidad
   (html[data-cols] …), no por orden. */

/* ---------- Selector ---------- */
.lay-slot{display:inline-flex;}
.lay-slot.in-plate{position:absolute;top:12px;right:12px;z-index:2;}
.lay-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 11px 0 9px;border-radius:999px;cursor:pointer;position:relative;white-space:nowrap;
  background:var(--surface-2,#282c30);border:1px solid var(--border,#3c4146);color:var(--text,#eef0f2);
  font-family:'Work Sans',-apple-system,sans-serif;font-size:12.5px;font-weight:600;}
.lay-btn svg,.lay-choice svg{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
.lay-btn svg{width:18px;height:18px;stroke:var(--accent-light,#c2b280);}
.lay-btn svg .f{fill:var(--surface-2,#282c30);}
.lay-btn[aria-expanded="true"]{border-color:var(--accent-light,#c2b280);}
.lay-btn:focus-visible{outline:2px solid var(--accent-light,#c2b280);outline-offset:2px;}
.lay-warn{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#e0b04a;box-shadow:0 0 0 2px var(--bg,#15171a);}
@media (max-width:399px){.lay-btn .lay-btn-l{display:none;}.lay-btn{padding:0 9px;}}
.lay-pop{position:absolute;z-index:400;background:var(--surface,#1f2226);border:1px solid var(--border,#3c4146);border-radius:14px;padding:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);color:var(--text,#eef0f2);font-family:'Work Sans',-apple-system,sans-serif;}
.lay-pop-title{font-family:'Spectral',Georgia,serif;font-weight:600;font-size:15px;margin-bottom:10px;}
.lay-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--surface-2,#282c30);border:1px solid var(--border,#3c4146);border-radius:12px;padding:4px;}
.lay-seg .lay-choice{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 8px;border-radius:9px;border:none;background:transparent;cursor:pointer;
  color:var(--text-muted,#a3abb3);font-family:inherit;font-size:12px;font-weight:600;min-height:64px;}
.lay-seg .lay-choice svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.5;}
.lay-seg .lay-choice svg .f{fill:var(--surface-2,#282c30);}
.lay-seg .lay-choice[aria-checked="true"]{background:var(--accent,#c2b280);color:#160f0a;}
.lay-seg .lay-choice[aria-checked="true"] svg .f{fill:var(--accent,#c2b280);}
.lay-seg .lay-choice:focus-visible{outline:2px solid var(--text,#eef0f2);outline-offset:1px;}
.lay-pop-note{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--text-muted,#a3abb3);}
.lay-pop-note b{color:var(--text,#eef0f2);font-weight:600;}
.lay-pop-note.warn{background:#3b2f12;border:1px solid #8a6a24;border-radius:10px;padding:8px 10px;color:#f1dca8;}
.lay-pop-note.warn b{color:#ffd77a;}
.lay-pop-foot{margin-top:8px;font-size:11px;color:var(--text-faint,#929aa2);}
/* La misma elección en Mi cuenta */
.lay-account{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.lay-account .lay-choice{flex-direction:column;align-items:flex-start;}
.lay-account .lay-choice svg{width:28px;height:28px;stroke:var(--accent-light,#c2b280);stroke-width:1.5;}
.lay-account .lay-choice svg .f{fill:var(--surface-2,#282c30);}
.lay-account-note{margin-top:8px;font-size:12px;color:var(--text-faint,#929aa2);}
.lay-account-note.warn{color:#f1dca8;}

/* ---------- Una columna ---------- */
html:not([data-cols]) .lay-grid,html:not([data-cols]) .lay-aside,html:not([data-cols]) .lay-main,
html[data-cols="1"] .lay-grid,html[data-cols="1"] .lay-aside,html[data-cols="1"] .lay-main{display:contents;}
/* En pantallas anchas la barra de abajo deja de estirarse a todo el ancho. */
@media (min-width:640px){
  html[data-cols="1"] .mesa-nav{max-width:560px;margin:0 auto;border:1px solid var(--border,#3c4146);border-bottom:none;border-radius:16px 16px 0 0;}
}
/* Tableta vertical: la columna crece de 480 a 600 px. */
html[data-roomy][data-page="ficha"] .wrap,html[data-roomy][data-page="tirar"] .wrap,html[data-roomy][data-page="enemigos"] .wrap,
html[data-roomy][data-page="npcs"] .wrap,html[data-roomy][data-page="locaciones"] .wrap,html[data-roomy][data-page="menu"] .wrap,
html[data-roomy][data-page="timeline"] .wrap{max-width:600px;}
html[data-roomy] .mesa-strip{max-width:576px;}

/* ---------- Dos columnas o más ---------- */
/* Solo las páginas que se reparten en columnas; las demás (crear/editar personaje, Cuentas, Manual…) no cambian. */
html[data-cols="2"] .wrap.lay-wrap{max-width:1180px;}
html[data-cols="3"] .wrap.lay-wrap{max-width:1560px;}
/* .lay-single (lo pone el PHP): esa persona no tiene segunda columna en esta página
   (Tirar sin ficha, Bitácora de un jugador); queda en una sola, más ancha que en el teléfono. */
html[data-cols="2"] .wrap.lay-single .lay-grid,html[data-cols="3"] .wrap.lay-single .lay-grid{display:block;}
html[data-cols="2"] .lay-grid,html[data-cols="3"] .lay-grid{display:grid;grid-template-columns:var(--lay-aside,340px) minmax(0,1fr);gap:20px;align-items:start;}
html[data-cols="2"] .lay-aside > :first-child,html[data-cols="3"] .lay-aside > :first-child,
html[data-cols="2"] .lay-main > :first-child,html[data-cols="3"] .lay-main > :first-child{margin-top:0;}
/* La columna lateral se queda a la vista al bajar (con su propio desplazamiento si no cabe). */
html[data-cols="2"] .lay-grid.lay-sticky > .lay-aside,html[data-cols="3"] .lay-grid.lay-sticky > .lay-aside{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;scrollbar-width:thin;}
/* Fila de enlaces de arriba: regreso a la izquierda, lo demás a la derecha. */
html[data-cols="2"] .lay-top,html[data-cols="3"] .lay-top{justify-content:flex-start!important;gap:20px!important;}
html[data-cols="2"] .lay-top > :first-child,html[data-cols="3"] .lay-top > :first-child{margin-right:auto;}

/* Barra de la mesa → riel a la izquierda */
html[data-cols="2"] body,html[data-cols="3"] body{--lay-rail:84px;}
html[data-cols="2"] body.has-mesa,html[data-cols="3"] body.has-mesa{padding-left:var(--lay-rail);padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;}
html[data-cols="2"] .mesa-nav,html[data-cols="3"] .mesa-nav{position:fixed;left:0;top:0;bottom:0;width:var(--lay-rail);display:flex;flex-direction:column;gap:6px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 8px 14px max(8px,env(safe-area-inset-left,0px));border-top:none;border-right:1px solid var(--border,#3c4146);box-shadow:4px 0 16px rgba(0,0,0,.3);}
html[data-cols="2"] .mesa-nav a,html[data-cols="3"] .mesa-nav a{min-height:66px;flex:0 0 auto;}
html[data-cols="2"] .mesa-nav a.on::after,html[data-cols="3"] .mesa-nav a.on::after{top:auto;left:0;width:3px;height:26px;}
html[data-cols="2"] .mesa-dock,html[data-cols="3"] .mesa-dock{padding-left:var(--lay-rail);}
html[data-cols="2"] .mesa-strip,html[data-cols="3"] .mesa-strip{max-width:620px;}

/* Teléfono acostado: poca altura */
html[data-short] body{--lay-rail:72px;}
html[data-short] .lay-grid{--lay-aside:280px;gap:14px;}
html[data-short] .wrap.lay-wrap{padding-top:10px;}
html[data-short] .mesa-nav{padding:6px 6px 6px max(6px,env(safe-area-inset-left,0px));gap:2px;}
html[data-short] .mesa-nav a{min-height:52px;}
html[data-short] body.has-mesa{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;}
html[data-short] .mesa-strip{max-width:360px;align-self:flex-end;margin-right:12px;padding:7px 12px;margin-bottom:6px;font-size:12px;}

/* ---------- Ficha ---------- */
html[data-page="ficha"] .lay-grid{--lay-aside:350px;}
html[data-page="ficha"]:not([data-cols="1"]) .lay-main > .tabs{margin-top:0;}
html[data-page="ficha"][data-cols="3"] .lay-main .panel.active{columns:340px 3;column-gap:16px;}
html[data-page="ficha"][data-cols="3"] .lay-main .panel.active > *{break-inside:avoid;}
html[data-page="ficha"][data-cols="3"] .lay-main .panel.active > .card{margin-top:0;margin-bottom:16px;display:inline-block;width:100%;}
/* Chips de la placa repetidas al inicio de Resumen: solo se ven con la franja compacta. */
.lay-short-chips{display:none!important;}
/* Teléfono acostado: la identidad pasa a una franja fija arriba y las tarjetas van en dos columnas. */
html[data-page="ficha"][data-short] .lay-grid{grid-template-columns:minmax(0,1fr);gap:10px;}
html[data-page="ficha"][data-short] .lay-grid.lay-sticky > .lay-aside{position:sticky;top:0;z-index:5;max-height:none;overflow:visible;padding-top:4px;background:var(--bg);}
html[data-page="ficha"][data-short] .plate{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto;align-items:center;gap:10px;padding:8px 12px;}
html[data-page="ficha"][data-short] .plate .xp-row,html[data-page="ficha"][data-short] .plate .chips,html[data-page="ficha"][data-short] .plate .plate-sub,
html[data-page="ficha"][data-short] .plate .load-msg,html[data-page="ficha"][data-short] .plate .flat-tile .fl,
html[data-page="ficha"][data-short] .plate .gauge-label,html[data-page="ficha"][data-short] .plate .readonly-badge{display:none;}
html[data-page="ficha"][data-short] .plate .id-photo{width:42px;height:42px;border-radius:9px;}
html[data-page="ficha"][data-short] .plate .id-row{gap:10px;}
html[data-page="ficha"][data-short] .plate .plate-name{font-size:15px;}
html[data-page="ficha"][data-short] .plate .hp-bar-tile{margin:0;padding:6px 10px;}
html[data-page="ficha"][data-short] .plate .hp-bar-top{margin-bottom:4px;}
html[data-page="ficha"][data-short] .plate .hp-bar-top .n{font-size:16px;}
html[data-page="ficha"][data-short] .plate .mixed-row{margin:0;}
html[data-page="ficha"][data-short] .plate .flat-tile{flex-direction:row;padding:6px 10px;gap:6px;}
html[data-page="ficha"][data-short] .plate .flat-tile .fn{font-size:16px;}
html[data-page="ficha"][data-short] .plate .hp-editor{grid-column:1 / -1;}
html[data-page="ficha"][data-short] .lay-short-chips{display:flex!important;margin:0 0 12px;}
html[data-page="ficha"][data-short] .lay-main .panel.active{columns:2;column-gap:12px;}
html[data-page="ficha"][data-short] .lay-main .panel.active > *{break-inside:avoid;}
html[data-page="ficha"][data-short] .lay-main .panel.active > .card{display:inline-block;width:100%;margin-top:0;margin-bottom:12px;}
html[data-page="ficha"][data-short] .lay-main .panel.active > .lay-short-chips{column-span:all;}

/* ---------- Combate ---------- */
html[data-page="combate"] .lay-grid{--lay-aside:400px;}
html[data-page="combate"][data-cols="3"] .lay-grid{--lay-aside:440px;}
html[data-page="combate"][data-cols="2"] .wrap,html[data-page="combate"][data-cols="3"] .wrap{max-width:1240px;}
html[data-page="combate"]:not([data-cols="1"]) #combatView{margin-top:14px;}
html[data-page="combate"]:not([data-cols="1"]) .lay-aside > .card,html[data-page="combate"]:not([data-cols="1"]) .lay-main > .card{margin-top:0;margin-bottom:14px;}
html[data-page="combate"]:not([data-cols="1"]) .picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;}
html[data-page="combate"]:not([data-cols="1"]) .picks > *{margin:0!important;}

/* ---------- Vista DM ---------- */
html[data-page="dm"] .lay-grid{--lay-aside:330px;margin-top:6px;}
html[data-page="dm"]:not([data-cols="1"]) .lay-aside .quick-nav{grid-template-columns:1fr 1fr;}
html[data-page="dm"]:not([data-cols="1"]) .lay-main > .group-head:first-child{margin-top:0;}
/* El grupo en cuadrícula: todas las tarjetas del mismo tamaño, sin importar el largo del nombre. */
html[data-page="dm"]:not([data-cols="1"]) #groupList{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));grid-auto-rows:1fr;gap:12px;}
html[data-page="dm"]:not([data-cols="1"]) #groupList > .card{margin:0;display:flex;flex-direction:column;min-width:0;}
html[data-page="dm"]:not([data-cols="1"]) #groupList .char-head{flex-direction:column;align-items:stretch;gap:10px;}
html[data-page="dm"]:not([data-cols="1"]) #groupList .char-head > :first-child{min-width:0;}
html[data-page="dm"]:not([data-cols="1"]) #groupList .char-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-page="dm"]:not([data-cols="1"]) #groupList .char-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-page="dm"]:not([data-cols="1"]) #groupList .char-head > span{display:grid!important;grid-template-columns:1fr 1fr;}
html[data-page="dm"]:not([data-cols="1"]) #groupList .char-link{text-align:center;}
html[data-page="dm"]:not([data-cols="1"]) #groupList .danger-row{margin-top:auto;padding-top:8px;}

/* ---------- Enemigos, NPCs y Locaciones ---------- */
/* Con una columna el orden es el de siempre: filtros, lista, «+ Nuevo», formulario. */
html[data-cols="1"] .lay-grid.lay-ordered,html:not([data-cols]) .lay-grid.lay-ordered{display:flex;flex-direction:column;}
.lay-ordered .lay-list-card{order:1;}
.lay-ordered .lay-after{order:2;}
/* Con una columna, la tarjeta de filtros y la de la lista se ven como una sola. */
html[data-cols="1"] .lay-filter-card,html:not([data-cols]) .lay-filter-card{margin-bottom:0;border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0;}
html[data-cols="1"] .lay-list-card:not(.lay-whole),html:not([data-cols]) .lay-list-card:not(.lay-whole){margin-top:0!important;border-top:none;border-top-left-radius:0;border-top-right-radius:0;padding-top:0;}
html[data-page="enemigos"] .lay-grid,html[data-page="npcs"] .lay-grid,html[data-page="locaciones"] .lay-grid{--lay-aside:320px;}
html:not([data-cols="1"]) .lay-ordered .lay-aside > *{margin-top:0;margin-bottom:14px;}
html:not([data-cols="1"]) .lay-ordered .lay-aside > .lay-filter-card,html:not([data-cols="1"]) .lay-ordered .lay-aside > .plate + *{margin-top:14px;}
html:not([data-cols="1"]) .lay-list-card{margin-top:0;background:none;border:none;padding:0;}
html:not([data-cols="1"]) .lay-filter-card > :last-child{margin-bottom:0;}
html:not([data-cols="1"]) #enemyList,html:not([data-cols="1"]) #npcList,html:not([data-cols="1"]) #locList{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;align-items:start;}
html:not([data-cols="1"]) #enemyList > *,html:not([data-cols="1"]) #npcList > *,html:not([data-cols="1"]) #locList > *{margin:0!important;}

/* ---------- Tirar ---------- */
html[data-page="tirar"] .lay-grid{--lay-aside:400px;}
html[data-page="tirar"]:not([data-cols="1"]) .lay-aside > .card{margin-top:14px;}
html[data-page="tirar"]:not([data-cols="1"]) .lay-main #charCards > .card:first-child{margin-top:0;}
html[data-page="tirar"][data-cols="3"] .lay-main #charCards{columns:360px 2;column-gap:16px;}
html[data-page="tirar"][data-cols="3"] .lay-main #charCards > .card{break-inside:avoid;display:inline-block;width:100%;margin-top:0;margin-bottom:14px;}
/* Sin ficha (DM): todo en una columna. */
html[data-page="tirar"]:not([data-cols="1"]) .wrap.lay-single{max-width:600px;}
html[data-page="tirar"] .wrap.lay-single .lay-aside{position:static;max-height:none;overflow:visible;}

/* ---------- Bitácora ---------- */
html[data-page="timeline"]:not([data-cols="1"]) .wrap.lay-wrap{max-width:1240px;}
html[data-page="timeline"]:not([data-cols="1"]) .wrap.lay-single{max-width:820px;}
html[data-page="timeline"] .lay-grid{--lay-aside:380px;}
html[data-page="timeline"]:not([data-cols="1"]) .lay-grid{margin-top:14px;}
html[data-page="timeline"]:not([data-cols="1"]) .lay-aside > .card,html[data-page="timeline"]:not([data-cols="1"]) .lay-main > .card{margin-top:0;}
.lay-head-group{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}

/* ---------- Menú ---------- */
html[data-page="menu"]:not([data-cols="1"]) .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;max-width:1040px;align-content:start;}
html[data-page="menu"]:not([data-cols="1"]) .wrap > .plate,html[data-page="menu"]:not([data-cols="1"]) .wrap > .section-label,
html[data-page="menu"]:not([data-cols="1"]) .wrap > .pw-notice,html[data-page="menu"]:not([data-cols="1"]) .wrap > .switch-link,
html[data-page="menu"]:not([data-cols="1"]) .wrap > .login-link,html[data-page="menu"]:not([data-cols="1"]) #dmToolsSection > .section-label,
html[data-page="menu"]:not([data-cols="1"]) #campaignCard{grid-column:1 / -1;}
html[data-page="menu"]:not([data-cols="1"]) #ownSlot,html[data-page="menu"]:not([data-cols="1"]) #dmToolsSection{display:contents;}
html[data-page="menu"]:not([data-cols="1"]) .wrap > .card,html[data-page="menu"]:not([data-cols="1"]) #ownSlot > .card,
html[data-page="menu"]:not([data-cols="1"]) #dmToolsSection > .card{margin-top:0;margin-bottom:12px;}
html[data-page="menu"]:not([data-cols="1"]) .wrap > .login-link{justify-self:center;}

/* Formularios en la columna lateral (Enemigos, NPCs, Locaciones): nada se sale de su ancho. */
html:not([data-cols="1"]) .lay-aside .card{min-width:0;}
html:not([data-cols="1"]) .lay-aside input[type=file]{min-width:0;max-width:100%;}