/* ============================================================================
   Web del jugador (app-jugador/) — móvil primero (360 px), tema oscuro.
   Tokens copiados de app-v3/css/styles.css (no se importa la hoja del DJ).
   CSP estricta: nada de estilos en línea; todo va en esta hoja.
   ========================================================================== */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cinzel-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cinzel-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #1a1410;
  --bg-elev: #241c16;
  --bg-card: #2c2218;
  --border: #5a4632;
  --border-light: #6a5642;
  --text: #e8dcc4;
  --text-dim: #b8a888;
  --accent: #c9a062;
  --accent-hover: #e8bf7e;
  --danger: #c95a4a;
  --success: #7cb05a;
  --warning: #c89a3a;

  --surface-hover: rgba(255, 180, 80, 0.06);
  --surface-emphasis: rgba(255, 200, 80, 0.10);
  --surface-zebra: rgba(255, 220, 180, 0.025);

  --shadow-1: 0 1px 2px rgba(40, 24, 12, 0.4);
  --shadow-2: 0 4px 12px rgba(40, 24, 12, 0.5);
  --shadow-3: 0 12px 40px rgba(20, 12, 6, 0.7);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.12s;
  --duration-base: 0.2s;

  --font-display: 'Cinzel', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-mono: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --toque: 44px;           /* objetivo táctil mínimo */
  --nav-h: 60px;
  --gutter: 16px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.5;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(201, 160, 98, 0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

body.con-pestanas { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

[hidden] { display: none !important; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- Cabecera ----------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(36, 28, 22, 0.94);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--gutter) var(--space-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
}

.marca {
  margin: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marca > span:last-child { overflow: hidden; text-overflow: ellipsis; }

.marca-sello {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg-elev), inset 0 0 0 4px rgba(232, 191, 126, 0.55);
}

.cabecera-pj {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conexion {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-xs);
  color: var(--text-dim);
  background: var(--bg);
}
.conexion-punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
}
.conexion[data-j-conexion="sse"] .conexion-punto { background: var(--success); box-shadow: 0 0 0 0 rgba(124, 176, 90, 0.6); animation: latido 2.4s infinite; }
.conexion[data-j-conexion="sondeo"] .conexion-punto { background: var(--warning); }
body[data-j-estado="cerrada"] .conexion[data-j-conexion] .conexion-punto { background: var(--text-dim); animation: none; }

@keyframes latido {
  0% { box-shadow: 0 0 0 0 rgba(124, 176, 90, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(124, 176, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 176, 90, 0); }
}

.boton-salir {
  flex: none;
  min-height: 32px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--text-xs);
  cursor: pointer;
}
.boton-salir[data-confirmar="1"] { border-color: var(--danger); color: #f0b4a8; background: rgba(201, 90, 74, 0.12); }

/* --- Avisos flotantes ----------------------------------------------------------- */

.avisos {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
body.con-pestanas .avisos { bottom: calc(var(--nav-h) + var(--space-3) + env(safe-area-inset-bottom, 0px)); }

.aviso-flotante {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
  animation: entra var(--duration-base) var(--ease-standard);
}
.aviso-flotante p { flex: 1; margin: 0; align-self: center; }
.aviso-flotante-error { border-color: var(--danger); background: #3a1d17; }
.aviso-flotante-ok { border-color: var(--success); background: #22301a; }

@keyframes entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --- Vista ------------------------------------------------------------------------ */

.vista {
  display: block;
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-4) var(--gutter) var(--space-8);
}
.vista:focus { outline: none; }

.tarjeta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.titulo-partida,
.hoja-nombre {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--accent-hover);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.hoja-nombre { font-size: var(--text-2xl); }

.hoja-sub {
  color: var(--text-dim);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
.hoja-sub strong { color: var(--text); font-family: var(--font-mono); }

.titulo-seccion {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--accent);
  margin: var(--space-5) 0 var(--space-3);
  letter-spacing: 0.04em;
}

.sub-h {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--accent);
  margin: var(--space-4) 0 var(--space-2);
  letter-spacing: 0.03em;
}
.acordeon-cuerpo > .sub-h:first-child,
.tarjeta > .sub-h:first-child { margin-top: 0; }

.sub-h-menor {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: var(--space-3) 0 var(--space-1);
}

.nota { color: var(--text-dim); font-size: var(--text-sm); }

.narrativa {
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* --- Marcadores PV / PP -------------------------------------------------------------- */

.marcadores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}

.marcador {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
}
.marcador-etq { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.marcador-etq abbr { text-decoration: none; font-weight: 600; }
.marcador-valor { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; }
.marcador meter { grid-column: 1 / -1; width: 100%; height: 8px; }

meter {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: #3a2e22;
  border: 0;
}
meter::-webkit-meter-bar { background: #3a2e22; border: 0; border-radius: 999px; height: 8px; }
meter::-webkit-meter-optimum-value { background: var(--success); border-radius: 999px; }
meter::-webkit-meter-suboptimum-value { background: var(--warning); border-radius: 999px; }
meter::-webkit-meter-even-less-good-value { background: var(--danger); border-radius: 999px; }
meter::-moz-meter-bar { background: var(--success); border-radius: 999px; }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warning); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--danger); }
.marcador.pp meter::-webkit-meter-optimum-value { background: #8a7fb8; }
.marcador.pp meter::-moz-meter-bar { background: #8a7fb8; }

.hoja-px { font-size: var(--text-sm); color: var(--text-dim); }
.hoja-px strong { color: var(--text); font-family: var(--font-mono); }
.px-sesion { color: var(--success); }

/* --- Avisos en línea ------------------------------------------------------------------- */

.aviso {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface-emphasis);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}
.aviso-copia { border-left-color: var(--warning); margin-top: 0; margin-bottom: var(--space-3); }
.aviso-subida { border-left-color: var(--success); background: rgba(124, 176, 90, 0.10); }
.aviso-error { border-left-color: var(--danger); background: rgba(201, 90, 74, 0.12); }
.aviso-error ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }

/* --- Chips ------------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-dim);
  background: var(--bg);
  vertical-align: middle;
  white-space: nowrap;
}
.chip-estado { border-color: #8a4a3e; color: #f0b4a8; background: rgba(201, 90, 74, 0.12); }
.chip-ok, .chip-completada { border-color: #4f6e3a; color: #b9dca0; background: rgba(124, 176, 90, 0.10); }
.chip-activa, .chip-descubierta { border-color: #7a6338; color: var(--accent-hover); background: var(--surface-emphasis); }
.chip-fallida { border-color: #8a4a3e; color: #f0b4a8; }
.chip-tipo { font-size: 0.7rem; }

/* --- Acordeones -------------------------------------------------------------------------- */

.acordeon {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.acordeon > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::after {
  content: "";
  width: 9px; height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duration-base) var(--ease-standard);
}
.acordeon[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.acordeon[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-hover); }
.acordeon-titulo { font-family: var(--font-display); font-size: var(--text-base); color: var(--accent-hover); letter-spacing: 0.03em; }
.acordeon-extra { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; }
.acordeon-cuerpo { padding: var(--space-3) var(--space-4) var(--space-4); }

/* --- Tablas y datos ------------------------------------------------------------------------ */

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.tabla th, .tabla td { padding: 7px 6px; border-bottom: 1px solid rgba(90, 70, 50, 0.55); text-align: left; }
.tabla thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 600; border-bottom-color: var(--border); }
.tabla tbody tr:nth-child(even) { background: var(--surface-zebra); }
.tabla tbody th { font-weight: 400; }
.tabla .num, .tabla thead th:not(:first-child) { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.tabla .total { color: var(--accent-hover); font-weight: 600; }
.tabla abbr { text-decoration: none; font-weight: 600; }
.tabla-hab td[data-j-grado] { color: var(--text-dim); }

.datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}
.dato { min-width: 0; padding: var(--space-1) 0; border-bottom: 1px dashed rgba(90, 70, 50, 0.6); }
.dato dt { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.dato dd { margin: 0; overflow-wrap: anywhere; }
.datos-combate .dato dd, .datos-tr .dato dd, .datos-dinero .dato dd { font-family: var(--font-mono); font-weight: 600; color: var(--accent-hover); }

.lista-filas { list-style: none; margin: 0; padding: 0; }
.lista-filas > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(90, 70, 50, 0.55);
}
.lista-filas > li:last-child { border-bottom: 0; }
.lista-filas > li > .chips { flex-basis: 100%; margin-top: 2px; }
.lista-filas > li.fila-columna { flex-direction: column; align-items: flex-start; }
.lista-filas > li.fila-propia { background: var(--surface-emphasis); margin: 0 calc(-1 * var(--space-2)); padding-left: var(--space-2); padding-right: var(--space-2); border-radius: var(--radius-sm); }
.fila-nombre { min-width: 0; overflow-wrap: anywhere; }
.fila-valor { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-dim); white-space: nowrap; }

