/* Reset básico */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Tema oscuro global */
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  background: #000;
  color: #f5f5f5;
  height: 100%;
}

body {
  display: flex;
}

/* Desactivar selección en toda la app */
html,
body,
#app {
  -webkit-user-select: none; /* iOS / Safari */
  -ms-user-select: none;     /* IE/Edge antiguo */
  user-select: none;         /* Estándar */
  -webkit-touch-callout: none; /* Evita el menú de “copiar” en iOS */
}

/* Pero permitir seleccionar dentro de campos de formulario
   (para que puedas escribir, copiar, pegar, etc.) */
input,
textarea,
select,
button,
[contenteditable="true"] {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}


#app {
  flex: 1;
  max-width: 37.5em; /* 600px */
  margin: 0 auto;
  background: #000;
  min-height: 100vh;
  overflow: hidden;
}

/* Toast global (balloon superior) */

.global-toast {
  position: fixed;
  top: 0.75em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
}

.global-toast-content {
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.96);
  border-radius: 999em;
  padding: 0.55em 1.1em;
  font-size: 0.85em;
  border: 0.0625em solid #22c55e; /* 1px */
  box-shadow: 0 0.75em 2.5em rgba(0, 0, 0, 0.9); /* 12px 40px */
  display: inline-flex;
  align-items: center;
  text-align: center;
  gap: 0.4em;
  animation: toastSlideDown 0.2s ease-out;
}

.global-toast-content.error {
  border-color: #f97373;
}

/* Pantallas */

.screen {
  display: none;
  min-height: 100vh;
  padding: 1em;
}

.screen.active {
  display: flex;
  flex-direction: column;
}

/* Cargando */

.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 2em);
  gap: 0.5em;
}

/* Login centrado */

#screen-login.active {
  justify-content: center;
  align-items: center;
}

.login-container {
  max-width: 20em; /* 320px */
  width: 100%;
  margin: 0 auto;
  padding: 1.5em;
  text-align: center;
}

h1,
h2 {
  margin: 0 0 0.5em;
}

/* Formularios */

label {
  display: block;
  font-size: 0.9em;
  margin-bottom: 0.75em;
}

.inline-label {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.6em 0.7em;
  margin-top: 0.5em;
  border-radius: 0.5em;
  border: 0.0625em solid #333; /* 1px */
  background: #000;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 0.9em;
}

select[multiple] {
  min-height: 4.5em;
}

textarea {
  resize: vertical;
}

/* Botones */

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 0.6em 1em;
  border-radius: 999em;
  border: none;
  background: #333;
  color: #f5f5f5;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9em;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

button:hover:not(:disabled) {
  background: #444;
  transform: translateY(-0.0625em); /* 1px */
  box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.6); /* 4px 12px */
}

button:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.btn-outline {
  background: transparent;
  border: 0.0625em solid #555; /* 1px */
}

.btn-small {
  padding: 0.3em 0.7em;
  font-size: 0.8em;
}

.btn-block {
  width: 100%;
}

/* Botón principal verde (formularios categoría / pregunta / persona) */
.btn-primary {
  background: #166534;
}

.btn-primary:hover:not(:disabled) {
  background: #15803d;
}

/* Botón rojo (borrar) */
.btn-danger {
  background: #7f1d1d;
}

.btn-danger:hover:not(:disabled) {
  background: #991b1b;
}

/* Botones especiales fallar/acertar */

.btn-fail {
  background: #7f1d1d;
}

.btn-fail:hover:not(:disabled) {
  background: #991b1b;
}

.btn-success {
  background: #166534;
}

.btn-success:hover:not(:disabled) {
  background: #15803d;
}

/* Botones circulares de la barra inferior */

.btn-circle {
  border-radius: 999em;
  width: 3.5em;  /* 56px */
  height: 3.5em; /* 56px */
  padding: 0;
}

.btn-circle .btn-icon,
.btn-circle svg {
  width: 1.5em;  /* 24px */
  height: 1.5em; /* 24px */
}

/* Iconos */

.icon-svg,
.btn-icon {
  width: 1.125em;  /* 18px */
  height: 1.125em; /* 18px */
  fill: currentColor;
}

/* Mensajes error */

