/* ===== Dieta · adaptación a móvil y tablet =====
   - PC (más de 900 px): menú lateral como siempre.
   - Móvil en vertical: cabecera arriba y barra de pestañas abajo.
   - Móvil en horizontal (poca altura): barra de iconos a la izquierda.
   Los "env(safe-area-inset-*)" respetan el notch y la barra de gestos del iPhone/Android. */

html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
.cargando { height: 100vh; height: 100dvh; }
.cab-movil, .barra-movil { display: none; }

/* Usuario en el menú lateral (PC) */
.lateral-usuario { display: flex; align-items: center; gap: 8px; padding: 10px 8px 0; color: #CDBDD2; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.lateral-usuario span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-usuario .btn { background: transparent; border-color: transparent; color: #CDBDD2; }
.lateral-usuario .btn:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: transparent; }

/* ===== Pantalla de entrar ===== */
.pantalla-entrar {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  background: radial-gradient(120% 70% at 50% 0%, var(--berenjena-2) 0%, var(--berenjena) 55%, #2A1830 100%);
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
.entrar-caja { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.entrar-marca { display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; font-family: 'Bricolage'; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.entrar-lema { text-align: center; color: #DCCFE0; margin: 0 0 6px; }
.entrar-form { gap: 14px; padding: 22px; }
.entrar-pest { display: flex; }
.entrar-pest button { flex: 1; }
.entrar-form .btn.grande { justify-content: center; margin-top: 4px; }
.entrar-ayuda { font-size: 13px; text-align: center; margin: 0; }
.clave-con-ojo { position: relative; display: block; }
.clave-con-ojo input { padding-right: 46px !important; }
.clave-con-ojo .btn { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border-color: transparent; background: transparent; color: var(--texto-2); }

/* ===== Ajustes: instalar, administración ===== */
.instrucciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.instrucciones > div { background: var(--superficie-2); border: 1px solid var(--pista); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.instrucciones > div.resaltado { border-color: var(--kcal-claro); background: #FAF6FB; }
.instrucciones ol { margin: 6px 0 0; padding-left: 20px; }
.instrucciones .ico { vertical-align: -2px; }
.lista-admin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-admin li { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid var(--pista); }
.lista-admin li:first-child { border-top: 0; }
.lista-admin li.agotada { opacity: .55; }
.la-princ { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.la-princ small { color: var(--texto-2); font-size: 12.5px; }
.codigo { font-family: Consolas, 'SF Mono', monospace; font-size: 16px; letter-spacing: .06em; }
.fila-opciones.invitar { align-items: flex-end; }
.fila-opciones.invitar .campo { width: auto; flex: 1 1 150px; }
label.btn { cursor: pointer; }
a.chip { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }

/* ===== Hoja inferior «Más» ===== */
.velo-hoja { place-items: end stretch; padding: 0; }
.hoja {
  background: var(--superficie); border-radius: 22px 22px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px -20px rgba(30, 10, 35, .45); animation: subirHoja .22s cubic-bezier(.2, .8, .2, 1);
  max-height: 90vh; overflow-y: auto;
}
@keyframes subirHoja { from { transform: translateY(100%); } }
.hoja-asa { width: 40px; height: 5px; border-radius: 9px; background: var(--linea); margin: 2px auto 12px; }
.hoja-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hoja-menu a {
  display: flex; align-items: center; gap: 10px; padding: 14px 12px; border-radius: 14px; background: var(--superficie-2);
  border: 1px solid var(--pista); color: var(--texto); text-decoration: none; font-weight: 600; font-size: 15px; min-height: 56px;
}
.hoja-menu a.on { background: var(--berenjena); color: #fff; border-color: var(--berenjena); }
.hoja-menu .contador { margin-left: auto; }
.hoja-usuario { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pista); color: var(--texto-2); }
.hoja-usuario span { flex: 1; font-weight: 600; color: var(--texto); }

/* =====================================================================
   MÓVIL Y TABLET (ancho hasta 900 px)
   ===================================================================== */
@media (max-width: 900px) {
  body { font-size: 15px; }
  /* iOS hace zoom en los campos con letra menor de 16 px */
  input:not([type=checkbox]):not([type=range]):not([type=radio]), select, textarea { font-size: 16px; min-height: 42px; }
  .mini-campo select { font-size: 16px; }

  .app { display: block; min-height: 100vh; }
  .lateral { display: none; }

  /* Cabecera fija arriba */
  .cab-movil {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 30; background: var(--berenjena); color: #fff;
    padding: calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
  }
  .marca-movil { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-family: 'Bricolage'; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
  .marca-movil .logo { width: 28px; height: 28px; }
  .pildora-kcal {
    display: flex; align-items: baseline; gap: 5px; background: var(--berenjena-2); color: #fff; text-decoration: none;
    border-radius: 99px; padding: 5px 12px 5px 10px; position: relative; overflow: hidden;
  }
  .pildora-kcal b { font-family: 'Bricolage'; font-size: 18px; line-height: 1.1; position: relative; }
  .pildora-kcal small { color: #DCCFE0; font-size: 12px; position: relative; }
  .pk-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
  .pk-barra i { display: block; height: 100%; background: #fff; }

  /* Barra de pestañas abajo */
  .barra-movil {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--linea); padding: 4px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .barra-movil a, .barra-movil button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px;
    color: var(--texto-2); text-decoration: none; font-size: 11px; font-weight: 600; border: 0; background: none; cursor: pointer;
    position: relative; padding: 4px 2px;
  }
  .barra-movil a.on, .barra-movil button.on { color: var(--berenjena); }
  .barra-movil a.on .ico, .barra-movil button.on .ico { background: #EEE6F1; border-radius: 99px; padding: 3px 14px; width: 52px; height: 30px; }
  .barra-movil .ico { width: 24px; height: 24px; padding: 3px 14px; box-sizing: content-box; }
  .barra-movil .punto { position: absolute; top: 6px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 9px; background: var(--hidr); border: 2px solid #fff; }

  .principal {
    padding: 16px calc(14px + env(safe-area-inset-right)) calc(84px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    max-width: none;
  }
  .vista { gap: 14px; }
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  .panel { padding: 16px; border-radius: 18px; }
  .panel-tit { font-size: 18px; }

  /* Botones cómodos para el dedo */
  .btn { min-height: 40px; padding: 8px 13px; }
  .btn.icono { min-width: 40px; min-height: 40px; justify-content: center; }
  .btn.mini { min-height: 32px; }
  .btn.enlace { min-height: 0; }
  .chip { min-height: 36px; padding: 7px 14px; }
  .pestanas { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas button { white-space: nowrap; flex: 1 0 auto; min-height: 38px; }
  input[type=checkbox] { width: 20px; height: 20px; }

  /* Rejillas: menos columnas */
  .rejilla-3, .rejilla-4, .rejilla-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-mes { grid-template-columns: repeat(2, 1fr); }
  .resumen-obj { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
  .rejilla-despensa, .compra-grupos { grid-template-columns: 1fr; }
  .rejilla-dietas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .rejilla-recetas { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .perfil-rejilla, .cal-rejilla-doble { grid-template-columns: 1fr; gap: 14px; }
  .anadir-rapido { min-width: 0; width: 100%; }
  .fila-opciones .campo { width: auto; flex: 1 1 140px; }
  .filtro { max-width: none; }
  .titulo-editable { font-size: 21px !important; max-width: 100%; }

  /* Tablas anchas: se pueden desplazar con el dedo */
  .tabla-comidas, .tabla-deportes, .tabla-simple { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabla-comidas select { min-width: 110px; }

  /* Diario: cabecera con la fecha */
  .cab-fecha { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
  .fecha-tit { min-width: 0; text-align: center; }
  .fecha-tit h1 { font-size: 24px; }
  .fecha-tit .suave { font-size: 13.5px; }
  .cab-fecha > .btn:not(.icono), .selector-fecha { grid-column: 1 / -1; width: 100% !important; margin: 0; justify-content: center; }
  .diario-lado { position: static; }
  .panel-plato { align-items: center; }
  .panel-plato .barra-macro { width: 100%; }
  .barra-acciones { gap: 6px; }
  .barra-acciones .btn { font-size: 13.5px; padding: 7px 11px; }

  /* Tarjetas de comida: título y botón + arriba; macros debajo */
  .tarjeta-comida { padding: 14px; }
  .tarjeta-comida > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; }
  .tarjeta-comida > header > .slot-der { display: contents; }
  .slot-der > .btn { grid-column: 2; grid-row: 1; }
  .slot-der > :not(.btn) { grid-column: 1; grid-row: 2; }
  .btn.redondo { min-width: 42px; min-height: 42px; }

  /* Líneas de alimentos: nombre arriba entero; cantidad y kcal debajo */
  .linea-item {
    grid-template-columns: 38px minmax(0, 1fr) auto 36px;
    grid-template-areas: "foto nombre nombre quitar" "foto cant kcal quitar";
    gap: 4px 10px; padding: 9px 0;
  }
  .linea-item > .foto { grid-area: foto; align-self: center; }
  .li-nombre { grid-area: nombre; }
  .li-nombre b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
  .li-cant { grid-area: cant; }
  .li-cant .num-input { width: 112px !important; }
  .li-cant input { min-height: 38px; padding-top: 6px !important; padding-bottom: 6px !important; }
  .li-kcal { grid-area: kcal; align-self: center; }
  .li-macros { display: none; }
  .linea-item > .btn { grid-area: quitar; align-self: center; }
  .tc-acciones .btn { font-size: 13.5px; }

  /* Calendario */
  .nav-mes { margin-left: 0; width: 100%; justify-content: space-between; }
  .nav-mes b { min-width: 0; font-size: 18px; }
  .cal { gap: 3px; padding: 10px 8px; }
  .cal-celda { aspect-ratio: 1 / 1.15; padding: 4px; border-radius: 9px; }
  .cal-num { font-size: 13px; }
  .cal-dep { top: 3px; right: 3px; font-size: 11px; }
  .cal-kcal { font-size: 9.5px; letter-spacing: -0.02em; }
  .cal-leyenda { gap: 10px; }

  /* Planificar / perfil */
  .modos { grid-template-columns: 1fr; }
  .tipos-dia { grid-template-columns: 1fr; }
  .prev-dia { min-width: 0; flex: 1 1 100px; }
  .det-receta-cab { flex-direction: column; align-items: flex-start; }
  .bienvenida { padding: 20px; }
  .bienvenida h1 { font-size: 25px; }

  /* Despensa */
  .prod-ctrl { grid-template-columns: 1fr; }

  /* Ventanas: a pantalla completa desde abajo */
  .velo { place-items: end stretch; padding: 0; }
  .modal {
    max-width: none !important; border-radius: 20px 20px 0 0; max-height: 94vh; max-height: 94dvh;
    animation: subirHoja .22s cubic-bezier(.2, .8, .2, 1);
  }
  .modal-cab { padding: 14px 16px 8px; }
  .modal-cab h2 { font-size: 19px; }
  .modal-cuerpo { padding: 4px 16px 16px; }
  .modal-pie { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal-cuerpo:last-child { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .modal-pie .btn { flex: 1 1 auto; justify-content: center; }

  /* Buscador de alimentos */
  .buscador { flex-wrap: wrap; padding: 6px 6px 6px 12px; }
  .buscador input { flex: 1 1 140px; min-width: 0; }
  .buscador > .btn:not(.boton-camara) { flex: 1 1 100%; justify-content: center; }
  .buscar > .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .buscar > .chips::-webkit-scrollbar { display: none; }
  .buscar > .chips .chip { flex: none; }
  .lista-alim button { padding: 10px; }
  .det-cab { flex-direction: column; gap: 10px; }
  .det-foto { width: 120px; height: 120px; }
  .det-cantidad { flex-direction: column; align-items: stretch; }
  .det-cantidad > .btn { justify-content: center; }
  .tabla-nutri td, .tabla-nutri th { padding: 6px; }

  /* Avisos pequeños encima de la barra */
  .toasts { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); align-items: center; }
  .toast { max-width: 100%; }

  .sugerencias button { padding: 11px 10px; }
}

/* Móvil estrecho */
@media (max-width: 520px) {
  .rejilla-2 { grid-template-columns: 1fr; }
  .instrucciones { grid-template-columns: 1fr; }
  .opciones-tarjeta { grid-template-columns: 1fr; }
  .rejilla-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .det-cab h3 { font-size: 19px; }
  .modal-pie { flex-direction: column-reverse; }
}

/* =====================================================================
   MÓVIL EN HORIZONTAL (poca altura): barra de iconos a la izquierda
   ===================================================================== */
@media (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) {
  .app { display: block; }
  .lateral { display: none; }
  .cab-movil { display: none; }
  .barra-movil {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    top: 0; bottom: 0; right: auto; width: calc(76px + env(safe-area-inset-left));
    padding: env(safe-area-inset-top) 4px env(safe-area-inset-bottom) calc(4px + env(safe-area-inset-left));
    border-top: 0; border-right: 1px solid var(--linea);
  }
  .barra-movil a, .barra-movil button { min-height: 0; flex: 1 1 0; max-height: 68px; font-size: 10.5px; }
  .barra-movil .ico { padding: 3px 12px; }
  .barra-movil a.on .ico, .barra-movil button.on .ico { width: 48px; height: 28px; padding: 3px 12px; }
  .principal {
    margin-left: calc(76px + env(safe-area-inset-left));
    padding: calc(12px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) 18px;
  }
  /* aprovechar el ancho: diario en dos columnas */
  .diario-rejilla { grid-template-columns: 270px minmax(0, 1fr); gap: 14px; }
  .diario-lado { position: sticky; top: 10px; max-height: calc(100dvh - 20px); overflow-y: auto; scrollbar-width: none; }
  .diario-lado::-webkit-scrollbar { display: none; }
  .plato { transform: scale(.82); margin: -18px auto; }
  .cab-fecha { grid-template-columns: auto auto auto 1fr; }
  .fecha-tit { text-align: left; }
  .cab-fecha > .btn:not(.icono), .selector-fecha { grid-column: auto; width: auto !important; justify-self: end; }
  .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfil-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-alim { grid-template-columns: 1fr 1fr; }
  .instrucciones { grid-template-columns: 1fr 1fr; }
  .cal-celda { aspect-ratio: 1.6 / 1; }
  .cal-kcal { font-size: 11px; }
  .modos { grid-template-columns: 1fr 1fr; }
  .tipos-dia { grid-template-columns: repeat(3, 1fr); }
  .velo, .velo-hoja { padding-left: calc(76px + env(safe-area-inset-left)); }
  .modal { max-height: 100dvh; border-radius: 18px 18px 0 0; }
  .hoja { max-height: 100dvh; }
  .hoja-menu { grid-template-columns: repeat(3, 1fr); }
  .toasts { left: calc(90px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); }
  h1 { font-size: 24px; }
  .buscador { flex-wrap: nowrap; }
  .buscador > .btn:not(.boton-camara) { flex: none; }
  .stats-mes { grid-template-columns: repeat(4, 1fr); }
  .stats-mes div { padding: 10px 12px; }
  .stats-mes b { font-size: 22px; }
}

/* ===== Escáner de códigos de barras ===== */
.escaner { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; overflow: hidden; }
.escaner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.escaner-velo { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.escaner-marco {
  width: min(86vw, 560px); aspect-ratio: 1.75 / 1; max-height: 46vh; border-radius: 18px; position: relative;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
}
.escaner-marco i { position: absolute; inset: 0; border-radius: 18px; border: 3px solid rgba(255, 255, 255, .9); }
.escaner-laser {
  position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--prot);
  box-shadow: 0 0 12px 2px rgba(217, 71, 63, .8); animation: laser 1.6s ease-in-out infinite alternate;
}
@keyframes laser { from { transform: translateY(-34px); } to { transform: translateY(34px); } }
.escaner-cab {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));
  background: linear-gradient(rgba(0, 0, 0, .6), transparent); font-size: 17px;
}
.escaner-btn { width: 46px; height: 46px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; cursor: pointer; }
.escaner-btn.on { background: #fff; color: #000; }
.escaner-hueco { width: 46px; }
.escaner-pie {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px calc(20px + env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  background: linear-gradient(transparent, rgba(0, 0, 0, .7)); font-size: 15.5px;
}
.escaner-pie p { margin: 0; max-width: 460px; }
.escaner-error { background: rgba(196, 55, 47, .9); padding: 12px 14px; border-radius: 12px; }
.escaner-pie .btn { color: var(--texto); }
@media (orientation: landscape) and (max-height: 520px) {
  .escaner-marco { width: min(60vw, 520px); max-height: 60vh; }
  .escaner-pie { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

.escanear-grande {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: var(--berenjena); color: #fff; border: 0; border-radius: 16px; padding: 16px 18px; min-height: 76px;
}
.escanear-grande span { display: flex; flex-direction: column; }
.escanear-grande b { font-family: 'Bricolage'; font-size: 19px; }
.escanear-grande small { color: #DCCFE0; font-size: 13.5px; }
.buscador .boton-camara { border-color: transparent; background: var(--pista); color: var(--berenjena); flex: none; }

@media (max-width: 900px) {
  .buscador .boton-camara { min-width: 42px; }
  .tipos-dia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tipo-dia { padding: 10px; }
  .tipo-dia .num-grande { font-size: 26px; }
  .tdm { flex-wrap: wrap; gap: 2px 6px; }
}

/* Las ventanas nunca más anchas que la pantalla */
.velo { grid-template-columns: minmax(0, 1fr); }
.modal, .modal-cuerpo, .detalle, .buscar, .panel-codigo { min-width: 0; }