/* --- Historia ---------------------------------------------------------------------------------- */

.fecha-juego { font-family: var(--font-body); font-size: var(--text-lg); color: var(--text); margin-top: var(--space-2); }
.lugar { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.lugar .sub-h { margin-top: 0; }

.tarjeta-combate { border-color: #8a4a3e; background: linear-gradient(180deg, rgba(201, 90, 74, 0.10), transparent 70%), var(--bg-card); }
.fase-combate { font-family: var(--font-mono); font-size: var(--text-sm); color: #f0b4a8; }

.misiones { list-style: none; margin: 0; padding: 0; }
.mision { padding: var(--space-2) 0; border-bottom: 1px solid rgba(90, 70, 50, 0.55); }
.mision:last-child { border-bottom: 0; }
.mision-titulo { margin-bottom: var(--space-1); }
.objetivos { list-style: none; padding: 0; margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.objetivos li { display: flex; gap: var(--space-2); padding: 2px 0; }
.objetivos .marca { color: var(--accent); width: 1em; flex: none; }
.objetivos li.hecho { color: var(--text-dim); }
.tachado-suave { text-decoration: line-through; text-decoration-color: rgba(184, 168, 136, 0.6); }

.sesion .resumen-sesion { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-3); border-left: 3px solid var(--accent); }
.entradas { list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--border); }
.entrada { position: relative; padding: 0 0 var(--space-3) var(--space-2); }
.entrada::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-3) - 5px);
  top: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg-card);
}
.entrada-meta { margin: 0 0 2px; font-size: var(--text-xs); color: var(--text-dim); display: flex; gap: var(--space-2); align-items: center; }
.entrada-meta time { font-family: var(--font-mono); }
.entrada-texto { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }

