/* Elementos comunes a las 3 apps */

/* Botón para volver al inicio: solo la casita rellena, sin fondo, a la izquierda */
.home-link{width:44px;height:44px;flex-shrink:0;color:var(--accent);background:none;border:none;
  display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:10px;
  transition:transform .12s ease,opacity .12s ease}
.home-link svg{display:none !important}
/* la casita con corazón (img/casa.png) se pinta con el color elegido por el usuario */
.home-link::before{content:"";display:block;width:36px;height:36px;background:currentColor;
  -webkit-mask:url(img/casa.png?v=1) center/contain no-repeat;mask:url(img/casa.png?v=1) center/contain no-repeat}
.home-link:active{transform:scale(.88);opacity:.8}
.home-link:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.home-link.fixed{position:fixed;top:calc(env(safe-area-inset-top,0px) + 6px);left:8px;z-index:50}

/* Barras de arriba (Inventario, Ahorros, Vacaciones): mismo alto, título en el centro, casita a la izquierda */
.top-header{position:relative}
.top{position:sticky !important;top:0}
.top,.top-header{display:flex;align-items:center;justify-content:center;
  min-height:calc(env(safe-area-inset-top,0px) + 67px) !important;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 56px 12px !important}
.top .home-link,.top-header .home-link{position:absolute;left:8px;top:calc(env(safe-area-inset-top,0px) + 12px)}
.top h1{flex:0 0 auto !important;text-align:center;margin:0}
/* en Ahorros el título queda centrado y el selector de año va contra el borde derecho (a la altura de la casita) */
.tcenter{display:inline-block}
.tcenter .year{position:absolute;right:12px;top:calc(env(safe-area-inset-top,0px) + 32px);transform:translateY(-50%)}

/* El estado de sincronización no se muestra (se puede revisar en Ajustes del inicio) */
.sync,#syncDot,#syncLabel{display:none !important}

/* Interruptores deslizantes (ver tema.js): botones del mismo ancho y una pastilla que se mueve */
.desliz[hidden],.desliz.oculto{display:none !important}
.desliz{position:relative !important;display:grid !important;grid-template-columns:repeat(var(--n,2),minmax(0,1fr)) !important;gap:0 !important;isolation:isolate}
.desliz>.sw-knob{position:absolute;z-index:0;top:var(--pad,5px);bottom:var(--pad,5px);left:var(--pad,5px);
  width:calc((100% - 2 * var(--pad,5px)) / var(--n,2));border-radius:var(--kr,999px);background:var(--accent);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .32s cubic-bezier(.4,0,.2,1),background .25s,opacity .2s;
  box-shadow:0 2px 6px rgba(0,0,0,.15)}
