/* Elementos nuevos de la app real (fase 3), para revisión. No modifica estilos aprobados. */
#finanzas-familia .ff-salir{display:contents}
#finanzas-familia .ff-salir .ff-action{margin-top:0}
#finanzas-familia .ff-cambio-banco [data-fx-etiqueta]{display:block}
/* Revisión de Diana (28/10/2026): «Corregir» en cada registro, para revisión. */
#finanzas-familia .ff-corregir{border:1px solid var(--ff-line);background:var(--ff-panel);color:var(--ff-accent);border-radius:7px;padding:5px 9px;font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}
#finanzas-familia .ff-corregir:hover{border-color:var(--ff-accent)}
#finanzas-familia .ff-corregir:focus-visible{outline:2px solid var(--ff-accent);outline-offset:2px}
#finanzas-familia .ff-row-acciones{display:flex;align-items:center;gap:10px;flex-shrink:0}
#finanzas-familia .ff-action+.ff-corregir{margin-left:8px;vertical-align:middle}
#finanzas-familia .ff-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#finanzas-familia [data-eliminar]{color:var(--ff-expense)}
/* Revisión de Diana: lo que queda después de ahorrar y pagar deudas, destacado en verde (rojo si es negativo). */
#finanzas-familia .ff-fin-row.ff-destacado{background:color-mix(in srgb,var(--ff-income) 12%,var(--ff-panel));border:2px solid var(--ff-income);border-radius:12px;padding:18px 16px;margin-top:20px}
#finanzas-familia .ff-fin-row.ff-destacado span{font-size:16px;font-weight:700;color:var(--ff-income)}
#finanzas-familia .ff-fin-row.ff-destacado strong{font-size:28px;font-weight:750;color:var(--ff-income);letter-spacing:-.5px}
#finanzas-familia .ff-fin-row.ff-destacado.ff-negativo{background:color-mix(in srgb,var(--ff-expense) 12%,var(--ff-panel));border-color:var(--ff-expense)}
#finanzas-familia .ff-fin-row.ff-destacado.ff-negativo span,#finanzas-familia .ff-fin-row.ff-destacado.ff-negativo strong{color:var(--ff-expense)}
#finanzas-familia .ff-fin-row.ff-destacado strong{white-space:nowrap}
@media (max-width:560px){#finanzas-familia .ff-fin-row.ff-destacado{flex-direction:column;align-items:flex-start;gap:6px}#finanzas-familia .ff-fin-row.ff-destacado strong{font-size:26px;text-align:left}}
/* Revisión de Diana: alertas (errores de datos, valores que no cuadran, información que falta) en rojo con signo de alerta.
   Solo en la app con cuenta (data-modo="real"); /demo conserva la referencia aprobada. */
#finanzas-familia[data-modo="real"] [role="alert"]:not(:empty),#finanzas-familia[data-modo="real"] #ff-form-error:not(:empty):not([data-estado]),#finanzas-familia[data-modo="real"] .ff-alerta{display:flex;gap:9px;align-items:flex-start;color:var(--ff-expense);background:color-mix(in srgb,var(--ff-expense) 9%,var(--ff-panel));border:1px solid color-mix(in srgb,var(--ff-expense) 45%,transparent);border-radius:8px;padding:10px 12px;font-size:13px;font-weight:600;line-height:1.45}
#finanzas-familia[data-modo="real"] [role="alert"]:not(:empty)::before,#finanzas-familia[data-modo="real"] #ff-form-error:not(:empty):not([data-estado])::before,#finanzas-familia[data-modo="real"] .ff-alerta::before{content:"";flex:0 0 17px;height:17px;margin-top:1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat}
/* Fase 4: base de clientes (pantalla nueva, para revisión). */
#finanzas-familia .ff-form-grid textarea{font:inherit;font-size:12px;color:var(--ff-ink);background:var(--ff-panel);border:1px solid var(--ff-line);border-radius:8px;padding:8px 9px;resize:vertical}
#finanzas-familia .ff-cliente[hidden]{display:none}
/* Revisión de Diana: alerta junto al correo o celular del cliente mal escrito. */
#finanzas-familia .ff-form-grid .ff-alerta-campo{grid-column:1/-1;margin:0}
#finanzas-familia .ff-form-grid input[aria-invalid="true"]{border-color:var(--ff-expense)}
/* Fase 5: recordatorios de cobro de hoy (vencidos en rojo). */
/* Recordatorios del Inicio: recuadro compacto con borde naranja (pedido de Diana). */
#finanzas-familia .ff-avisos{border:2px solid var(--ff-orange);padding:12px 16px;max-width:620px}
#finanzas-familia .ff-avisos h3{font-size:13px;margin:0 0 4px;color:var(--ff-orange)}
#finanzas-familia .ff-avisos .ff-row{padding:6px 0;font-size:12px}
#finanzas-familia .ff-avisos .ff-row span small{font-size:10.5px}
#finanzas-familia .ff-avisos .ff-action{min-height:30px;padding:4px 9px;font-size:11px}
#finanzas-familia .ff-avisos .ff-hint{font-size:10.5px;margin-top:6px}
#finanzas-familia .ff-aviso-vencido>span:first-child,#finanzas-familia .ff-aviso-vencido strong,#finanzas-familia .ff-aviso-vencido small{color:var(--ff-expense)}
#finanzas-familia .ff-aviso-vencido>span:first-child::before{content:"Vencido · ";font-weight:600}
/* Pedido de Diana: aviso emergente al abrir la app con los cobros de hoy y vencidos. */
#finanzas-familia .ff-emergente{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--ff-ink) 45%,transparent)}
#finanzas-familia .ff-emergente-panel{width:min(340px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--ff-panel);color:var(--ff-ink);border:2px solid var(--ff-orange);border-radius:12px;padding:16px;box-shadow:0 12px 36px rgba(0,0,0,.22)}
#finanzas-familia .ff-emergente-panel h3{font-size:15px;margin:0 0 2px;color:var(--ff-orange)}
#finanzas-familia .ff-emergente-resumen{margin:0 0 8px;font-size:12px;color:var(--ff-muted)}
#finanzas-familia .ff-emergente-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--ff-line);font-size:13px}
#finanzas-familia .ff-emergente-fila small{display:block;font-size:11px;color:var(--ff-muted)}
#finanzas-familia .ff-emergente-fila strong{white-space:nowrap;font-variant-numeric:tabular-nums}
#finanzas-familia .ff-emergente-panel .ff-hint{margin:6px 0 0}
#finanzas-familia .ff-emergente-panel .ff-actions{margin-top:12px}
/* Fase 6: compartir (pantalla nueva, para revisión) y espacio compartido en modo «solo ver». */
#finanzas-familia .ff-compartido{margin:0 0 14px;padding:10px 14px;border:1px solid var(--ff-line);border-left:4px solid var(--ff-accent);border-radius:8px;background:var(--ff-panel);font-size:12px}
#finanzas-familia .ff-enlace input{font-size:11px}
#finanzas-familia.ff-solo-lectura [data-editor]:not([data-editor="close"]),#finanzas-familia.ff-solo-lectura [data-corregir],#finanzas-familia.ff-solo-lectura [data-eliminar-negocio],#finanzas-familia.ff-solo-lectura [data-emergente-ir]{display:none}
#finanzas-familia.ff-solo-lectura [data-ant],#finanzas-familia.ff-solo-lectura label:has([data-ant]),#finanzas-familia.ff-solo-lectura select[name="familyBase"]{pointer-events:none;opacity:.55}

/* D-40 · tema oscuro: logo oficial para fondo oscuro (uderix-primary-dark-compact-horizontal), sin el recuadro claro; misma proporción 3:2 y encuadre que el logo aprobado. */
@media (prefers-color-scheme: dark){#finanzas-familia[data-modo="real"] .ff-brand-mark{background:transparent}}