/* --- Vistas informativas -------------------------------------------------------------------- */

.info {
  text-align: center;
  padding: var(--space-8) var(--space-2);
  max-width: 28rem;
  margin: 0 auto;
}
.info-titulo { font-family: var(--font-display); font-size: var(--text-xl); color: var(--accent-hover); margin-bottom: var(--space-3); }
.info p { color: var(--text-dim); }
.info-sello {
  width: 84px; height: 84px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 8px rgba(232, 191, 126, 0.5), 0 0 30px rgba(201, 160, 98, 0.18);
}
.info-pendiente .info-sello, .info-cargando .info-sello { animation: respira 2.6s ease-in-out infinite; }
.info-revocado .info-sello, .info-rechazado .info-sello, .info-inseguro .info-sello { border-color: var(--danger); box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 8px rgba(201, 90, 74, 0.5); }
.info-cerrada .info-sello, .info-sin-red .info-sello { border-color: var(--text-dim); box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 8px rgba(184, 168, 136, 0.35); }

@keyframes respira {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

.vacio { text-align: center; padding: var(--space-8) var(--space-2); color: var(--text-dim); }

/* --- Formularios (alta) ------------------------------------------------------------------------ */

.form-alta { margin: 0; }
.bloque { border: 0; margin: 0; padding: 0; min-width: 0; }
.bloque[disabled] { opacity: 0.7; }

.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-3); min-width: 0; }
.campo label, .casillas legend { font-size: var(--text-sm); color: var(--text-dim); }
.req { color: var(--danger); }
.ayuda { font-size: var(--text-xs); color: var(--text-dim); margin: 0 0 var(--space-2); }

