/* App de combates de D&D. Pensada para el móvil o la tablet del DM en la mesa:
   controles grandes, contraste alto y nada de scroll horizontal. */

:root {
  --fondo: #14141f;
  --fondo-2: #1e1e2e;
  --fondo-3: #2a2a3d;
  --borde: #3a3a52;
  --texto: #ececf3;
  --texto-tenue: #9a9ab0;
  --acento: #667eea;
  --acento-2: #764ba2;
  --sangre: #b02525;
  --verde: #2e9e5b;
  --oro: #d4a72c;
}

* { box-sizing: border-box; }

/* El display:block de las etiquetas pisa el hidden del navegador, y el campo
   de invitación se colaba en la pestaña de entrar. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
}

.vista { display: none; }
.vista.activa { display: block; }

/* ------------------------------------------------------------- acceso */

.tarjeta-acceso {
  max-width: 380px;
  margin: 12vh auto;
  padding: 28px 24px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 14px;
}
.tarjeta-acceso h1 { margin: 0 0 4px; font-size: 28px; }
.tarjeta-acceso .sub { margin: 0 0 20px; color: var(--texto-tenue); font-size: 13px; }

.pestanas { display: flex; gap: 6px; margin-bottom: 18px; }
.pestana {
  flex: 1; padding: 9px; cursor: pointer;
  background: var(--fondo-3); color: var(--texto-tenue);
  border: 1px solid var(--borde); border-radius: 8px; font-size: 14px;
}
.pestana.activa { background: var(--acento); color: #fff; border-color: var(--acento); }

label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--texto-tenue); }
input, select, textarea {
  width: 100%; margin-top: 5px; padding: 10px;
  background: var(--fondo-3); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px; font-size: 15px;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

/* Autorrelleno de Safari y Bitwarden: el navegador pinta su propio fondo claro
   pero deja nuestro texto claro, y el valor queda invisible hasta volver a
   tocar el campo. Se tapa su fondo con una sombra interior y se fija el color
   del texto. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texto);
  caret-color: var(--texto);
  -webkit-box-shadow: 0 0 0 1000px var(--fondo-3) inset;
  box-shadow: 0 0 0 1000px var(--fondo-3) inset;
  transition: background-color 9999s ease-out 0s;
}

.boton {
  padding: 9px 14px; cursor: pointer;
  background: var(--fondo-3); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px; font-size: 14px;
}
.boton:hover { border-color: var(--acento); }
.boton.principal {
  background: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%);
  border-color: transparent; color: #fff; font-weight: 600;
}
.boton.grande { width: 100%; padding: 13px; font-size: 16px; margin-bottom: 18px; }
.boton.peligro { border-color: var(--sangre); color: #ff9c9c; }

.aviso { min-height: 18px; margin: 10px 0 0; color: #ff9c9c; font-size: 13px; }
.aviso.bien { color: #8fe0a8; }

/* --------------------------------------------------------- estructura */

.barra {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--fondo-2); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
.barra h1 { margin: 0; font-size: 20px; flex: 1; }
.barra > div:last-child { display: flex; align-items: center; gap: 10px; }
.usuario { color: var(--texto-tenue); font-size: 13px; }

.contenido { padding: 18px 16px 60px; max-width: 1100px; margin: 0 auto; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .dos-columnas { grid-template-columns: 1fr; } }

.columna h2 { font-size: 16px; margin: 0 0 10px; color: var(--texto-tenue); font-weight: 600; }
.contador {
  display: inline-block; min-width: 22px; padding: 1px 7px;
  background: var(--fondo-3); border-radius: 10px; font-size: 12px; color: var(--texto);
}
.vacio { color: var(--texto-tenue); font-size: 13px; }

/* -------------------------------------------------------------- panel */

.lista-combates { list-style: none; margin: 0; padding: 0; }
.lista-combates li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px; margin-bottom: 10px;
  background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 10px;
}
.lista-combates .datos { flex: 1; min-width: 180px; }
.lista-combates .nombre { font-size: 17px; font-weight: 600; }
.lista-combates .meta { color: var(--texto-tenue); font-size: 12px; margin-top: 3px; }
.etiqueta-curso {
  padding: 2px 8px; border-radius: 10px; font-size: 11px;
  background: rgba(212,167,44,.15); color: var(--oro); border: 1px solid var(--oro);
}

/* ------------------------------------------------------------- editor */

.nombre-combate { flex: 1; margin: 0; max-width: 420px; }
.filtros { display: flex; gap: 8px; margin-bottom: 10px; }
.filtros input, .filtros select { margin-top: 0; }
.filtros select { width: auto; flex: 0 0 auto; }

.lista-bestias, .lista-combatientes, .orden-iniciativa { list-style: none; margin: 0; padding: 0; }
.lista-bestias { max-height: 62vh; overflow-y: auto; }
.lista-bestias li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin-bottom: 6px;
  background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 8px;
}
.lista-bestias .nombre { flex: 1; }
.lista-bestias .vd { color: var(--oro); font-size: 12px; white-space: nowrap; }
.lista-bestias .tipo { color: var(--texto-tenue); font-size: 12px; }

