/* Ajustes del panel público sobre institucional.css.
   Sin colores nuevos: todo usa las variables de la paleta institucional. */

.contenido-publico {
    margin-left: 0;
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 992px) {
    .contenido-publico { margin-left: auto; }
}

.cabecera .navegacion {
    gap: .25rem;
}

.cabecera .navegacion a {
    padding: .4rem .75rem;
    border-radius: var(--radio);
    color: var(--blanco);
    font-size: .875rem;
}

.cabecera .navegacion a:hover,
.cabecera .navegacion a.activo {
    background: rgba(255, 255, 255, .18);
    text-decoration: none;
}

.filtros .form-label {
    margin-bottom: .25rem;
    color: var(--texto-suave);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.grafico {
    width: 100%;
    height: 520px;
}

.grafico-bajo {
    height: 320px;
}

.btn-outline-primary {
    --bs-btn-color: var(--azul-primario);
    --bs-btn-border-color: var(--azul-primario);
    --bs-btn-hover-bg: var(--azul-primario);
    --bs-btn-hover-border-color: var(--azul-primario);
    --bs-btn-active-bg: var(--azul-primario);
    --bs-btn-active-border-color: var(--azul-primario);
}

.tabla-cifras td {
    font-variant-numeric: tabular-nums;
}

.cargando {
    opacity: .5;
    transition: opacity .15s;
}

.nota-metodologica ul {
    padding-left: 1.1rem;
}

/* .card de Bootstrap apila en columna; la tarjeta de dato va en fila:
   ícono a la izquierda, número y rótulo a la derecha. */
.card.tarjeta-dato {
    flex-direction: row;
}

/* Calendario de rango (flatpickr) con la paleta institucional */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--azul-primario);
    border-color: var(--azul-primario);
}

.flatpickr-day.inRange {
    background: var(--gris-claro);
    border-color: var(--gris-claro);
    box-shadow: -5px 0 0 var(--gris-claro), 5px 0 0 var(--gris-claro);
}

.flatpickr-day.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--azul-primario);
}

.flatpickr-day.today {
    border-color: var(--naranja);
}

#rango[readonly], #rango + input[readonly] {
    background: var(--blanco);
    cursor: pointer;
}

/* ---------- Ancho completo ---------- */

.contenido-publico {
    max-width: none;
}

.grafico-medio {
    height: 420px;
}

/* ---------- Tarjetas del resumen ---------- */

/* Tantas columnas como quepan, mínimo 180px: 8 en una fila en pantallas
   anchas, 4 en tablet, 2 en teléfono. */
.tarjetas-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}

.tarjetas-resumen .tarjeta-dato {
    padding: .9rem;
}

.tarjetas-resumen .tarjeta-dato .valor {
    font-size: 1.4rem;
}

.tarjetas-resumen .porcentaje {
    margin: .15rem 0 0;
    color: var(--texto-suave);
    font-size: .75rem;
}

.tarjeta-total {
    border-left-color: var(--azul-primario);
    background: var(--gris-claro);
}

/* La franja de cada tarjeta lleva el color de su categoría en los gráficos:
   así se lee la leyenda sin buscarla. El número queda en color de texto. */
.tarjeta-categoria[data-categoria="atendida"]         { border-left-color: var(--serie-atendida); }
.tarjeta-categoria[data-categoria="llego"]            { border-left-color: var(--serie-llego); }
.tarjeta-categoria[data-categoria="agendada"]         { border-left-color: var(--serie-agendada); }
.tarjeta-categoria[data-categoria="nsp"]              { border-left-color: var(--serie-nsp); }
.tarjeta-categoria[data-categoria="cancelada"]        { border-left-color: var(--serie-cancelada); }
.tarjeta-categoria[data-categoria="no_atendida_otra"] { border-left-color: var(--serie-no-atendida-otra); }
.tarjeta-categoria[data-categoria="erronea"]          { border-left-color: var(--serie-erronea); }

.tarjeta-categoria[data-categoria="atendida"]         .icono { color: var(--serie-atendida); }
.tarjeta-categoria[data-categoria="llego"]            .icono { color: var(--serie-llego); }
.tarjeta-categoria[data-categoria="agendada"]         .icono { color: var(--serie-agendada); }
.tarjeta-categoria[data-categoria="nsp"]              .icono { color: var(--serie-nsp); }
.tarjeta-categoria[data-categoria="cancelada"]        .icono { color: var(--serie-cancelada); }
.tarjeta-categoria[data-categoria="no_atendida_otra"] .icono { color: var(--serie-no-atendida-otra); }
.tarjeta-categoria[data-categoria="erronea"]          .icono { color: var(--serie-erronea); }

