/*

 * Animación de expansión de “Nueva Tasación”

 * -----------------------------------------

 * HTML:  index.html → <main id="homeStage" class="home-stage">

 *         → <div id="tarjetaNuevaTasacion" class="tarjeta-home">

 * JS:    js/home-tasacion.js → abrirTasacionHome() / cerrarTasacionHome()

 *        añade o quita la clase home-stage--expandida en #homeStage

 * Layout base del recuadro gris: css/shell.css → sección “Escenario inicio” (.home-stage)

 */



/* Tamaño cerrado de la tarjeta (se anima hacia 100% al expandir) */

:root {



    --home-card-ancho: 320px;



    --home-card-alto: 140px;



    --home-stage-padding: 24px;

}



/* Padding uniforme del escenario (sin “marco invisible” por barra perfil/sol) */

.home-stage {



    padding: var(--home-stage-padding);



    box-sizing: border-box;



    transition: none;

}



/*

 * La animación principal: width y height de .tarjeta-home

 * timing-function: linear (pedido explícito)

 */

.tarjeta-home {



    width: var(--home-card-ancho);



    height: var(--home-card-alto);



    max-width: 100%;



    flex-shrink: 0;



    position: relative;



    z-index: 2;



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



    overflow: hidden;



    box-sizing: border-box;



    transition: none;

}



.tarjeta-home-resumen {



    display: flex;



    flex-direction: column;



    justify-content: center;



    align-items: center;



    flex: 1;



    width: 100%;



    min-height: 0;



    cursor: pointer;



    transition: none;



    text-decoration: none;



    color: inherit;

}



.tarjeta-home-panel {



    display: none;



    flex: 1;



    flex-direction: column;



    min-height: 0;



    width: 100%;



    padding: 28px 32px 0;



    box-sizing: border-box;



    opacity: 0;



    transition: none;

}



.tarjeta-home .icono-tarjeta {



    width: 140px;



    height: 140px;

}



.tarjeta-home-resumen h1 {



    margin-top: 8px;



    font-size: 1.65rem;

}



.tarjeta-home-resumen:hover {



    color: inherit;

}



.tarjeta-home:not([aria-expanded="true"]):hover {



    background: var(--color-primary-light);



    transform: none;



    border: 2px solid var(--color-primary);

}



/*

 * Estado expandido (clase puesta por home-tasacion.js)

 * Solo crece la tarjeta; #homeStage sigue centrándola con flex (shell.css)

 */

.home-stage--expandida {



    padding: 0;

}



.home-stage--expandida .tarjeta-home {



    position: relative;



    width: 100%;



    height: 100%;



    max-width: none;



    transform: none;



    border: none;



    cursor: default;



    align-items: stretch;



    justify-content: flex-start;

}



.home-stage--expandida .tarjeta-home-resumen {



    position: absolute;



    opacity: 0;



    pointer-events: none;



    flex: 0;



    height: 0;



    overflow: hidden;

}



.home-stage--expandida .tarjeta-home-panel {



    display: flex;



    opacity: 1;

}



.home-stage--sin-animacion,

.home-stage--sin-animacion .tarjeta-home,

.home-stage--sin-animacion .tarjeta-home-resumen,

.home-stage--sin-animacion .tarjeta-home-panel,

.home-stage--sin-animacion.home-stage {



    transition: none !important;

}



.home-stage--expandida .tarjeta-home:hover {



    transform: none;



    background: var(--color-white);



    border: none;

}



@media (max-width: 900px) {



    :root {



        --home-card-alto: 320px;

    }



    .tarjeta-home:not([aria-expanded="true"]) {



        width: min(var(--home-card-ancho), 100%);

    }

}



.home-inicio-saludo {
    position: absolute;

    top: 50%;

    left: var(--home-stage-padding);

    transform: translateY(-50%);

    z-index: 1;

    pointer-events: none;

    max-width: min(600px, 90vw);

    padding-left: 20px;

}

