/* ================================================================
   YourPocket-App — estilos base
   ================================================================
   FICHAS DE DISENO (07/11/2026): TODAS las variables (colores, espacios, radios, sombras y
   tipografia) viven en el UNICO bloque :root de aqui abajo. El resto del archivo solo las
   usa con var(--nombre): ninguna seccion define las suyas. herramientas/probar_fichas_diseno.mjs
   lo vigila (un solo :root, y toda variable usada esta definida).
   ================================================================ */
:root {
    /* ---- Verde, del 50 (papel) al 900 (tinta): el color de la casa ---- */
    --verde-50:  #f1f7f3;
    --verde-100: #dcebe2;
    --verde-200: #bcd8c9;
    --verde-300: #93bda9;
    --verde-400: #5f9c81;
    --verde-500: #3a8065;
    --verde-600: #28674f;
    --verde-700: #1c5140;
    --verde-800: #143c30;
    --verde-900: #0d2820;

    /* ---- Terracota: el acento calido ---- */
    --terra-50:  #fbf1ea;
    --terra-100: #f6e2d5;
    --terra-300: #dfa588;
    --terra-500: #c0623c;
    --terra-600: #a94f2d;
    --terra-700: #8a3f24;

    /* ---- Neutros: papel calido, no gris de oficina ---- */
    --papel:    #faf8f4;
    --papel-2:  #f3efe8;
    --tinta:    #10161a;
    --tinta-2:  #55606a;
    --tinta-3:  #636c74;   /* AA sobre papel, blanco y papel-2 (antes #8a949c, solo 3:1) */
    --linea:    #e7e2da;

    /* ---- Nombres de uso (lo que escribe el resto del archivo) ---- */
    --texto: var(--tinta);
    --texto2: var(--tinta-2);
    --texto3: var(--tinta-3);
    --fondo: var(--papel);
    --superficie: #ffffff;

    --verde: var(--verde-700);
    --verde-suave: var(--verde-50);
    --verde-oscuro: var(--verde-800);
    --acento-tenue: rgba(23, 85, 60, .10);

    --rojo: #b3261e;
    --rojo-suave: #fdeceb;
    --ambar: #8a5a00;
    --ambar-fondo: #fdf6e3;
    --ambar-borde: #e3c06a;

    /* Terracota: SOLO la chispa de la accion principal (el boton +, "Anadir un ticket") y los avisos clave.
       Con texto o icono blanco encima se usa terra-600 (5,4:1). Ver herramientas/probar_fichas_diseno.mjs */
    --terracota: var(--terra-600);
    --terracota-oscuro: var(--terra-700);
    --terracota-fondo: var(--terra-50);

    /* ---- Elevacion, radios y rejilla de espacios ---- */
    --sombra: 0 1px 2px rgba(15, 20, 23, .04);
    --sombra-alta: 0 12px 32px -8px rgba(15, 20, 23, .18), 0 2px 8px rgba(15, 20, 23, .06);

    /* ---- Inicio en molinillo y pantallas de dentro (maqueta v2, 08/11/2026): por cada color, el degradado de arriba (-1) a abajo (-2),
       la sombra (-sh) y la tinta de las letras (-t). Contraste AA vigilado por probar_molinillo.mjs ---- */
    --mol-gastos-1: #f9cdb3;   --mol-gastos-2: #f1ab88;   --mol-gastos-sh: #e58a5f;   --mol-gastos-t: #4a2210;
    --mol-informe-1: #f9e8ae;  --mol-informe-2: #f1d072;  --mol-informe-sh: #d9ac2e;  --mol-informe-t: #4b3705;
    --mol-cliente-1: #cfe5ef;  --mol-cliente-2: #a7cddf;  --mol-cliente-sh: #5f9fbc;  --mol-cliente-t: #102f43;
    --mol-ajustes-1: #efe5d8;  --mol-ajustes-2: #dccdb9;  --mol-ajustes-sh: #a58f73;  --mol-ajustes-t: #3b2f22;
    --mol-ticket-1: #2f9b72;   --mol-ticket-2: #176346;   --mol-ticket-sh: #176346;   --mol-ticket-t: #ffffff;
    /* Botones verdes (primario): un poco mas oscuros que el centro del molinillo para que la letra blanca pequena llegue a AA */
    /* Color de la pantalla en la que estas (body[data-vista] lo cambia); por defecto, el de Mis gastos */
    --c1: var(--mol-gastos-1); --c2: var(--mol-gastos-2); --sh: var(--mol-gastos-sh); --ink: var(--mol-gastos-t);
    /* Fondo suave de cada pantalla: el mismo tono que su color, mucho mas claro. --fondo-seccion lo cambia body[data-vista] */
    --fondo-mg: #fdf1ea; --fondo-inf: #fdf8e4; --fondo-cli: #edf6fa; --fondo-aj: #f6f0e6; --fondo-ad: #e9f5ee;
    --fondo-seccion: var(--fondo);
    /* El quesito de Inicio: colores de las porciones (tonos del molinillo), «Otros» en beige, aro vacio y tamano del agujero
       (--quesito-agujero = radio del agujero como % del radio del quesito; 0 = tarta entera) */
    --quesito-1: #e58a5f; --quesito-2: #d9ac2e; --quesito-3: #5f9fbc; --quesito-4: #a58f73; --quesito-5: #5f9c81;
    --quesito-otros: #d3c9ba; --quesito-vacio: #e8e1d6; --quesito-agujero: 34%; --pc: #d3c9ba;
    --boton-1: #268262;        --boton-2: #176346;
    /* El logo vive en UN solo sitio: cualquier elemento con la clase .logo-ym lo enseña */
    --logo-url: url("../icons/logo-youpocket.svg");
    --radio: 16px;
    --radio-peq: 10px;
    --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
    --transicion: 160ms cubic-bezier(.2, .6, .2, 1);

    /* ---- Barra inferior del movil (<= 700 px) y franja del cupo, que se apila encima ---- */
    --barra-alto: 64px;
    --franja-alto: 32px;
    --franja-extra: 0px;                       /* body.con-franja la sube a --franja-alto */
    --reserva-baja: calc(var(--barra-alto) + env(safe-area-inset-bottom, 0px));

    /* ---- Tipografia ---- */
    /* Outfit (eleccion de Victor, 08/11/2026), guardada DENTRO de la app (fonts/, sin Google). Hasta que esten los archivos
       o si fallan, se usa la letra del sistema (San Francisco en el iPhone). Para cambiar de letra basta tocar estas dos lineas. */
    --fuente-ui: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fuente-marca: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Outfit: una sola fuente variable (pesos 100-900) en dos trozos; el navegador baja solo el que necesita. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--fuente-ui); background: var(--fondo-seccion); color: var(--texto); }
h1, h2, .logo-app { font-family: var(--fuente-marca); }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

.pantalla-login, .pantalla-app { display: none; }
.pantalla-login.activa, .pantalla-app.activa { display: flex; }

