/* Fila que contiene las dos tarjetas (Criticidad + Tendencia).
   Antes cada una vivia en su propio <td colspan=2>/<td colspan=3> y
   se intentaba igualar su alto con height:100% dentro de la celda.
   Eso NO funciona de forma confiable: confirmado con mediciones
   reales en el navegador -- el <td> si queda con el mismo alto que
   su vecino (eso lo garantiza cualquier motor de tablas), pero un
   height:100% en un div hijo de una celda de tabla no hereda ese
   alto (su altura "especificada" sigue siendo auto para efectos
   de porcentajes, aunque su altura renderizada final sea otra).
   Ahora ambas tarjetas viven en un unico <td colspan=5> dentro de
   este div flex: align-items:stretch (default de flex) SI iguala
   el alto de sus hijos de forma garantizada (el <td> le da un alto
   definido a .fila_graficos, y stretch reparte ese alto entre sus
   hijos directos -- sin necesitar height:100% en .card-criticidad,
   que de hecho ROMPE el stretch si se le pone, ver comentario mas
   abajo). flex/flex-basis reemplazan al colspan para mantener la
   proporcion 2:3 de ancho. */
.fila_graficos {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

#contenedor_grafico_3_1 {
    flex: 2 1 320px;
}

#contenedor_grafico_3_2 {
    flex: 3 1 420px;
}

/* OJO: a proposito SIN height:100% aca. .card-criticidad es un
   hijo directo de .fila_graficos (flex, align-items:stretch por
   defecto), y ese stretch SOLO estira un hijo cuyo alto sea
   'auto' -- si se le pone un alto explicito (100% incluido, aunque
   no tenga de donde heredarlo y termine en 0/auto igual), flexbox
   deja de estirarlo y cada tarjeta vuelve a quedar con su alto
   natural (bug real, visto en produccion: la de Criticidad quedaba
   mas baja que la de Tendencia). Dejando el alto en auto, el
   stretch de .fila_graficos iguala las dos tarjetas solo. Una vez
   estirada, display:flex column deja que .card-body (mas abajo)
   centre el contenido en el espacio sobrante en vez de dejarlo
   pegado arriba.
   A pedido del usuario: el fondo/borde/sombra son ahora una copia
   EXACTA de .tabla_dashboard td (tablas.css), para que estas dos
   tarjetas se vean como dos celdas separadas identicas a la fila de
   arriba (Ultimas observaciones + mapa) -- el TD que las envuelve
   (.td_fila_graficos en tablas.css) esta neutralizado para no
   duplicar ese fondo en el espacio entre ambas. */
.card-criticidad {
    background: linear-gradient(180deg, #0A223E 0%, #07182E 100%);
    border: 1px solid #1B4F86;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 3px 10px rgba(0, 0, 0, .35);
    padding: 14px 18px;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Cabecera de la tarjeta */
.card-criticidad .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-criticidad .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.card-criticidad .card-link {
    font-size: 13px;
    color: #38bdf8;
    text-decoration: underline;
    cursor: pointer;
}

.card-criticidad .card-link:hover {
    color: #7dd3fc;
}

/* Cuerpo de la tarjeta. .card-criticidad es un flex column (header +
   body); margin-top/bottom:auto en .card-body absorbe TODO el
   espacio sobrante de la tarjeta (que ahora mide 100% de su fila
   .fila_graficos, ver arriba) de forma pareja arriba y abajo del
   grafico+leyenda, dejando el header fijo arriba -- es la tecnica
   estandar para centrar verticalmente un item dentro de un flex
   container mas alto que su contenido. */
.card-criticidad .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: auto;
    margin-bottom: auto;
}

/* Contenedor del gráfico y texto central.
   Antes: 220px x 220px fijos.
   Ahora: escala con el ancho disponible (hasta 220px como tope) y
   aspect-ratio mantiene el círculo perfecto sin fijar un alto en px. */
/* Antes: max-width: 220px fijo. Eso dejaba la dona mucho más chica
   que su vecino (el gráfico de tendencia, que crece en vh), y la
   tarjeta quedaba con espacio vacío abajo. Ahora escala en vh igual
   que .chart-container-line, para que ambas tarjetas de la fila
   se vean parejas en cualquier altura de pantalla. */
.chart-container {
    position: relative;
    width: min(85%, 19.8vh);
    aspect-ratio: 1 / 1;
    height: auto;
    min-width: 117px;
    display: block;
    flex-shrink: 0;
}

#chartCriticidad {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.chart-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.chart-center-text .total-num {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
}