.tarjeta-categoria .valor {
    color: var(--texto);
}

/* ---------- Grupos de tarjetas del resumen ---------- */

.titulo-grupo {
    margin: 0 0 .4rem;
    color: var(--azul-primario);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.titulo-grupo span {
    margin-left: .35rem;
    color: var(--texto-suave);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Canceladas y erróneas: dos tarjetas, del mismo ancho que las de producción. */
.tarjetas-fuera {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* ---------- Pestañas de la sección ---------- */

.pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--borde);
}

.pestanas a {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: -2px;
    padding: .55rem 1rem;
    border-bottom: 2px solid transparent;
    color: var(--texto-suave);
    font-weight: 500;
}

.pestanas a:hover {
    color: var(--azul-primario);
    text-decoration: none;
}

.pestanas a.activo {
    border-bottom-color: var(--naranja);
    color: var(--azul-primario);
}

/* ---------- Tarjetas del per cápita ---------- */

.tarjeta-categoria[data-categoria="mujer"]  { border-left-color: var(--serie-mujer); }
.tarjeta-categoria[data-categoria="hombre"] { border-left-color: var(--serie-hombre); }
.tarjeta-categoria[data-categoria="mujer"]  .icono { color: var(--serie-mujer); }
.tarjeta-categoria[data-categoria="hombre"] .icono { color: var(--serie-hombre); }

/* ---------- Tabla ordenable ---------- */

.grafico-alto {
    height: 640px;
}

.tabla-ordenable th[data-orden] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.tabla-ordenable th[data-orden]::after {
    display: inline-block;
    width: 1em;
    margin-left: .25rem;
    opacity: .5;
    content: "↕";
}

.tabla-ordenable th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.tabla-ordenable th[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; }

.tabla-ordenable th[data-orden]:focus-visible {
    outline: 2px solid var(--naranja);
    outline-offset: -2px;
}

.tabla-cifras tfoot td {
    border-top: 2px solid var(--azul-primario);
    font-weight: 700;
}

.tarjeta-categoria[data-categoria="otros"]        { border-left-color: var(--serie-otros); }
.tarjeta-categoria[data-categoria="otros"] .icono { color: var(--serie-otros); }

/* ---------- Período con calendario flotante ---------- */

/* Rótulo "Período" y, a la derecha, las fechas exactas en la misma línea: así
   la fila de filtros sigue alineada abajo. */
.rotulo-periodo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.texto-rango {
    margin-bottom: .25rem;
    color: var(--texto-suave);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Aviso de locales no considerados, bajo el título de los paneles de citas. */
.nota-locales {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0 0;
    padding: .2rem .65rem;
    border-radius: 1rem;
    background: var(--gris-claro);
    color: var(--texto-suave);
    font-size: .78rem;
}

/* ---------- Telesalud ---------- */

.tarjeta-categoria[data-categoria="ts-remota"]        { border-left-color: var(--serie-ts-remota); }
.tarjeta-categoria[data-categoria="ts-presencial"]    { border-left-color: var(--serie-ts-presencial); }
.tarjeta-categoria[data-categoria="ts-no-resuelta"]   { border-left-color: var(--serie-ts-no-resuelta); }
.tarjeta-categoria[data-categoria="ts-remota"]      .icono { color: var(--serie-ts-remota); }
.tarjeta-categoria[data-categoria="ts-presencial"]  .icono { color: var(--serie-ts-presencial); }
.tarjeta-categoria[data-categoria="ts-no-resuelta"] .icono { color: var(--serie-ts-no-resuelta); }
.tarjeta-categoria[data-categoria="ts-ab-antigua"]    { border-left-color: var(--serie-ts-ab-antigua); }
.tarjeta-categoria[data-categoria="ts-ab-antigua"]  .icono { color: var(--serie-ts-ab-antigua); }

/* Qué motivos incluye cada área: desplegable dentro de la nota. */
.areas-telesalud summary {
    cursor: pointer;
    color: var(--azul-primario);
}

.areas-telesalud dt {
    margin-top: .4rem;
    color: var(--texto);
}

.areas-telesalud dd {
    margin: 0 0 0 .75rem;
}

/* ---------- Urgencias ---------- */

.grafico-calor {
    height: 360px;
}

.tarjeta-categoria[data-categoria="ur-se-fue"]        { border-left-color: var(--serie-ur-se-fue); }
.tarjeta-categoria[data-categoria="ur-se-fue"] .icono { color: var(--serie-ur-se-fue); }