@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Instrument+Serif:ital@1&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/src/css/preflight.css');

:root {
  --yellow: #F5E94A;
  --yellow-hot: #FFD400;
  --yellow-deep: #C9A227;
  --bg: #0A0A0B;
  --bg-2: #141213;
  --bg-amber: color-mix(in srgb, var(--yellow) 8%, transparent);
  --ink: #FFFFFF;
  --ink-dim: #FFFFFF;
  --line: #252321;
  --danger: #E84A2A;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Colores Tailwind custom (clases utilitarias) ─────────────────────────── */
.bg-bg      { background-color: var(--bg); }
.bg-bg-2    { background-color: var(--bg-2); }
.bg-amber   { background-color: var(--bg-amber); }
.bg-yellow  { background-color: var(--yellow); }
.text-ink   { color: var(--ink); }
.text-ink-dim { color: var(--ink-dim); }
.text-yellow  { color: var(--yellow); }
.text-danger  { color: var(--danger); }
.text-bg      { color: var(--bg); }
.border-line  { border-color: var(--line); }
.border-yellow { border-color: var(--yellow); }
.border-danger { border-color: var(--danger); }
.hover\:text-yellow:hover { color: var(--yellow); }
.hover\:text-ink:hover    { color: var(--ink); }
.hover\:text-danger:hover { color: var(--danger); }
.hover\:border-yellow\/50:hover { border-color: color-mix(in srgb, var(--yellow) 50%, transparent); }
.hover\:bg-yellow-hot:hover { background-color: var(--yellow-hot); }

/* ── Tipografías ─────────────────────────────────────────────────────────── */
.font-display { font-family: 'Archivo Black', sans-serif; }
.font-serif-italic { font-family: 'Instrument Serif', serif; font-style: italic; }
.font-mono  { font-family: 'JetBrains Mono', monospace; }
.font-sans  { font-family: 'Space Grotesk', sans-serif; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.card-yellow {
  background: var(--bg-amber);
  border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
  border-radius: 12px;
  padding: 24px;
}

/* ── Grid con bordes ─────────────────────────────────────────────────────── */
.grid-border { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.grid-cell { border-right: 1px solid var(--line); }
.grid-cell:last-child { border-right: none; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.input-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.input-field {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  transition: border-color 0.2s;
  outline: none;
}
.input-field:focus { border-color: color-mix(in srgb, var(--yellow) 50%, transparent); }
.input-field::placeholder { color: var(--ink-dim); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-radius: 9999px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-primary  { background: var(--yellow); color: var(--bg); }
.btn-primary:hover { background: var(--yellow-hot); }
.btn-ghost    { background: transparent; color: var(--ink-dim); border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-dim); }
.btn-outline  { background: transparent; color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent); }
.btn-outline:hover { background: color-mix(in srgb, var(--yellow) 10%, transparent); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--yellow); color: var(--yellow); }
.btn-danger   { background: var(--danger); color: white; }
.btn-danger:hover { opacity: 0.9; }
.btn-sm { padding: 7px 14px; font-size: 10px; }
.btn-lg { padding: 14px 28px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid currentColor;
}

/* ── Animaciones ─────────────────────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px var(--yellow); }
  50% { box-shadow: 0 0 24px var(--yellow); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-pulse { animation: blink 2s ease-in-out infinite; }
.animate-slide-up { animation: slide-up 0.25s ease-out; }
.animate-fade-in  { animation: fade-in 0.3s ease-out; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* ── Slider de intensidad ────────────────────────────────────────────────── */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yellow);
  cursor: pointer;
  box-shadow: 0 0 8px color-mix(in srgb, var(--yellow) 60%, transparent);
}

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-7 { grid-template-columns: repeat(7, 1fr); }
.col-span-2 { grid-column: span 2; }
.w-full { width: 100%; }
.w-4 { width: 16px; } .h-4 { height: 16px; }
.w-6 { width: 24px; } .h-6 { height: 24px; }
.w-8 { width: 32px; } .h-8 { height: 32px; }
.w-10 { width: 40px; } .h-10 { height: 40px; }
.w-12 { width: 48px; } .h-12 { height: 48px; }
.w-14 { width: 56px; } .h-14 { height: 56px; }
.w-16 { width: 64px; } .h-16 { height: 64px; }
.w-1\/2 { width: 50%; }
.max-w-sm { max-width: 384px; }
.max-w-lg { max-width: 512px; }
.max-w-2xl { max-width: 672px; }
.max-w-3xl { max-width: 768px; }
.max-w-5xl { max-width: 1024px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-16 { margin-left: 64px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-auto { margin-top: auto; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.p-12 { padding: 48px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.text-sm { font-size: 14px; line-height: 1.5; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 30px; }
.text-4xl { font-size: 36px; }
.text-5xl { font-size: 48px; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l-2 { border-left-width: 2px; }
.border-r { border-right-width: 1px; }
.overflow-hidden { overflow: hidden; }
.aspect-square { aspect-ratio: 1 / 1; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.app-layout { display: flex; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-6 { right: 24px; }
.bottom-6 { bottom: 24px; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.min-h-screen { min-height: 100vh; }
.h-full { height: 100%; }
.resize-none { resize: none; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-6 > * + * { margin-top: 24px; }
.space-y-8 > * + * { margin-top: 32px; }
.opacity-50 { opacity: 0.5; }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); }
.transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.transition-shadow { transition: box-shadow 0.2s; }


/* ── Modo edición inline ─────────────────────────────────────────────────── */
.edit-mode [data-edit-key] {
  outline: 2px dashed rgba(245,233,74,0.4);
  outline-offset: 3px;
  cursor: text !important;
  border-radius: 3px;
  transition: outline-color 0.15s;
}
.edit-mode [data-edit-key]:hover {
  outline-color: rgba(245,233,74,0.9);
}
.edit-mode [data-edit-key]:focus,
.edit-mode [data-edit-key][contenteditable="true"] {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
.card { border-radius: var(--card-radius, 12px); }
.card-yellow { border-radius: var(--card-radius, 12px); }

/* Clases utilitarias adicionales */
.text-\[10px\] { font-size: 10px; }
.text-\[9px\]  { font-size: 9px; }
.gap-1\.5 { gap: 6px; }
.w-1\.5 { width: 6px; }
.h-1\.5 { height: 6px; }
.mt-1\.5 { margin-top: 6px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.max-w-xs { max-width: 320px; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.inline-block { display: inline-block; }
.block { display: block; }
.w-2 { width: 8px; } .h-2 { height: 8px; }
.w-3 { width: 12px; } .h-3 { height: 12px; }

/* ── Responsive layout components ─────────────────────────────────────── */
.page-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.grid-2-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.grid-siento {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 24px;
}
.grid-patrones {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
.grid-entrada {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 12px;
  align-items: start;
}
.escala-celda-izq {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  padding: 24px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.escala-inner {
  flex-shrink: 0;
  height: 430px;
  display: flex;
  flex-direction: column;
}
.escala-barra {
  width: 150px;
  height: 100%;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.pensamiento-ia {
  border-left: 1px solid rgba(255,255,255,0.06);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pensamiento-ia > div:last-child { margin-top: auto; }
.modal-centrado {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 9990;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
}
.panel-lateral {
  display: none;
  position: fixed;
  right: 24px;
  top: 80px;
  width: 290px;
  z-index: 9990;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 20px 20px 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.cal-anio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.chips-wrap { flex-wrap: wrap; }
.grid-4col { display:grid; grid-template-columns:repeat(4,1fr); }
.grid-7col { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }

/* Login: email y contraseña en la misma línea en pantalla grande; en móvil, uno debajo de otro */
.campos-login-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) {
  .campos-login-fila { grid-template-columns: 1fr; }
}

/* Las dos tarjetas de "¿Cómo me siento?" se apilan cuando no caben (ancho fijo 400+350) */
@media (max-width: 1000px) {
  .grid-siento { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Criterio global: todos los títulos de página iguales, todo el texto de cuerpo igual */
  h1.font-display { font-size: 28px !important; line-height: 1.05; }
  p.font-sans { font-size: 15px !important; }
  /* Cabecera de página: título arriba, acompañante (botón/contador) debajo */
  .page-head { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

  .page-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .page-header > div:last-child { text-align: center; }
  .grid-2-equal { grid-template-columns: 1fr; }
  .grid-siento { grid-template-columns: 1fr; }
  .grid-patrones { grid-template-columns: 1fr; }
  .grid-entrada { grid-template-columns: 1fr; }
  .escala-celda-izq {
    flex-direction: row;
    gap: 8px;
    padding: 12px;
    border-right: none;
    border-bottom: none;
    align-items: stretch;
  }
  .escala-inner { height: auto; flex: 1; min-width: 0; }
  .escala-inner > p { white-space: nowrap; }
  .escala-barra { flex: 1 1 auto; max-width: 116px; min-width: 0; padding: 0 6px; height: 26px; overflow: hidden; }
  .escala-barra span { font-size: 9px !important; overflow: hidden; text-overflow: ellipsis; }
  .escala-freq { width: 32px; text-align: left; flex-shrink: 0; }
  .escala-celda-izq img { max-width: 42% !important; width: 42%; height: auto !important; align-self: stretch; object-fit: contain; margin-top: 24px; margin-left: 5px; }
  .escala-celda-izq .escala-inner [style*="display:flex"] { flex-wrap: nowrap !important; }
  .entrada-card { padding: 12px !important; padding-right: 28px !important; }
  .entrada-card > .w-2 { display: none !important; }
  [style*="padding:24px"][style*="overflow-y:auto"] { padding: 12px !important; }
  .pensamiento-ia {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 12px;
  }
  .modal-centrado {
    left: 16px;
    right: 16px;
    top: 16px;
    width: auto;
    transform: none;
    max-height: calc(100vh - 32px);
  }
  .panel-lateral {
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    overflow-y: auto;
  }
  .cal-anio-grid { grid-template-columns: repeat(2, 1fr); }
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .ventas-nav { padding: 14px 20px; }
  .grid-4col { grid-template-columns: 1fr 1fr; }
  .grid-7col { grid-template-columns: repeat(2, 1fr); }
  .grid-7col span { white-space: nowrap; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 8px !important; }
  .grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid-cols-3 { grid-template-columns: repeat(3,1fr) !important; }

  /* Pensamientos: pills completas y todas con la misma altura */
  .chips-emociones { flex-wrap: wrap !important; }
  .chips-emociones .badge { white-space: nowrap; flex-shrink: 0; padding: 4px 10px !important; }

  /* Estadísticas: donut arriba, leyenda en 2 columnas debajo */
  .dist-emociones { flex-direction: column !important; align-items: center !important; gap: 16px !important; }
  .dist-emociones > div:last-child { width: 100%; }
  #legend-emociones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  #legend-emociones span { white-space: nowrap; }

  /* Búsqueda: filtros en columna, cada campo a lo ancho, botón visible */
  .busqueda-filtros > div { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .busqueda-filtros select { width: 100% !important; }
  .busqueda-filtros [style*="min-width:200px"] { min-width: 0 !important; }
  .busqueda-filtros #filtro-desde, .busqueda-filtros #filtro-hasta { flex: 1; min-width: 0; }
  .busqueda-filtros .btn { width: 100%; margin-left: 0 !important; justify-content: center; }

  /* Admin APIs: clave en su propia línea, nombre flexible */
  [id^="keys-"] > div { flex-wrap: wrap !important; }
  [id^="keys-"] > div > div { flex-basis: 100% !important; flex-grow: 1 !important; }
  [id^="keys-"] .nombre-key-input, [id^="keys-"] .tmp-nombre { flex: 1 !important; width: auto !important; min-width: 120px; }

  /* Admin APIs: log con líneas completas */
  #cont-log > div { flex-wrap: wrap !important; }
  #cont-log > div > span { width: auto !important; max-width: 100%; }
  #cont-log .truncate { white-space: normal !important; overflow: visible !important; word-break: break-all; }
  #cont-fallos .flex { flex-wrap: wrap !important; }

  /* Admin contenido: añadir emoción/categoría en dos líneas */
  #form-emo .flex, #form-cat .flex { flex-wrap: wrap !important; }
  #emo-nombre, #cat-nombre { flex-basis: 100%; }
  #form-emo .btn, #form-cat .btn { flex: 1; justify-content: center; }

  /* Admin planes: tarjeta en columna, botones debajo */
  .plan-row { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .plan-acciones { flex-wrap: wrap; }

  /* Admin técnicas: todo apilado al mismo margen izquierdo */
  .tec-row { display: block !important; }
  .tec-row > div { min-width: 0 !important; width: 100%; }
  .tec-row > div:nth-child(2) { margin-top: 10px; }
  .tec-row > div:last-child { margin-top: 10px; display: flex; gap: 8px; }
  .tec-desc { display: block !important; -webkit-line-clamp: none !important; overflow: visible !important; }

  /* Admin usuarias: header + buscador apilados, tabla en tarjetas */
  .usuarias-buscar { width: 100%; }
  .usuarias-buscar input { flex: 1; min-width: 0; }
  .tabla-usuarias thead { display: none; }
  .tabla-usuarias, .tabla-usuarias tbody, .tabla-usuarias tr { display: block; width: 100%; }
  .tabla-usuarias td { display: block; padding: 3px 0 !important; }
  .tabla-usuarias tr { padding: 10px 0; }

  /* Nueva entrada: cabecera compacta, título en una línea y campos con etiqueta a la izquierda + control a la derecha */
  .entrada-nueva { margin-top: -8px; }
  .entrada-nueva .mb-8 { margin-bottom: 14px !important; }
  #titulo-entrada { font-size: clamp(15px, 5.9vw, 28px) !important; white-space: nowrap; }
  .campo-fila { display: grid !important; grid-template-columns: max-content 1fr; align-items: center; gap: 8px; max-width: none !important; }
  .campo-fila .campo-label { margin-bottom: 0 !important; justify-content: flex-start !important; font-size: 10px !important; white-space: nowrap; }
  .campo-fila .campo-label label { text-align: left; font-size: 10px !important; white-space: nowrap; }
  .campo-fila .campo-control > span { font-size: 1.1rem !important; min-width: 1.2rem !important; }
  /* Pastillas de Área compactas, pegadas a la etiqueta y con la etiqueta a la altura de la primera fila */
  .campo-fila:has(.chips-wrap) { align-items: start; }
  .campo-fila:has(.chips-wrap) .campo-label { padding-top: 5px; }
  .campo-fila .chips-wrap { justify-content: flex-start !important; padding-left: 0 !important; padding-right: 0 !important; gap: 5px !important; }
  .campo-fila .chips-wrap .chip-btn { padding: 2px 8px !important; font-size: 10px !important; line-height: 1.5 !important; }
}

/* Reglas móviles trasladadas desde el antiguo bloque de includes/layout.php (mismo orden que el bloque original) */
@media (max-width: 768px) {
  #inline-edit-btn { display: none !important; }
  body { overflow-x: hidden !important; }
  img, video, iframe, canvas { max-width: 100% !important; height: auto !important; }
  .mvminw0 { min-width: 0 !important; }
  table { display: block; overflow-x: auto; width: 100%; }
  .card { padding: 16px !important; }
  p, span, h1, h2, h3 { word-break: break-word; }
  .tec-btn { padding: 5px 8px !important; font-size: 10px !important; }
  .sidebar-el { right: 0 !important; left: auto !important; transform: translateX(100%); border-left: 1px solid var(--line) !important; border-right: none !important; }
  .sidebar-el.open { transform: translateX(0); }
  .main-content { margin-left: 0 !important; overflow-x: hidden !important; max-width: 100vw !important; }
  .hamburger-btn { display: block !important; }
  #sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 38; }
  #sidebar-overlay.open { display: block; }
  main { overflow-x: hidden !important; max-width: 100% !important; }
  .mvflex { flex-wrap: wrap !important; }
  .mvflex > *, .mvflexcol > * { min-width: 0 !important; }
  .mvhauto { height: auto !important; }
  .mvmaxw { max-width: 100% !important; }
  .mvwauto { width: auto !important; max-width: 100% !important; }
  .mvmodal { width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; left: 16px !important; right: 16px !important; transform: none !important; }
  .mvstatic { position: static !important; }
  .navbar-entrada { display: none !important; }
  #admin-nav-d { display: block !important; }
  #admin-nav-m { display: none !important; }
  .mvnavgrid { grid-template-columns: auto 1fr auto !important; padding-left: 12px !important; padding-right: 12px !important; }
  .grid-cols-3 > div { padding: 12px 8px !important; }
  .navbar-main div > span { display: block; text-align: center; }
}

/* ── Móvil: todo a una sola columna (regla global) ───────────────────────── */
@media (max-width: 768px) {
  /* Cualquier rejilla de varias columnas pasa a una */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-template-rows: none !important;
  }
  /* Las filas flexibles pueden saltar de línea */
  [style*="flex-wrap:nowrap"] { flex-wrap: wrap !important; }
  /* Los bloques que se reparten el ancho pasan a ocuparlo entero */
  [style*="flex:1 1 0"],
  [style*="flex:1 1 30%"],
  [style*="flex:1 1 50%"],
  [style*="flex:2 1 60%"],
  [style*="flex:0 1 50%"] { flex: 1 1 100% !important; max-width: 100% !important; }
  /* Anchos máximos fijos fuera */
  [style*="max-width:60%"],
  [style*="width:50%"] { max-width: 100% !important; width: 100% !important; }
  .planes-grid { flex-direction: column !important; }
  .perfil-grid { flex-direction: column !important; }
}

/* ── Móvil: etiquetas de ancho fijo arriba y control debajo (global) ─────── */
@media (max-width: 768px) {
  label[style*="width:150px"], label[style*="width:130px"], label[style*="width:60px"],
  p[style*="width:150px"], p[style*="width:120px"], p[style*="width:110px"], p[style*="width:88px"],
  span[style*="width:150px"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    padding-top: 0 !important;
    margin-bottom: 6px !important;
  }
  /* La fila que contiene etiqueta + control puede partirse */
  div[style*="display:flex"][style*="align-items:center"],
  div[style*="display:flex"][style*="align-items:flex-start"] { flex-wrap: wrap; }
}

/* ── Móvil: textos grandes de las celdas sin cortarse a mitad de palabra ── */
@media (max-width: 768px) {
  .grid-cell .font-display, .grid-cols-3 .font-display { font-size: 16px; word-break: keep-all; overflow-wrap: normal; }
  .grid-cell .text-5xl, .grid-cols-3 .text-5xl, .grid-cols-3 .font-mono.text-5xl { font-size: 26px; }
  .grid-cell, .grid-cols-3 > div { padding: 12px !important; }
}

/* ── Móvil: cabecera compacta y alineada a la izquierda ─────────────────── */
@media (max-width: 768px) {
  .page-header {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    gap: 8px 12px !important;
  }
  .page-header h1 { font-size: 26px; }
  .page-header > div:last-child { text-align: left !important; margin-left: 0 !important; }
}

/* ── Móvil: cabecera en tres líneas ordenadas ────────────────────────────── */
@media (max-width: 768px) {
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .page-header .ph-hola { gap: 10px; }
  .page-header .ph-hola h1 { font-size: 24px; }
  .page-header .ph-enlace { margin-left: 0 !important; text-align: left !important; }
  .navbar-main { margin-bottom: 8px; }
}

/* ── Móvil: ocultar el enlace de la cabecera ─────────────────────────────── */
@media (max-width: 768px) {
  .page-header .ph-enlace { display: none !important; }
}

/* ── Móvil: ocultar el enlace de la cabecera (vale también para el PHP viejo del servidor) ── */
@media (max-width: 768px) {
  .page-header a[href*="/pensamientos"] { display: none !important; }
}

/* ── Móvil: fecha y hamburguesa en la misma línea ────────────────────────── */
@media (max-width: 768px) {
  .mvnavgrid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 24px !important;
  }
  .mvnavgrid > div:first-child { display: none !important; }
}

/* ── Móvil: sin racha; saludo y nombre a la misma altura ─────────────────── */
@media (max-width: 768px) {
  .page-header .ph-racha { display: none !important; }
  .page-header .ph-hola { flex-direction: row !important; align-items: center !important; }
}

/* ── Móvil: la fila marcada con TÚ no encoge la barra ni el número ───────── */
@media (max-width: 768px) {
  .escala-barra { flex: 0 0 116px !important; }
  .escala-inner .mvflex:has(> span[style*="font-weight:700"]) .escala-freq { display: none; }
}

/* ── Móvil: pensamientos — título y total en una línea, buscador y botón en otra ── */
@media (max-width: 768px) {
  .page-head { flex-wrap: wrap; row-gap: 10px; align-items: center !important; }
  .page-head h1 { font-size: 24px; order: 0; }
  .page-head > div:last-child { display: contents; }
  .page-head > div:last-child br { display: none; }
  .page-head > div:last-child span { order: 1; margin-left: auto; }
  .page-head form { order: 2; flex: 1 1 auto; min-width: 0; max-width: none !important; margin-left: 0 !important; }
  .page-head #btn-reintentar-todos { order: 3; margin-top: 0 !important; flex-shrink: 0; }
}

/* ── Móvil: los días del calendario conservan sus 7 columnas ─────────────── */
@media (max-width: 768px) {
  #cal-year [style*="repeat(7,1fr)"], [style*="repeat(7,1fr)"] {
    grid-template-columns: repeat(7, 1fr) !important;
    grid-auto-flow: row !important;
  }
}

/* ── Móvil: números de las celdas alineados aunque el título tenga 2 líneas ── */
@media (max-width: 768px) {
  .grid-cell, .grid-cols-3 > div, .grid-cols-4 > div { display: flex; flex-direction: column; }
  .grid-cell > :last-child, .grid-cols-3 > div > :last-child, .grid-cols-4 > div > :last-child { margin-top: auto; }
}

/* ── Móvil: "Fecha y hora" y su casilla en la misma línea ────────────────── */
@media (max-width: 768px) {
  div:has(> #fechaHora) { flex-wrap: nowrap !important; }
  div:has(> #fechaHora) > label { width: auto !important; flex: 0 0 auto !important; margin-bottom: 0 !important; }
}

/* ── Móvil: pensamientos, versión reforzada (vale para ambas estructuras) ── */
@media (max-width: 768px) {
  .page-head { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; row-gap: 10px; }
  .page-head > div:first-child:not(:last-child) { display: contents; }
  .page-head h1 { font-size: 24px !important; order: 0; text-align: left !important; }
  .page-head > div:last-child { display: contents; }
  .page-head > div:last-child br { display: none !important; }
  .page-head > div:last-child span { order: 1; margin-left: auto !important; }
  .page-head form { order: 2 !important; flex: 1 1 160px !important; min-width: 160px !important; max-width: none !important; margin-left: 0 !important; }
  .page-head form input[type="search"] { padding: 8px 10px 8px 34px !important; font-size: 11px !important; }
  .page-head #btn-reintentar-todos { order: 3; margin-top: 0 !important; flex-shrink: 0; font-size: 8px !important; padding: 6px 10px !important; }
}

/* ── Móvil: los mapas de calor conservan sus columnas ────────────────────── */
@media (max-width: 768px) {
  [style*="grid-template-columns:28px repeat(7,1fr)"] {
    grid-template-columns: 28px repeat(7, 1fr) !important;
    grid-auto-flow: row !important;
  }
  [style*="grid-template-columns:20px repeat(12,1fr)"] {
    grid-template-columns: 20px repeat(12, 1fr) !important;
    grid-auto-flow: row !important;
  }
}

/* ── Móvil: búsqueda — desde y hasta en una línea, botón a todo el ancho ── */
@media (max-width: 768px) {
  .busqueda-filtros .mvflex { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; }
  .busqueda-filtros #filtro-q { flex: 1 1 100% !important; }
  .busqueda-filtros #filtro-emo { flex: 1 1 100% !important; width: 100% !important; }
  .busqueda-filtros label { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; }
  .busqueda-filtros input[placeholder="dd/mm/aaaa"] { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  .busqueda-filtros #btn-buscar { flex: 1 1 100% !important; width: 100% !important; justify-content: center; }
}

/* ── Móvil: búsqueda, versión reforzada (vale también para el PHP del servidor) ── */
@media (max-width: 768px) {
  .busqueda-filtros > div:has(#filtro-desde) { display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; gap: 10px !important; align-items: center !important; }
  .busqueda-filtros div:has(> #filtro-desde):not(:has(#filtro-q)), .busqueda-filtros div:has(> #filtro-hasta):not(:has(#filtro-q)) {
    flex: 1 1 0 !important; min-width: 0 !important;
    display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important;
  }
  .busqueda-filtros input[placeholder="dd/mm/aaaa"] { flex: 1 1 80px !important; font-size: 12px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .busqueda-filtros label { flex: 0 0 auto !important; }
  .busqueda-filtros #filtro-desde, .busqueda-filtros #filtro-hasta { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
}

/* ── Tablet (769-1000 px): mismas reglas de una columna que en móvil ─────── */
@media (min-width: 769px) and (max-width: 1000px) {
  /* Rejillas de la app a una sola columna */
  .grid-2-equal, .grid-patrones, .grid-entrada, .grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid-cols-4, .grid-4col { grid-template-columns: repeat(2, 1fr) !important; }
  .planes-grid, .perfil-grid { flex-direction: column !important; }

  /* Rejillas escritas en la propia página, a una columna */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-template-rows: none !important;
  }
  /* Excepciones: calendario y mapas de calor conservan sus columnas */
  #cal-year [style*="repeat(7,1fr)"], [style*="repeat(7,1fr)"] { grid-template-columns: repeat(7, 1fr) !important; }
  [style*="grid-template-columns:28px repeat(7,1fr)"] { grid-template-columns: 28px repeat(7, 1fr) !important; }
  [style*="grid-template-columns:20px repeat(12,1fr)"] { grid-template-columns: 20px repeat(12, 1fr) !important; }

  /* Bloques que se reparten el ancho, a ancho completo */
  [style*="flex:1 1 0"],
  [style*="flex:1 1 30%"],
  [style*="flex:1 1 50%"],
  [style*="flex:2 1 60%"],
  [style*="flex:0 1 50%"] { flex: 1 1 100% !important; max-width: 100% !important; }
  [style*="max-width:60%"], [style*="width:50%"] { max-width: 100% !important; width: 100% !important; }

  /* Etiquetas de ancho fijo: encima del control y a todo el ancho */
  label[style*="width:150px"], label[style*="width:130px"], label[style*="width:60px"],
  p[style*="width:150px"], p[style*="width:120px"], p[style*="width:110px"], p[style*="width:88px"],
  span[style*="width:150px"], [style*="flex:0 0 260px"] {
    width: 100% !important;
    flex: 1 1 100% !important;
    padding-top: 0 !important;
    margin-bottom: 6px !important;
  }
  div[style*="display:flex"][style*="align-items:center"],
  div[style*="display:flex"][style*="align-items:flex-start"] { flex-wrap: wrap; }
}

/* ── Móvil: Mi perfil — email debajo del nombre y botones en una sola fila ── */
@media (max-width: 768px) {
  /* Nombre y email, cada etiqueta encima de su campo y uno debajo del otro */
  #form-perfil > div:first-child { flex-wrap: wrap !important; row-gap: 4px !important; }
  #form-perfil > div:first-child > label { flex: 1 1 100% !important; width: 100% !important; margin: 0 !important; }
  #form-perfil > div:first-child > input { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }

  /* Reenvía el código y Guarda, en la misma línea: texto a la izquierda, botón a la derecha */
  #form-perfil > div[style*="justify-content:flex-end"] { flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; }
  #form-perfil > div[style*="justify-content:flex-end"] .btn-ghost {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: left;
    line-height: 1.25;
    font-size: 10px !important;
    padding: 8px 10px !important;
  }
  #form-perfil > div[style*="justify-content:flex-end"] .btn-primary { flex: 0 0 auto !important; white-space: nowrap !important; }
}

/* ── Móvil: los dos botones de borrado, en una sola línea ─────────────────── */
@media (max-width: 768px) {
  .card > div.flex.gap-3.flex-wrap[style*="justify-content:flex-end"] {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .card > div.flex.gap-3.flex-wrap[style*="justify-content:flex-end"] > button {
    flex: 0 1 auto;
    white-space: nowrap !important;
    font-size: 9px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    letter-spacing: 0.04em !important;
  }
}

/* ── Móvil: cambiar contraseña — etiqueta y campo en la misma línea ──────── */
@media (max-width: 768px) {
  #form-pass > div { flex-wrap: nowrap !important; gap: 8px !important; }
  #form-pass > div > label {
    flex: 0 0 104px !important;
    width: 104px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }
  #form-pass > div > input,
  #form-pass > div > div { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  #form-pass input.input-field { font-size: 12px !important; padding-left: 10px !important; }
}

/* ── Móvil: el botón de cambiar contraseña, a todo el ancho ──────────────── */
@media (max-width: 768px) {
  #form-pass > div[style*="justify-content:flex-end"] > .btn-primary { flex: 1 1 100% !important; width: 100% !important; }
}

/* ── El descargo del pie manda sobre el tamaño general de texto ──────────── */
footer p.font-sans { font-size: 9px !important; }

/* ── Móvil: filas de ajustes del panel de avisos, ordenadas ──────────────── */
@media (max-width: 768px) {
  .fila-ajuste { flex-wrap: wrap !important; row-gap: 4px !important; }
  .fila-ajuste > span.font-sans { flex: 1 1 100% !important; width: 100% !important; }
  .fila-ajuste > input, .fila-ajuste > span.font-mono { flex: 0 0 auto !important; }
}

/* ── Móvil: métricas del panel de Admin — dos por fila, compactas y con el número grande ── */
@media (max-width: 768px) {
  .grid-border[style*="auto-fit"] { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-border[style*="auto-fit"] > .grid-cell {
    aspect-ratio: auto !important;
    padding: 14px 12px !important;
    gap: 8px;
    border-bottom: 1px solid var(--line);
  }
  .grid-border[style*="auto-fit"] > .grid-cell .font-display { font-size: 30px !important; }
}

/* ── Móvil: los dos cerebros, uno debajo del otro ─────────────────────────── */
@media (max-width: 768px) {
  .cerebro-doble { grid-template-columns: 1fr !important; }
  .cerebro-doble > div { min-width: 0 !important; max-width: 100% !important; }
  .cerebro-doble [data-cbr] { max-width: 100% !important; overflow: hidden !important; }
  .cerebro-doble [data-cbr] svg { width: 100% !important; height: auto !important; display: block !important; }
  /* Las fechas caben en una fila estrecha, sin espacio sobrante a la derecha */
  .cbr-fechas { gap: 6px !important; flex-wrap: wrap !important; }
  .cbr-fechas input,
  .cbr-fechas .flatpickr-input,
  .cbr-fechas input.form-control { width: auto !important; flex: 1 1 100px !important; min-width: 0 !important; max-width: 140px !important; }
  /* Leyendas: las cuatro columnas de siempre, con la letra más pequeña para que quepan */
  .cbr-leyenda { grid-auto-flow: row !important; grid-template-rows: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-columns: auto !important;
    justify-content: stretch !important; gap: 4px !important; }
  .cbr-ley-tiempo { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .cbr-leyenda > span { width: 100% !important; white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important; font-size: 7px !important; padding: 4px 3px !important; letter-spacing: 0 !important; }
}

/* ── Móvil: gráfica de los últimos 7 días — todas las columnas del mismo ancho ── */
@media (max-width: 768px) {
  .card > .flex.items-end[style*="height:240px"] { gap: 3px !important; }
  .card > .flex.items-end[style*="height:240px"] > div { flex: 1 1 0 !important; min-width: 0 !important; width: 0 !important; }
  .card > .flex.items-end[style*="height:240px"] > div > span { max-width: 100% !important; overflow: hidden !important; }
}

/* ── Móvil: la gráfica muestra los cuatro últimos días y el total de los siete ── */
@media (max-width: 768px) {
  .card > .flex.items-end[style*="height:240px"] > div:nth-child(-n+3) { display: none !important; }
}

/* ── Móvil: fechas del cerebro — arriba Desde y Hasta, debajo sus dos casillas ── */
@media (max-width: 768px) {
  .cbr-fechas {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: 6px 10px !important;
    align-items: center;
    justify-items: center;
  }
  .cbr-fechas input, .cbr-fechas .input-field { width: 100% !important; max-width: 100% !important; }
}

/* ── El nombre dentro de la barra: en ordenador, una sola línea ── */
.cb-em br { display: none; }

/* ── Móvil: el nombre se parte por la barra y va un píxel más pequeño ── */
@media (max-width: 768px) {
  .cb-em {
    font-size: 8px !important;
    white-space: normal !important;
    line-height: 1.05 !important;
    text-align: center;
    text-overflow: clip !important;
    padding: 0 2px !important;
  }
  .cb-em br { display: inline; }
  .cb-min { font-size: 7px !important; }
}