input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--toque);
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 16px; /* evita el zoom automático de iOS */
}
textarea { min-height: 6rem; resize: vertical; line-height: 1.4; }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
input::placeholder { color: rgba(184, 168, 136, 0.5); }
[aria-invalid="true"] { border-color: var(--danger) !important; background-color: #321c17 !important; }
.campo-error { color: #f0b4a8; font-size: var(--text-xs); margin: 0; }

.rejilla { display: grid; gap: 0 var(--space-3); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.filas-hab { display: flex; flex-direction: column; }
.fila-hab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.4rem 4.4rem;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 0;
  border-bottom: 1px solid rgba(90, 70, 50, 0.45);
}
.fila-hab input { min-height: 40px; text-align: right; padding: 6px 8px; }
.fila-cabecera { font-size: var(--text-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; border-bottom-color: var(--border); }
.fila-cabecera span:not(:first-child) { text-align: right; padding-right: 8px; }
.fila-hab-nombre { font-size: var(--text-sm); overflow-wrap: anywhere; }
.fila-hab-error { grid-column: 1 / -1; }

.fila-dinamica {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--toque);
  gap: 0 var(--space-2);
  align-items: end;
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.12);
}
.fila-dinamica > .campo:first-child { grid-column: 1 / 2; }
.fila-dinamica > .campo.corto, .fila-dinamica > .casilla { grid-column: 1 / 2; }
.fila-dinamica > .boton-icono { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: var(--space-3); }

.casillas { border: 0; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.casillas legend { padding: 0; margin-bottom: var(--space-1); }
.casilla { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--toque); cursor: pointer; }
.casilla input { width: 22px; height: 22px; accent-color: var(--accent); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--toque);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-hover);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
}
.boton:active { transform: translateY(1px); }
.boton.primario { background: var(--accent); color: #1a1410; width: 100%; font-size: var(--text-lg); }
.boton.primario:hover { background: var(--accent-hover); }
.boton.secundario { width: 100%; border-style: dashed; margin-bottom: var(--space-2); }
.boton[disabled] { opacity: 0.55; cursor: not-allowed; }
.boton[aria-disabled="true"] { opacity: 0.55; cursor: progress; }

.boton-icono {
  flex: none;
  width: var(--toque);
  height: var(--toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.enlace { background: none; border: 0; padding: 0; color: var(--accent-hover); text-decoration: underline; cursor: pointer; font: inherit; min-height: 0; }

.barra-enviar {
  position: sticky;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--space-2));
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  z-index: 5;
}

.estado-alta { font-size: var(--text-sm); color: var(--text-dim); margin-top: var(--space-2); }
.estado-alta-pendiente { color: var(--warning); }
.estado-alta-rechazada { color: #f0b4a8; }
.estado-alta-aceptada { color: var(--success); }

/* --- Acciones y tiradas (fase B) --------------------------------------------------------------- */

.acciones-cabecera .titulo-partida .nota { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0; }
.acciones-cabecera .fase-combate { margin: var(--space-2) 0; font-size: var(--text-base); }

.fases-asalto {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 var(--space-2);
  padding: 0;
}
.fases-asalto li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.fases-asalto li.hecha { opacity: 0.55; }
.fases-asalto li.actual { border-color: #c96a5a; background: rgba(201, 90, 74, 0.25); color: #ffd7cc; font-weight: 700; box-shadow: 0 0 0 1px rgba(201, 90, 74, 0.4); }
.aviso-fase { border-left-color: var(--warning); }

.form-accion { margin: 0 0 var(--space-4); }
.form-accion textarea { min-height: 4.5rem; }
.campos-tipo { align-items: start; }
.campos-tipo .campo-ancho, .campos-tipo > .nota { grid-column: 1 / -1; }
.campo-corto input { max-width: 100%; }
.contador { margin: 0; font-size: var(--text-xs); color: var(--text-dim); text-align: right; font-family: var(--font-mono); }

.ayuda-regla {
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent);
  background: var(--surface-hover);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  line-height: 1.45;
}
.ayuda-regla p { margin: 0 0 var(--space-1); }
.ayuda-fuente { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); }
.opciones-anular { list-style: none; margin: var(--space-1) 0; padding: 0; }
.opciones-anular .enlace { display: block; width: 100%; min-height: var(--toque); padding: 6px 0; text-align: left; line-height: 1.35; }

.tirada-bloque { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3) var(--space-3); margin: 0 0 var(--space-3); min-width: 0; }
.tirada-bloque > legend { padding: 0 var(--space-1); margin: 0; }
.tirada { margin-top: var(--space-1); }
.tirada-cabecera { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.campo-dado { margin-bottom: var(--space-2); }

.segmentos { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--accent); border-radius: var(--radius-md); overflow: hidden; }
.segmento {
  min-height: var(--toque);
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.segmento + .segmento { border-left: 1px solid var(--accent); }
.segmento[aria-pressed="true"] { background: var(--accent); color: #1a1410; }
.segmento[disabled] { cursor: not-allowed; opacity: 0.6; }
.segmento[aria-pressed="true"][disabled] { opacity: 0.85; }

.tirada-virtual { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; margin-bottom: var(--space-2); }
.boton-tirar { min-width: 7.5rem; }
.dado-icono {
  width: 18px; height: 18px; flex: none;
  border: 2px solid currentColor;
  border-radius: 4px;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 3px transparent;
  background: radial-gradient(circle, currentColor 2px, transparent 2.5px);
}
.dado-resultado {
  min-height: 3.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg);
  min-width: 0;
}
.dado-resultado:focus { outline: none; box-shadow: var(--focus-ring); }
.dado-resultado:not(.vacio-tirada) { border-style: solid; border-color: var(--accent); background: var(--surface-emphasis); }
.dado-total { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; color: var(--accent-hover); line-height: 1.1; }
.dado-detalle { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); overflow-wrap: anywhere; }
.dado-resultado.animar .dado-total { animation: rueda 0.75s var(--ease-standard); }
@keyframes rueda {
  0% { transform: rotate(-200deg) scale(0.3); opacity: 0; }
  60% { transform: rotate(12deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(0) scale(1); }
}
/* Animación de la tirada virtual (dados 3D o sencilla): casillas bajo el dado. */
.ajustes-dado { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); margin-top: var(--space-1); }
.casilla-mini { font-size: var(--text-sm); color: var(--text-dim); }
.casilla:has(input:disabled) { opacity: 0.65; cursor: not-allowed; }
.ajustes-dado-ayuda { flex-basis: 100%; margin: 0; }
/* Mesa cerrada (solo consulta): formularios desactivados con su motivo. */
.aviso-consulta { margin: var(--space-2) 0 0; }
.motivo-bloqueo { margin: 0 0 var(--space-2); }
.form-consulta .tirada-bloque, .form-consulta .bloque { opacity: 0.7; }