.error-message {
  color: #fca5a5;
  min-height: 1.2em;
  font-size: 0.85em;
}

/* Cabecera principal */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.75em;
}

.app-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Indicador de mazo */

.deck-indicator {
  display: block;
  text-align: center;
  font-size: 0.75em;
  color: #6b7280;
  min-height: 1em;
}

/* Botones de icono */

.icon-button {
  background: #000;
  border-radius: 999em;
  padding: 0.4em;
  border: 0.0625em solid #333; /* 1px */
  box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.8); /* 2px 8px */
}

.icon-button:hover:not(:disabled) {
  background: #111;
}

/* Filtros (interior del panel) */

.filters {
  margin-top: 0.25em;
}

.filter-group {
  margin-bottom: 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  font-size: 0.85em;
}

.filter-group-title {
  font-weight: 600;
  font-size: 0.9em;
}

.filter-separator {
  border: 0;
  border-top: 0.0625em solid #1f2933; /* 1px */
  margin: 0.25em 0 0.75em;
}

/* Listado de categorías en panel de filtros:
   ahora en dos columnas (grid) */
.filter-categories-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35em 0.75em;
}

/* Contenedor de tipos (Preguntas/Personas) en dos columnas */
.filter-types-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35em 0.75em;
}

/* Lista de tipos en dos columnas (Preguntas / Personas) */
.filter-types-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35em 0.75em;
}


/* Opciones de frontal de Persona */
.filter-ficha-front-modes-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

/* "Píldoras" de radio para modos de Persona */
.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.35em 0.7em;
  border-radius: 999em;
  border: 0.0625em solid #374151;
  font-size: 0.8em;
  cursor: pointer;
  margin-bottom: 0.25em;
}

.radio-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-pill span {
  white-space: nowrap;
}

.radio-pill::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border-radius: 999em;
  border: 0.125em solid #4b5563;
  background: transparent;
  flex-shrink: 0;
}



.radio-pill.radio-pill--active {
  border-color: #22c55e;
  background: #022c22;
}

.radio-pill.radio-pill--active::before {
  border-color: #22c55e;
  background: #22c55e;
}

/* Ajustes específicos del panel de filtros (ya los tenías, los recuerdo por claridad) */
#panel-filters.floating-layer {
  align-items: center;
  padding: 1.5em 1em;
}

#panel-filters .floating-card {
  max-width: 32em;
  max-height: calc(100vh - 3em);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#panel-filters .panel-header {
  flex-shrink: 0;
}

#panel-filters .filters {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.25em 0.25em 0.5em;
}

#panel-filters .filter-group {
  flex-shrink: 0;
}

#panel-filters .filter-group-categories {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#panel-filters .filter-group-categories .filter-categories-list {
  margin-top: 0.5em;
  overflow-y: auto;
}


.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: relative;
  width: 2.375em;  /* 38px */
  height: 1.375em; /* 22px */
  border-radius: 999em;
  background: #374151;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.switch-slider::before {
  content: "";
  position: absolute;
  width: 1.125em;  /* 18px */
  height: 1.125em; /* 18px */
  border-radius: 999em;
  background: #f9fafb;
  top: 0.125em;  /* 2px */
  left: 0.125em; /* 2px */
  transition: transform 0.2s ease;
}

.switch input:checked + .switch-slider {
  background: #22c55e;
}

.switch input:checked + .switch-slider::before {
  transform: translateX(1em); /* 16px */
}

.switch-text {
  font-size: 0.85em;
}

/* Menús flotantes (filtros, menú principal) */

.floating-layer {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.625em); /* 10px */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 1em 1em;
  z-index: 30;
  animation: fadeInOverlay 0.2s ease-out;
}

#panel-main-menu h2 {
  font-size: 0.5em; font-weight: normal; opacity: 0.3;
}

.floating-card {
  background: #111;
  border-radius: 0.75em;
  width: 100%;
  max-width: 30em; /* 480px */
  padding: 1em;
  box-shadow: 0 0.625em 2.5em rgba(0, 0, 0, 0.9); /* 10px 40px */
  animation: slideDown 0.2s ease-out;
  max-height: calc(100vh - 5em);
  overflow-y: auto;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75em;
}