.chart-center-text .total-label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* Leyenda estilo tabla lateral */
.chart-legend {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    flex-grow: 1;
    min-width: 180px;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.legend-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

.dot-critica {
    background-color: #ff3b30;
}

.dot-media {
    background-color: #ffcc00;
}

.dot-baja {
    background-color: #34c759;
}

.dot-informativa {
    background-color: #007aff;
}

/* Antes: anchos fijos en px (100px / 60px) que no escalaban
   en pantallas angostas. Ahora reparten proporcionalmente
   el ancho disponible dentro de .chart-legend. */
.legend-label {
    color: #e2e8f0;
    width: 45%;
    font-weight: 400;
}

.legend-percent {
    color: #e2e8f0;
    width: 25%;
    text-align: right;
    font-weight: 400;
}

.legend-val {
    color: #ffffff;
    font-weight: 600;
    margin-left: auto;
    text-align: right;
    min-width: 35px;
}


/************************************
*************DASH LINEAS*****************
************************************/
/* Tarjeta del segundo gráfico (Tendencia). Antes mezclaba
   max-width:100% !important con width:95%; se deja una sola
   regla consistente. */
.card-tendencia {
    width: 100%;
    max-width: 100%;
}

/* Filtros de días (Botones estilo píldora) */
.time-filters {
    display: flex;
    background-color: #060d19;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #1a2942;
    gap: 4px;
}

.btn-filter {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-filter.active {
    background-color: #0082fb;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 130, 251, 0.4);
}

.btn-filter:hover:not(.active) {
    color: #ffffff;
}

/* Leyenda superior horizontal */
.chart-legend-top {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 12px;
    color: #e2e8f0;
    flex-wrap: wrap;
}

.legend-item-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.line-dot {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

/* Contenedor responsivo de la línea.
   Antes: height: 180px fijo.
   Ahora: se calcula respecto al viewport (con un mínimo), así
   no depende de la cadena de % rota de los contenedores padre. */
.chart-container-line {
    position: relative;
    width: 100%;
    height: 19.8vh;
    min-height: 117px;
}

#chartTendencia {
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================
   Notebooks y monitores de poca altura (ej. 13"-14", ~700-900px
   de alto de viewport). Sin esto, la suma de min-heights de
   mapa + gráfico de tendencia + tarjetas de resumen supera el
   alto disponible y la última fila queda fuera de pantalla.
   ========================================================== */
@media (max-height: 800px) {
    .chart-container-line {
        height: 14.4vh;
        min-height: 90px;
    }

    .chart-container {
        width: min(85%, 14.4vh);
        min-width: 90px;
    }

    .card-criticidad {
        padding: 10px 14px;
    }

    .card-criticidad .card-header {
        margin-bottom: 8px;
    }
}

/* Pantallas grandes: agranda el gráfico de tendencia y el padding
   de las tarjetas para aprovechar el espacio vertical extra. */
@media (min-height: 900px) {
    .chart-container-line {
        height: 25.2vh;
        min-height: 180px;
    }

    .chart-container {
        width: min(85%, 25.2vh);
        min-width: 180px;
    }

    .card-criticidad {
        padding: 22px 26px;
    }
}


/* ==========================================================
   RESPONSIVE ANCHO -- hasta celular (~360px).
   Las reglas de arriba (@media max-height / min-height) cubren
   pantallas bajas; esto cubre pantallas ANGOSTAS. A pedido explicito
   del usuario, ante falta de espacio se prioriza achicar la ALTURA
   de estos dos graficos (Distribucion de criticidad y Tendencia de
   observaciones por criticidad) antes que tocar el resto del
   dashboard, para mantener las proporciones en todo lo demas.
   Se declara despues de los @media por altura para que, en una
   pantalla angosta Y baja a la vez (celular en horizontal), estos
   valores -- pensados para el ancho -- sean los que ganen.
   ========================================================== */
@media (max-width: 900px) {
    /* Con 2 tarjetas apiladas en 1 columna (ver .tabla_dashboard en
       tablas.css) no tiene sentido mantener la proporcion 2:3 de
       ancho -- cada una pasa a ocupar el 100% del ancho disponible
       con su alto natural. */
    .fila_graficos {
        flex-direction: column;
    }

    #contenedor_grafico_3_1,
    #contenedor_grafico_3_2 {
        flex: 1 1 auto;
    }

    .card-criticidad {
        padding: 12px 14px;
    }

    .card-criticidad .card-body {
        gap: 16px;
    }

    .chart-container-line {
        height: 16.2vh;
        min-height: 99px;
    }

    .chart-container {
        width: min(80%, 16.2vh);
        min-width: 99px;
    }
}

@media (max-width: 480px) {
    .card-criticidad .card-header {
        margin-bottom: 10px;
    }

    .chart-container-line {
        height: 13.5vh;
        min-height: 81px;
    }

    .chart-container {
        width: min(75%, 13.5vh);
        min-width: 86px;
    }

    .chart-legend {
        min-width: 140px;
        gap: 8px;
    }

    .chart-center-text .total-num {
        font-size: 20px;
    }
}