/* ================================================================
   iStar Flow · Layout add-on limpio
   Píldoras, responsive, espaciados y caja descriptiva fija.
   No modifica la lógica ni el diagrama base.
================================================================ */

/* Layout general */
.istar-energy-flow-v3 .energy-flow-grid {
    grid-template-columns: minmax(0, 1.34fr) minmax(286px, .60fr);
    min-height: 430px;
}

/* Panel del diagrama */
.istar-energy-flow-v3 .energy-flow-stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(16px, 2vw, 24px);
    padding-bottom: clamp(18px, 2.2vw, 26px);
}

/* Barra superior del diagrama */
.istar-energy-flow-v3 .energy-stage-topbar {
    margin-bottom: 6px;
    padding: 9px 11px;
}

/* SVG / diagrama */
.istar-energy-flow-v3 .energy-flow-svg {
    flex: 0 0 auto;
    width: 100%;
    min-height: 300px;
    max-height: 342px;
}

/* ================================================================
   Píldoras informativas debajo del diagrama
================================================================ */

.istar-energy-flow-v3 .energy-flow-stage .energy-flow-summary,
.istar-energy-flow-v3 .energy-flow-stage-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-content: stretch;
    gap: clamp(12px, 2vw, 22px);
    width: min(100%, 760px);
    max-width: 100%;
    margin: clamp(16px, 2vw, 24px) auto 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.istar-energy-flow-v3 .energy-flow-stage .energy-chip,
.istar-energy-flow-v3 .energy-flow-stage-summary .energy-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 35px;
    height: 35px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}

/* Ocultar resumen duplicado si existiera dentro del panel derecho */
.istar-energy-flow-v3 .energy-flow-panel > .energy-flow-summary {
    display: none !important;
}

/* ================================================================
   Panel de lectura / controles
================================================================ */

.istar-energy-flow-v3 .energy-flow-panel {
    justify-content: flex-start;
    gap: 10px;
    padding: clamp(18px, 2vw, 24px);
}

.istar-energy-flow-v3 .energy-flow-panel-head {
    padding-bottom: 4px;
    margin-bottom: 0;
}

.istar-energy-flow-v3 .energy-flow-panel-head span {
    margin-bottom: 4px;
    font-size: .70rem;
}

.istar-energy-flow-v3 .energy-flow-panel-head strong {
    font-size: clamp(1.22rem, 1.55vw, 1.58rem);
    line-height: 1.04;
}

/* Este es el ajuste del espacio entre el encabezado “Modo de lectura”
   y el primer bloque “Condición” */
.istar-energy-flow-v3 .energy-flow-controls {
    gap: 10px;
    margin-top: 0;
    padding-top: 0;
}

.istar-energy-flow-v3 .energy-control-block {
    margin-top: 0;
    margin-bottom: 12px;
}

.istar-energy-flow-v3 .energy-control-block:first-child {
    margin-top: 0;
}

.istar-energy-flow-v3 .energy-control-title {
    margin-bottom: 6px;
    font-size: .70rem;
}

/* Grupo base de botones */
.istar-energy-flow-v3 .energy-control-group,
.istar-energy-flow-v3 .energy-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    padding: 4px;
    border-radius: 10px;
}

/* Nota:
   El alto real de .energy-btn quedó corregido desde energy-flow.css,
   porque ahí estaba la regla base fuerte que lo pisaba.
   No repetir ese fix acá para evitar conflictos. */

/* ================================================================
   Caja descriptiva fija
================================================================ */

.istar-energy-flow-v3 #energyFlowExplainer,
.istar-energy-flow-v3 .energy-flow-explainer {
    min-height: 156px;
    height: 156px;
    max-height: 156px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 13px;
    border-radius: 12px;
}

.istar-energy-flow-v3 .energy-flow-explainer strong {
    margin-bottom: 5px;
    font-size: .90rem;
    line-height: 1.28;
}

.istar-energy-flow-v3 .energy-flow-explainer span {
    font-size: .84rem;
    line-height: 1.42;
}

/* ================================================================
   CTAs
================================================================ */

.istar-energy-flow-v3 .energy-flow-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 2px;
    flex-shrink: 0;
}

.istar-energy-flow-v3 .energy-flow-actions .btn {
    justify-content: center;
    min-height: 38px;
    padding: 9px 14px;
    font-size: .88rem;
}

/* ================================================================
   Tablet
================================================================ */

@media (max-width: 1120px) {
    .istar-energy-flow-v3 .energy-flow-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .istar-energy-flow-v3 .energy-flow-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .istar-energy-flow-v3 .energy-flow-panel-head,
    .istar-energy-flow-v3 .energy-flow-explainer,
    .istar-energy-flow-v3 .energy-flow-actions {
        grid-column: 1 / -1;
    }
}

