/* ==========================================================================
   CLIDANFI · Estilos complementarios a Tailwind
   Paleta: rojo clínico + beige/crema, sobre marco oscuro en escritorio.
   Aquí vive solo lo que Tailwind no cubre bien: escritorio, scrollbars,
   animaciones, safe-areas, tablas clínicas y el placeholder del logo.
   ========================================================================== */

/* Valores muestreados del logotipo: rojo #921f23 · crema #ded6ca · fondo #212022 */
:root {
  /* Rojo clínico */
  --brand-100: #fbe3e4;
  --brand-500: #c94750;
  --brand-600: #ad2830;
  --brand-700: #921f23;
  /* Crema / beige */
  --cream-100: #f8f4ed;
  --cream-200: #efe9df;
  --cream-300: #ded6ca;
  /* Neutros cálidos */
  --ink-50:  #faf9f7;
  --ink-100: #f2f1ee;
  --ink-200: #e4e2dd;
  --ink-300: #cdcac2;
  --ink-400: #a3a09a;
  --ink-500: #78756f;
  --ink-900: #1c1b1a;
  /* Marco oscuro de escritorio */
  --night-800: #212022;
  --night-900: #171618;
  --night-950: #0d0c0e;

  /* Alto del marco en escritorio */
  --frame-max-h: 940px;
}

html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; background: var(--cream-100); }

/* Evita el zoom automático de iOS al enfocar inputs */
input, select, textarea { font-size: 16px; }
@media (min-width: 480px) { input, select, textarea { font-size: 15px; } }

/* ==========================================================================
   ESCRITORIO · marco central sobre fondo oscuro
   En móvil no se aplica nada de esto: la vista queda exactamente igual.
   ========================================================================== */

/* Fondo elegante: degradado oscuro + halo rojizo muy sutil */
.app-bg {
  min-height: 100dvh;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(189, 58, 47, .16), transparent 60%),
    radial-gradient(900px 520px at 12% 108%, rgba(203, 172, 118, .10), transparent 62%),
    linear-gradient(160deg, var(--night-800) 0%, var(--night-900) 45%, var(--night-950) 100%);
}

/* Marca de agua del logo, solo en escritorio.
   El JPEG no tiene transparencia, pero su fondo (#212022) es justo el color
   --night-800 del degradado de la página: el recuadro se funde y solo se
   perciben la estrella y la figura. Por eso NO se aclara con brightness,
   que delataría el borde del rectángulo. */
.app-watermark {
  display: none;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(52vw, 620px);
  height: auto;
  object-fit: contain;
  opacity: .2;
  filter: saturate(.7);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Textura fina para que el fondo no se vea plano */
.app-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 3px 3px;
}

.app-shell { position: relative; z-index: 1; }

@media (min-width: 900px) {
  .app-watermark { display: block; }

  .app-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 28px 16px;
  }

  /* El marco del "teléfono".
     `transform` es intencional y estructural: convierte este elemento en el
     contenedor de referencia de sus hijos `position: fixed` (nav inferior,
     botón flotante, paneles y avisos), que así quedan dentro del marco en vez
     de pegarse a los bordes de la ventana. */
  .app-frame {
    transform: translateZ(0);
    position: relative;
    height: min(var(--frame-max-h), calc(100dvh - 56px));
    min-height: 0 !important;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, .3),
      0 30px 70px -20px rgba(0, 0, 0, .75),
      0 0 0 1px rgba(0, 0, 0, .4);
  }

  /* Brillo superior sutil, como el bisel de un dispositivo */
  .app-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    pointer-events: none;
    z-index: 60;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 22%);
  }

  /* El contenido pasa a desplazarse dentro del marco */
  #view-root {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-300, #d0c8b9) transparent;
  }
  #view-root::-webkit-scrollbar { width: 8px; }
  #view-root::-webkit-scrollbar-thumb {
    background: var(--ink-200);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  /* En escritorio no hay notch: recupera el espacio de las safe-areas */
  .app-frame .nav-safe { padding-bottom: .5rem; }
  #app-header > div:first-child { padding-top: .75rem; }
}

/* Pantallas muy bajas: que el marco no se coma la interfaz */
@media (min-width: 900px) and (max-height: 720px) {
  .app-shell { padding: 12px; }
  .app-frame { height: calc(100dvh - 24px); border-radius: 22px; }
}

/* ==========================================================================
   Placeholder del logo (se activa solo si la imagen no carga)
   ========================================================================== */
.logo-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cream-200), var(--cream-300));
  border: 1px dashed var(--brand-500);
  color: var(--brand-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.05;
  border-radius: .75rem;
}
.logo-fallback::after { content: "LOGO"; }

/* ==========================================================================
   Scroll horizontal sin barra (chips, catálogo)
   ========================================================================== */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.scroll-x {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ==========================================================================
   Animaciones
   ========================================================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pop { 0% { transform: scale(.9); opacity: 0 } 60% { transform: scale(1.03) } 100% { transform: scale(1); opacity: 1 } }

.anim-fade-up { animation: fadeUp .28s cubic-bezier(.2,.8,.3,1) both; }
.anim-fade    { animation: fadeIn .2s ease both; }
.anim-sheet   { animation: sheetUp .3s cubic-bezier(.2,.9,.3,1) both; }
.anim-pop     { animation: pop .35s cubic-bezier(.2,.9,.3,1) both; }

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

/* ==========================================================================
   Navegación inferior
   ========================================================================== */
.nav-item { color: var(--ink-400); }
.nav-item[aria-current="page"] { color: var(--brand-700); }
.nav-item[aria-current="page"] .nav-icon-wrap { background: var(--brand-100, #fbe6e4); }

.nav-safe { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }

/* ==========================================================================
   Campos de formulario
   ========================================================================== */
.field {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid var(--ink-200);
  background: #fff;
  padding: .625rem .75rem;
  font-size: 15px;
  color: var(--ink-900);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field::placeholder { color: var(--ink-400); }
.field:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(210, 86, 75, .18); }
.field[disabled] { background: var(--ink-50, #faf8f5); color: var(--ink-400); }

textarea.field { min-height: 84px; resize: vertical; line-height: 1.5; }

input[type="range"].eva { accent-color: var(--brand-600); width: 100%; height: 24px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-600); }

/* ==========================================================================
   Tabla compacta (goniometría, fuerza muscular)
   ========================================================================== */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { font-weight: 700; color: var(--ink-500); text-align: left; padding: .35rem .4rem; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.tbl td { padding: .2rem .25rem; }
.tbl input { width: 100%; text-align: center; border-radius: .5rem; border: 1px solid var(--ink-200); padding: .35rem .25rem; font-size: 14px; }
.tbl input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(210, 86, 75, .18); }

/* Mini gráfica de barras (ingresos) */
.bar { transition: height .5s cubic-bezier(.2,.9,.3,1); }

/* Recorte de texto multilínea */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   Impresión: fichas y valoraciones en PDF
   ========================================================================== */
@media print {
  #app-header, #bottom-nav, #sheet-root, #toast-root, .app-watermark, .no-print { display: none !important; }
  .app-bg::after { display: none !important; }
  body, .app-bg { background: #fff !important; }
  .app-shell { display: block !important; padding: 0 !important; }
  .app-frame {
    transform: none !important; height: auto !important; overflow: visible !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; max-width: none !important;
  }
  .app-frame::before { display: none !important; }
  #view-root { overflow: visible !important; padding-bottom: 0 !important; }
}