/* ============================================================
   BASE · lo que sostiene todas las pantallas
   ------------------------------------------------------------
   Barra superior, puertas, login, modales, estados vacíos y las
   utilidades sueltas. Lo que no pertenece a un módulo concreto.
   ============================================================ */

.wrap{max-width:820px;margin:0 auto;padding:2.5rem 2rem;}
.top-portada{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.75rem;}
.logo-grande{display:flex;align-items:baseline;gap:1px;font-size:var(--t-xl);font-weight:var(--p-max);letter-spacing:-0.5px;}
.logo-grande .v{color:var(--verde);}
.fecha-d{font-size:var(--t-xs);color:var(--sec);letter-spacing:0.5px;text-align:right;}
.fecha-f{font-size:var(--t-md);font-weight:var(--p-medio);text-align:right;}
.puertas{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.puerta{padding:1.9rem;cursor:pointer;text-decoration:none;color:inherit;
          transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;display:block;}
.puerta:hover,.puerta:active{border:1.5px solid var(--verde);box-shadow:0 0 0 4px rgba(16,167,116,0.12);transform:translateY(-2px);}
.puerta .ic{font-size:var(--t-xl);color:var(--navy);transition:color .18s ease;}
.puerta:hover .ic,.puerta:active .ic{color:var(--verde);}
.puerta .nm{font-size:var(--t-lg);font-weight:var(--p-fuerte);margin-top:16px;}
.puerta .sub{font-size:var(--t-sm);color:var(--sec);margin-top:4px;}
.puerta .cand{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);color:rgba(13,42,65,0.55);margin-top:16px;}
@media(max-width:600px){.puertas{grid-template-columns:1fr;}}
/* recibidor provisional: solo para probar el candado de extremo a extremo.
     Se sustituirá pieza a pieza por el recibidor real de cada puerta. */
  #pantalla-recibidor{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-calendario{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-calendario.visible{display:block;}
#pantalla-recibidor.visible{display:block;}
.aviso-provisional{background:var(--ficha);border:1px dashed var(--borde);border-radius:var(--r-md);padding:24px;text-align:center;color:var(--sec);font-size:var(--t-sm);}
#pantalla-portada{display:block;}
.portada-contenido{display:block;}
#pantalla-portada.oculto{display:none;}
/* login (capa exterior, usuario/contraseña) */
  #pantalla-login{display:none;min-height:100vh;align-items:center;justify-content:center;}
#pantalla-login.visible{display:flex;}
.login-caja{padding:44px 40px;width:340px;text-align:center;}
.login-logo{display:flex;align-items:baseline;gap:1px;justify-content:center;font-size:var(--t-xl);font-weight:var(--p-max);letter-spacing:-0.4px;margin-bottom:6px;}
.login-logo .v{color:var(--verde);}
.login-sub{font-size:var(--t-sm);color:var(--sec);margin-bottom:26px;}
.login-campo{text-align:left;margin-bottom:16px;}
.login-campo label{display:block;font-size:var(--t-xs);font-weight:var(--p-fuerte);letter-spacing:0.4px;text-transform:uppercase;color:rgba(13,42,65,0.55);margin-bottom:6px;}
.login-campo input{width:100%;border:1px solid var(--borde);border-radius:var(--r-sm);padding:11px 13px;font-family:inherit;font-size:var(--t-md);color:var(--navy);box-sizing:border-box;}
.login-campo input:focus{outline:none;border-color:var(--verde);}
/* Botón principal de la aplicación. Se llamaba .btn porque nació
     en la pantalla de acceso, pero se usa en 23 sitios que no son el
     login. El nombre decía dónde nació, no qué hace. */
  .btn{width:100%;background:var(--verde);color:var(--ficha);border:none;padding:13px;font-size:var(--t-md);margin-top:6px;}
.btn:hover{background:var(--verde-hondo);}
.login-err{min-height:18px;font-size:var(--t-sm);color:var(--alerta);margin-top:12px;}
/* enlace discreto de cerrar sesión, en la portada */
  .cerrar-sesion:hover{color:var(--navy);}
/* ---- Contactos ---- */
  #pantalla-contactos{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-contactos.visible{display:block;}
/* Cuadernos de Contactos (v17.0). Mismo ancho y mismo relleno que las
   demas pantallas: sin esto el recibidor se iba de borde a borde del
   monitor y las tarjetas quedaban de metro y medio. */
