/* Estilos de la app móvil, de las páginas legales y del registro. Van aparte
   de style.css para que el trabajo de diseño y este no se pisen. */
/* App móvil: deja libre la zona de la cámara y de la barra inferior del teléfono. */
@media(max-width:780px){.sidebar{padding-top:calc(16px + env(safe-area-inset-top,0px))}footer{padding-bottom:calc(17px + env(safe-area-inset-bottom,0px))}}#auth{padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
/* iPhone amplía la página al enfocar un campo con letra menor de 16px y no vuelve a reducirla. */
@media(max-width:780px){input,select,textarea{font-size:16px!important}}
/* Los símbolos de la interfaz se dibujan como texto, no como emojis de colores. */
html{font-variant-emoji:text}
/* Páginas de privacidad y aviso legal. */
.legal-page{overflow:auto}.legal{max-width:720px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top,0px)) 20px calc(60px + env(safe-area-inset-bottom,0px));font-size:15px;line-height:1.7}.legal .brand{margin-bottom:26px}.legal h1{font:700 30px Sora,sans-serif;margin:0 0 4px}.legal h2{font:600 18px Sora,sans-serif;margin:34px 0 10px}.legal p,.legal ul{margin:0 0 14px}.legal ul{padding-left:20px}.legal li{margin-bottom:6px}.legal a{color:var(--accent);text-decoration:underline}.legal a.brand{color:inherit;text-decoration:none}.legal-meta{color:var(--muted);font-size:13px}.legal-draft{border:1px solid var(--accent);border-radius:10px;padding:12px 14px;font-size:13px}.legal table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:14px;display:block;overflow-x:auto}.legal th,.legal td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--border);min-width:96px}.legal th{font-size:12px;color:var(--muted)}.legal-links{margin-top:40px;padding-top:18px;border-top:1px solid var(--border);font-size:14px}
footer a{color:inherit;text-decoration:underline}
/* Aceptación de condiciones en el registro y recordatorios de la app móvil. */
.auth-terms:not([hidden]),.notify-row{display:flex!important;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}.auth-terms input,.notify-row input{width:auto!important;margin:3px 0 0;flex-shrink:0}.auth-terms a{color:var(--accent);text-decoration:underline}
.notify-panel{padding:22px;margin-top:20px}.notify-panel h2{font:600 16px Sora,sans-serif;margin:0 0 6px}.notify-invite{padding:18px;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}.notify-invite .form-hint{margin:4px 0 0}.notify-actions{display:flex;gap:8px;align-items:center}
/* En la app móvil no hay pie de página web; sus enlaces están en Mi disponibilidad. */
.nativa footer{display:none}.about-links{display:grid;gap:12px;margin:8px 0 0}.about-links a{color:var(--accent);text-decoration:underline;font-size:14px}.legal h3{font:600 15px Sora,sans-serif;margin:20px 0 6px}
/* La pantalla de entrada tapa también la barra de pestañas inferior. */
#auth{z-index:120}
/* En móvil, la cuarta pestaña lleva a los ajustes (disponibilidad, recordatorios, cuenta). */
.app-nav .nav-ajustes{display:none}@media(max-width:780px){.sidebar .app-nav .nav-ajustes{display:flex}}
/* Los campos de hora de iPhone no se salen de su columna. */
@media(max-width:780px){input,select,textarea{min-width:0;max-width:100%}.form-grid>*{min-width:0}input[type=time],input[type=date]{-webkit-appearance:none;appearance:none}}
/* En la app, el contenido no asoma por detrás de la hora y la batería al desplazarse. */
.nativa body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:110}
@media(max-width:780px){input[type=time],input[type=date]{min-height:46px}}
/* Mientras se carga el plan no se queda la pantalla vacía. */
#main:empty::before{content:"Cargando tu plan…";display:block;padding:90px 20px;text-align:center;color:var(--muted);font-size:15px}
/* Las pestañas visibles se reparten siempre en una sola fila. Se mantienen las cuatro secciones principales también en la app móvil. */
@media(max-width:780px){.sidebar .app-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}

/* En un iPad la app se abre en una ventana de iPhone sin margen superior del sistema. */
@media(max-width:780px){.nativa .sidebar{padding-top:calc(16px + max(env(safe-area-inset-top,0px),14px))}}
/* Páginas de recuperar y cambiar la contraseña. */
.account-page{max-width:460px}.account-page form{display:grid;gap:4px;margin-top:22px}.auth-forgot{display:block;text-align:center;margin-top:12px;font-size:12px;color:var(--muted);text-decoration:underline}
/* Entrada suave de cada pantalla en la app móvil. */
@keyframes entra{from{opacity:.35}to{opacity:1}}@media(prefers-reduced-motion:no-preference){.nativa #main>*{animation:entra .16s ease-out}}