/* Efecto al pulsar (feedback visual básico sin romper el diseño) */
.btn-cuadrado:active:not(:disabled),
.btn-circular:active:not(:disabled) {
    transform: scale(0.98);
}

/* Estados deshabilitados */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Bug #19: .link-caption necesita estilos propios para verse como un elemento clickable */
.link-caption {
    background: none;
    border: none;
    color: var(--blanco);
    text-decoration: underline;
    cursor: pointer;
    text-align: center;
    padding: 4px;
}

[data-theme="high-contrast"] .link-caption {
    color: var(--negro-suave);
}

.icon-button {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* =========================================
   ESTRUCTURA DE PANTALLAS ("Pixel Perfect")
   ========================================= */

/* * RESPONSIVE (Punto 1): 
 * El contenedor base siempre ocupa el 100% del ancho del viewport.
 * Solo le ponemos un max-width y lo centramos para pantallas grandes (PC/Tablets).
 */
.pantalla-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--celeste);
    width: 100%;       /* Ocupa el ancho completo en móvil */
    height: 100dvh;    /* Bloqueado a la altura del dispositivo */
    max-width: 480px;   /* Un ancho de 'iPhone Pro Max' aprox para que no se vea infinito en PC */
    margin: 0 auto;     
    box-shadow: 0 0 50px rgba(0,0,0,0.1); /* Toque premium en escritorio */
    overflow: hidden;   /* El scroll lo manejan los hijos */
    position: relative; /* Crítico para el botón flotante */
}

/* Modo Alto Contraste - El fondo se mantiene celeste */
[data-theme="high-contrast"] .pantalla-container {
    background-color: var(--celeste);
}

/* Bloque 1: Header-Introduccion */
.header-intro {
    display: flex;
    padding: 24px;
    align-items: center;
    align-self: stretch; /* Se estira en su padre */
    border-bottom: 1.5px solid var(--negro-suave);
    background-color: var(--blanco);
    width: 100%; /* Aseguramos responsive */
}

.header-intro h2 {
    color: var(--celeste);
}
[data-theme="high-contrast"] .header-intro h2 {
    color: var(--negro-suave);
}

/* Bloque 2: Formulario */
.formulario-box {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex: 1; /* Ocupa el espacio vertical restante */
    align-self: stretch; /* Se estira en su padre */
    width: 100%; /* Aseguramos responsive */
    overflow-y: auto; /* Permite scroll interno si el form es largo */
}

/* * FILL DEL SUBRAYADO (Punto 2): 
 * Para que el subrayado ocupe todo el espacio útil, el elemento que tiene 
 * la tipografía (el span) debe tener flex: 1 dentro del botón flexbox 
 * y text-decoration: underline.
 */

/* Ajuste general para textos dentro de botones que necesitan subrayado completo */
.btn-text-fill {
    flex: 1; /* Ocupa todo el espacio útil restante en el botón flexbox */
    text-decoration: underline; /* Subrayado activo */
    white-space: nowrap; /* Evita saltos de línea raros en botones cortos */
    /* El color negro-suave ya viene heredado de .btn-cuadrado/.btn-circular */
}

/* Botón Cuadrado (Ocupa todo el ancho por defecto) */
.btn-cuadrado {
    display: flex;
    width: 100%; /* Fill para pillar todo el ancho */
    padding: 16px;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--negro-suave);
    background-color: var(--blanco);
    color: var(--negro-suave);
    height: max-content;
    outline: none;
    transition: transform 0.1s ease, background-color 0.2s ease;
}

/* En el botón cuadrado (el toggle), el texto se alinea a la izquierda */
.btn-cuadrado .btn-text-fill {
    text-align: left;
}

/* Botón Circular (Forma de píldora) */
.btn-circular {
    display: inline-flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: 40px;
    border: 1px solid var(--negro-suave);
    background-color: var(--blanco);
    color: var(--negro-suave);
    outline: none;
    transition: transform 0.1s ease, opacity 0.2s ease;
}

/* En el botón circular (Iniciar sesión/Crear), el texto se centra */
.btn-circular .btn-text-fill {
    text-align: center;
}

/* Variante azul del botón circular */
.btn-circular.bg-celeste {
    background-color: var(--celeste);
    color: var(--negro-suave); /* Cambiado de --blanco a --negro-suave */
}