/* Ajustes específicos para el panel de filtros:
   - Centrado vertical
   - La tarjeta no es más grande que la pantalla
   - Solo hace scroll el listado de categorías, no el header ni "Solo falladas" */

#panel-filters.floating-layer {
  align-items: center;
  padding: 1.5em 1em;
}

#panel-filters .floating-card {
  max-width: 32em; /* un poco más ancho si hace falta */
  max-height: calc(100vh - 3em);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* el scroll va dentro, no en toda la card */
}

#panel-filters .panel-header {
  flex-shrink: 0;
}

/* El interior de filtros ocupa toda la altura disponible */
#panel-filters .filters {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.25em 0.25em 0.5em;
}

/* Cada grupo de filtros no crece indefinidamente */
#panel-filters .filter-group {
  flex-shrink: 0;
}

/* El grupo de categorías ocupa el espacio sobrante y dentro está el scroll */
#panel-filters .filter-group-categories {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#panel-filters .filter-group-categories .filter-categories-list {
  margin-top: 0.5em;
  overflow-y: auto;
}

/* Configuración del mazo dentro de filtros */

.filter-group-deck .filter-deck-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5em;
}

.filter-group-deck .content-filter-item {
  font-size: 0.8em;
}

.filter-group-deck select {
  margin-top: 0.25em;
}

/* En pantallas algo más grandes, ponlas lado a lado */
@media (min-width: 300px) {
  .filter-group-deck .filter-deck-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Menú principal */

.menu-section {
  margin-bottom: 0.75em;
}

.menu-section h3 {
  margin: 0 0 0.25em;
  font-size: 0.95em;
}

/* Cuadrícula de gestión */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5em;
}

.menu-tile {
  border-radius: 1em;
  aspect-ratio: 1 / 1;
  padding: 0.75em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #111;
  border: 0.0625em solid #222; /* 1px */
  box-shadow: 0 0.25em 0.875em rgba(0, 0, 0, 0.8); /* 4px 14px */
}

.menu-tile span {
  font-size: 0.8em;
  margin-top: 0.25em;
}

.menu-icon {
  width: 1.375em;  /* 22px */
  height: 1.375em; /* 22px */
  fill: currentColor;
}

/* Área de estudio y carta actual */

.study-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 0.75em 4.5em; /* espacio para la barra inferior */
}

#current-card {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#no-content-msg {
  text-align: center;
  margin-top: 2em;
}

/* Tarjeta / flip 3D */

.flip-card {
  width: 100%;
  max-width: 30em; /* 480px */
  perspective: 62.5em; /* 1000px */
}

.flip-inner {
  position: relative;
  width: 100%;
  min-height: 24.25em; /* 260px */
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-back {
  transform: rotateY(180deg);
}

/* Tarjeta de contenido */

.content-item {
  background: #111;
  border-radius: 0.75em;
  padding: 0.95em;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.8); /* 4px 16px */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Textos dentro de la carta */

.card-main-text {
  font-size: 1.1em;
  text-align: center;
  margin: 0.35em 0 0;
}

.card-title-text {
  font-size: 1.1em;
  font-weight: 600;
  text-align: center;
  margin: 0.4em 0 0.1em;
}

.card-subtitle-text {
  font-size: 0.95em;
  text-align: center;
  margin: 0.1em 0 0.2em;
}

.card-small-text {
  font-size: 0.8em;
  text-align: center;
  margin: 0.15em 0;
}

/* Rebote al volver al frontal */

.card-bounce {
  animation: cardBounce 0.22s ease-out;
  pointer-events: none;
}

/* Imagen en carta */

.detail-image {
  width: 100%;
  max-height: 9.375em; /* 150px */
  object-fit: contain;
  border-radius: 0.75em;
  margin: 0.25em 0 0.4em;
  background: transparent;
}

/* Barra inferior fija */

.bottom-actions {
  position: fixed;
  left: 50%;
  bottom: 1em;
  transform: translateX(-50%);
  max-width: 37.5em; /* 600px */
  width: 100%;
  padding: 0 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75em;
  z-index: 25;
}

/* Overlays: categorías, preguntas, personas, usuarios, perfil */

.overlay-panel {
  position: fixed;
  inset: 0;
  background: #000;
  padding: 0 1em;
  overflow-y: auto;
  box-shadow: 0 -0.625em 2.5em rgba(0, 0, 0, 0.9); /* -10px 40px */
  z-index: 35;
}

.overlay-panel:not(.hidden) {
  animation: slideUp 0.2s ease-out;
}

/* Pantalla de resultados del mazo */

#screen-results {
  display: flex;
  justify-content: center;
  align-items: center;
}