#pantalla-ct-recibidor{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-ct-recibidor.visible{display:block;}
#pantalla-sitios{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-sitios.visible{display:block;}
#pantalla-sitio-ficha{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-sitio-ficha.visible{display:block;}
#ct-vista-ficha{display:none;}
#ct-vista-ficha.on{display:block;}
#ct-vista-lista.off{display:none;}
/* ---- Ajustes ---- */
  #pantalla-ajustes{display:none;max-width:1180px;margin:0 auto;padding:1.5rem;}
#pantalla-ajustes.visible{display:block;}
/* ============================================================
     FINANZAS · CUENTAS Y MOVIMIENTOS
     ============================================================ */
  #pantalla-fin-cuentas, #pantalla-fin-movimientos{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-fin-cuentas.visible, #pantalla-fin-movimientos.visible{display:block;}
/* ============================================================
     FINANZAS · CRÉDITO
     ============================================================ */
  #pantalla-fin-credito, #pantalla-fin-credito-ficha{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-fin-credito.visible, #pantalla-fin-credito-ficha.visible{display:block;}
/* ============================================================
     FINANZAS · PANEL (pantalla tras cruzar la puerta)
     ============================================================ */
  #panel-finanzas{margin:0 auto;}
/* ---- ESTADOS VACÍOS -------------------------------------------------
     Un estado vacío no dice que no hay nada: dice qué hacer para que lo
     haya. Había siete clases inventadas módulo a módulo, pero al mirarlas
     NO eran siete formas de lo mismo: son cuatro situaciones distintas y
     mezclarlas habría sido peor que dejarlas. Son estas. No crear más.
     (pres-vacio se queda aparte: no es un estado vacío, es un hueco
     pinchable para añadir una partida.)                                  */
  /* 1. Módulo entero sin datos. Ocupa la pantalla, explica para qué sirve
        el módulo y lleva al botón que lo arregla. */
  .vacio-modulo{background:var(--ficha);border:1px solid var(--borde);border-radius:var(--r-md);padding:40px 28px;text-align:center;}
.vacio-modulo .ic{font-size:var(--t-2xl);color:var(--borde);display:block;margin-bottom:12px;}
.vacio-modulo .tit{font-size:var(--t-lg);font-weight:var(--p-fuerte);}
.vacio-modulo .tx{font-size:var(--t-sm);color:var(--sec);margin:8px auto 0;max-width:440px;line-height:1.55;}
/* 2. Un panel pequeño sin nada que listar. Una línea y nada más: aquí un
        bloque grande con icono sería ruido, no ayuda. */
  .vacio-linea{font-size:var(--t-sm);color:var(--sec);padding:8px 0;}
.vacio-linea.centrado{text-align:center;}
/* 3. La búsqueda o el filtro no devuelven nada. NO es lo mismo que estar
        vacío: aquí sí hay datos, lo que falla es el criterio. Por eso el
        texto tiene que ofrecer la salida (quitar el filtro), no invitar a
        crear algo. */
  .vacio-busqueda{font-size:var(--t-sm);color:var(--sec);text-align:center;padding:24px 16px;line-height:1.55;}
.vacio-busqueda .pista{display:block;font-size:var(--t-xs);margin-top:4px;}
/* 4. Cargando. Iba con la clase de vacío, y no es vacío: es "todavía no
        lo sé". Decir "no hay nada" mientras se carga es mentir. */
  .cargando{font-size:var(--t-sm);color:var(--sec);padding:8px 0;opacity:.7;}
/* ============================================================
     FINANZAS · SUSCRIPCIONES
     ============================================================ */
  #pantalla-fin-suscripciones, #pantalla-fin-suscripciones-ficha{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-fin-suscripciones.visible, #pantalla-fin-suscripciones-ficha.visible{display:block;}
/* ============================================================
     FINANZAS · PRESUPUESTO
     ============================================================ */
  #pantalla-fin-presupuesto{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-fin-presupuesto.visible{display:block;}
/* ============================================================
     AGENDA · PANEL (recibidor, tras cruzar la puerta)
     ============================================================ */
  #panel-agenda{margin:0 auto;}
/* ---- Diario ---- */
  #pantalla-diario{display:none;max-width:1500px;margin:0 auto;padding:2.5rem 2rem;}
#pantalla-diario.visible{display:block;}
#dia-resultados{display:flex;flex-direction:column;gap:0;background:var(--ficha);border:1px solid var(--borde);border-radius:var(--r-md);padding:6px 4px;margin-bottom:14px;}
/* escritura */
  #dia-vista-escribir{display:none;}
#dia-vista-escribir.on{display:block;}