/* ---- Login ---- */
.pantalla-login { min-height: 100vh; align-items: center; justify-content: center; padding: 20px; }
.login-caja { width: 100%; max-width: 380px; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 36px 32px; text-align: center; }
.logo-app { width: 56px; height: 56px; border-radius: 16px; background: var(--verde-suave); color: var(--verde); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.logo-app .material-icons-round { font-size: 28px; }
.login-titulo { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.login-sub { color: var(--texto2); font-size: 14px; margin: 0 0 24px; }
.login-form { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--texto2); margin-bottom: 6px; }
.campo input, .campo select { width: 100%; padding: 11px 12px; border: 1px solid var(--linea); border-radius: 10px; font-size: 16px; background: var(--fondo); color: var(--texto); }
.campo input[type="date"] { min-height: 42px; }
.campo input:focus, .campo select:focus { outline: 2px solid var(--verde); outline-offset: -1px; }
.btn { border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 600; }
.btn-primario { background: var(--verde); color: #fff; margin-top: 4px; }
.btn-primario:disabled { opacity: .6; cursor: default; }
.login-nota { font-size: 12px; color: var(--texto3); margin: 20px 0 0; }
/* Enlaces de la pantalla de entrada y botones apilados (04/11/2026) */
.login-nota a { color: var(--verde); font-weight: 600; text-decoration: none; }
.login-nota a:hover { text-decoration: underline; }
.login-nota .punto { margin: 0 6px; color: var(--texto3); }
.login-caja .btn + .btn { margin-top: 10px; }

/* ---- App shell ---- */
.pantalla-app { min-height: 100vh; width: 100%; }
.sidebar { width: 240px; flex-shrink: 0; background: var(--superficie); border-right: 1px solid var(--linea); display: flex; flex-direction: column; padding: 20px 12px; }
.sh { font-family: var(--fuente-marca); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; padding: 0 8px 20px; }
.sn { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ni { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; background: none; border-radius: 10px; text-align: left; font-size: 14px; color: var(--texto2); }
.ni.active { background: var(--verde-suave); color: var(--verde); font-weight: 600; }
.ni:disabled { opacity: .55; cursor: default; }
.badge-prox { margin-left: auto; flex: none; white-space: nowrap; font-size: 10px; background: var(--fondo); color: var(--texto3); padding: 2px 6px; border-radius: 6px; }
.sesion-actual { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--texto2); }
.sesion-actual span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi { background: none; border: none; color: var(--texto3); display: flex; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 40px; }
.vista { width: 100%; max-width: 560px; margin: auto 0; }
.vacio-fase0 { text-align: center; max-width: 420px; color: var(--texto2); }
.vacio-fase0 .material-icons-round { font-size: 40px; color: var(--texto3); }
.vacio-fase0 h2 { margin: 12px 0 8px; color: var(--texto); }
.vacio-fase0 p { font-size: 14px; line-height: 1.6; margin: 0 0 16px; }

/* ---- Tarjetas y formularios ---- */
.tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 28px; }
.tarjeta h2 { margin: 0 0 6px; font-size: 20px; }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.tarjeta-cab h2 { margin: 0; }
.ayuda { color: var(--texto2); font-size: 13px; line-height: 1.55; margin: 0 0 20px; }
.ayuda.atencion { padding: 10px 12px; border: 1px solid #ecd48a; border-radius: var(--radio); background: var(--ambar-fondo); color: #5c3d00; }
.form-perfil { display: flex; flex-direction: column; gap: 14px; }
.fila2 { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.fila2 .campo { min-width: 0; }
.campo .opcional { font-weight: 400; color: var(--texto3); }
.campo input.invalido, .campo select.invalido { border-color: var(--rojo); background: #fdf3f1; }
.campo .error { display: block; color: var(--rojo); font-size: 12px; line-height: 1.4; margin-top: 4px; }
.campo .error:empty { display: none; }
.acciones { display: flex; gap: 10px; margin-top: 6px; }
.acciones .btn { flex: 1; }
#gs-aviso-pdf .acciones .btn { margin-top: 0; } /* Ventana del aviso del PDF (07/11/2026): el boton verde lleva 4 px de margen superior y salia mas bajo que Cancelar. */
.btn-sec { background: var(--fondo); color: var(--texto2); border: 1px solid var(--linea); }
.btn-peq { padding: 8px 14px; font-size: 13px; flex: none; }
.resumen { display: flex; flex-direction: column; gap: 14px; margin: 0 0 20px; }
.resumen dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto3); margin: 0 0 2px; }
.resumen dd { margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.sesion-movil { display: none; }

/* ---- Gastos (Fase 2) ---- */
.vista-ancha { max-width: 920px; }
.oculto-visual { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.gs-barra { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.gs-barra .btn { margin-top: 0; }
.gs-botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.gs-botones .btn { flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; }
.gs-nota { margin: 0; font-size: 12px; line-height: 1.5; color: var(--texto3); }

/* «Añadir ticket»: las tres vias (fotografia, escanear documento y archivo). Las dos primeras son del movil; en el ordenador solo sale «Añadir archivo». */
.gs-opciones { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; }
.gs-opcion { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.gs-opcion .gs-botones { margin: 0; }
.gs-opcion .gs-botones .btn { flex: 1 1 170px; }
.gs-opcion-btn { flex-direction: row; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; }
.gs-opcion-btn:hover { border-color: var(--verde); background: var(--verde-suave); }
.gs-op-cab { display: flex; align-items: center; gap: 12px; }
.gs-op-icono { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--verde-suave); color: var(--verde); font-size: 24px; }
.gs-op-texto { flex: 1; min-width: 0; }
.gs-op-texto strong { display: block; font-size: 15px; font-weight: 600; color: var(--texto); }
.gs-op-texto small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--texto2); }

/* Fotos guardadas en el movil (08/11/2026): tickets que esperan a que el lector vuelva a contestar. Solo se ve si hay alguna. */
.gs-cola { margin: 4px 0 18px; padding: 16px; border: 1px solid var(--ambar-borde); border-radius: var(--radio); background: var(--ambar-fondo); }
.gs-cola[hidden] { display: none; }
#gs-elegir .gs-cola-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 17px; line-height: 1.25; color: #5c3d00; }   /* con #gs-elegir para ganar a «#gs-elegir h2» (24 px) */
.gs-cola-titulo .material-icons-round { flex: none; font-size: 22px; color: var(--ambar); }
.gs-cola .ayuda { margin: 0 0 10px; }
.gs-cola .ayuda.atencion { background: var(--superficie); }
.gs-cola-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gs-cola-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.gs-cola-info { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-cola-info strong { font-size: 14px; font-weight: 600; color: var(--texto); }
.gs-cola-info small { font-size: 12px; line-height: 1.4; color: var(--texto3); }
.gs-cola-acciones { display: flex; gap: 8px; margin-left: auto; }
.gs-cola-fila .btn { margin-top: 0; min-height: 44px; }
@media (max-width: 520px) {
    /* En el movil: los datos arriba y los dos botones debajo, a lo ancho. */
    .gs-cola-acciones { flex: 1 1 100%; }
    .gs-cola-acciones .btn { flex: 1; }
}
.gs-error-guardar-fila .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; }
.gs-error-guardar-fila + .acciones { margin-top: 10px; }
.gs-op-flecha { flex: none; color: var(--texto3); }
/* El boton pequeno «Escanear documento»: un <details> cuyo <summary> parece un boton; al pulsarlo sale el explicativo. */
.gs-escanear { margin: 0 0 14px; }
.gs-escanear > summary { list-style: none; cursor: pointer; }
.gs-escanear > summary::-webkit-details-marker { display: none; }
.gs-escanear[open] > summary { background: var(--verde-suave); border-color: #bcd9c8; color: var(--verde); }
.gs-escanear-texto { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); font-size: 13px; line-height: 1.5; color: var(--texto2); }
.gs-escanear-texto strong { color: var(--texto); }
.gs-escanear-texto p { margin: 8px 0 0; }
.gs-escanear-texto ol { margin: 8px 0 0; padding-left: 20px; }
.gs-escanear-texto li + li { margin-top: 4px; }
.gs-solo-ordenador { display: none !important; }
.es-ordenador .gs-solo-movil { display: none !important; }
.es-ordenador .gs-solo-ordenador { display: block !important; }
.campo .nota { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--texto3); }
.btn-icono { display: inline-flex; align-items: center; gap: 6px; }
.btn-icono .material-icons-round { font-size: 18px; }
.gs-trabajando { text-align: center; }
.gs-trabajando .ayuda { margin-bottom: 16px; }
.gs-spinner { width: 36px; height: 36px; margin: 6px auto 16px; border: 3px solid var(--verde-suave); border-top-color: var(--verde); border-radius: 50%; animation: gs-gira .9s linear infinite; }
@keyframes gs-gira { to { transform: rotate(360deg); } }
.gs-rejilla { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.gs-rejilla.foto-grande { grid-template-columns: minmax(0, 1fr); }
.gs-datos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gs-foto { padding: 12px; position: sticky; top: 20px; }
.gs-rejilla.foto-grande .gs-foto { position: static; }
.gs-foto img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; background: var(--fondo); cursor: zoom-in; }
.gs-rejilla.foto-grande .gs-foto img { max-height: none; cursor: zoom-out; }
.gs-foto small { display: block; margin-top: 8px; font-size: 11px; color: var(--texto3); text-align: center; }
.gs-pdf { display: flex; align-items: center; gap: 8px; padding: 18px 8px; font-size: 13px; color: var(--texto2); overflow-wrap: anywhere; }
.gs-pdf .material-icons-round { flex: none; font-size: 32px; color: var(--rojo); }
.gs-pdf-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gs-pdf-texto a { color: var(--verde); font-weight: 600; }
.fila-gs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fila-gs .campo { min-width: 0; }

.gs-aviso { padding: 14px 16px; border: 1px solid #ecd48a; border-radius: var(--radio); background: var(--ambar-fondo); color: #5c3d00; font-size: 14px; line-height: 1.45; }
.gs-aviso.rojo { border-color: #f0b8b1; background: #fdecea; color: #7a2018; }
.gs-aviso.verde { border-color: #bcd9c8; background: var(--verde-suave); color: var(--verde); }
.gs-aviso strong { display: block; font-weight: 600; }
.gs-aviso ul { margin: 8px 0 0; padding-left: 18px; }
.gs-aviso li + li { margin-top: 3px; }

.gs-cliente { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); font-size: 14px; line-height: 1.45; }
.gs-cliente:empty { display: none; }
.gs-cliente > .material-icons-round { flex: none; margin-top: 1px; font-size: 24px; color: var(--texto3); }
.gs-cliente > div { min-width: 0; }
.gs-cliente strong { display: block; font-weight: 600; }
.gs-cliente small { display: block; font-size: 13px; color: var(--texto2); overflow-wrap: anywhere; }
.gs-cliente-a_tu_nombre { border-color: #bcd9c8; background: var(--verde-suave); }
.gs-cliente-a_tu_nombre > .material-icons-round, .gs-cliente-a_tu_nombre strong { color: var(--verde); }
.gs-cliente-casi, .gs-cliente-otro_nif { border-color: #ecd48a; background: var(--ambar-fondo); }
.gs-cliente-casi > .material-icons-round, .gs-cliente-otro_nif > .material-icons-round, .gs-cliente-casi strong, .gs-cliente-otro_nif strong { color: var(--ambar); }

.campo.dudoso input, .campo.dudoso select { border-color: var(--ambar-borde); background: var(--ambar-fondo); }
.tarjeta.dudosa, .gs-cliente.dudosa { box-shadow: 0 0 0 2px var(--ambar-borde), var(--sombra); }
.tarjeta.invalida { box-shadow: 0 0 0 2px var(--rojo), var(--sombra); }

.iva-fila { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "tipo base cuota quitar" "origen origen origen origen"; align-items: end; gap: 6px 10px; padding: 12px 0; border-top: 1px solid var(--linea); }
.iva-fila:first-child { padding-top: 0; border-top: none; }
.iva-c-tipo { grid-area: tipo; min-width: 0; }
.iva-c-base { grid-area: base; min-width: 0; }
.iva-c-cuota { grid-area: cuota; min-width: 0; }
.iva-quitar { grid-area: quitar; align-self: center; padding: 6px; }
.iva-origen { grid-area: origen; }
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--fondo); color: var(--texto2); }
.etiqueta.leido { background: var(--verde-suave); color: var(--verde); }
.etiqueta.calculado { background: var(--ambar-fondo); color: var(--ambar); }
.etiqueta.manual { background: var(--papel-2); color: var(--texto2); }
.etiqueta.incompleto { background: #fdecea; color: var(--rojo); }
#gs-iva-anadir { margin-top: 4px; }
.gs-iva-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.gs-iva-resumen:empty { display: none; }
.gs-iva-resumen .ok { color: var(--verde); font-weight: 600; }
.gs-iva-resumen .mal { color: var(--ambar); font-weight: 600; }

.gs-lineas summary { cursor: pointer; font-size: 15px; font-weight: 600; }
.gs-lineas ul { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.gs-lineas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); font-size: 13px; overflow-wrap: anywhere; }
.gs-lineas li small { grid-column: 1; color: var(--texto3); }
.gs-lineas li .imp { font-variant-numeric: tabular-nums; }

/* ---- Guardar y «Mis gastos» (Fase 2) ---- */
/* Con el guardado apagado (App.GUARDAR_GASTOS en core.js) la app se ve como antes; core.js pone body[data-guardar]. */
body:not([data-guardar="si"]) .solo-guardar, body[data-guardar="si"] .solo-prueba { display: none !important; }

.gs-aviso .acciones { flex-wrap: wrap; margin-top: 12px; }
.gs-aviso .acciones .btn { flex: 1 1 140px; margin-top: 0; }
.gs-aviso li strong { display: inline; }
/* Clientes (clientes.js): los archivados se ven apagados; archivar va aparte del formulario. */
.cl-archivado strong, .cl-archivado small { color: var(--texto3); }
.cl-archivar { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea); }
.cl-archivar .ayuda { margin-bottom: 12px; }
#gs-cargo-accion { margin-top: 8px; }
.gs-guardado { text-align: center; }
.gs-guardado-icono { font-size: 48px; color: var(--verde); }
.gs-guardado .ayuda { margin-bottom: 8px; }
.gs-guardado .gs-nota { margin-bottom: 10px; }
.gs-guardado .acciones .btn { margin-top: 0; }
.gs-copia { margin: 0 0 18px; font-size: 13px; line-height: 1.45; color: var(--texto2); }
.gs-copia.ok { color: var(--verde); }
.gs-copia.mal { color: #7a2018; }
.gs-guardado #gs-guardado-copia-acciones { margin: -6px 0 18px; justify-content: center; }
.gs-guardado #gs-guardado-copia-acciones .btn { flex: 0 1 auto; }
#mg-copias { margin: 0 0 12px; }
.gs-ocupado { pointer-events: none; opacity: .75; }

.ayuda.error { color: var(--rojo); }
.mg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mg-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; padding: 12px 4px; border: none; border-top: 1px solid var(--linea); background: none; text-align: left; color: var(--texto); font-size: 14px; line-height: 1.4; }
.mg-lista li:first-child .mg-fila { border-top: none; }
.mg-fila:hover { background: var(--fondo); }
.mg-fila strong { font-weight: 600; overflow-wrap: anywhere; }
.mg-fila .imp { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-fila small { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--texto2); }
.mg-detalle-cab { margin-bottom: 14px; }
#mg-detalle > .btn { margin-bottom: 14px; }
#mg-archivo-estado { min-height: 1em; }
#mg-archivo-estado.ok { color: var(--verde); }
#mg-archivo-estado.mal { color: var(--rojo); }
.btn-peligro { background: var(--rojo); color: #fff; }
.btn-peligro:disabled { opacity: .6; cursor: default; }
.mg-acciones { margin: 0 0 14px; }
.mg-acciones-botones { display: flex; gap: 10px; }
.mg-acciones-botones .btn { flex: 1; justify-content: center; margin-top: 0; padding: 12px 14px; font-size: 15px; }
.mg-acciones-botones .btn .material-icons-round { font-size: 20px; }
.mg-btn-eliminar { color: var(--rojo); border-color: #f0b8b1; }
.mg-acciones .ayuda { margin: 8px 0 0; }
.mg-acciones .gs-aviso { margin-top: 12px; }
#mg-eliminar-confirmar .campo { margin: 12px 0 0; }
#mg-eliminar-msg { display: block; margin-top: 10px; min-height: 1em; }

/* ---- Mis gastos: resumen del mes, fechas y filtros, suma de lo que se ve ---- */
.btn-sec.activo { background: var(--verde-suave); color: var(--verde); border-color: var(--verde); }

/* «¿IVA deducible?»: dos botones grandes, Sí y No, sin ninguno marcado de antemano. */
.gs-sino { display: flex; gap: 10px; }
.gs-sino .btn { flex: 1; padding: 12px 14px; font-size: 15px; }
.gs-sino .btn[aria-checked="true"] { background: var(--verde-suave); color: var(--verde); border-color: var(--verde); }
.gs-sino .btn.no[aria-checked="true"] { background: #eceeed; color: var(--texto); border-color: var(--texto2); }
.gs-sino .btn:disabled { cursor: default; opacity: .75; }
.gs-sino.invalido .btn { border-color: var(--rojo); background: #fdf3f1; }

/* «Añadir tipo de gasto»: el formulario pequeño que se abre bajo el desplegable. */
#gs-tipo-nuevo { margin-top: 8px; }
.gs-tipo-form { margin-top: 10px; padding: 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); }
.gs-tipo-form label { display: block; font-size: 12px; font-weight: 600; color: var(--texto2); margin-bottom: 6px; }
.gs-tipo-form input { width: 100%; padding: 11px 12px; border: 1px solid var(--linea); border-radius: 10px; font-size: 16px; background: var(--fondo); color: var(--texto); }
.gs-tipo-form input.invalido { border-color: var(--rojo); background: #fdf3f1; }
.gs-tipo-form .error { display: block; color: var(--rojo); font-size: 12px; line-height: 1.4; margin-top: 4px; }
.gs-tipo-form .error:empty { display: none; }
.mg-chevron { flex: none; color: var(--texto3); transition: transform .15s; }
details[open] > summary .mg-chevron { transform: rotate(180deg); }
/* «.tarjeta.mg-mes» (y no solo «.mg-mes») para ganarle al relleno de «.tarjeta» en el movil */
.tarjeta.mg-mes { padding: 0; margin-bottom: 16px; }
.mg-mes-cab, .mg-mas > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.mg-mes-cab::-webkit-details-marker, .mg-mas > summary::-webkit-details-marker { display: none; }
.mg-mes-cab { padding: 18px 28px; }
.mg-mes-nombre { flex: 1; min-width: 0; font-family: var(--fuente-marca); font-size: 20px; font-weight: 600; }
.mg-mes-total { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-mes-cuerpo { padding: 0 28px 24px; }
.mg-mes-cuerpo .ayuda { margin: 0; }
.mg-mes-sub { margin: 0 0 14px; font-size: 13px; color: var(--texto2); }
.mg-aviso { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--ambar); }
.mg-cargos, .mg-tipos { list-style: none; margin: 0; padding: 0; }
.mg-cargos { display: flex; flex-direction: column; gap: 14px; }
/* En una pantalla ancha las cifras no se alejan de su nombre */
.mg-mes-sub, .mg-cargos { max-width: 520px; }
.mg-tipos { display: flex; flex-direction: column; gap: 3px; margin: 5px 0 0 14px; }
.mg-fila-imp { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 14px; font-size: 14px; }
.mg-cargo > .mg-fila-imp { font-weight: 600; }
.mg-tipos .mg-fila-imp { font-size: 13px; color: var(--texto2); }
.mg-fila-imp .mg-n { font-size: 12px; font-weight: 400; color: var(--texto3); }
.mg-fila-imp .imp { min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; }

.mg-filtros { margin: 0 0 16px; }
.mg-destino { margin: 0 0 12px; }
.mg-destino select { max-width: 360px; }
.mg-tres { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--verde-suave); }
.mg-tres-titulo { display: block; margin: 0 0 10px; font-weight: 600; font-size: 14px; }
.mg-tres-fila + .mg-tres-fila { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.mg-tres-fila .mg-fila-imp { font-weight: 600; }
.mg-tres-fila small { display: block; margin-top: 2px; font-size: 12px; color: var(--texto2); }
.mg-tres .ayuda { margin: 10px 0 0; font-size: 12px; }
.mg-tres .mg-aviso { margin: 10px 0 0; }
.mg-fechas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mg-fechas .campo { min-width: 0; }
#mg-fechas-err { margin: 8px 0 0; font-size: 12px; }
.mg-rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.mg-mas { margin: 12px 0 0; }
.mg-mas > summary { padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--verde); }
.mg-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 10px 0 12px; }
.mg-campos .campo { min-width: 0; }
.mg-estado { margin: 0 0 12px; }
.mg-estado:empty { display: none; }
.mg-suma { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; padding: 12px 14px; border-radius: 10px; background: var(--verde-suave); font-size: 13px; line-height: 1.5; }
.mg-suma-total strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.mg-suma .mg-aviso { margin: 4px 0 0; }

/* ---- Toasts ---- */
.tc { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--texto); color: #fff; padding: 12px 16px; border-radius: 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; box-shadow: var(--sombra); }
.toast.tok { background: var(--verde); }
.toast.ter { background: var(--rojo); }

/* Con menos de ~1100 px no caben la foto y el formulario lado a lado: la foto pasa arriba, pequena. */
@media (max-width: 1100px) {
    .gs-rejilla { grid-template-columns: minmax(0, 1fr); }
    .gs-foto { position: static; }
    .gs-foto img { max-height: 150px; object-fit: cover; object-position: top; }
    .gs-rejilla.foto-grande .gs-foto img { max-height: none; object-fit: contain; }
}
@media (max-width: 700px) {
    .pantalla-app { flex-direction: column; }
    /* En el movil ya no hay barra lateral ni tira de arriba: los botones van abajo (BARRA INFERIOR, al final del archivo). */
    .sidebar { display: none; }
    .main { padding: 16px; }
    .tarjeta { padding: 20px; }
    .mg-mes-cab { padding: 16px 20px; }
    .mg-mes-cuerpo { padding: 0 20px 20px; }
    .fila2 { grid-template-columns: 96px 1fr; }
    /* iOS hace zoom al tocar un campo con letra menor de 16 px */
    .campo input, .campo select { font-size: 16px; }
    .fila-gs { grid-template-columns: minmax(0, 1fr); }
    .iva-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "tipo quitar" "base cuota" "origen origen"; }
    .iva-quitar { justify-self: end; }
    .btn-texto { background: none; border: none; color: var(--verde); font-weight: 600; font-size: 13px; padding: 6px 0; flex: none; }
}
@media (max-width: 360px) {
    .fila2 { grid-template-columns: 1fr; }
}

/* ---- Franja del cupo (capa 2, 04/11/2026) ----
   Va pegada abajo. Una línea fina que se llena según el consumo y, debajo, el plan
   y los bonos. Los colores avisan: verde, ámbar desde el 80 %, rojo desde el 90 %
   y rojo lleno al 100 %. Sin párrafos: en una franja, el texto largo estorba. */
.franja {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--superficie); border-top: 1px solid var(--linea);
    padding: 0 0 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.franja-linea { height: 4px; background: var(--linea); overflow: hidden; }
.franja-relleno { height: 100%; width: 0%; background: var(--verde); transition: width .3s, background-color .3s; }
.franja-relleno.ambar { background: var(--ambar); }
.franja-relleno.rojo { background: var(--rojo); }
.franja-texto {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 7px 14px 0; font-size: 12px; color: var(--texto2);
}
.franja-texto span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.franja-texto #fr-bonos { color: var(--texto3); flex: none; }
/* Que la franja no tape el final de la página. */
body.con-franja main { padding-bottom: 44px; }

/* ================================================================
   PRIMERA PANTALLA CON IMAGEN NUEVA — leer un ticket (04/11/2026)
   ================================================================
   Es la pantalla que hace algo que sorprende (foto -> datos), así que es la
   primera que se cuida. Cambios:
     · Más aire y un titular más grande.
     · La fotografía pasa a ser la protagonista; el archivo, la segunda vía.
     · Al pulsar, el fondo CAMBIA DE COLOR en vez de solo recuadrarse (idea de
       Víctor): verde no, terracota, que es un color cálido y se nota.
     · Entra el terracota a la paleta, junto al verde y al ámbar.
   ================================================================ */

#gs-elegir { padding: 22px 20px; }
#gs-elegir h2 { font-size: 24px; letter-spacing: -.02em; margin-bottom: 6px; }
#gs-elegir .ayuda { max-width: 54ch; }

.gs-opciones { gap: 14px; }

/* La fotografía, protagonista. */
#gs-elegir .gs-solo-movil.gs-opcion {
    background: linear-gradient(160deg, var(--verde-suave) 0%, #f4faf6 75%);
    border-color: #cfe4d8;
    padding: 20px 18px;
}
#gs-elegir .gs-op-icono {
    width: 52px; height: 52px; font-size: 28px;
    box-shadow: 0 2px 8px rgba(31, 111, 74, .12);
}
#gs-elegir .gs-op-texto strong { font-size: 17px; }
#gs-elegir .gs-op-texto small { font-size: 13.5px; }

/* Al pulsar, cambia de color: se ve que se ha tocado sin dibujar un recuadro. */
#gs-elegir .gs-opcion:active,
#gs-elegir .gs-opcion-btn:active {
    background: var(--verde-100);
    border-color: var(--verde);
}
#gs-elegir .gs-opcion-btn:active .gs-op-icono,
#gs-elegir .gs-opcion:active .gs-op-icono {
    background: var(--verde); color: #fff;
}

/* Los botones cambian de color al pulsar (ver .btn:active mas abajo). */

/* La ayuda de abajo (escanear documento) más discreta, que no compita. */
#gs-elegir .gs-escanear summary { color: var(--texto2); }

/* ================================================================
   AJUSTES — la ventana del engranaje (04/11/2026)
   ================================================================
   Víctor: «debemos tener un botón de ajustes abajo a la izquierda para
   modificar sus datos, su cuenta, estado de la cuenta, cambiar de plan».
   Es una ventana que sube desde abajo en el móvil y sale centrada en el
   ordenador. Sin librerías: un velo y una tarjeta.
   ================================================================ */
.velo {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(16, 26, 21, .42);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
}
.ajustes {
    background: var(--superficie);
    width: 100%; max-width: 520px;
    max-height: 88vh; overflow-y: auto;
    border-radius: 22px 22px 0 0;
    padding: 20px 20px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(16, 26, 21, .28);
    animation: subir .18s ease-out;
}
@keyframes subir { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }

.aj-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.aj-cab h2 { font-size: 21px; margin: 0; letter-spacing: -.02em; }
.aj-cerrar {
    border: none; background: var(--fondo); color: var(--texto2);
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.aj-cerrar:active { background: var(--papel-2); color: var(--texto); }

.aj-bloque { border-top: 1px solid var(--linea); padding: 16px 0; }
.aj-bloque:first-of-type { border-top: none; }
.aj-bloque h3 {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--texto3); margin: 0 0 10px;
}

.aj-dato { display: flex; justify-content: space-between; gap: 14px; margin: 0 0 8px; font-size: 14px; }
.aj-dato span { color: var(--texto2); }
.aj-dato strong { font-weight: 600; text-align: right; word-break: break-word; }

.aj-estado { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.aj-estado.malo { color: var(--rojo); }
.aj-estado.bien { color: var(--verde); }

.aj-barra { height: 8px; border-radius: 99px; background: var(--linea); overflow: hidden; margin-bottom: 14px; }
.aj-relleno { height: 100%; width: 0; background: var(--verde); transition: width .3s, background-color .3s; }
.aj-relleno.ambar { background: var(--ambar); }
.aj-relleno.rojo { background: var(--rojo); }

.aj-planes { display: grid; gap: 10px; margin-bottom: 10px; }
.aj-plan-opcion {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px;
    background: var(--fondo);
}
.aj-plan-opcion.actual { border-color: var(--verde); background: var(--verde-suave); }
.aj-plan-opcion div { min-width: 0; }
.aj-plan-opcion b { display: block; font-size: 15px; }
.aj-plan-opcion small { display: block; font-size: 12.5px; color: var(--texto2); margin-top: 2px; }
.aj-plan-opcion .precio { font-family: var(--fuente-marca); font-weight: 700; font-size: 16px; flex: none; }

/* En el ordenador sale centrada y redondeada por los cuatro lados. */
@media (min-width: 620px) {
    .velo { align-items: center; padding: 20px; }
    .ajustes { border-radius: 22px; max-height: 86vh; }
}

/* Logo del cliente en los informes (04/11/2026) */
.aj-logo-fila { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
#aj-logo-vista {
    max-width: 150px; max-height: 64px; object-fit: contain;
    border: 1px solid var(--linea); border-radius: 10px; background: #fff; padding: 6px;
}

/* ================================================================
   PERFIL DE USO Y TIPOS A CONTROLAR (04/11/2026)
   ================================================================
   Dos bloques al principio del perfil: para qué usa la app (autónomo, empresa o
   casa) y qué tipos de gasto quiere ver. Vienen casi todos marcados: quitar es
   más fácil que elegir de cero.
   ================================================================ */
.pf-bloque { margin: 0 0 26px; }
.pf-pregunta {
    font-family: var(--fuente-marca); font-size: 17px; font-weight: 600;
    letter-spacing: -.01em; margin: 0 0 6px;
}
.pf-bloque .ayuda { margin: 0 0 12px; }

.pf-usos { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 560px) { .pf-usos { grid-template-columns: repeat(3, 1fr); } }

.pf-uso {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 14px 14px 13px; border: 1.5px solid var(--linea); border-radius: 16px;
    background: var(--fondo); font-family: inherit; color: var(--texto);
    transition: border-color .15s, background .15s, transform .08s;
}
.pf-uso strong { font-size: 15px; font-weight: 600; }
.pf-uso small { font-size: 12px; line-height: 1.4; color: var(--texto2); }
.pf-uso:active { transform: scale(.98); background: var(--verde-100); border-color: var(--verde); }
/* Elegido: cambia de color, no se recuadra (idea de Víctor). */
.pf-uso.elegido { background: var(--verde-suave); border-color: var(--verde); }
.pf-uso.elegido strong { color: var(--verde); }

.pf-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-tipo {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 8px 13px; border: 1.5px solid var(--verde); border-radius: 999px;
    background: var(--verde-suave); font-size: 13.5px; font-weight: 600; color: var(--verde);
    transition: background .15s, border-color .15s, color .15s;
}
.pf-tipo input { display: none; }
/* Al quitar uno, se apaga en vez de desaparecer: se ve lo que había. */
.pf-tipo:has(input:not(:checked)) {
    background: var(--superficie); border-color: var(--linea); color: var(--texto3); font-weight: 500;
    text-decoration: line-through;
}
.pf-tipos-mas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.pf-tipos-mas small { color: var(--texto3); font-size: 12px; }
.pf-tipo-add {
    border: 1px dashed var(--linea); background: none; color: var(--texto2);
    padding: 6px 11px; border-radius: 999px; font-family: inherit; font-size: 12.5px;
}
.pf-tipo-add:active { border-color: var(--verde); color: var(--verde); background: var(--verde-100); }

/* Kilometraje (05/11/2026): el total, bien a la vista mientras se teclean los kilómetros */
.km-total {
    font-family: var(--fuente-marca); font-size: 19px; font-weight: 700;
    color: var(--verde); background: var(--verde-suave);
    border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px;
}

/* Casilla de «solo los que quedaron con dudas» en Mis gastos (05/11/2026) */
.mg-casilla {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 12px;
    font-size: 13.5px; color: var(--texto2); background: var(--fondo);
}
.mg-casilla input { width: 18px; height: 18px; accent-color: var(--verde); flex: none; }
.mg-casilla:has(input:checked) { border-color: var(--ambar-borde); background: var(--ambar-fondo); color: var(--texto); }

/* Aviso de tickets con dudas en Mis gastos (05/11/2026) */
.mg-aviso-dudas {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--ambar-fondo); border: 1px solid var(--ambar-borde);
    border-radius: 12px; padding: 10px 14px; margin: 12px 0;
    font-size: 13.5px; color: var(--texto);
}
.mg-aviso-dudas .material-icons-round { color: var(--ambar); font-size: 20px; flex: none; }
.mg-aviso-dudas span:nth-child(2) { flex: 1; min-width: 140px; }

/* ================================================================
   LA PORTADA (05/11/2026): el resumen del mes al entrar
   ================================================================
   La cifra manda: es lo primero que se mira. Las barras dicen en qué se va, sin
   necesidad de leer un número.
   ================================================================ */
.inicio-mes { padding-bottom: 18px; }
.inicio-etiqueta {
    font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--texto3); margin: 0 0 2px;
}
.inicio-cifra {
    font-family: var(--fuente-marca); font-size: 40px; font-weight: 700;
    letter-spacing: -.03em; line-height: 1.05; margin: 0; color: var(--texto);
}
.inicio-pie { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: 13.5px; color: var(--texto2); }
.inicio-pie .material-icons-round { font-size: 17px; }
.inicio-pie .material-icons-round.sube { color: var(--rojo); }
.inicio-pie .material-icons-round.baja { color: var(--verde); }