/* En modo alto contraste ya hereda el color negro-suave */
[data-theme="high-contrast"] .btn-circular.bg-celeste {
    color: var(--negro-suave);
}

/* Inputs como contenedor con responsive (100% ancho) */
.input-base {
    display: flex;
    width: 100%; 
    padding: 16px;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--negro-suave);
    background-color: var(--blanco);
    outline: none;
}

.input-base input {
    flex: 1;
    border: none;
    border-bottom: 1px solid var(--negro-suave);
    background: transparent;
    padding-bottom: 4px;
    outline: none;
    color: rgba(26, 26, 26, 0.75);
    font-family: inherit;
    font-size: 16px;
}

/* Inputs con icono (el de la cámara) */
.input-with-icon {
    display: flex;
    width: 100%; 
    align-items: center;
    border: 1px solid var(--negro-suave);
    background-color: var(--blanco);
    padding: 0 16px;
}

.input-with-icon input {
    flex: 1; 
    border: none;
    border-bottom: 1px solid var(--negro-suave);
    margin: 16px 0;
    padding-bottom: 4px;
    outline: none;
    color: rgba(26, 26, 26, 0.75);
    background: transparent;
}

/* Bloque 3: Botones (Footer) */
.botones-footer {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: center; /* Centrado para que las captions se vean bien */
    gap: 16px;
    align-self: stretch; /* Se estira en su padre */
    width: 100%; /* Aseguramos responsive */
}

/* =========================================
   DASHBOARD Y COMPONENTES ESPECÍFICOS
   ========================================= */

/* Para que el botón flotante y modales se posicionen bien dentro del "móvil" */
/* Eliminamos la redundancia ya declarada arriba */

/* Header del Dashboard */
.header-dash {
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-bottom: 1.5px solid var(--negro-suave);
    background-color: var(--blanco);
    width: 100%;
}

.saludo-row {
    display: flex;
    width: 100%; /* Responsive, reemplaza los 364px fijos */
    justify-content: space-between;
    align-items: center;
}

/* Contador de Dinero (La Píldora) */
.contador-dinero {
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: flex-end;
    align-self: stretch;
    border-radius: 50px;
    border: 5px solid var(--celeste);
    cursor: pointer; /* Indica que se puede hacer click para editar */
    transition: transform 0.1s ease;
}

.contador-dinero:active {
    transform: scale(0.98);
}

.contador-dinero .cantidad-actual {
    color: var(--celeste);
}

[data-theme="high-contrast"] .contador-dinero .cantidad-actual {
    color: var(--negro-suave); /* Celeste sobre blanco -> Negro suave */
}

.contador-dinero .cantidad-max {
    color: rgba(26, 26, 26, 0.75); /* Negro suave 75% */
    /* Usa tu clase .h2 del main.css */
}

/* Contenido Principal (Lista de gastos) */
.contenido-principal {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    flex: 1;
    align-self: stretch;
    width: 100%;
    overflow-y: auto; /* Permite hacer scroll */
    
    /* LA CLAVE: Permite que el contenedor respete el límite de la pantalla y active el scroll */
    min-height: 0; 
    
    /* Nota: Hemos quitado el padding-bottom de 96px de aquí */
}

/* TRUCO PARA EL HUECO DEL BOTÓN FLOTANTE: 
   Esto crea un bloque invisible al final de la lista de gastos para que el botón no tape el último elemento */
.contenido-principal::after {
    content: "";
    display: block;
    min-height: 96px; /* El espacio extra que antes tenías en el padding */
    width: 100%;
    flex-shrink: 0; /* Evita que Flexbox aplaste este hueco */
}

.dia-bloque {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

/* Variación del botón cuadrado para los gastos (Concepto izq, Precio der) */
.btn-gasto {
    justify-content: space-between; /* Empuja los elementos a los extremos */
}
.btn-gasto .concepto { flex: 1; text-align: left; }
.btn-gasto .precio { font-weight: 600; }

/* Botón Flotante (FAB - Añadir Registro) */
.fab-button {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%); /* Lo centra perfectamente */
    width: 275px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    border: 1px solid var(--negro-suave);
    background-color: var(--blanco);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Ligera sombra opcional para que flote visualmente */
}