#screen-results .sticky-header {
  background: #000;
  margin: 0;
  text-align: center;
}

#screen-results .overlay-section-header-main {
  justify-content: center;
}

#screen-results .overlay-inner {
  min-height: 0;
  min-width: 18em;
}

.overlay-body.results-body {
  padding: 0 0.5em 2em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 0;
}

.results-top {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4.5em;
}

.results-icon {
  width: 4em;
  height: 4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.results-icon svg {
  width: 100%;
  height: 100%;
}

.results-stats-card {
  padding: 0.9em 0.9em 0.7em;
  font-size: 0.9em;
}

.results-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.25em 0;
  border-bottom: 0.0625em solid #1f2933;
}

.results-stat-row:last-child {
  border-bottom: none;
}

.results-stat-row span {
  color: #9ca3af;
}

.results-stat-row strong {
  font-weight: 600;
}

.results-stat-note strong {
  font-size: 1.25em;
}

.results-stat-note-comment {
  font-size: 0.55em;
}

/* Botones de resultados */

.results-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 0.75em;
}

@media (min-width: 480px) {
  .results-actions {
    flex-direction: row;
  }
}


/* Contenedor interior para centrar listas/contenido */

.overlay-inner {
  max-width: 60em; /* 960px */
  margin: 0 auto;
  min-height: calc(100vh - 2em);
  position: relative;
}

.overlay-section-header {
  margin-bottom: 0.75em;
}

.overlay-section-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75em;
  padding: 0 0.5em;
}

.overlay-section-header-actions {
  display: flex;
  gap: 0.5em;
}

/* Cabecera fija (título + filtros) en preguntas/personas */

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.5em;
  margin: 0.5em -1em 0.5em -1em;
  background: linear-gradient(#000, #111);
}

/* Cuerpo de overlays */

.overlay-body {
  margin-top: 0.75em;
}

.overlay-body-list-only {
  padding-top: 0.25em;
}

/* Layout antiguo de dos columnas (se mantiene por compatibilidad) */
.overlay-two-columns {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.overlay-form-column {
  order: 1;
}

.overlay-list-column {
  order: 2;
}

/* Formulario "card" de administración */

.category-form {
  padding: 0.75em;
  margin-bottom: 0.75em;
}

.category-form-actions {
  display: flex;
  gap: 0.5em;
  margin-top: 0.5em;
}

/* Listas de administración */

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.25em;
  border-bottom: 0.0625em solid #222; /* 1px */
  font-size: 0.9em;
}

.category-item-main {
  display: flex;
  flex-direction: column;
}

.category-item-name {
  font-weight: 500;
}

.category-item-meta {
  font-size: 0.75em;
  color: #9ca3af;
}

#category-list .category-item-meta {
  display: none;
}

.category-item-actions {
  display: flex;
  gap: 0.3em;
}

.category-item-actions button {
  padding: 0.25em 0.5em;
  font-size: 0.75em;
}

/* Filtros de listas (personas / preguntas) */

.content-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.5em;
  padding: 0 0.5em;
}

.content-filter-item {
  flex: 1 1 8.75em; /* 140px */
  font-size: 0.8em;
}

.content-filter-item input[type="text"],
.content-filter-item select {
  margin-top: 0.25em;
}

/* Cuadrícula de categorías en formularios (checkbox tipo iPhone) */

.form-categories-grid {
  margin-top: 0.5em;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35em;
      max-height: 14em;
    overflow-y: auto;
    background: #111;
    border-radius: 1em;
    padding: 1em;
    border: 1px solid #333;
}

.form-categories-grid .switch {
  width: 100%;
}

/* Dropzone de imágenes (pregunta / persona) */

.image-dropzone {
  position: relative;
  border: 0.0625em dashed #4b5563; /* 1px */
  border-radius: 0.75em;
  margin-top: 0.5em;
  padding: 0.75em;
  text-align: center;
  background: #111;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.image-dropzone:hover {
  border-color: #e5e7eb;
  background: #030712;
}