.inicio-categorias { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.inicio-cat { display: grid; grid-template-columns: 1fr 84px auto; align-items: center; gap: 10px; font-size: 13.5px; }
.inicio-cat-nombre { color: var(--texto2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inicio-cat-barra { height: 7px; border-radius: 99px; background: var(--superficie); overflow: hidden; display: block; }
.inicio-cat-relleno { display: block; height: 100%; border-radius: 99px; background: var(--verde-500); }
/* Lo que se paga solo (luz, agua, gas) va en gris: no se puede recortar hoy. */
.inicio-cat-relleno.fijo { background: var(--verde-200); }
.inicio-cat-importe { font-weight: 600; font-size: 13.5px; white-space: nowrap; }

.btn-ancho { display: inline-flex; align-items: center; gap: 8px; }

/* ================================================================
   ANÁLISIS DE UN CLIENTE (06/11/2026)
   ================================================================
   Tres cifras arriba, las barras del año y en qué se va. Lo que se mira de un cliente.
   ================================================================ */
.cl-analisis {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 46px; border: 1.5px solid var(--linea); border-radius: 12px;
    background: var(--superficie); color: var(--texto2);
    transition: border-color .15s, color .15s, background .15s;
}
.cl-analisis .material-icons-round { font-size: 21px; }
.cl-analisis:active { border-color: var(--verde); color: var(--verde); background: var(--verde-100); }
/* La fila del cliente y su botón de análisis, uno al lado del otro. */
#cl-lista li { display: flex; gap: 8px; align-items: stretch; }
#cl-lista li .mg-fila { flex: 1; min-width: 0; }

.vc-nombre {
    font-family: var(--fuente-marca); font-size: 26px; font-weight: 700;
    letter-spacing: -.02em; margin: 14px 0 2px;
}
.vc-tres { display: grid; gap: 10px; margin: 16px 0; }
@media (min-width: 560px) { .vc-tres { grid-template-columns: repeat(3, 1fr); } }
.vc-tres-caja {
    background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 16px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.vc-et { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texto3); }
.vc-tres-caja strong { font-family: var(--fuente-marca); font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.vc-tres-caja small { font-size: 12.5px; color: var(--texto2); }

/* Las barras del año: alto relativo al mes que más se gastó. */
.vc-barras { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 12px; }
.vc-barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.vc-barra-alto { display: block; width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px; background: var(--verde-500); min-height: 0; }
.vc-barra.vacia .vc-barra-alto { background: var(--superficie); border: 1px solid var(--linea); }
.vc-barra small { font-size: 10.5px; color: var(--texto3); text-transform: capitalize; }
.vc-barra-importe { font-size: 9.5px; color: var(--texto2); white-space: nowrap; overflow: hidden; max-width: 100%; }

.vc-tipos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.vc-tipo { display: grid; grid-template-columns: 1fr 70px auto; align-items: center; gap: 10px; font-size: 13.5px; }
.vc-tipo-nombre { color: var(--texto2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-tipo-barra { height: 7px; border-radius: 99px; background: var(--superficie); overflow: hidden; display: block; }
.vc-tipo-relleno { display: block; height: 100%; border-radius: 99px; background: var(--verde); }
.vc-tipo-importe { font-weight: 600; white-space: nowrap; }

/* ================================================================
   INFORME DEL HOGAR (06/11/2026)
   ================================================================ */
.hg-cat { display: grid; grid-template-columns: 1fr 80px auto; align-items: center; gap: 10px; font-size: 13.5px; }
.hg-cat-nombre { color: var(--texto2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-cat-barra { height: 7px; border-radius: 99px; background: var(--superficie); overflow: hidden; display: block; }
.hg-cat-relleno { display: block; height: 100%; border-radius: 99px; background: var(--verde-500); }
/* Lo que se paga solo va en gris: no se puede recortar hoy. */
.hg-cat-relleno.fijo { background: var(--verde-200); }
.hg-cat-importe { font-weight: 600; white-space: nowrap; }
#inicio-hogar { margin-top: 10px; width: 100%; justify-content: center; }

/* ================================================================
   CAPA VISUAL — 06/11/2026
   ================================================================
   Objetivo: que parezca una aplicación de verdad, no una herramienta interna.
   Seria y elegante quiere decir: menos ruido, mejor jerarquía y un solo acento.

   Lo que cambia, en una frase cada cosa:

   · PAPEL, no blanco clínico. El fondo pasa a un hueso cálido y las tarjetas a blanco
     puro: así la tarjeta destaca por contraste, no por sombra.
   · BORDE en vez de SOMBRA. Una línea fina de 1 px separa mejor que una sombra difusa, y
     se ve nítido en cualquier pantalla. La sombra queda solo para lo que flota de verdad
     (ventanas y avisos).
   · JERARQUÍA de verdad: los títulos pesan, las etiquetas se apagan y los importes van en
     números de ancho fijo, para que las columnas de dinero se lean en vertical.
   · UN SOLO ACENTO. El verde deja de usarse para todo: manda en las acciones y en lo
     elegido, y nada más.
   · TODO respira: 8 px de rejilla, alturas de 44-46 px en lo que se pulsa.

   Si algún día no gusta, se borra esta sección entera y vuelve lo de antes: no cambia
   ninguna estructura, solo los valores.
   ================================================================ */


/* ---- Tipografía: que se note la jerarquía ---- */

body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .logo-app, .login-titulo, .vc-nombre {
    font-family: var(--fuente-marca);
    letter-spacing: -.022em;
    color: var(--texto);
}

h1, .vc-nombre { font-size: 27px; font-weight: 700; line-height: 1.2; }
h2 { font-size: 17.5px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

/* Las etiquetas pequeñas se apagan: así el ojo va al dato, no al nombre del dato. */
.resumen dt, .vc-et, .inicio-etiqueta, .campo label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto3);
}

/* Los importes, en números de ancho fijo: las columnas de dinero se leen en vertical. */
.inicio-cifra, .vc-tres-caja strong, .mg-suma, .mg-tres-fila, .inicio-cat-importe,
.vc-tipo-importe, .hg-cat-importe, .cl-analisis, .imp {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.ayuda { color: var(--texto2); font-size: 13.5px; line-height: 1.6; }

/* ---- Superficies: borde en vez de sombra ---- */

.tarjeta,
.gs-opcion,
.vc-tres-caja,
.login-caja {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.tarjeta { padding: 26px 26px 24px; }
.tarjeta h2 { margin: 0 0 4px; }
.tarjeta-cab { margin-bottom: var(--e4); }

/* Lo que flota de verdad sí lleva sombra de verdad. */
.velo, .ajustes, .toast { box-shadow: var(--sombra-alta); }

/* ---- Botones: 44 px de alto, un solo acento, y se notan al pulsar ---- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radio-peq);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: background var(--transicion), border-color var(--transicion),
                transform var(--transicion), box-shadow var(--transicion);
}

.btn:active { transform: scale(.98); }

/* Pulsado = un tono mas oscuro: se nota que el dedo ha llegado. */
.btn-primario:active { background: var(--verde-900); }
.btn-sec:active { background: var(--papel-2); border-color: var(--verde-300); }
.btn-peligro:active { background: #8f1d17; }

.btn-primario {
    background: var(--verde);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(15, 20, 23, .12);
}
.btn-primario:hover { background: var(--verde-oscuro); }

/* La accion principal de la app (anadir un ticket): terracota, la unica chispa de calor. */
.btn-accion {
    background: var(--terracota);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(15, 20, 23, .14);
}
.btn-accion:hover { background: var(--terracota-oscuro); }
.btn-accion:active { background: var(--terracota-oscuro); }
.btn-primario:disabled { background: var(--texto3); opacity: 1; box-shadow: none; }

.btn-sec {
    background: var(--superficie);
    color: var(--texto);
    border-color: var(--linea);
}
.btn-sec:hover { background: var(--fondo); border-color: #d8d4cb; }
.btn-sec:disabled { color: var(--texto3); }

.btn-peq { min-height: 36px; padding: 0 13px; font-size: 13px; }

/* Foco visible de verdad (teclado y accesibilidad) */
.btn:focus-visible,
.campo input:focus-visible,
.campo select:focus-visible,
.ni:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

/* ---- Campos: blancos, altos y con anillo al enfocar ---- */

.campo input,
.campo select {
    min-height: 46px;
    padding: 11px 13px;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio-peq);
    font-size: 16px;   /* 16 px o mas: con menos, el iPhone hace zoom al tocar el campo */
    color: var(--texto);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input::placeholder { color: var(--texto3); }
.campo input:focus,
.campo select:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px var(--acento-tenue);
}
.campo input.invalido,
.campo select.invalido { border-color: var(--rojo); background: var(--rojo-suave); box-shadow: none; }
.campo .error { color: var(--rojo); font-size: 12.5px; }

/* ---- Entrar: la primera impresión ---- */

.pantalla-login {
    background:
        radial-gradient(1100px 620px at 50% -8%, #eef3ef 0%, rgba(238, 243, 239, 0) 62%),
        var(--fondo);
}

.login-caja {
    max-width: 400px;
    padding: 40px 34px 32px;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 20, 23, .04), 0 24px 48px -24px rgba(15, 20, 23, .18);
}

.logo-app {
    width: 52px; height: 52px;
    border-radius: 15px;
    background: var(--verde);
    color: #fff;
    margin: 0 auto 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px -8px rgba(23, 85, 60, .6);
}
.logo-app .material-icons-round { font-size: 26px; }

.login-titulo { font-size: 24px; margin: 0 0 6px; }
.login-sub { font-size: 14px; color: var(--texto2); margin: 0 0 26px; }
.login-form { gap: var(--e4); }
.login-nota { font-size: 12.5px; color: var(--texto3); }
.login-nota a { color: var(--verde); border-bottom: 1px solid transparent; }
.login-nota a:hover { border-bottom-color: currentColor; text-decoration: none; }

/* ---- Navegación ---- */

.sidebar { background: var(--superficie); border-right: 1px solid var(--linea); }
.sh { font-size: 16.5px; letter-spacing: -.03em; }
.ni {
    min-height: 40px;
    padding: 9px 12px;
    border-radius: var(--radio-peq);
    font-size: 13.5px;
    color: var(--texto2);
    transition: background var(--transicion), color var(--transicion);
}
.ni:hover { background: var(--fondo); color: var(--texto); }
.ni.active {
    background: var(--verde-suave);
    color: var(--verde);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--verde);
}
.ni .material-icons-round { font-size: 20px; opacity: .85; }
.ni.active .material-icons-round { opacity: 1; }

.sesion-actual { color: var(--texto3); font-size: 12.5px; }

/* ---- Detalles ---- */

::selection { background: var(--acento-tenue); color: var(--texto); }

/* Un enlace dentro de un texto no lleva subrayado feo: lleva color y un borde que aparece. */
a { color: var(--verde); }

/* La franja del cupo, fina y sin ruido */
.franja { background: var(--superficie); border-top: 1px solid var(--linea); }
.franja-linea { height: 3px; background: #eeebe5; }

/* Los avisos: color en el borde, fondo muy suave, nunca un bloque chillón */
.gs-aviso, .mg-aviso-dudas {
    border-radius: 12px;
    border: 1px solid var(--linea);
    background: var(--fondo);
}
.mg-aviso-dudas {
    background: var(--ambar-fondo);
    border-color: var(--ambar-borde);
}

/* Los bordes de las listas, más finos que antes */
.mg-fila { border-bottom: 1px solid var(--linea); }

@media (max-width: 700px) {
    .main { padding: 18px 16px 28px; }
    .tarjeta { padding: 20px; }
}

/* ================================================================
   MARCA — 06/11/2026
   ================================================================
   La identidad: el bolsillo con el ticket.

   (Puesto al día el 07/11/2026: la paleta y la letra de abajo son las del rediseño.)

   COLOR. Verde, crema y una chispa:
     · VERDE bosque, en toda su gama (50 a 900). Es el color de la casa: manda en las
       acciones, en lo elegido y en el botón activo de la barra de abajo.
     · CREMA de fondo con tarjetas blancas.
     · TERRACOTA solo para la acción principal (el ＋ de Añadir) y los avisos clave.
       Como texto se usa la terra-600, que cumple el contraste AA.
     · ÁMBAR = «revisa»; ROJO = borrar o error. No hay azul en la paleta.

   TIPOGRAFÍA. La del sistema, sin descargar nada:
     · SERIF DEL SISTEMA (ui-serif) para la marca, los títulos y las cifras grandes.
     · SANS DEL SISTEMA (-apple-system) para todo lo demás, con cifras tabulares en
       los importes.
   ================================================================ */


body {
    font-family: var(--fuente-ui);
    color: var(--texto);
    background: var(--fondo);
}

/* La marca y los títulos grandes, en la serif. */
.logo-app, .login-titulo, h1, .vc-nombre, .inicio-cifra, .sh {
    font-family: var(--fuente-marca);
    font-weight: 600;
    letter-spacing: -.02em;
}

/* Los títulos de tarjeta NO: en una tarjeta manda la claridad, así que van en la de leer. */
h2, h3, .tarjeta h2, .tarjeta-cab h2, .mg-mes-cab h2 {
    font-family: var(--fuente-ui);
    font-weight: 650;
    letter-spacing: -.015em;
}

/* Los números grandes de dinero: serif, que aquí sí luce. */
.inicio-cifra { font-weight: 600; letter-spacing: -.03em; }

/* Las barras de la portada, en verde: la terracota se guarda para la accion principal. */

/* El logo dentro de la caja de entrada (ahora es una imagen, no un icono). */
.logo-app { background: none; box-shadow: none; padding: 0; }
.logo-app img { display: block; width: 100%; height: 100%; border-radius: 15px; }

/* El logo pequeño de la cabecera del menú. */
.sh-logo { border-radius: 7px; display: block; }
.sh { align-items: center; gap: 9px; font-size: 18px; }

/* La marca de agua del login: un degradado de verde muy suave, no un gris. */
.pantalla-login {
    background:
        radial-gradient(1200px 700px at 50% -10%, var(--verde-100) 0%, rgba(220, 235, 226, 0) 60%),
        var(--papel);
}

.login-titulo { font-size: 30px; letter-spacing: -.035em; }
.login-sub { font-family: var(--fuente-ui); font-size: 14px; color: var(--texto2); }

/* Los enlaces, en el verde de la casa, sin subrayado duro. */
a { color: var(--verde-700); }

/* La franja del cupo: el relleno en verde; el aviso, en terracota o ámbar. */
.franja-relleno { background: var(--verde-500); }
.franja-relleno.ambar { background: var(--ambar-borde); }
.franja-relleno.rojo { background: var(--rojo); }

/* Los avisos de "revisa": ambar (la terracota se guarda para la accion principal). */
.gs-aviso { background: var(--ambar-fondo); border-color: var(--ambar-borde); color: #5c3d00; }

/* El logo de la entrada, más grande: es la primera cosa que se ve de la marca. */
.logo-app { width: 64px; height: 64px; }
.logo-app img { border-radius: 18px; }

/* ================================================================
   «AJUSTES» FUERA DE LA LISTA (06/11/2026)
   ================================================================
   Estaba dentro del menú. En el móvil ese menú se desplaza de lado y el engranaje se
   quedaba fuera de la pantalla: había que arrastrar para llegar a él, y mucha gente no
   lo encontraría nunca. Ahora va aparte: en el ordenador queda abajo del todo (que es
   donde lo quería Víctor) y en el móvil se queda pegado a la derecha, siempre a la vista.
   ================================================================ */

#aj-abrir {
    flex: none;
    width: 100%;
    margin-top: 8px;
    border-top: 1px solid var(--linea);
    border-radius: 0 0 var(--radio-peq) var(--radio-peq);
}

/* ================================================================
   EL MENÚ SE QUEDA QUIETO (06/11/2026)
   ================================================================
   En el ordenador, el menú se iba con la página: en una pantalla larga (Mis gastos con
   muchos tickets) había que bajar hasta el final para llegar a «Ajustes», que está abajo.
   Ahora ocupa la altura de la ventana y se queda fijo; si algún día tiene más apartados de
   los que caben, se desplaza por dentro.
   ================================================================ */
@media (min-width: 701px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        align-self: flex-start;
        overflow-y: auto;
    }
}

/* ================================================================
   CABECERA DE PANTALLA (07/11/2026)
   ================================================================
   Cada pantalla empieza ahora con su título, fuera de la tarjeta. Antes el título vivía
   dentro de la primera tarjeta y todo pesaba lo mismo: no había dónde mirar primero.
   Tres niveles: un ojo pequeño, el título grande en la serif, y una línea de qué hay ahí.
   ================================================================ */

.vista-cab {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 22px;
}
.vista-cab-texto { flex: 1; min-width: 0; }
.vista-ojo {
    font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--texto3); margin: 0 0 6px;
}
.vista-titulo {
    font-family: var(--fuente-marca);
    font-size: 33px; font-weight: 600; line-height: 1.08; letter-spacing: -.032em;
    color: var(--verde-900); margin: 0;
}
.vista-sub { font-size: 14.5px; color: var(--texto2); margin: 9px 0 0; max-width: 52em; }
.vista-cab .btn { flex: none; margin-bottom: 4px; }

@media (max-width: 700px) {
    .vista-cab { margin-bottom: 16px; gap: 10px; }
    .vista-titulo { font-size: 27px; }
    .vista-sub { font-size: 13.5px; margin-top: 7px; }
}

/* Cuando la tarjeta ya no lleva título (porque la pantalla lo tiene arriba), el botón
   se va a la derecha y la tarjeta no pierde el aire. */
.tarjeta-cab-solo { justify-content: flex-end; }

/* ================================================================
   BARRA INFERIOR DEL MOVIL (07/11/2026)
   ================================================================
   Victor: «no me gusta que la seleccion a ejecutar desde el movil sea arriba; los botones
   deben estar a la vista todos y segun se pulsa uno aparezca su desplegable».
   Cinco botones siempre a la vista, fijos abajo: Inicio · Gastos · ＋ · Informes · Mas.
   El activo se rellena de verde; el ＋ es la unica chispa de terracota. Al pulsar uno con
   subopciones sube un panel pequeno SOBRE la barra (un solo nivel). La lleva js/barra.js.
   En el ordenador (mas de 700 px) no existe: se queda la barra lateral de siempre.
   ================================================================ */
.barra-inf, .barra-velo, .barra-panel { display: none; }

@media (max-width: 700px) {
    .barra-inf {
        display: flex; align-items: stretch;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;   /* por encima del velo y del panel: se puede pulsar otro boton con uno abierto */
        height: var(--reserva-baja);
        padding: 0 6px env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
        border-top: 1px solid var(--linea);
        transition: transform 200ms ease;
    }
    .barra-inf[hidden] { display: none; }

    .barra-btn {
        flex: 1 1 0; min-width: 0; margin: 6px 2px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
        border: 0; border-radius: 14px; background: transparent; color: var(--texto2);
        font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1.2;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
    }
    .barra-btn .material-icons-round { font-size: 24px; line-height: 1; }
    .barra-txt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Respuesta inmediata al dedo: un tono mas oscuro y se encoge un poco. */
    .barra-btn:active { transform: scale(.97); background: var(--verde-100); color: var(--verde-800); }
    /* El activo: relleno verde con icono y letra claros (cambia de color). */
    .barra-btn[aria-current="page"] { background: var(--verde); color: #fff; }
    .barra-btn[aria-current="page"]:active { background: var(--verde-900); color: #fff; }
    .barra-btn:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
    /* El boton cuyo desplegable esta abierto se ve apretado (verde claro) aunque no sea la pantalla en la que estas. */
    .barra-btn[aria-expanded="true"]:not([aria-current="page"]):not(.barra-ctr) { background: var(--verde-100); color: var(--verde-800); }
    .barra-circulo .material-icons-round { transition: transform 160ms ease; }
    .barra-btn.barra-ctr[aria-expanded="true"] .barra-circulo .material-icons-round { transform: rotate(45deg); }

    /* El ＋ : grande, centrado, terracota; sobresale un poco de la barra. */
    .barra-btn.barra-ctr { flex: 0 0 76px; margin: 0 2px; justify-content: flex-end; padding-bottom: 7px; background: transparent; color: var(--terracota); gap: 3px; }
    .barra-circulo {
        display: flex; align-items: center; justify-content: center;
        width: 52px; height: 52px; margin-top: -18px; border-radius: 50%;
        background: var(--terracota); color: #fff;
        box-shadow: 0 6px 14px -4px rgba(138, 63, 36, .55), 0 1px 3px rgba(15, 20, 23, .18);
        border: 3px solid #fff;
        transition: background-color 160ms ease, transform 120ms ease;
    }
    .barra-circulo .material-icons-round { font-size: 30px; }
    .barra-btn.barra-ctr:active { background: transparent; transform: none; }
    .barra-btn.barra-ctr:active .barra-circulo { background: var(--terracota-oscuro); transform: scale(.94); }
    .barra-btn.barra-ctr[aria-current="page"] { background: transparent; color: var(--terracota-oscuro); }
    .barra-btn.barra-ctr[aria-current="page"] .barra-circulo { background: var(--terracota-oscuro); }

    /* El desplegable: un panel pequeno que sube SOBRE la barra. */
    .barra-velo { display: block; position: fixed; inset: 0; z-index: 54; background: rgba(16, 26, 21, .18); }
    .barra-velo[hidden] { display: none; }
    .barra-panel {
        display: block; position: fixed; z-index: 55;
        bottom: calc(var(--reserva-baja) + var(--franja-extra) + 12px);
        width: min(272px, calc(100vw - 24px)); max-height: calc(100vh - var(--reserva-baja) - var(--franja-extra) - 40px); overflow-y: auto;
        padding: 6px; border-radius: 18px; background: var(--superficie);
        border: 1px solid var(--linea); box-shadow: var(--sombra-alta);
        transform-origin: bottom center; animation: barra-sube 160ms ease-out;
    }
    .barra-panel[hidden] { display: none; }
    @keyframes barra-sube { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

    .barra-op {
        display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 8px 12px;
        border: 0; border-radius: 12px; background: transparent; color: var(--texto); text-align: left;
        font-size: 15px; font-weight: 600; font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 120ms ease, color 120ms ease;
    }
    .barra-op .material-icons-round { flex: none; font-size: 22px; color: var(--verde); }
    .barra-op-texto { display: flex; flex-direction: column; min-width: 0; }
    .barra-op-texto small { margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--texto2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .barra-op:active { background: var(--verde-100); }
    .barra-op:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
    .barra-op:disabled { color: var(--texto3); cursor: default; }
    .barra-op:disabled .material-icons-round { color: var(--texto3); }
    .barra-op:disabled:active { background: transparent; }
    .barra-op-aviso { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; color: var(--texto3); }
    .barra-op-peligro .material-icons-round { color: var(--rojo); }
    .barra-op-peligro:active { background: var(--rojo-suave); }
    .barra-sep { height: 1px; margin: 4px 8px; background: var(--linea); }
    .barra-rotulo { margin: 6px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto3); }

    /* La franja del cupo se apila justo encima de la barra. */
    body.con-franja { --franja-extra: var(--franja-alto); }
    .franja { bottom: var(--reserva-baja); z-index: 49; padding-bottom: 5px; border-top: 0; border-bottom: 1px solid var(--linea); box-shadow: none; }

    /* Sitio para que la barra y la franja no tapen el final de cada pantalla. */
    .main, body.con-franja .main, body.con-franja main {
        padding-bottom: calc(var(--reserva-baja) + var(--franja-extra) + 24px);
    }
    /* La pantalla empieza arriba (en el ordenador se centra; en el movil eso solo dejaba un hueco). */
    .vista { margin: 0; }
    /* Los avisos pasan a salir encima de la barra. */
    .tc { left: 12px; right: 12px; bottom: calc(var(--reserva-baja) + var(--franja-extra) + 14px); align-items: stretch; }
    /* Esta fila de sesion ya vive en «Mas». */
    .sesion-movil { display: none; }

    /* Con el teclado abierto la barra y la franja se esconden (barra.js pone body.teclado). */
    body.teclado { --barra-alto: 0px; --franja-extra: 0px; }
    body.teclado .barra-inf, body.teclado .franja { transform: translateY(120%); pointer-events: none; }
    body.teclado .barra-panel, body.teclado .barra-velo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .barra-inf, .barra-btn, .barra-circulo, .barra-circulo .material-icons-round, .barra-op { transition: none; }
    .barra-panel { animation: none; }
}

/* ================================================================
   MIS GASTOS EN EL MOVIL: FILTROS PLEGADOS (07/11/2026)
   ================================================================
   El desplegable «Gastos» de la barra lleva a los filtros que ya existian (Este mes, Por cliente,
   Por tipo, Por revisar, Todos). En el movil se esconden tras el boton «Filtros» para que la
   lista salga arriba; en el ordenador siempre estan a la vista. Lo lleva mis-gastos.js. */
.mg-filtros-boton { display: none; }
/* El campo al que lleva «Por cliente» o «Por tipo» se marca un momento para que se vea donde mirar. */
.campo.resaltado input, .campo.resaltado select { outline: 2px solid var(--verde); outline-offset: -1px; box-shadow: 0 0 0 4px var(--verde-100); }

@media (max-width: 700px) {
    .mg-cab-lista { justify-content: space-between; gap: 10px; }
    .mg-filtros-boton { display: inline-flex; align-items: center; gap: 6px; }
    .mg-filtros-boton .material-icons-round { font-size: 18px; }
    .mg-filtros-boton[aria-expanded="true"] { background: var(--verde-100); border-color: var(--verde-300, var(--verde)); color: var(--verde-800); }
    /* Con algun filtro puesto el boton lo dice (y se ve distinto aunque este cerrado). */
    .mg-filtros-boton.activo { background: var(--verde); border-color: var(--verde); color: #fff; }
    .mg-filtros-boton.activo:active { background: var(--verde-900); }
    .mg-filtros:not(.abierto) { display: none; }
}

/* ================================================================
   LA FILA DE UN GASTO (07/11/2026)
   ================================================================
   Foto pequena a la izquierda; a la derecha el proveedor y el importe, «fecha · tipo» y las
   etiquetas. La misma fila sirve a la lista de Mis gastos y a «Ultimos gastos» de Inicio
   (la construye mis-gastos.js: filaDeLista). La foto la pone Miniaturas.pintar; sin ella queda
   el marcador de ticket. El «.mg-fila» de siempre sigue siendo la fila de la lista de clientes. */
.gf-fila {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 2px; border: 0; border-top: 1px solid var(--linea); border-radius: 0; background: transparent;
    color: var(--texto); font: inherit; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease;
}
.mg-lista li:first-child .gf-fila { border-top: 0; }
.gf-fila:hover { background: var(--fondo); }
.gf-fila:active { background: var(--verde-50); }
.gf-fila:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; border-radius: 10px; }

.gf-mini {
    position: relative; flex: none; width: 56px; height: 72px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--linea); border-radius: 10px; background: var(--papel-2);
}
.gf-mini-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gf-mini-img[hidden] { display: none; }
/* El marcador de ticket que pone Miniaturas.pintar (PDF, sin foto, o mientras baja) se ve entero, no recortado. */
.gf-mini-img[data-miniatura="marcador"] { object-fit: contain; padding: 14px 10px; box-sizing: border-box; }
.gf-mini-marca { font-size: 26px; color: var(--texto3); }
.gf-mini-img[data-miniatura="lista"] ~ .gf-mini-marca,
.gf-mini-img[data-miniatura="marcador"] ~ .gf-mini-marca { display: none; }

.gf-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gf-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gf-prov {
    min-width: 0; font-size: 15px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gf-fila .imp { flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gf-sub { font-size: 12.5px; color: var(--texto2); }
.gf-etiquetas { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 1px; }

/* ================================================================
   INICIO (07/11/2026): la cifra manda, «Por revisar» y los ultimos gastos se ven sin bajar
   ================================================================ */
.inicio-revisar {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 16px 0 0; padding: 10px 14px;
    border: 1px solid var(--ambar-borde); border-radius: 12px; background: var(--ambar-fondo); color: #5c3d00;
    font: inherit; font-size: 14.5px; font-weight: 650; text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: filter 120ms ease, transform 120ms ease;
}
.inicio-revisar[hidden] { display: none; }
.inicio-revisar .material-icons-round { flex: none; font-size: 22px; color: var(--ambar); }
.inicio-revisar .inicio-revisar-ir { color: #5c3d00; }
.inicio-revisar-texto { flex: 1; min-width: 0; }
.inicio-revisar:active { filter: brightness(.95); transform: scale(.985); }
.inicio-revisar:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

.inicio-ultimos .tarjeta-cab { margin-bottom: 4px; }
.inicio-donde .tarjeta-cab { margin-bottom: 10px; }
.inicio-donde .inicio-categorias { margin: 0; }

@media (max-width: 700px) {
    .tarjeta.inicio-ultimos { padding: 16px 14px 6px; }
}

/* ================================================================
   UN GASTO EN EL MOVIL (07/11/2026): foto a la izquierda, resumen a la derecha
   ================================================================
   Antes la foto salia arriba, cortada, y los datos debajo: habia que bajar y bajar. Ahora la foto
   (un 38 %) se queda a la vista mientras se mira el resumen, lo menos importante va en «Mas datos»
   y «Editar / Eliminar» es una barra fija justo encima de la barra de abajo. Tocar la foto la
   amplia (gastos.js / mis-gastos.js le ponen «foto-grande» a la rejilla y vuelve a una columna). */
#mg-mas-datos .resumen { margin: 8px 0 0; }

@media (max-width: 700px) {
    /* Mis gastos: el subtitulo sobra (el titulo y la lista ya lo dicen) y la lista gana ancho. */
    #v-misgastos .vista-sub { display: none; }
    #mg-lista-tarjeta { padding: 14px 14px 6px; }

    #mg-detalle:not([hidden]) { display: flex; flex-direction: column; }
    #mg-volver { align-self: flex-start; }
    #mg-detalle .gs-rejilla { order: 1; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; }
    #mg-detalle .gs-rejilla.foto-grande { grid-template-columns: minmax(0, 1fr); }
    #mg-detalle .gs-foto { position: sticky; top: 12px; padding: 8px; }
    #mg-detalle .gs-rejilla.foto-grande .gs-foto { position: static; }
    #mg-detalle .gs-foto img { max-height: 280px; object-fit: cover; object-position: top; }
    #mg-detalle .gs-rejilla.foto-grande .gs-foto img { max-height: none; object-fit: contain; }
    #mg-detalle .gs-foto small { font-size: 10.5px; }
    #mg-detalle .gs-datos { gap: 12px; }
    #mg-detalle .gs-datos .tarjeta { padding: 14px; }
    #mg-detalle .gs-datos h2 { margin: 0 0 10px; font-size: 16px; }
    #mg-detalle .resumen { gap: 10px; margin: 0; }
    #mg-detalle .resumen dd { font-size: 14px; }

    /* Editar / Eliminar: una barra fija encima de la barra de abajo (se va al final del detalle y se queda pegada). */
    #mg-acciones {
        order: 2; position: sticky; z-index: 20; margin: 14px 0 0; padding: 10px;
        bottom: calc(var(--reserva-baja) + var(--franja-extra) + 8px);
        box-shadow: var(--sombra-alta); max-height: 70vh; overflow-y: auto;
    }
    #mg-eliminar-ayuda { display: none; }
}

/* ================================================================
   ANADIR TICKET EN EL MOVIL (07/11/2026)
   ================================================================
   Elegir: las vias (Fotografia, Anadir archivo, Escanear, Kilometraje, A mano) ya se ven todas
   a la vez; aqui solo se quita el texto largo (el aviso de cuanto cuesta un PDF se queda).
   Revisar: «Guardar» y «Leer otro» pasan a ser una barra fija encima de la barra de abajo. */
@media (max-width: 700px) {
    #v-gastos .vista-sub { display: none; }
    #gs-elegir > .ayuda:not(.atencion), #gs-elegir > .gs-nota { display: none; }
    #gs-elegir .gs-opcion { padding: 14px; }

    #gs-resultado .gs-datos > .acciones {
        position: sticky; z-index: 20; margin: 6px 0 0; padding: 10px;
        bottom: calc(var(--reserva-baja) + var(--franja-extra) + 8px);
        border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-alta);
    }
    #gs-resultado .gs-datos > .acciones .btn { flex: 1; justify-content: center; margin-top: 0; }
}

/* ================================================================
   INFORMES Y CLIENTES (07/11/2026)
   ================================================================
   Informes en el movil: el periodo se elige con cuatro botones grandes (el que esta elegido se
   rellena de verde); el selector de siempre sigue siendo el dato y se ve solo en el ordenador.
   Clientes: cada cliente lleva su inicial en un circulo. */
.inf-periodos { display: none; }
.cl-inicial {
    grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; background: var(--verde-100); color: var(--verde-800);
    font-size: 18px; font-weight: 700; line-height: 1;
}
.cl-fila { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.cl-fila small { grid-column: 2 / -1; }
.cl-archivado .cl-inicial { background: var(--papel-2); color: var(--texto3); }

@media (max-width: 700px) {
    .inf-periodos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
    .inf-periodo {
        min-height: 56px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--superficie); color: var(--texto);
        font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; -webkit-tap-highlight-color: transparent;
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
    }
    .inf-periodo:active { transform: scale(.97); background: var(--verde-100); }
    .inf-periodo[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
    .inf-periodo[aria-pressed="true"]:active { background: var(--verde-900); }
    .inf-periodo:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
    .inf-campo-informe { display: none; }
}

/* ---------- REVISAR UN TICKET EN EL MOVIL: tarjeta compacta (foto pequena + pista) y datos secundarios plegados (07/11/2026) ---------- */
.gs-mas-datos > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--verde); padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
.gs-mas-datos[open] > summary { margin-bottom: 4px; }
@media (max-width: 700px) {
    #gs-resultado:not(.foto-grande) .gs-foto { display: flex; align-items: center; gap: 12px; padding: 8px; }
    #gs-resultado:not(.foto-grande) .gs-foto img { width: 64px; height: 84px; max-height: none; flex: none; }
    #gs-resultado:not(.foto-grande) .gs-foto small { margin: 0; text-align: left; font-size: 12.5px; }
    #gs-resultado:not(.foto-grande) .gs-foto .gs-pdf { flex: 1; }
}
@media (min-width: 701px) {
    .gs-mas-datos > summary { display: none; }
}

/* ================================================================
   RENOVACION 2 (08/11/2026): letra Outfit, logo, Inicio como el dibujo de Victor y pantallas de dentro con el mismo criterio
   Referencia exacta: la maqueta v2 (inicio-v2.html). Los colores de los botones y de las pantallas salen SOLO de las variables
   --mol-* y --boton-* del bloque :root de arriba.
   ================================================================ */

/* ---- El logo: UN solo sitio. Todo lo que lo enseña lleva la clase .logo-ym (la imagen sale de --logo-url del :root) ---- */
.logo-ym {
    display: block; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 0; background: var(--logo-url) center / contain no-repeat transparent;
    filter: drop-shadow(0 3px 5px rgba(16, 56, 43, .32)); -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.logo-ym:focus-visible { outline: 3px solid var(--verde-300); outline-offset: 3px; border-radius: 12px; }
.logo-ym:active { transform: scale(.95); }
.logo-barra { width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(16, 56, 43, .3)); }

/* ---- Un color por pantalla: el de su boton de Inicio (body[data-vista] lo pone barra.js) ---- */
body[data-vista="misgastos"], body[data-vista="gasto"] { --fondo-seccion: var(--fondo-mg); --c1: var(--mol-gastos-1); --c2: var(--mol-gastos-2); --sh: var(--mol-gastos-sh); --ink: var(--mol-gastos-t); }
body[data-vista="informes"] { --fondo-seccion: var(--fondo-inf); --c1: var(--mol-informe-1); --c2: var(--mol-informe-2); --sh: var(--mol-informe-sh); --ink: var(--mol-informe-t); }
body[data-vista="clientes"], body[data-vista="cliente"] { --fondo-seccion: var(--fondo-cli); }
body[data-vista="hogar"], body[data-vista="clientes"], body[data-vista="cliente"] { --c1: var(--mol-cliente-1); --c2: var(--mol-cliente-2); --sh: var(--mol-cliente-sh); --ink: var(--mol-cliente-t); }
body[data-vista="miperfil"], body[data-vista="perfil"], body[data-vista="hogar"] { --fondo-seccion: var(--fondo-aj); }
body[data-vista="miperfil"], body[data-vista="perfil"] { --c1: var(--mol-ajustes-1); --c2: var(--mol-ajustes-2); --sh: var(--mol-ajustes-sh); --ink: var(--mol-ajustes-t); }
body[data-vista="gastos"] { --fondo-seccion: var(--fondo-ad); --c1: var(--mol-ticket-1); --c2: var(--mol-ticket-2); --sh: var(--mol-ticket-sh); --ink: var(--mol-ticket-t); }

/* El panel principal de cada pantalla: el degradado de su color, con brillo arriba y sombra del mismo color */
.panel-color {
    color: var(--ink); border: 0; border-radius: 24px;
    background: linear-gradient(165deg, var(--c1) 0%, var(--c2) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(0, 0, 0, .05), 0 14px 22px -14px var(--sh), 0 2px 4px rgba(40, 30, 20, .08);
}
.panel-color .ayuda, .panel-color p, .panel-color label, .panel-color small { color: var(--ink); }

/* ---- Inicio: cabecera con el logo ---- */
.inicio-casita { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.inicio-casita-texto { font-family: var(--fuente-marca); font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--texto); }

.inicio-banda {
    display: grid; gap: 8px; padding: 12px 14px; margin: 0 0 16px; border: 1px solid var(--linea); border-radius: 18px; background: var(--superficie);
    box-shadow: 0 1px 2px rgba(40, 30, 20, .04);
}
.inicio-banda[hidden] { display: none; }
.inicio-banda-mes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.inicio-banda .inicio-etiqueta { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto2); }
.inicio-banda .inicio-cifra { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.inicio-banda .inicio-pie { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--texto2); }
.inicio-banda .inicio-revisar { justify-self: start; width: auto; min-height: 36px; margin: 0; padding: 6px 13px; border-radius: 999px; font-size: .84rem; font-weight: 700; }

/* ---- El molinillo: cuatro piezas gordas en L alrededor de un cuadrado verde grande. Medidas en % del ancho (cqw). ---- */
.inicio-molinillo { position: relative; width: 100%; max-width: 520px; margin: 0 auto 20px; aspect-ratio: 1 / 1; container-type: inline-size; }
.mol {
    position: absolute; margin: 0; border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform .2s cubic-bezier(.2, .8, .3, 1);
    width: 49%; height: 49%; border-radius: 7.5cqw; padding: 3.6cqw 4cqw; display: flex; flex-direction: column; gap: 1.8cqw; text-align: left;
}
.mol-gastos, .mol-informe, .mol-cliente, .mol-ajustes {
    background: linear-gradient(165deg, var(--c1) 0%, var(--c2) 100%);
    box-shadow: inset 0 .5cqw 0 rgba(255, 255, 255, .65), inset 0 -.6cqw 0 rgba(0, 0, 0, .05), 0 3cqw 5cqw -3cqw var(--sh), 0 .6cqw 1.2cqw rgba(40, 30, 20, .08);
}
.mol-gastos { --c1: var(--mol-gastos-1); --c2: var(--mol-gastos-2); --sh: var(--mol-gastos-sh); color: var(--mol-gastos-t);  left: 0; top: 0; }
.mol-informe { --c1: var(--mol-informe-1); --c2: var(--mol-informe-2); --sh: var(--mol-informe-sh); color: var(--mol-informe-t); right: 0; top: 0; align-items: flex-end; text-align: right; }
.mol-cliente { --c1: var(--mol-cliente-1); --c2: var(--mol-cliente-2); --sh: var(--mol-cliente-sh); color: var(--mol-cliente-t); left: 0; bottom: 0; justify-content: flex-end; }
.mol-ajustes { --c1: var(--mol-ajustes-1); --c2: var(--mol-ajustes-2); --sh: var(--mol-ajustes-sh); color: var(--mol-ajustes-t); right: 0; bottom: 0; justify-content: flex-end; align-items: flex-end; text-align: right; }
.mol-chip {
    width: 10.5cqw; height: 10.5cqw; border-radius: 3.6cqw; background: rgba(255, 255, 255, .58); display: grid; place-items: center;
    box-shadow: inset 0 .3cqw 0 rgba(255, 255, 255, .85), 0 .8cqw 1.6cqw -.8cqw rgba(0, 0, 0, .25);
}
.mol-chip .material-icons-round { font-size: 6.4cqw; line-height: 1; }
.mol-txt { font-weight: 700; font-size: 5.8cqw; line-height: 1.08; letter-spacing: -.005em; }

/* El del centro: el mas grande y verde; su sombra del color del fondo recorta cada pieza en L */
.mol-ticket {
    left: 25%; top: 25%; width: 50%; height: 50%; z-index: 2; border-radius: 9.5cqw; align-items: center; justify-content: center; gap: 3cqw; padding: 0 2cqw; color: #fff; text-align: center;
    background: radial-gradient(120% 90% at 18% 8%, rgba(120, 220, 170, .55) 0%, rgba(120, 220, 170, 0) 58%), linear-gradient(160deg, var(--mol-ticket-1) 0%, var(--mol-ticket-2) 100%);
    box-shadow: 0 0 0 2cqw var(--fondo-seccion), inset 0 .7cqw 0 rgba(255, 255, 255, .38), inset 0 -1cqw 0 rgba(0, 0, 0, .14), 0 7cqw 8cqw -4cqw rgba(23, 99, 70, .65);
}
.mol-ticket .mol-txt { font-size: 6.8cqw; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .25); }
.mol-lente { position: relative; width: 21cqw; height: 21cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .4); }
.mol-lente .material-icons-round { font-size: 11cqw; line-height: 1; }
.mol-lente::after { content: ""; position: absolute; inset: -2.4cqw; border-radius: 50%; border: .6cqw solid rgba(255, 255, 255, .32); animation: mol-latido 3.2s ease-out infinite; }
@keyframes mol-latido { 0% { transform: scale(.86); opacity: .95; } 70%, 100% { transform: scale(1.14); opacity: 0; } }
.mol:hover { transform: translateY(-.8cqw); }
.mol:active { transform: scale(.97); }
.mol:focus-visible { outline: 3px solid var(--verde-300); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mol-lente::after { animation: none; opacity: 0; } .mol { transition: none; } }

/* ---- Cabecera de las pantallas de dentro (movil): logo + «‹ Inicio» + titulo; en el ordenador queda la de siempre ---- */
.cab-movil { display: none; }
.vista-volver { border: 0; background: none; padding: 0; font: inherit; font-size: .78rem; font-weight: 600; color: var(--texto2); letter-spacing: .01em; cursor: pointer; }

/* ---- Botones con vida (toda la app): primario verde con brillo, secundario crema, al pulsar se encoge ---- */
.btn { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.btn:active { transform: scale(.97); }
.btn-primario, .btn-accion, .btn-primario:hover, .btn-accion:hover {
    color: #fff; border: 0;
    background: radial-gradient(120% 90% at 18% 8%, rgba(120, 220, 170, .45) 0%, rgba(120, 220, 170, 0) 58%), linear-gradient(160deg, var(--boton-1) 0%, var(--boton-2) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 10px 16px -10px rgba(23, 99, 70, .75);
}
.btn-primario:active, .btn-accion:active { filter: brightness(.93); background: linear-gradient(160deg, var(--boton-1) 0%, var(--boton-2) 100%); }
.btn-primario:disabled { background: var(--texto3); box-shadow: none; filter: none; }
.btn-sec { background: linear-gradient(165deg, #ffffff, #f7f1e8); border: 1px solid var(--linea); box-shadow: inset 0 2px 0 #fff, 0 6px 10px -8px rgba(40, 30, 20, .35); }
.btn-sec:hover { background: linear-gradient(165deg, #ffffff, #f3ece1); }
.panel-color .mg-mes-nombre, .panel-color .mg-mes-total, .panel-color .gs-op-texto, .panel-color .gs-op-texto small, .panel-color .gs-op-icono { color: var(--ink); }
.panel-color .btn-sec, .panel-color .btn { background: rgba(255, 255, 255, .66); color: var(--ink); border: 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), 0 6px 10px -6px rgba(0, 0, 0, .28); }

/* ---- Barra de abajo como la maqueta (movil): crema, esquinas redondeadas arriba, activo = pildora del color de su pantalla ---- */
@media (max-width: 700px) {
    .barra-inf {
        background: #fffdf9; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--linea);
        border-radius: 22px 22px 0 0; box-shadow: 0 -10px 24px -14px rgba(40, 30, 20, .25); align-items: flex-end;
    }
    .barra-btn { align-self: stretch; border-radius: 16px; }
    .barra-btn[data-b="gastos"] { --c1: var(--mol-gastos-1); --c2: var(--mol-gastos-2); --sh: var(--mol-gastos-sh); --ink: var(--mol-gastos-t); }
    .barra-btn[data-b="informes"] { --c1: var(--mol-informe-1); --c2: var(--mol-informe-2); --sh: var(--mol-informe-sh); --ink: var(--mol-informe-t); }
    .barra-btn[data-b="mas"] { --c1: var(--mol-ajustes-1); --c2: var(--mol-ajustes-2); --sh: var(--mol-ajustes-sh); --ink: var(--mol-ajustes-t); }
    .barra-btn[data-b="inicio"] { --c1: var(--verde-100); --c2: var(--verde-200); --sh: var(--verde-400); --ink: var(--verde-900); }
    .barra-btn:active { background: transparent; color: var(--texto2); }
    .barra-btn[aria-current="page"], .barra-btn[aria-current="page"]:active {
        color: var(--ink); background: linear-gradient(165deg, var(--c1), var(--c2));
        box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), 0 6px 10px -6px var(--sh);
    }
    .barra-btn[aria-expanded="true"]:not([aria-current="page"]):not(.barra-ctr) { background: var(--papel-2); color: var(--texto); }
    .barra-btn:focus-visible { outline-color: var(--verde-500); }

    .barra-btn.barra-ctr { flex: 0 0 76px; padding-bottom: 7px; background: transparent; color: var(--verde-700); box-shadow: none; font-weight: 700; }
    .barra-btn.barra-ctr:active, .barra-btn.barra-ctr[aria-current="page"], .barra-btn.barra-ctr[aria-current="page"]:active { background: transparent; box-shadow: none; color: var(--verde-700); }
    .barra-circulo {
        width: 60px; height: 60px; margin-top: -30px; border-radius: 22px; border: 0; color: #fff;
        background: radial-gradient(120% 90% at 18% 8%, rgba(120, 220, 170, .55) 0%, rgba(120, 220, 170, 0) 58%), linear-gradient(160deg, var(--mol-ticket-1), var(--mol-ticket-2));
        box-shadow: 0 0 0 5px var(--fondo-seccion), inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 10px 14px -6px rgba(23, 99, 70, .7);
    }
    .barra-circulo .material-icons-round { font-size: 30px; }
    .barra-btn.barra-ctr:active .barra-circulo { background: linear-gradient(160deg, var(--mol-ticket-1), var(--mol-ticket-2)); transform: scale(.94); filter: brightness(.93); }
    .barra-btn.barra-ctr[aria-current="page"] .barra-circulo { background: linear-gradient(160deg, var(--mol-ticket-1), var(--mol-ticket-2)); box-shadow: 0 0 0 5px var(--fondo-seccion), 0 0 0 8px rgba(47, 155, 114, .35), inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 10px 14px -6px rgba(23, 99, 70, .7); }

    /* En Inicio los cinco botones grandes ya son el menu: sin barra de abajo (y sin hueco para ella) */
    body[data-vista="inicio"] { --barra-alto: 0px; }
    body[data-vista="inicio"] .barra-inf { display: none; }

    /* Cabecera de las pantallas de dentro: logo + «‹ Inicio» pequeño encima del titulo */
    .cab-movil { display: block; }
    .vista-cab { flex-wrap: nowrap; align-items: center; gap: 12px; }
    .vista-cab .vista-ojo { display: none; }
    .vista-cab-texto { display: grid; line-height: 1.1; }
    .vista-titulo { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; color: var(--texto); }
    .vista-cab .vista-sub { font-size: 13.5px; }
    .vista-volver { justify-self: start; padding: 2px 0 3px; }
}
@media (min-width: 701px) {
    .inicio-casita { display: none; }
    .inicio-banda .inicio-cifra { font-size: 2rem; }
    .inicio-molinillo { margin-top: 6px; }
}

/* Panel verde (Añadir ticket): las letras claras y los botones, en cristal */
body[data-vista="gastos"] .panel-color .btn-primario { color: #fff; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 2px 0 rgba(255, 255, 255, .3); }
body[data-vista="gastos"] .panel-color .btn-sec { color: var(--verde-900); }
#gs-elegir .gs-solo-movil.gs-opcion.panel-color { border: 0; background: radial-gradient(120% 90% at 18% 8%, rgba(120, 220, 170, .55) 0%, rgba(120, 220, 170, 0) 58%), linear-gradient(160deg, var(--mol-ticket-1) 0%, var(--mol-ticket-2) 100%); }
#gs-elegir .gs-opcion.panel-color .gs-op-texto strong, #gs-elegir .gs-opcion.panel-color .gs-op-texto small { color: #fff; }
#gs-elegir .gs-opcion.panel-color .gs-op-icono { color: #fff; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }

/* Informes (movil): los cuatro botones de periodo con volumen; el elegido, en verde */
@media (max-width: 700px) {
    .inf-periodo { border: 0; border-radius: 18px; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, .66); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), 0 6px 10px -6px rgba(0, 0, 0, .28); }
    .inf-periodo[aria-pressed="true"], .inf-periodo[aria-pressed="true"]:active { color: #fff; border: 0;
        background: linear-gradient(160deg, var(--boton-1), var(--boton-2)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .14), 0 10px 16px -8px rgba(23, 99, 70, .7); }
}
.main { background: var(--fondo-seccion); }

/* Inicio (movil): boton redondo ⋯ arriba a la derecha; abre el panel «Más» de la barra */
.inicio-mas { display: none; }
@media (max-width: 700px) {
    .inicio-mas { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; color: var(--texto);
        background: rgba(255, 255, 255, .85); box-shadow: inset 0 2px 0 #fff, 0 6px 10px -6px rgba(40, 30, 20, .35), 0 0 0 1px var(--linea); -webkit-tap-highlight-color: transparent; }
    .inicio-mas:active { transform: scale(.95); }
    .inicio-mas:focus-visible { outline: 3px solid var(--verde-300); outline-offset: 2px; }
    .inicio-mas .material-icons-round { font-size: 26px; }
}

/* Informes: el panel de color es solo la ayuda y los cuatro periodos; los campos van en una tarjeta blanca debajo */
.inf-panel { display: grid; gap: 12px; padding: 16px; margin: 0 0 14px; }
.inf-panel .ayuda { margin: 0; }
.inf-panel .inf-periodos { margin: 0; }
.inf-campos { margin: 0 0 14px; display: grid; gap: 14px; }
.vista > .logo-cab.cab-movil { margin: 0 0 12px; }

/* Movimiento reducido: sin latido, sin saltos ni encogimientos al pulsar */
@media (prefers-reduced-motion: reduce) {
    .btn, .logo-ym, .inicio-mas, .barra-btn { transition: none; }
    .btn:active, .mol:active, .mol:hover, .logo-ym:active, .inicio-mas:active { transform: none; }
}

/* ---- «Volver» (08/11/2026): pildora de 44 px, blanca translucida con borde y sombra; un solo estilo para todas las pantallas ---- */
.vista-volver, .pildora-volver {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px 0 14px; border: 1px solid var(--linea); border-radius: 999px;
    font: inherit; font-size: .95rem; font-weight: 700; color: var(--texto); text-decoration: none; letter-spacing: 0;
    background: rgba(255, 255, 255, .85); box-shadow: inset 0 2px 0 #fff, 0 6px 10px -6px rgba(40, 30, 20, .35);
    -webkit-tap-highlight-color: transparent; cursor: pointer; transition: transform .12s ease;
}
.vista-volver:active, .pildora-volver:active { transform: scale(.97); }
.vista-volver:focus-visible, .pildora-volver:focus-visible { outline: 3px solid var(--verde-300); outline-offset: 2px; }
.vista-volver span, .pildora-volver span { font-size: 1.3rem; line-height: 1; margin-top: -2px; }
.login-nota .pildora-volver { color: var(--texto); font-weight: 700; }
@media (max-width: 700px) {
    .vista-cab .vista-volver { margin: 0 0 6px; }
    /* En el movil el «Volver» de la cabecera sustituye a los botones sueltos de volver de dentro */
    #mg-volver, #vc-volver, #hg-volver, #gs-volver { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vista-volver, .pildora-volver { transition: none; } .vista-volver:active, .pildora-volver:active { transform: none; } }
@media (max-width: 700px) { #cl-vista-form > .vista-volver { margin: 0 0 10px; } }

/* ---- El quesito de Inicio (08/11/2026): tarjeta compacta que sustituye a la banda del mes ---- */
.inicio-quesito-tarjeta { grid-template-columns: 1fr; gap: 6px 10px; }
.inicio-quesito-zona { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.quesito {
    width: 100px; height: 100px; border-radius: 50%;
    filter: drop-shadow(0 6px 8px rgba(229, 138, 95, .24));
    animation: quesito-entra .6s ease-out both;
}
.quesito svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes quesito-entra { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quesito { animation: none; } }
/* La tarjeta del quesito: mismo trato que las demas (blanca, luz arriba, sombra suave) */
.inicio-quesito-tarjeta { box-shadow: inset 0 2px 0 #fff, 0 10px 18px -12px rgba(40, 30, 20, .32); }
.quesito-datos { min-width: 0; display: grid; gap: 4px; }
.quesito-datos .inicio-banda-mes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.quesito-datos .inicio-cifra { font-size: 1.5rem; font-variant-numeric: tabular-nums lining-nums; }
.quesito-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-variant-numeric: tabular-nums lining-nums; }
.quesito-leyenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: .78rem; line-height: 1.35; }
.quesito-punto { width: 11px; height: 11px; border-radius: 50%; display: block;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 14%, rgba(255, 255, 255, 0) 42%), var(--pc);
    box-shadow: inset 0 -1px 2px rgba(40, 30, 20, .25), 0 1px 2px rgba(40, 30, 20, .2); }
.quesito-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.quesito-importe { color: var(--texto2); white-space: nowrap; font-weight: 600; }
.quesito-vacio-texto { display: block !important; font-size: .82rem; color: var(--texto2); }
.inicio-quesito-tarjeta .inicio-pie { display: flex; align-items: center; gap: 4px; margin: 0; font-size: .78rem; color: var(--texto2); }
@media (min-width: 701px) { .inicio-quesito-zona { grid-template-columns: 120px minmax(0, 1fr); } .quesito { width: 120px; height: 120px; } }

/* Cabecera de Cliente y Hogar: el logo a la izquierda y el Volver a su derecha, como en las demas pantallas */
.cab-fila { display: none; }
@media (max-width: 700px) {
    .cab-fila.cab-movil { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
    .cab-fila .vista-volver { margin: 0; }
    .vista > .cab-fila .logo-cab { margin: 0; }
}

/* ---- Chips de filtro (08/11/2026): fila compacta que se desliza de lado; el activo va lleno, con aria-pressed y contador ---- */
.chips { display: flex; gap: 8px; margin: 0 0 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chips[hidden] { display: none; }
.chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border: 1px solid var(--linea); border-radius: 999px;
    font: inherit; font-size: .84rem; font-weight: 700; color: var(--texto); background: rgba(255, 255, 255, .85); cursor: pointer;
    box-shadow: inset 0 1px 0 #fff, 0 4px 8px -6px rgba(40, 30, 20, .3); -webkit-tap-highlight-color: transparent;
}
.chip .chip-n { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; color: var(--texto2); }
.chip[aria-pressed="true"] { background: var(--ink, #1f3d2e); border-color: var(--ink, #1f3d2e); color: #fff; box-shadow: 0 6px 10px -6px var(--sh, rgba(40, 30, 20, .35)); }
.chip[aria-pressed="true"] .chip-n { color: inherit; }
.chip:focus-visible { outline: 3px solid var(--verde-300); outline-offset: 2px; }

/* ================================================================
   EL PANEL DEL NEGOCIO (09/11/2026)
   ================================================================
   Tres cifras y una lista. Solo lo ve el dueño; el bloque nace escondido y
   solo aparece si el servidor dice que sí.
   ================================================================ */

.adm-cifras { display: flex; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.adm-cifra {
    flex: 1 1 90px; min-width: 90px;
    background: var(--papel-2, #f4f1ec);
    border: 1px solid var(--linea);
    border-radius: var(--radio-peq, 10px);
    padding: 10px 12px;
}
.adm-cifra b {
    display: block;
    font-family: var(--fuente-marca);
    font-size: 22px; line-height: 1.1; font-weight: 600;
    color: var(--verde-900, #0c2f26);
    font-variant-numeric: tabular-nums;
}
.adm-cifra small { display: block; font-size: 11.5px; color: var(--texto3); margin-top: 2px; }

.adm-aviso {
    font-size: 13.5px; line-height: 1.5;
    background: var(--ambar-fondo);
    border: 1px solid var(--ambar-borde);
    color: var(--texto);
    border-radius: 10px; padding: 10px 12px; margin: 0 0 12px;
}
.adm-titulo {
    font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texto3); margin: 0 0 6px;
}
.adm-lista { list-style: none; margin: 0 0 10px; padding: 0; }
.adm-lista li {
    font-size: 13px; color: var(--texto2);
    padding: 5px 0; border-top: 1px solid var(--linea);
    font-variant-numeric: tabular-nums;
}
.adm-lista li:first-child { border-top: none; }


/* La línea de «¿está vivo el servidor?» del panel del negocio. */
.adm-salud {
    font-size: 13px; line-height: 1.4;
    border-radius: 8px; padding: 7px 10px; margin: 0 0 10px;
    border: 1px solid transparent;
}
.adm-salud.bien { background: var(--verde-50); color: var(--verde-800); border-color: var(--verde-200); }
.adm-salud.mal { background: var(--rojo-suave); color: var(--rojo); border-color: var(--rojo-suave); }

/* ================================================================
   «¿SE LEE BIEN?» (09/11/2026)
   ================================================================
   La foto, grande y sola, con dos botones debajo. La idea es que se pueda
   juzgar de un vistazo, sin scroll: la foto ocupa el ancho disponible y los
   botones van pegados abajo.
   ================================================================ */

.gs-conf-titulo { font-size: 20px; margin: 0 0 6px; letter-spacing: -.02em; }
.gs-confirmar .ayuda { margin: 0 0 14px; }

.gs-conf-foto {
    background: var(--papel-2);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 8px;
    margin-bottom: 12px;
    text-align: center;
}
.gs-conf-foto img {
    display: block;
    width: 100%;
    max-height: 46vh;          /* que quepan los botones sin bajar */
    object-fit: contain;
    border-radius: var(--radio-peq);
    background: #fff;
}
@media (max-width: 700px) {
    .gs-conf-foto img { max-height: 40vh; }
}

.gs-conf-aviso {
    font-size: 13.5px; line-height: 1.5;
    background: var(--ambar-fondo);
    border: 1px solid var(--ambar-borde);
    color: var(--texto);
    border-radius: 10px; padding: 10px 12px; margin: 0 0 12px;
}

.gs-conf-botones { display: flex; gap: 10px; }
.gs-conf-botones .btn { flex: 1 1 0; }
@media (max-width: 420px) {
    .gs-conf-botones { flex-direction: column-reverse; }
}


/* ================================================================
   TEXTO SEGÚN EL MÓVIL (09/11/2026)
   ================================================================
   Apple dice «Fototeca» y «Archivos»; Android dice «Galería» y no tiene esa app.
   Se escribe todo y se enseña lo que toca. Por defecto se enseña lo de iPhone,
   que es lo que estaba; Android lo cambia al arrancar.
   ================================================================ */

.gs-solo-android { display: none !important; }
body.es-android .gs-solo-iphone { display: none !important; }
body.es-android .gs-solo-android { display: revert !important; }

/* ================================================================
   MI CUENTA · BAJA Y BORRADO (09/11/2026)
   ================================================================
   Va al final de Ajustes, aparte y con raya roja, para que no se pulse sin
   querer. El rojo es de «borrar», no de acción principal: por eso no es terracota.
   ================================================================ */

#mc-bloque { border-top: 1px solid var(--rojo-suave, #f2d3d0); }
#mc-bloque h3 { color: var(--rojo); }
#mc-bloque .ayuda { margin: 0 0 12px; }

.mc-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-acciones .btn-peligro { background: var(--rojo); }

.mc-ventana { max-width: 460px; }
.mc-aviso {
    font-size: 14px; line-height: 1.55;
    background: var(--rojo-suave, #fbeceb);
    border: 1px solid var(--rojo-suave, #f2d3d0);
    border-radius: var(--radio-peq);
    padding: 12px 14px;
    margin: 4px 0 16px;
    color: var(--texto);
}
.mc-aviso b { color: var(--rojo); }
.mc-ventana .campo { margin-bottom: 13px; }
.mc-ventana .campo label { display: block; margin-bottom: 6px; }
.mc-ventana .campo input { width: 100%; }
.mc-error {
    font-size: 13.5px; color: var(--rojo);
    background: var(--rojo-suave, #fbeceb);
    border-radius: 8px; padding: 9px 12px; margin: 0 0 13px;
}
.mc-botones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 520px) {
    .mc-botones { flex-direction: column-reverse; }
    .mc-botones .btn { width: 100%; }
}

/* ================================================================
   LOS DOS FILTROS A LA VISTA (09/11/2026)
   ================================================================
   Cliente y tipo, uno al lado del otro. En el móvil se apilan: dos desplegables
   de lado en una pantalla estrecha no se leen.
   ================================================================ */

.mg-dos { display: flex; gap: 12px; align-items: flex-start; }
.mg-dos .campo { flex: 1 1 0; min-width: 0; }
@media (max-width: 620px) {
    .mg-dos { flex-direction: column; gap: 10px; }
}

/* Las porciones del quesito que se pueden tocar: se nota en el cursor y al pasar por encima. */
.quesito-leyenda li.se-puede-tocar { cursor: pointer; border-radius: 8px; transition: background var(--transicion, .15s); }
.quesito-leyenda li.se-puede-tocar:hover,
.quesito-leyenda li.se-puede-tocar:focus-visible { background: var(--papel-2); outline: none; }

/* ================================================================
   LA PANTALLA DEL QUESITO (09/11/2026)
   ================================================================
   Los gastos del mes por tipo. Cada tipo es un desplegable: cerrado se ve el
   nombre, cuántos gastos y la suma; abierto, los apuntes que están contando.
   El color de cada tipo viene del propio módulo (--color-tipo).
   ================================================================ */

.qt-total-caja { padding: 16px 18px; margin-bottom: 16px; }
.qt-total-nombre {
    font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texto3); margin: 0 0 2px;
}
.qt-total {
    font-family: var(--fuente-marca);
    font-size: 34px; font-weight: 600; letter-spacing: -.03em;
    margin: 0 0 2px; color: var(--verde-900);
    font-variant-numeric: tabular-nums;
}
.qt-total-caja .ayuda { margin: 0; }

.qt-tipos { display: flex; flex-direction: column; gap: 10px; }

.qt-tipo {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
}
.qt-cab {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}
.qt-cab::-webkit-details-marker { display: none; }
.qt-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.qt-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qt-nombre strong { font-size: 14.5px; font-weight: 600; }
.qt-nombre small { font-size: 12px; color: var(--texto3); }
.qt-importe {
    font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; color: var(--texto);
}
.qt-flecha { color: var(--texto3); font-size: 20px; transition: transform var(--transicion, .15s); }
.qt-tipo[open] .qt-flecha { transform: rotate(180deg); }
.qt-tipo[open] { box-shadow: var(--sombra); }

.qt-cuerpo { border-top: 1px solid var(--linea); padding: 4px 8px 8px; }
.qt-lista { list-style: none; margin: 0; padding: 0; }
.qt-fila { display: flex; justify-content: space-between; gap: 10px; padding: 8px 6px; font-size: 13.5px; }

@media (max-width: 700px) {
    .qt-total { font-size: 28px; }
}


/* Avisar de un fallo (09/11/2026): discreto, debajo de los botones de verdad. */
.gs-avisar { margin: 12px 0 0; }
.gs-avisar-boton {
    font: inherit; background: none; border: 0; padding: 0;
    color: var(--texto3); text-decoration: underline; cursor: pointer;
}
.gs-avisar-boton:hover, .gs-avisar-boton:focus-visible { color: var(--texto); }


/* Fallos de los clientes, en el panel (09/11/2026). Discreto: es información, no alarma. */
.adm-fallos { margin-top: 14px; }
.adm-fallos h3 { font-size: 13px; margin: 0 0 6px; color: var(--texto2); }
.adm-fallos ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.adm-fallos li { font-size: 13px; color: var(--texto); font-variant-numeric: tabular-nums; }