/* ================================================================
   Mobile
================================================================ */

@media (max-width: 720px) {
    .istar-energy-flow-v3 .energy-flow-card {
        border-radius: 12px;
    }

    .istar-energy-flow-v3 .energy-flow-stage,
    .istar-energy-flow-v3 .energy-flow-panel {
        padding: 10px 14px;
    }

    .istar-energy-flow-v3 .energy-flow-stage {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .istar-energy-flow-v3 .energy-flow-svg {
        min-height: 270px;
        max-height: none;
    }

    .istar-energy-flow-v3 .energy-flow-stage .energy-flow-summary,
    .istar-energy-flow-v3 .energy-flow-stage-summary {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        margin-top: 16px;
    }

    .istar-energy-flow-v3 .energy-flow-stage .energy-chip,
    .istar-energy-flow-v3 .energy-flow-stage-summary .energy-chip {
        min-height: 35px;
        height: 35px;
        padding: 6px 10px;
        font-size: .78rem;
        border-radius: 6px;
    }

    .istar-energy-flow-v3 .energy-flow-panel {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        padding-top: 8px;
        padding-bottom: 10px;
    }

    .istar-energy-flow-v3 .energy-flow-panel-head {
        padding-bottom: 2px;
        margin-bottom: 0;
    }

    .istar-energy-flow-v3 .energy-flow-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        margin-top: 0;
        padding-top: 0;
    }

    .istar-energy-flow-v3 .energy-control-block {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .istar-energy-flow-v3 .energy-control-title {
        margin-bottom: 6px;
    }

    .istar-energy-flow-v3 .energy-control-group,
    .istar-energy-flow-v3 .energy-control-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px;
        width: 100%;
        padding: 4px;
        border-radius: 8px;
    }

    .istar-energy-flow-v3 #energyFlowExplainer,
    .istar-energy-flow-v3 .energy-flow-explainer {
        min-height: 168px;
        height: 168px;
        max-height: 168px;
        padding: 16px 18px;
        border-radius: 10px;
    }

    .istar-energy-flow-v3 #energyFlowExplainer p {
        margin-bottom: 0;
    }

    .istar-energy-flow-v3 .energy-flow-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        width: 100%;
        margin-top: 4px;
    }

    .istar-energy-flow-v3 .energy-flow-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 10px 8px;
        border-radius: 9px;
        font-size: clamp(.78rem, 3.35vw, .90rem);
        line-height: 1.12;
        white-space: normal;
    }
}

@media (max-width: 380px) {
    .istar-energy-flow-v3 .energy-flow-actions {
        gap: 8px;
    }

    .istar-energy-flow-v3 .energy-flow-actions .btn {
        font-size: .76rem;
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* ================================================================
   iStar Flow · Mobile compact card spacing v1.3
   Reduce aire interno superior/inferior de las tarjetas en mobile
================================================================ */

@media (max-width: 720px) {

    /* Tarjeta del diagrama */
    .istar-energy-flow-v3 .energy-flow-stage {
        padding-top: 8px !important;
        padding-bottom: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .istar-energy-flow-v3 .energy-stage-topbar {
        margin-bottom: 0 !important;
        padding: 8px 10px !important;
    }

    /* Acá estaba gran parte del espacio inútil */
    .istar-energy-flow-v3 .energy-flow-svg {
        min-height: 200px !important;
        height: 200px !important;
        max-height: 200px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Píldoras más cerca del diagrama */
    .istar-energy-flow-v3 .energy-flow-stage .energy-flow-summary,
    .istar-energy-flow-v3 .energy-flow-stage-summary {
        margin-top: 10px !important;
        gap: 8px !important;
    }

    /* Tarjeta de lectura / controles */
    .istar-energy-flow-v3 .energy-flow-panel {
        padding-top: 8px !important;
        padding-bottom: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 8px !important;
    }

    .istar-energy-flow-v3 .energy-flow-panel-head {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .istar-energy-flow-v3 .energy-flow-controls {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 8px !important;
    }

    .istar-energy-flow-v3 .energy-control-block {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
}

/* ================================================================
   iStar Flow · Píldoras centradas bajo el diagrama
================================================================ */

.istar-energy-flow-v3 .energy-flow-stage .energy-flow-summary,
.istar-energy-flow-v3 .energy-flow-stage-summary {
    min-height: 130px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-content: center !important;
    align-items: center !important;
}

@media (max-width: 720px) {
    .istar-energy-flow-v3 .energy-flow-stage .energy-flow-summary,
    .istar-energy-flow-v3 .energy-flow-stage-summary {
        min-height: auto !important;
        margin-top: 10px !important;
        grid-template-columns: 1fr !important;
        align-content: initial !important;
    }
}