.image-dropzone.drag-over {
  border-color: #22c55e;
  background: #022c22;
}

.image-dropzone-text {
  font-size: 0.8em;
  color: #9ca3af;
  margin: 0;
}

.image-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Miniatura en dropzone */

.image-dropzone-preview {
  margin-top: 0.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.image-dropzone-thumb {
  max-width: 5.5em;  /* 120px */
  max-height: 5.5em; /* 120px */
  border-radius: 0.5em;
  object-fit: cover;
  box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.9); /* 4px 16px */
}

/* Form flotante (categorías / preguntas / personas) */

.overlay-form-layer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(0.75em); /* 12px */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1em 1em 1em;
  z-index: 40;
  animation: fadeInOverlay 0.2s ease-out;
}

.overlay-form-card {
  background: #191919;
  border-radius: 0.9em;
  width: 100%;
  max-width: 33.75em; /* 540px */
  box-shadow: 0 1em 3.75em rgba(0, 0, 0, 0.95); /* 16px 60px */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2em);
}

.overlay-form-card-large {
  max-width: 56.25em; /* 900px */
}

.overlay-form-header {
  padding: 0.75em 0.9em;
  border-bottom: 0.0625em solid #111827; /* 1px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3em;
}

.overlay-form-body {
  overflow-y: auto;
  flex: 1;
}

/* Layout con previsualización en formularios de pregunta/persona */

.overlay-form-body-with-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.edit-preview-container {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 40vh;
  max-height: 22.75em;
  font-size: 0.25em;
  background: #353535;
  overflow: hidden
}

.edit-preview-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-preview-card {
  width: 100%;
  max-width: 26.25em; /* 420px */
}

/* Reutilizamos el estilo visual de la carta */
.edit-preview-card .content-item {
  margin: 0;
}

.edit-preview-container .flip-inner {
      min-height: 16.25em;
}

/* Contenedor del formulario bajo la preview (mobile) */

.edit-form-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.2em;
}

/* Utilidades */

.muted {
  color: #6b7280;
  font-size: 0.85em;
}

.hidden {
  display: none !important;
}

/* Campo oculto (orden, estado) */
.hidden-field {
  display: none;
}

/* Animaciones básicas */

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-0.625em); /* -10px */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(0.625em); /* 10px */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardBounce {
  0% {
    transform: scale(0.97);
  }
  60% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes toastSlideDown {
  from {
    opacity: 0;
    transform: translate(0, -100%); /* -10px */
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Flash + vibración al fallar/acertar */

.result-flash-fail {
  animation: shakeFail 0.32s ease-out;
}

.result-flash-success {
  animation: flashSuccess 0.32s ease-out;
}

@keyframes shakeFail {
  0% {
    transform: translateX(0);
    box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.8); /* 4px 16px */
  }
  20% {
    transform: translateX(-0.1875em); /* -3px */
    box-shadow: 0 0 1.125em rgba(248, 113, 113, 0.9); /* 18px */
  }
  40% {
    transform: translateX(0.1875em); /* 3px */
  }
  60% {
    transform: translateX(-0.125em); /* -2px */
  }
  80% {
    transform: translateX(0.125em); /* 2px */
  }
  100% {
    transform: translateX(0);
    box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.8); /* 4px 16px */
  }
}

@keyframes flashSuccess {
  0% {
    transform: scale(1);
    box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.8); /* 4px 16px */
  }
  40% {
    transform: scale(1.04);
    box-shadow: 0 0 1.125em rgba(34, 197, 94, 0.9); /* 18px */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.8); /* 4px 16px */
  }
}

/* Pequeño "pump" en los botones de acierto/fallo */

.btn-fail.flash,
.btn-success.flash {
  animation: buttonFlash 0.22s ease-out;
}

@keyframes buttonFlash {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Halo en la carta mientras hacemos swipe */
#app.swipe-success #current-card .flip-face {
  box-shadow: 0 0 40px rgba(46, 204, 113, 0.7);
}

#app.swipe-fail #current-card .flip-face {
  box-shadow: 0 0 40px rgba(231, 76, 60, 0.7);
}