/* =========================================
   MODALES Y MENÚ LATERAL (Overlays)
   ========================================= */

/* Fondo oscuro semitransparente para todos los modales */
.overlay-background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display: none; /* Oculto por defecto */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay-background.active {
    display: block;
    opacity: 1;
}

/* Modal Bottom Sheet (Ver Registro) */
.modal-bottom-sheet {
    position: absolute;
    bottom: -100%; /* Escondido abajo del todo */
    left: 0; right: 0;
    background-color: var(--blanco);
    border-radius: 40px 40px 0 0; /* Curvas solo arriba */
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 51;
    transition: bottom 0.3s ease-out; /* Animación de subida */
    color: var(--negro-suave); /* Forzamos color de texto por defecto */
}

.modal-bottom-sheet p,
.modal-bottom-sheet h2 {
    color: var(--negro-suave) !important;
}

[data-theme="high-contrast"] .modal-bottom-sheet p,
[data-theme="high-contrast"] .modal-bottom-sheet h2 {
    color: var(--negro-suave) !important;
}

/* Drag Handle para el Modal */
.modal-drag-handle {
    width: 48px;
    height: 5px;
    background-color: var(--negro-suave);
    border-radius: 4px;
    margin: 0 auto 24px auto;
    opacity: 0.5; /* Un poco más sutil como en diseños premium */
}

/* Contenedor para los botones del modal */
.modal-botones-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 16px;
    margin-top: 24px;
}

.modal-botones-row .btn-circular {
    flex: 1;
}

/* Estilos para el Calendario Mensual (Mes Grid) */
.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 16px;
}

.calendar-day-header {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--negro-suave);
    padding: 8px 0;
}

.calendar-day-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--negro-suave);
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
}

.calendar-day-cell.not-current-month {
    opacity: 0.3;
}

/* Fila de semana seleccionada - Forma de línea entera */
.week-selection-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
}

.week-selection-row.active-week {
    background-color: var(--celeste);
    border-radius: 40px; /* Capsule shape */
}

/* No forzamos blanco nunca en el calendario, siempre negro suave */
.calendar-day-cell, 
.week-selection-row.active-week .calendar-day-cell {
    color: var(--negro-suave) !important;
}

/* Modal Central (QR) */
.modal-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    max-width: 380px;
    aspect-ratio: 1;
    background-color: var(--blanco);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border: 1.5px solid var(--negro-suave);
}

.qr-canvas-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-canvas-container canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

.overlay-background.active .modal-bottom-sheet {
    bottom: 0; /* Sube y se acopla abajo */
}

/* Menú Lateral (Sidebar) */
.sidebar {
    position: absolute;
    top: 0; bottom: 0; right: -100%; /* Escondido a la derecha */
    width: calc(100% - 44px); /* Deja 44px libres a la izq */
    background-color: var(--blanco);
    z-index: 51;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease-out; /* Animación de entrada lateral */
    border-left: 1.5px solid var(--negro-suave);
}

.overlay-background.active .sidebar {
    right: 0; /* Entra en pantalla */
}

/* Layout interno del Sidebar */
.sidebar-calendario {
    flex: 1;
    padding: 24px;
    /* Aquí iría el CSS específico de tu calendario */
}

.sidebar-footer {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1.5px solid var(--negro-suave);
}

/* Estilos dinámicos para el Calendario (Readme Req) */
.week-row {
    margin-bottom: 8px;
    justify-content: flex-start !important;
    text-align: left;
    position: relative;
    border-radius: 8px; /* Un toque más suave para las filas */
}

.week-row.selected-week {
    background-color: var(--celeste) !important;
    color: var(--blanco) !important;
    border-color: var(--negro-suave);
}

[data-theme="high-contrast"] .week-row.selected-week {
    color: var(--negro-suave) !important;
}

.today-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.today-circle {
    width: 12px;
    height: 12px;
    background-color: var(--celeste);
    border: 1.5px solid var(--negro-suave);
    border-radius: 50%;
    flex-shrink: 0;
}

.week-row.selected-week .today-circle {
    background-color: var(--blanco);
}
[data-theme="high-contrast"] .week-row.selected-week .today-circle {
    background-color: var(--negro-suave);
}