/* ---- UTILIDADES --------------------------------------------
   Para lo que no merece una clase propia. Salieron de contar los
   style= en línea del index: había 12 idénticos poniendo
   font-size:var(--t-md), 9 con t-sm y 7 con display:none. Un
   estilo repetido doce veces no es un caso particular: es una
   clase que faltaba.

   Deliberadamente pocas. Si esto crece, deja de ser un sistema y
   pasa a ser otra forma de escribir CSS suelto, que es de lo que
   veníamos. */
.t-xs{font-size:var(--t-xs);}
.t-sm{font-size:var(--t-sm);}
.t-md{font-size:var(--t-md);}
.t-lg{font-size:var(--t-lg);}
.gris{color:var(--sec);}
.oculto{display:none;}
.pulsable{cursor:pointer;}


/* ---- IMPRESIÓN ---------------------------------------------
   Estaba dentro de agenda.css porque al repartir el CSS se
   clasificó por su primer selector (.top .r) y ese es de la
   barra superior. Pero el bloque es GLOBAL: oculta overlays,
   botones y el fondo del body en todas las pantallas, también
   en Finanzas, que tiene su propio botón de imprimir. Un bloque
   global dentro de un módulo funciona por casualidad —porque
   agenda.css se carga siempre— y se rompe el día que alguien
   decida cargar las hojas solo cuando hacen falta. */
@media print {
    .top .r, #accesos-agenda, .cal-controls .cal-toolr, .dia-escribir-btn,
    .ct-acc, .dia-acc, .cerrar-sesion, #btn-abrir-ajustes, .overlay,
    #ct-buscador, #dia-marc-barra { display: none !important; }
    body { background: var(--ficha); }
    #pantalla-recibidor, #pantalla-contactos, #pantalla-diario,
    #pantalla-ct-recibidor, #pantalla-sitios, #pantalla-sitio-ficha { max-width: 100% !important; }
    .cal-panel, .dia-panel { display: none !important; }
    .cal-layout, .dia-layout { grid-template-columns: 1fr !important; }

    /* Finanzas (v7.6). Al imprimir sobran los botones, los filtros y el
       buscador: en el papel solo interesa el contenido. Sin esto saldría
       impreso el "+" y las pestañas de Todo/Ingresos/Gastos. */
    .fin-acciones, .fin-filtros, .fin-add-cat, .fin-icobtn, .fin-buscar { display: none !important; }
    #pantalla-fin-cuentas, #pantalla-fin-movimientos, #pantalla-fin-credito,
    #pantalla-fin-credito-ficha, #pantalla-fin-suscripciones,
    #pantalla-fin-presupuesto { max-width: 100% !important; padding: 0 !important; }
    /* Que una cuenta o un crédito no se corte a mitad entre dos páginas. */
    .fin-cuenta, .fin-mov, .fin-cred-item, .sus-item { break-inside: avoid; }
  }

/* ============================================================
   v15.4 · ETIQUETA DE AYUDA
   ------------------------------------------------------------
   Hasta ahora la unica ayuda eran los `title` del navegador, y estaban
   puestos por casualidad: treinta y cinco en toda la aplicacion, ninguno
   en Contactos, Diario, Ajustes ni el panel de agenda. Ademas el `title`
   tarda casi un segundo en salir y en el movil no sale nunca.
   Esto es lo mismo pero propio: sale rapido, con la tipografia y los
   colores de la casa, y funciona en cualquier elemento poniendole
   data-ayuda="lo que hace". No usa `title` a proposito, porque entonces
   saldrian las dos etiquetas, la del navegador y esta.
   ============================================================ */
[data-ayuda]{position:relative;}
[data-ayuda]::after{
  content:attr(data-ayuda);
  position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
  background:var(--navy); color:var(--ficha);
  font-size:var(--t-xs); font-weight:var(--p-normal); line-height:1.3;
  white-space:normal; max-width:min(280px, 90vw); text-align:center; padding:5px 9px; border-radius:var(--r-sm);
  opacity:0; visibility:hidden; transition:opacity .12s ease .25s, visibility 0s linear .37s;
  pointer-events:none; z-index:60;
}
[data-ayuda]:hover::after,
[data-ayuda]:focus-visible::after{opacity:1; visibility:visible; transition-delay:.25s, 0s;}
/* En pantalla tactil no hay hover: la etiqueta sale al mantener pulsado,
   que es el gesto que la gente ya prueba. */
@media (hover:none){
  [data-ayuda]:active::after{opacity:1; visibility:visible; transition-delay:0s;}
}
/* Al imprimir no pinta nada. */
@media print{ [data-ayuda]::after{display:none;} }