.mis-acciones { margin-top: var(--space-2); }
.lista-acciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.accion-item {
  border: 1px solid var(--border);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: var(--space-2) var(--space-3);
  min-width: 0;
}
.accion-item p { margin: 2px 0; overflow-wrap: anywhere; }
.accion-resuelta { border-left-color: var(--success); }
.accion-rechazada { border-left-color: var(--danger); }
.accion-anulada { border-left-color: var(--text-dim); opacity: 0.75; }
.accion-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.accion-tipo { font-weight: 600; overflow-wrap: anywhere; }
.chip-accion-pendiente { border-color: #7a6338; color: #f2d58f; background: rgba(200, 154, 58, 0.14); }
.chip-accion-resuelta { border-color: #4f6e3a; color: #b9dca0; background: rgba(124, 176, 90, 0.10); }
.chip-accion-rechazada { border-color: #8a4a3e; color: #f0b4a8; background: rgba(201, 90, 74, 0.12); }
.chip-accion-anulada { color: var(--text-dim); }
.accion-texto { white-space: pre-line; }
.accion-tirada { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-hover); }
.accion-resultado {
  margin-top: var(--space-2) !important;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(124, 176, 90, 0.10);
  border: 1px solid #4f6e3a;
  white-space: pre-line;
}
.accion-motivo { color: #f0b4a8; font-size: var(--text-sm); }
.boton-anular { margin-top: var(--space-2); width: 100%; border-color: var(--border-light); color: var(--text-dim); }
.boton-anular.confirmar { border-color: var(--danger); color: #f0b4a8; background: rgba(201, 90, 74, 0.12); }

@media (min-width: 30rem) {
  .tirada-cabecera { grid-template-columns: minmax(0, 1fr) 10rem; align-items: end; }
  .campo-dado { margin-bottom: 0; }
  .boton-anular { width: auto; }
}

/* --- Mensajes con el DJ (fase C) ------------------------------------------------------------------ */

/* La vista llena el alto libre para que el cuadro de escribir quede abajo aunque haya pocos mensajes
   (--alto-cabecera lo mide main.js). */
.vista[data-j-vista="mensajes"] {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--alto-cabecera, 76px) - var(--nav-h));
  min-height: calc(100dvh - var(--alto-cabecera, 76px) - var(--nav-h) - env(safe-area-inset-bottom, 0px));
  padding-bottom: 0;
}
.mensajes-cabecera .casilla { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-dim); }
/* Aviso al llegar un mensaje del DJ (vibración / sonido corto, «Probar» y explicación). */
.aviso-msg { border: 1px solid var(--border); border-radius: var(--radius-md); margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-3) var(--space-2); min-width: 0; }
.aviso-msg-titulo { padding: 0 var(--space-1); font-size: var(--text-sm); color: var(--text-dim); }
.aviso-msg-titulo [data-j-aviso-resumen] { color: var(--accent-hover); }
.aviso-msg-casillas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
.aviso-msg-casillas .casilla { margin-top: 0; }
.boton.boton-probar { width: auto; min-height: var(--toque); padding: 0 var(--space-4); margin-left: auto; font-size: var(--text-sm); }
.aviso-msg .ayuda { margin: var(--space-1) 0 0; }
.aviso-msg [data-j-aviso-estado] { margin: var(--space-1) 0 0; font-size: var(--text-xs); }
.aviso-msg [data-j-aviso-estado="falta-toque"] { color: var(--warning); }

.hilo { margin-bottom: var(--space-3); }
.hilo-vacio { text-align: center; padding: var(--space-6) var(--space-2); }