.desliz>button{position:relative;z-index:1;background:transparent !important;border-color:transparent !important;box-shadow:none !important;transition:color .25s}
.desliz>button.on,.desliz>button.active,.desliz>button.sel-add,.desliz>button.sel-rem{color:#fff !important}
.desliz>button.on i,.desliz>button.sel-add i,.desliz>button.sel-rem i{color:#fff !important}

/* Íconos de toda la app con un "latido" suave: se agrandan y se achican apenas */
i.ti, .home-link::before, .gear svg { animation: iconoLatido 2.4s ease-in-out infinite; }
i.ti, .gear svg { display:inline-block; }
@keyframes iconoLatido { 0%,100% { scale:1; } 50% { scale:1.1; } }
.camera-fab i.ti { animation:none; } /* el botón de cámara ya late entero */
@media (prefers-reduced-motion: reduce) { i.ti, .home-link::before, .gear svg { animation:none; } }

/* Celular: que no haga zoom al tocar un campo ni se pueda correr la pantalla para los costados */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
html,body{overflow-x:clip;max-width:100%}

/* títulos largos (nombre propio de la sección) no se salen de la barra */
.top h1,.top-header-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* campos de fecha: en el iPhone tienen un ancho mínimo propio y se salían de su casilla.
   Se les saca ese ancho y se ajustan al espacio que tienen, en todas las secciones. */
input[type="date"],input[type="time"],input[type="month"],input[type="datetime-local"]{
  -webkit-appearance:none;appearance:none;min-width:0;max-width:100%;width:100%;box-sizing:border-box;display:block;min-height:2.6em}
input[type="date"]::-webkit-date-and-time-value,input[type="time"]::-webkit-date-and-time-value{text-align:left;margin:0}
*:has(> input[type="date"]),*:has(> input[type="time"]){min-width:0}

/* Botones con esquinas cruzadas en TODA la app (igual que la página de presentación):
   poca curva arriba-izquierda y abajo-derecha, mucha arriba-derecha y abajo-izquierda.
   Quedan afuera solo los que son redondos o no se ven como botón: interruptores, botones circulares,
   los días del calendario, los encabezados de los desplegables y las opciones de los selectores deslizantes. */
button:not(.sw):not(.sw2):not(.gear):not(.cuenta-btn):not(.camera-fab):not(.home-link):not(.home-btn):not(.chk):not(.icon-btn):not(.dia):not(.acc-h):not(.anio-h):not(.mes-h):not(.dia-h):not(.car-h):not(.reg-h):not(.grp-h):not(.oacc-h):not(.lap):not(.pj):not(.nav-btn):not(.d):not(.cc-dot):not(.rn):not(.scroll-arr-btn):not(.desliz>button):not(#intro button),a.btn,.btn,a.add,a.cta-b{border-radius:6px 20px 6px 20px !important}

/* Interruptores (sí/no) y selectores deslizantes con la misma forma de esquinas cruzadas */
.sw,.sw2,.toggle-track{border-radius:7px 15px 7px 15px !important}
.sw::after,.sw2::after,.toggle-thumb{border-radius:5px 11px 5px 11px !important}
.desliz{border-radius:6px 20px 6px 20px !important}
.desliz>.sw-knob{border-radius:4px 16px 4px 16px !important}

/* Buscadores: solo "Buscar", en gris claro */
input[type="search"]::placeholder,#searchInput::placeholder{color:#b8b8b0;opacity:1;font-weight:500}
[data-theme="dark"] input[type="search"]::placeholder,[data-theme="dark"] #searchInput::placeholder{color:rgba(255,255,255,.32)}

/* Con mouse: los botones principales se levantan un poco al pasar por arriba (así se nota que estás por tocarlos) */
@media (hover:hover){
  .btn,a.btn,.submit-btn,.add-btn,a.add,a.cta-b{transition:transform .18s ease,box-shadow .18s ease,filter .18s}
  .btn:hover:not(:disabled),a.btn:hover,.submit-btn:hover:not(:disabled),.add-btn:hover,a.add:hover,a.cta-b:hover{transform:translateY(-3px);box-shadow:0 10px 18px -6px rgba(0,0,0,.25)}
  .btn:active:not(:disabled),.submit-btn:active{transform:scale(.97)}
}

/* Corazón de Coaching (rompecabezas): las piezas rosas toman el color que eligió ella y las rojas el de él */
.corazon{position:relative;display:block;width:100%;aspect-ratio:420/354}
.corazon i{position:absolute;inset:0}
.corazon .c-el{background:var(--el,#DC2626);-webkit-mask:url(img/corazon/el.png?v=1) center/contain no-repeat;mask:url(img/corazon/el.png?v=1) center/contain no-repeat}
.corazon .c-ella{background:var(--ella,#F0A6CA);-webkit-mask:url(img/corazon/ella.png?v=1) center/contain no-repeat;mask:url(img/corazon/ella.png?v=1) center/contain no-repeat}
.corazon .c-sombra{background:url(img/corazon/sombra.png?v=1) center/contain no-repeat;opacity:.45}
.corazon .c-brillo{display:none}   /* sin reflejo: más plano, estilo chibi */
.pic-cor{align-items:center !important;justify-content:center;container-type:size}
/* el dibujo ocupa lo más que puede sin salirse, siempre en el centro, sea cual sea el tamaño de la tarjeta */
.pic-cor .corazon{width:min(80cqw,80cqh * 420 / 354) !important}
.pic-cor img{max-width:84% !important;max-height:84% !important;width:auto !important;height:auto !important;object-fit:contain}
/* contorno fino oscuro como los dibujos chibi + sombra suave abajo */
.pic-cor .corazon,.ad-cor .corazon{filter:drop-shadow(1.5px 0 0 #3b2626) drop-shadow(-1.5px 0 0 #3b2626) drop-shadow(0 1.5px 0 #3b2626) drop-shadow(0 -1.5px 0 #3b2626)}
.pic-cor .corazon{filter:drop-shadow(1.5px 0 0 #3b2626) drop-shadow(-1.5px 0 0 #3b2626) drop-shadow(0 1.5px 0 #3b2626) drop-shadow(0 -1.5px 0 #3b2626) drop-shadow(0 6px 6px rgba(0,0,0,.18))}
.ad-cor .corazon{filter:drop-shadow(.8px 0 0 #3b2626) drop-shadow(-.8px 0 0 #3b2626) drop-shadow(0 .8px 0 #3b2626) drop-shadow(0 -.8px 0 #3b2626)}
.ad-cor{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:var(--surface2);display:grid;place-items:center;padding:3px;box-sizing:border-box}