.lista-combatientes li {
  padding: 10px; margin-bottom: 8px;
  background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 8px;
}
.fila-combatiente { display: flex; align-items: center; gap: 8px; }
.fila-combatiente input[type="text"] { margin-top: 0; flex: 1; }
.fila-combatiente input[type="number"] { margin-top: 0; width: 76px; }
.corto { width: 80px; }
.mini { font-size: 11px; color: var(--texto-tenue); margin-top: 5px; }

/* ------------------------------------------------------------ combate */

.marcador { flex: 1; display: flex; gap: 14px; align-items: baseline; }
.marcador .ronda { font-size: 15px; color: var(--texto-tenue); }
.marcador .ronda strong { color: var(--texto); font-size: 19px; }
.marcador .turno { color: var(--oro); font-size: 15px; font-weight: 600; }

.anadir-jugador { display: flex; gap: 8px; margin-bottom: 12px; }
.anadir-jugador input { margin-top: 0; }

.orden-iniciativa li {
  padding: 10px; margin-bottom: 8px;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-left: 4px solid transparent; border-radius: 8px; cursor: pointer;
}
.orden-iniciativa li.activo { border-left-color: var(--oro); background: #262637; }
.orden-iniciativa li.caido { opacity: .45; }
.orden-iniciativa li.caido .nombre { text-decoration: line-through; }
.orden-iniciativa .fila { display: flex; align-items: center; gap: 8px; }
.orden-iniciativa .inic {
  min-width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--fondo-3); border-radius: 8px; font-weight: 700;
}
.orden-iniciativa .nombre { flex: 1; font-weight: 600; }
.orden-iniciativa .jugador .nombre { color: #9fd0ff; }
.orden-iniciativa .vida { display: flex; align-items: center; gap: 6px; }
.orden-iniciativa .vida input { width: 58px; margin-top: 0; text-align: center; padding: 6px; }
.orden-iniciativa .vida .max { color: var(--texto-tenue); font-size: 13px; }
.boton-vida {
  width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1;
  border-radius: 8px; cursor: pointer; border: 1px solid var(--borde);
  background: var(--fondo-3); color: var(--texto);
}
.boton-vida.dano { color: #ff9c9c; }
.boton-vida.cura { color: #8fe0a8; }
.barra-vida { height: 5px; margin-top: 8px; background: var(--fondo-3); border-radius: 3px; overflow: hidden; }
.barra-vida span { display: block; height: 100%; background: var(--verde); transition: width .2s; }
.barra-vida span.medio { background: var(--oro); }
.barra-vida span.bajo { background: var(--sangre); }

/* -------------------------------------------------- ficha de la bestia */

.ficha-bestia {
  padding: 16px; background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 10px;
  position: sticky; top: 74px; max-height: 78vh; overflow-y: auto;
}
.ficha-bestia h3 { margin: 0 0 2px; font-size: 20px; }
.ficha-bestia .subtitulo { color: var(--texto-tenue); font-style: italic; font-size: 13px; margin: 0 0 12px; }
.ficha-bestia .linea { padding: 5px 0; border-top: 1px solid var(--borde); font-size: 14px; }
.ficha-bestia .linea b { color: var(--acento); }
.atributos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 0; }
.atributos div { text-align: center; padding: 7px 2px; background: var(--fondo-3); border-radius: 8px; }
.atributos .nombre-attr { font-size: 11px; color: var(--texto-tenue); }
.atributos .valor { font-size: 15px; font-weight: 700; }
.bloque-titulo {
  margin: 16px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--sangre); color: var(--sangre);
  font-size: 14px; text-transform: uppercase; letter-spacing: .5px;
}
.bloque { margin-bottom: 10px; font-size: 14px; line-height: 1.45; }
.bloque .titulo { font-weight: 700; font-style: italic; }
.sin-traducir { color: var(--texto-tenue); font-size: 11px; margin-left: 4px; }

.en { margin-left: 6px; color: var(--texto-tenue); font-size: 11px; font-weight: 400; }

/* Vuelta a la portada de fichas: la app de combates es una isla dentro
   del mismo sitio y hay que poder salir de ella. */
.volver-dndapp {
  display: block; margin-top: 18px; text-align: center;
  color: var(--texto-tenue); text-decoration: none; font-size: 13px;
}
.volver-dndapp:hover { color: var(--texto); }
a.boton { text-decoration: none; display: inline-block; }

/* Código de invitación recién generado. Se ve en pantalla además de llegar
   al móvil: el aviso puede fallar y el código no debe perderse. */
.caja-invitacion {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--fondo-2); border: 1px solid var(--oro); border-radius: 10px;
}
.caja-invitacion .codigo {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--oro);
}
.caja-invitacion .detalle { color: var(--texto-tenue); font-size: 13px; }