/* Termometro Laboral - estilos */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #f4f6f8;
    color: #1c2733;
}

.topbar {
    background: linear-gradient(135deg, #0f3d5e, #17618f);
    color: #fff;
    padding: 18px 24px;
}

.topbar h1 { margin: 0; font-size: 1.5rem; }
.topbar .subtitle { margin: 4px 0 0; opacity: .85; font-size: .95rem; }

.layout {
    display: grid;
    grid-template-columns: 280px 1fr 340px;
    gap: 16px;
    padding: 16px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: calc(100vh - 100px);
}

.controls { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.controls label { font-weight: 600; display: block; margin-bottom: 6px; }
.controls select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: .95rem;
    background: #fff;
}

.legend { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.chip { border-radius: 20px; padding: 6px 10px; font-size: .85rem; color: #1c2733; background: #eef1f4; }
.chip-verde { background: #d1f2d8; border-left: 4px solid #1e8e3e; }
.chip-ambar { background: #fdf0d0; border-left: 4px solid #f9a825; }
.chip-rojo  { background: #fbdcdc; border-left: 4px solid #c62828; }
.chip-gris  { background: #eceff1; border-left: 4px solid #90a4ae; }
.note { font-size: .8rem; color: #546e7a; margin-top: 14px; line-height: 1.45; }

.map-panel { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); min-height: 520px; }
#map { width: 100%; height: 100%; min-height: 520px; }

.detail { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.detail .placeholder { color: #90a4ae; font-size: .95rem; text-align: center; margin-top: 120px; }

.detail h2 { margin: 0 0 4px; font-size: 1.25rem; }
.detail .sector-name { color: #546e7a; font-size: .9rem; margin-bottom: 12px; }

.metric {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid #eef1f4; padding: 10px 0;
}
.metric .k { color: #546e7a; font-size: .85rem; }
.metric .v { font-weight: 700; font-size: 1.05rem; }
.metric .v.verde { color: #1e8e3e; }
.metric .v.ambar { color: #b8860b; }
.metric .v.rojo { color: #c62828; }

.badge {
    display: inline-block; border-radius: 20px; padding: 6px 14px;
    font-weight: 700; font-size: .9rem; margin-bottom: 12px;
}
.badge.verde { background: #d1f2d8; color: #14532d; }
.badge.ambar { background: #fdf0d0; color: #7a5b00; }
.badge.rojo { background: #fbdcdc; color: #7f1d1d; }
.badge.sin-datos { background: #eceff1; color: #37474f; }

.chart-wrap { margin-top: 14px; }
.chart-wrap h3 { font-size: .95rem; margin: 0 0 8px; }

.status-line { font-size: .8rem; color: #90a4ae; margin-top: 10px; }

@media (max-width: 1100px) {
    .layout { grid-template-columns: 1fr; }
    .detail { order: 3; }
}

/* Móvil: el mapa es el protagonista, controles compactos, detalle justo debajo */
@media (max-width: 768px) {
    .topbar { padding: 12px 14px; }
    .topbar h1 { font-size: 1.2rem; }
    .topbar .subtitle { font-size: .8rem; }

    .layout { padding: 10px; gap: 10px; min-height: 0; }

    /* controles compactos encima del mapa */
    .controls { order: 1; padding: 12px; }
    .controls label { margin-bottom: 4px; font-size: .9rem; }
    .legend { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .chip { font-size: .75rem; padding: 4px 8px; }
    .note { display: none; } /* la nota larga sobra en móvil */

    /* mapa grande y a la vista */
    .map-panel { order: 2; min-height: 0; height: 62vh; }
    #map { min-height: 0; height: 100%; }

    /* detalle justo debajo del mapa */
    .detail { order: 3; }
    .detail .placeholder { margin-top: 40px; }
    .chart-wrap canvas { max-height: 240px; }
}