.home-inicio-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px var(--home-stage-padding);
    box-sizing: border-box;
}

.home-inicio-contenido {
    width: 100%;
    max-width: 1080px;
    height: 100%;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    text-align: left;
    box-sizing: border-box;
}

.home-acciones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

/* Solo en móvil: Nueva tasación arriba, otros abajo compartiendo ancho */
@media (max-width: 767px) {
    .home-acciones {
        grid-template-columns: 1fr;
        margin-top: 16px;
    }
    
    .home-acciones-secundario {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 16px;
    }
}

.home-acciones-secundario {
    display: none; /* Oculto en desktop */
}



body:not([data-vista="inicio"])

    .home-inicio-saludo,

.home-stage--expandida .home-inicio-saludo {



    display: none;

}



.home-inicio-fecha {



    margin: 0 0 8px;



    font-family: var(--font-family-base);



    font-size: 17px;



    font-weight: var(--font-weight-heading);



    color: var(--color-text-secondary);



    text-transform: capitalize;

}



.home-inicio-titulo {
    margin: 0;

    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);

    font-weight: var(--font-weight-heading);

    color: var(--color-text-primary);

    text-align: left;

}



.home-action-card {
    display: flex;
    gap: 15px;
    align-items: center;
    min-height: 170px;
    padding: 24px;
    background: var(--color-white);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    pointer-events: auto;
    box-sizing: border-box;
}

.home-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.btn-nueva-tasacion-home-card {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-white);
}

.btn-nueva-tasacion-home-card:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-nueva-tasacion-home-plus {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--color-white);
}

.btn-nueva-tasacion-home-label {
    font-size: 1.6rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.3;
}

.btn-stat-home-card {
    justify-content: space-between;
    background: var(--color-white);
    border: 1px solid var(--color-border);
}

.btn-stat-home-card:hover {
    border-color: var(--color-primary);
}

.home-stat-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.home-stat-titulo {
    font-size: 20px;
    font-weight: var(--font-weight-label);
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.home-stat-numero {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.home-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
    flex-shrink: 0;
}

.home-mini-chart-bar {
    display: block;
    width: 12px;
    border-radius: 4px;
    background: var(--color-primary);
}

.home-stat-icono {
    font-size: 3rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.home-recientes-card {
    margin-top: 20px;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 24px;
    box-sizing: border-box;
    pointer-events: auto;
}

.home-recientes-titulo {
    margin: 0 0 16px;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-heading);
    color: var(--color-text-primary);
    text-align: left;
}

.home-recientes-cuadro {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 8px 16px;
    box-sizing: border-box;
}

.home-recientes-header,
.home-recientes-fila {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 14px 8px;
}

.home-recientes-header {
    padding-top: 8px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-label);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.home-recientes-fila {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
}

.home-recientes-fila:last-child {
    border-bottom: none;
}

.home-recientes-fila:hover {
    background: var(--color-primary-lighter);
}

.home-recientes-fila:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.home-recientes-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.home-recientes-vacio {
    margin: 0;
    padding: 16px 8px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
}

@media (max-width: 900px) {
    .home-acciones {
        grid-template-columns: 1fr;
    }
    
    .home-acciones-secundario {
        grid-template-columns: 1fr;
    }

    .home-inicio-contenido {
        height: auto;
        overflow-y: auto;
    }
}

/* Solo en móvil (< 768px): redistribución de botones */
@media (max-width: 767px) {
    .home-acciones {
        grid-template-columns: 1fr;
        margin-top: 16px;
    }
    
    .home-acciones-secundario {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 16px;
    }
    
    .home-inicio-fecha {
        margin: 0 0 4px;
        font-size: 14px;
    }
    
    .home-inicio-titulo {
        margin: 0 0 12px;
    }
}



@media (prefers-reduced-motion: reduce) {



    .home-stage,

    .tarjeta-home,

    .tarjeta-home-resumen,

    .tarjeta-home-panel {



        transition: none !important;

    }

}