/* Opcional: un pelín de tinte en la zona de estudio mientras se hace swipe */
#app.swipe-success #study-area {
  background: radial-gradient(circle at top, rgba(46, 204, 113, 0.08), transparent 60%);
}

#app.swipe-fail #study-area {
  background: radial-gradient(circle at top, rgba(231, 76, 60, 0.08), transparent 60%);
}

/* Animación de entrada desde abajo con pequeño rebote */
@keyframes card-enter-bounce {
  0% {
    transform: translateY(40px) scale(0.96);
    opacity: 0;
  }
  60% {
    transform: translateY(-6px) scale(1.02);
    opacity: 1;
  }
  85% {
    transform: translateY(3px) scale(0.995);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Estado de carta entrante */
.flip-card.card-enter {
  animation: card-enter-bounce 0.32s ease-out;
}


/* Aseguramos que #app puede tener un pseudo-elemento posicionado */
#app {
  position: relative;
  /* Si ya tienes position en #app, puedes omitir esta línea */
}

/* Capa para el flash de fondo */
#app::before {
  content: "";
  position: fixed;          /* cubre toda la pantalla */
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  z-index: 0;               /* ajusta si usas overlays por encima/bajo */
}

/* Flash verde (acierto) */
@keyframes app-success-flash {
  0% {
    opacity: 0;
    background: rgba(46, 204, 113, 0);
  }
  30% {
    opacity: 1;
    background: rgba(46, 204, 113, 0.25);
  }
  100% {
    opacity: 0;
    background: rgba(46, 204, 113, 0);
  }
}

/* Flash rojo (fallo) */
@keyframes app-fail-flash {
  0% {
    opacity: 0;
    background: rgba(231, 76, 60, 0);
  }
  30% {
    opacity: 1;
    background: rgba(231, 76, 60, 0.25);
  }
  100% {
    opacity: 0;
    background: rgba(231, 76, 60, 0);
  }
}

/* Cuando acertamos: flash verde en el fondo */
#app.success::before {
  animation: app-success-flash 1s ease-out;
}

/* Cuando fallamos: flash rojo en el fondo */
#app.fail::before {
  animation: app-fail-flash 1s ease-out;
}


@media (max-width: 768px) {
  #ficha-form-layer.overlay-form-layer, #question-form-layer.overlay-form-layer {
    background: #000;
    backdrop-filter: none;
    padding: 0;
  }
  
  #ficha-form-layer .overlay-form-card, #question-form-layer .overlay-form-card {
    border-radius: 0;
    height: calc(100vh);
    box-shadow: none;
  }
  
  .form-categories-grid {
    max-height: 100%;
  }
  
  #ficha-form .category-form-actions, #question-form .category-form-actions {
    position: fixed;
    background: #191919;
    box-shadow: 1em 1em 3.75em rgba(0, 0, 0, 0.95);
    left: 0; bottom: 0; right: 0;
    padding: 1.5em 1.5em 1.5em 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  
  #ficha-form .category-form, #question-form .category-form {
    margin-bottom: 2.5em;
  }
  
  .edit-preview-container {
    display: none;
  }
  
  #ficha-form-layer .overlay-form-header, #question-form-layer .overlay-form-header {
    background: #000;
  }

}

/* Escalado para pantallas medianas (tablets, etc.) */
@media (min-width: 768px) {
  #app {
    max-width: 800px;
    font-size: 1.2em;
  }
}

/* Layout de escritorio para overlays y formularios con preview */
@media (min-width: 900px) {
  #app {
    max-width: 900px;
    font-size: 1.5em;
  }
  .edit-form-container {
    columns: auto;
    column-count: 2;
    column-gap: 1em;
    padding: 1em;
  }
  
  .category-form {
    padding: 0;
  }
  
  .overlay-form-layer {
    align-items: center;
    font-size: 0.8em;
  }
  
  .edit-preview-container {
    font-size: 0.4em;
  }
}

/* Escalado para escritorio grande */
@media (min-width: 1200px) {
  #app {
    max-width: 80%;
  }
}

@media (min-width: 2000px) {
  #app {
    font-size: 1.7em;
  }
  .overlay-form-layer {
    align-items: center;
    font-size: 1em;
  }
}