.lista-mensajes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.msg {
  max-width: min(88%, 34rem);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-1);
}
.msg p { margin: 0; }
.msg-dj, .msg-otro { align-self: flex-start; border-bottom-left-radius: var(--radius-sm); }
.msg-yo { align-self: flex-end; background: #3a2d1d; border-color: #7a6338; border-bottom-right-radius: var(--radius-sm); }
.msg-todos { border-left: 3px solid var(--accent); }
.msg-nuevo { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(201, 160, 98, 0.45), var(--shadow-1); }
.msg-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin-bottom: 2px !important;
}
.msg-autor { font-family: var(--font-display); letter-spacing: 0.05em; color: var(--accent-hover); }
.msg-hora { margin-left: auto; font-family: var(--font-mono); }
.msg-texto {
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-estado { margin-top: 2px !important; font-size: var(--text-xs); color: var(--text-dim); text-align: right; }
.msg-leido { color: var(--success); }
.chip-msg-todos { border-color: #7a6338; color: #f2d58f; background: rgba(200, 154, 58, 0.14); }

.msg-dia { align-self: center; margin: var(--space-2) 0 0; }
.msg-dia span {
  display: inline-block;
  padding: 1px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: var(--text-xs);
  color: var(--text-dim);
}
.msg-dia span::first-letter { text-transform: uppercase; }
.msg-separador-nuevos {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0;
  color: var(--accent-hover);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.msg-separador-nuevos::before,
.msg-separador-nuevos::after { content: ""; flex: 1; border-top: 1px solid rgba(201, 160, 98, 0.6); }

/* Cuadro de escribir: pegado encima de las pestañas mientras se lee el hilo. */
.region-form-mensaje {
  position: sticky;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  margin: auto calc(-1 * var(--gutter)) 0;
  padding: var(--space-2) var(--gutter);
  background: rgba(26, 20, 16, 0.97);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 14px rgba(20, 12, 6, 0.45);
}
.form-mensaje { margin: 0; }
.form-mensaje-fila { display: flex; align-items: flex-end; gap: var(--space-2); }
.form-mensaje textarea {
  flex: 1;
  min-width: 0;
  min-height: var(--toque);
  max-height: 9.5rem;
  resize: none;
  field-sizing: content;
}
.form-mensaje textarea[readonly] { opacity: 0.7; }
.boton.primario.boton-msg { width: auto; flex: none; font-size: var(--text-base); padding: 10px 16px; }
.msg-pie { display: flex; align-items: baseline; gap: var(--space-2); margin-top: 4px; min-height: 1.1rem; }
.msg-pie .ayuda, .msg-pie .campo-error { margin: 0; }
.msg-pie .contador { margin-left: auto; }
.solo-teclado { display: none; }
@media (hover: hover) and (pointer: fine) {
  .solo-teclado { display: block; }
}

/* Aviso de mensaje nuevo (con «Ver») y, en la pestaña Mensajes, avisos arriba para no tapar el cuadro. */
.aviso-flotante-mensaje { border-color: var(--accent); background: #2f2618; animation: entra var(--duration-base) var(--ease-standard), aviso-llama 1.2s ease-out 0.2s 2; }
/* Aviso visible al llegar un mensaje (también en iPhone, que no vibra): dos destellos del borde. */
@keyframes aviso-llama {
  0% { box-shadow: var(--shadow-3), 0 0 0 0 rgba(201, 160, 98, 0.65); }
  100% { box-shadow: var(--shadow-3), 0 0 0 10px rgba(201, 160, 98, 0); }
}
.boton-aviso {
  flex: none;
  align-self: center;
  min-height: var(--toque);
  padding: 0 var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent-hover);
  font-weight: 600;
  cursor: pointer;
}
body.en-mensajes .avisos { top: calc(var(--alto-cabecera, 76px) + var(--space-2)); bottom: auto; }

/* --- Fase D: conexión no segura y entrada con el enlace -------------------------------------- */

.aviso-inseguro {
  margin: var(--space-2) 0 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: rgba(201, 90, 74, 0.16);
  color: #f0b4a8;
  font-size: var(--text-xs);
  line-height: 1.35;
}

.form-enlace {
  margin: var(--space-6) auto 0;
  max-width: 26rem;
  text-align: left;
}
.form-enlace label { display: block; font-size: var(--text-sm); color: var(--text-dim); margin-bottom: 4px; }
.form-enlace-fila { display: flex; gap: var(--space-2); align-items: stretch; }
.form-enlace-fila input { flex: 1; min-width: 0; }
.form-enlace .ayuda { margin-top: var(--space-2); }
/* Sin sesión con la copia aún guardada: «Borrar la copia de este móvil» (AMENAZAS I5). */
.aviso-copia {
  margin: var(--space-5) auto 0;
  max-width: 26rem;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
}
.aviso-copia p { margin: 0 0 var(--space-3); }
[data-j-salida-pendiente] { margin-top: var(--space-4); }
input[type="url"] {
  min-height: var(--toque);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: #1f1812;
  width: 100%;
}

/* --- Fase D: subida de nivel ------------------------------------------------------------------- */

.subida-niveles { font-size: var(--text-lg); margin: var(--space-2) 0; }
.subida-niveles strong { font-family: var(--font-mono); color: var(--accent-hover); }
.subida-intro .boton.primario, .subida-estado .boton.primario { margin-top: var(--space-2); }
.lista-motivos { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.lista-motivos li { margin: 2px 0; overflow-wrap: anywhere; }
.lista-propuesta .fila-valor { white-space: normal; text-align: right; }

/* Presupuesto: pegado bajo la cabecera para ver lo que queda mientras se reparte. */
.presupuesto {
  position: sticky;
  top: calc(var(--alto-cabecera, 64px) + var(--space-1));
  z-index: 8;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  box-shadow: var(--shadow-2);
}
.presupuesto .sub-h { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.presupuesto abbr { text-decoration: none; }
.presupuesto-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px var(--space-2);
}
.presupuesto-cat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-1);
  padding: 3px 6px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--text-xs);
  min-width: 0;
}
.presupuesto-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.presupuesto-valor { white-space: nowrap; font-family: var(--font-mono); color: var(--text-dim); }
.presupuesto-valor strong { font-size: var(--text-sm); color: var(--text); }
.presupuesto-cat.justo { border-left-color: var(--success); }
.presupuesto-cat.justo strong { color: var(--success); }
.presupuesto-cat.pasado { border-left-color: var(--danger); background: rgba(201, 90, 74, 0.14); }
.presupuesto-cat.pasado strong { color: #f0b4a8; }

.titulo-cat { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.cat-restan { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); letter-spacing: 0; text-transform: none; }
.cat-restan.justo { color: var(--success); }
.cat-restan.pasado { color: #f0b4a8; }

.filas-subida { list-style: none; margin: 0; padding: 0; }
.fila-subida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nombre botones" "grado botones" "siguiente siguiente";
  align-items: center;
  gap: 2px var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(90, 70, 50, 0.5);
}
.fila-subida:last-child { border-bottom: 0; }
.fila-subida.con-nuevos { background: linear-gradient(90deg, rgba(124, 176, 90, 0.08), transparent 70%); }
.fs-nombre { grid-area: nombre; overflow-wrap: anywhere; }
.fs-grado { grid-area: grado; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-dim); }
.fs-grado strong { color: var(--text); font-size: var(--text-base); }
.fs-nuevos { color: var(--success); font-weight: 600; }
.fs-botones { grid-area: botones; display: flex; gap: var(--space-2); }
.fs-siguiente { grid-area: siguiente; font-size: var(--text-xs); color: var(--text-dim); }
.fs-siguiente.segundo { color: var(--warning); }
.fs-siguiente.falta { color: #f0b4a8; }

.boton-paso {
  width: var(--toque);
  height: var(--toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent-hover);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.boton-paso:active { background: var(--surface-emphasis); }
.boton-paso[aria-disabled="true"] { opacity: 0.35; border-color: var(--border); color: var(--text-dim); cursor: not-allowed; }
.boton[aria-disabled="true"]:not(.primario) { opacity: 0.55; }

.anadir-fila { display: flex; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-2); }
.anadir-fila .campo { flex: 1; margin-bottom: 0; }
.anadir-fila .boton { flex: none; }

.tarjeta-acordeon { margin-bottom: var(--space-3); }

.fila-df .fila-valor { display: inline-flex; gap: var(--space-2); align-items: baseline; }
.df-valor { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--accent-hover); }
.df-valor.animar { animation: rueda 0.75s var(--ease-standard); }
.df-acciones { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.df-acciones .boton-tirar { width: 100%; }

.subida-enviar .barra-enviar { margin-top: var(--space-2); }
.subida-pie { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.subida-pie .boton { width: 100%; padding-left: 8px; padding-right: 8px; }
.boton-reiniciar { border-color: var(--border-light); color: var(--text-dim); }
.boton-reiniciar.confirmar { border-color: var(--danger); color: #f0b4a8; background: rgba(201, 90, 74, 0.12); }

/* Resumen «Apunta en tu hoja» (se imprime solo: ver @media print) */
.resumen-subida { border-color: var(--accent); }
.resumen-cabecera { margin-bottom: var(--space-2); }
.resumen-sub { color: var(--text-dim); margin: var(--space-1) 0; }
.resumen-sub strong { color: var(--text); }
.tabla-resumen td.num strong { color: var(--text); }
.tabla-resumen .fila-grupo th {
  padding-top: var(--space-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: transparent;
}
.tabla-resumen tbody tr.fila-grupo { background: transparent; }
.resumen-pie { margin-top: var(--space-3); }
.resumen-subida .boton.primario { margin-top: var(--space-2); }
.boton-pequeno { min-height: 36px; padding: 4px 14px; font-size: var(--text-sm); }

/* --- Pestañas inferiores ------------------------------------------------------------------------ */

.pestanas {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(36, 28, 22, 0.97);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 14px rgba(20, 12, 6, 0.5);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pestanas-lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  max-width: 42rem;
  margin: 0 auto;
}
.pestana {
  min-height: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-top: 3px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pestana { position: relative; }
.pestana svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.insignia {
  position: absolute;
  top: 5px;
  left: calc(50% + 5px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font: 600 11px/18px var(--font-ui);
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(36, 28, 22, 0.97);
}
.pestana[aria-selected="true"] { color: var(--accent-hover); border-top-color: var(--accent); background: var(--surface-emphasis); }

/* --- Pantallas algo mayores --------------------------------------------------------------------- */

@media (min-width: 30rem) {
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fila-dinamica { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) var(--toque); }
  .fila-dinamica > .campo:first-child,
  .fila-dinamica > .campo.corto,
  .fila-dinamica > .casilla { grid-column: auto; }
  .fila-dinamica > .boton-icono { grid-column: auto; grid-row: auto; }
}

/* --- Movimiento reducido y impresión ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  body { background: #fff; color: #000; padding: 0; }
  .cabecera, .pestanas, .avisos, .boton-salir, .region-form-mensaje { display: none !important; }
  .acordeon, .tarjeta { box-shadow: none; border-color: #999; background: #fff; }
  .acordeon > summary::after { display: none; }

  /* Fase D: desde la pestaña «Subida» se imprime SOLO el resumen «Apunta en tu hoja». */
  @page { margin: 14mm; }
  body.con-pestanas { padding-bottom: 0; }
  .vista[data-j-vista="subida"] { max-width: none; padding: 0; }
  .vista[data-j-vista="subida"] > :not([data-j-resumen-subida]) { display: none !important; }
  .no-imprimir { display: none !important; }
  .resumen-subida { border: 0; padding: 0; margin: 0; color: #000; background: #fff; }
  .resumen-subida .titulo-partida { color: #000; font-size: 18pt; }
  .resumen-subida .resumen-sub, .resumen-subida .nota, .resumen-subida .sub-h { color: #333; }
  .resumen-subida .resumen-sub strong { color: #000; }
  .resumen-subida .fila-grupo th { color: #555; background: #fff; }
  .resumen-subida .sub-h { border-bottom: 1px solid #999; margin-top: 10pt; break-after: avoid; }
  .resumen-subida .tabla { font-size: 11pt; color: #000; }
  .resumen-subida .tabla th, .resumen-subida .tabla td { border-bottom: 1px solid #bbb; color: #000; }
  .resumen-subida .tabla thead th { color: #333; }
  .resumen-subida .tabla tbody tr:nth-child(even) { background: #f3f3f3; }
  .resumen-subida .tabla .total, .resumen-subida td.num strong { color: #000; }
  .resumen-subida tr { break-inside: avoid; }
}

/* --- Modo consulta, bloqueo de escritura y «Guardar o imprimir mi hoja» (2026-10-31) --------------- */

.franja-consulta {
  margin: var(--space-2) 0 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--warning);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: rgba(200, 154, 58, 0.14);
  color: var(--text);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.franja-consulta strong { color: var(--accent-hover); font-family: var(--font-display); letter-spacing: 0.04em; }
.franja-consulta[data-j-franja="sin-red"] { border-color: var(--danger); background: rgba(201, 90, 74, 0.14); }
[data-j-bloqueado] { cursor: not-allowed !important; }
.boton[data-j-bloqueado] { opacity: 0.5; }

.hoja-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.hoja-herramientas .nota { flex: 1 1 100%; margin: 0; }
.boton-discreto { border-color: var(--border); color: var(--text-dim); background: transparent; }
.solo-imprimir { display: none; }

@media print {
  .franja-consulta, .hoja-herramientas { display: none !important; }
  .solo-imprimir { display: block; }
  /* La hoja entera en papel claro (impresion.js abre todos los acordeones mientras se imprime). */
  .vista[data-j-vista="hoja"] { max-width: none; padding: 0; }
  .vista[data-j-vista="hoja"], .vista[data-j-vista="hoja"] * { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  .vista[data-j-vista="hoja"] [data-j-subida-aviso], .vista[data-j-vista="hoja"] meter { display: none !important; }
  .vista[data-j-vista="hoja"] .acordeon, .vista[data-j-vista="hoja"] .tarjeta { border: 1px solid #999 !important; break-inside: avoid; margin: 0 0 8pt; }
  .vista[data-j-vista="hoja"] .acordeon > summary { font-size: 13pt; padding: 4pt 0; }
  .vista[data-j-vista="hoja"] .tabla { font-size: 10.5pt; }
  .vista[data-j-vista="hoja"] .tabla th, .vista[data-j-vista="hoja"] .tabla td { border-bottom: 1px solid #bbb !important; }
  .vista[data-j-vista="hoja"] tr { break-inside: avoid; }
  .vista[data-j-vista="hoja"] .aviso-copia { border: 1px solid #999 !important; font-size: 9pt; }
  .pie-impresion { margin-top: 10pt; font-size: 9pt; border-top: 1px solid #999; padding-top: 4pt; }
}