/* AGROMETEOROLOGIA: listado, ficha de estacion, informes. Se carga despues de css/portal.css */

.portada { --foto-portada: url(../img/background/bg1.jpg); }
.portada .volver { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.portada .volver:hover { color: #fff; text-decoration: none; }

:root { --helada: #2b6cb0; --riesgo: #b7791f; --en-linea: #2e9b4e; --sin-datos: #c0392b; }

/* ESTADO (punto) */
.estado { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #b8c4cd; margin-right: 7px; vertical-align: 1px; }
.estado.en-linea { background: var(--en-linea); box-shadow: 0 0 0 3px rgba(46,155,78,.18); }
.estado.sin-datos { background: var(--sin-datos); }

/* AVISOS DE HELADA: color + icono + texto, nunca solo color */
.aviso { display: flex; align-items: center; gap: 14px; border-left: 5px solid; }
.aviso > i { font-size: 26px; flex: 0 0 auto; }
.aviso b { display: block; font-size: 16px; color: var(--titulo); }
.aviso.helada { border-color: var(--helada); } .aviso.helada > i { color: var(--helada); }
.aviso.riesgo { border-color: var(--riesgo); } .aviso.riesgo > i { color: var(--riesgo); }

/* INDICADORES */
.dato .etq { color: var(--suave); font-size: 13px; }
.dato .valor { font-size: 34px; font-weight: 600; color: var(--pizarra); line-height: 1.15; margin: 4px 0 2px; }
.dato .valor small { font-size: 16px; font-weight: 400; color: var(--suave); }
.dato .valor.bajo-cero { color: var(--helada); }
.dato .det { font-size: 13px; color: var(--texto); }

/* GRAFICOS SVG */
.grafico { width: 100%; height: auto; display: block; margin-top: 6px; }
.grafico .grilla { stroke: #e3e8ec; stroke-width: 1; }
.grafico .grilla.cero { stroke: var(--helada); stroke-dasharray: 4 4; }
.grafico .eje { font-size: 11px; fill: var(--suave); font-family: 'Open Sans', sans-serif; }
.grafico .linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .punto { stroke: #fff; stroke-width: 2; }
.grafico .zona { fill: transparent; cursor: crosshair; }
.grafico .zona:hover { fill: rgba(50,67,82,.08); }
.grafico.temperatura .linea { stroke: #e87722; } .grafico.temperatura .punto { fill: #e87722; }
.grafico.humedad .linea { stroke: #008aa9; } .grafico.humedad .punto { fill: #008aa9; }

/* MAPA */
.mapa-estacion { padding: 0; overflow: hidden; }
.mapa-estacion #mapa, .mapa-red #mapa { height: 320px; }
.mapa-red { padding: 0; overflow: hidden; }
.mapa-red #mapa { height: 600px; }   /* la Patagonia es larga: de Neuquen a Tierra del Fuego */
@media (max-width: 767px) { .mapa-red #mapa { height: 480px; } }
.aviso a { font-weight: 600; }

/* TARJETAS DE ESTACION (listado) */
.estacion { display: flex; flex-direction: column; min-height: 168px; color: var(--texto); transition: transform .15s, box-shadow .15s; }
a.estacion:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(50,67,82,.16); text-decoration: none; color: var(--texto); }
.estacion .nombre { font-weight: 700; color: var(--titulo); line-height: 1.3; }
.estacion .lugar { font-size: 12px; color: var(--suave); }
.estacion .temp { font-family: 'Oswald'; font-size: 38px; font-weight: 300; color: var(--titulo); line-height: 1; margin: 12px 0 8px; }
.estacion .temp.bajo-cero { color: var(--helada); }
.estacion .temp small { font-size: 18px; color: var(--suave); }
.estacion .medidas { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.estacion .medidas i { color: var(--petroleo); margin-right: 4px; }
.estacion .fecha { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--suave); }
.estacion .marca { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 2px 8px; margin-top: 8px; align-self: flex-start; }
.estacion .marca.helada { background: #e3eefa; color: var(--helada); }
.estacion .marca.riesgo { background: #fbf1df; color: #8a5a12; }
.estacion.sin-datos .temp { color: #b8c4cd; }
.estacion .cargando { margin: auto; color: var(--suave); font-size: 13px; text-align: center; }
#avisoHeladas .aviso { margin-bottom: 12px; }

/* SELECTOR DE VISTA (tarjetas / listado) */
.vistas { display: inline-flex; gap: 4px; background: #fff; border-radius: 22px; padding: 4px; box-shadow: 0 4px 18px rgba(50,67,82,.10); margin-bottom: 18px; }
.vistas button { border: 0; background: none; border-radius: 18px; padding: 6px 16px; font-size: 14px; font-weight: 600; color: var(--titulo); cursor: pointer; }
.vistas button:hover { color: var(--petroleo-osc); }
.vistas button.on { background: var(--petroleo); color: #fff; }
.vistas a { border-radius: 18px; padding: 6px 16px; font-size: 14px; font-weight: 600; color: var(--titulo); }
.vistas a:hover { color: var(--petroleo-osc); text-decoration: none; }
.vistas a.on { background: var(--pizarra); color: #fff; }
.vistas.region { display: flex; width: max-content; max-width: 100%; }

/* LISTADO DE ESTACIONES */
.listado { padding: 0; overflow-x: auto; }
.tabla-estaciones { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-estaciones th { position: sticky; top: 0; background: #f6f9fa; color: var(--suave); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla-estaciones td { padding: 8px 12px; border-bottom: 1px solid #eef1f3; white-space: nowrap; }
.tabla-estaciones tbody tr:hover { background: #f3fafc; }
.tabla-estaciones .n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-estaciones a { font-weight: 600; color: var(--titulo); }
.tabla-estaciones a:hover { color: var(--petroleo-osc); }
.tabla-estaciones .temp { font-weight: 700; color: var(--pizarra); }
.tabla-estaciones .temp.bajo-cero { color: var(--helada); }
.tabla-estaciones tr.sin-datos td { color: var(--suave); }
.tabla-estaciones i.helada { color: var(--helada); margin-left: 6px; }
.tabla-estaciones i.riesgo { color: var(--riesgo); margin-left: 6px; }

/* HISTORICO */
.selectores { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.selectores label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .4px; margin: 0; }
.selectores select { min-width: 220px; border: 1px solid var(--borde); border-radius: 8px; padding: 7px 10px; font-size: 14px; color: var(--titulo); background: #fff; text-transform: none; letter-spacing: 0; font-weight: 600; }
.selectores .btn-sipan { margin-left: auto; }
.grafico.anual .linea.maxima { stroke: #e87722; stroke-width: 1.5; }
.grafico.anual .linea.minima { stroke: #2a78d6; stroke-width: 1.5; }
.grafico.barras .barra { fill: var(--petroleo); }
.grafico.barras.heladas .barra { fill: #2a78d6; }
.grafico.barras.grados-dia .barra { fill: #e07b39; }
.grafico.barras .barra.tenue { fill: #c9d3da; }
.grafico.barras .referencia { stroke: var(--pizarra); stroke-width: 2.5; stroke-linecap: round; }
.leyenda-graf { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; margin-bottom: 4px; }
.leyenda-graf span { display: inline-flex; align-items: center; gap: 6px; }
.muestra-linea { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.muestra-linea.maxima { background: #e87722; } .muestra-linea.minima { background: #2a78d6; }
.muestra-barra { display: inline-block; width: 12px; height: 12px; border-radius: 3px 3px 0 0; background: var(--petroleo); }
.muestra-barra.helada { background: #2a78d6; }
.muestra-ref { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--pizarra); }
.tabla-mensual td.bajo-cero { color: var(--helada); font-weight: 700; }
.incompleto { font-size: 11px; color: var(--riesgo); font-weight: 600; margin-left: 4px; }

/* INFORMES */
.titulo-chico { font-size: 12px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.informes { list-style: none; padding: 0; margin: 0; }
.informes a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #e3e8ec; color: var(--texto); }
.informes li:last-child a { border-bottom: 0; }
.informes a:hover { color: var(--petroleo-osc); text-decoration: none; }
.informes i { color: #c0392b; }
.informes small { margin-left: auto; color: var(--suave); }

/* TOOLTIP */
.tip-agro { position: fixed; z-index: 1500; pointer-events: none; background: var(--pizarra); color: #fff; font-size: 13px; line-height: 1.4; padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.2); display: none; max-width: 240px; }

/* TABLERO DE LAS ESTACIONES WEATHERLINK (estacion.php): un recuadro por sensor, como el de weatherlink.com */
.tablero-titulo { margin-top: 8px; }
.tablero-wl { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 576px) { .tablero-wl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .tablero-wl { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 576px) { .tablero-wl .doble { grid-column: span 2; } }
.tarjeta.wl { display: flex; flex-direction: column; margin: 0; }
.wl-tit { font-weight: 600; color: var(--titulo, var(--pizarra)); font-size: 15px; }
.wl-sub { font-style: italic; font-size: 12px; color: var(--suave); margin-bottom: 6px; }
.tarjeta.wl .det { font-size: 13px; color: var(--suave); margin-top: auto; padding-top: 6px; }
.tarjeta.wl .det.centro { text-align: center; }
.wl-grande { text-align: center; font-size: 26px; font-weight: 600; color: var(--pizarra); }
.wl-grande small { font-size: 14px; font-weight: 400; color: var(--suave); }
.wl-tabla { width: 100%; font-size: 14px; margin-top: 4px; }
.wl-tabla td { padding: 5px 0; border-bottom: 1px dashed #e3e8ec; }
.wl-tabla tr:last-child td { border-bottom: 0; }
.wl-tabla .n { text-align: right; font-weight: 600; color: var(--pizarra); white-space: nowrap; }
.wl-tabla .n.bajo-cero { color: var(--helada); }

/* medidor semicircular */
.medidor { width: 100%; max-width: 230px; height: auto; display: block; margin: 4px auto 0; }
.medidor .fondo, .medidor .valor { fill: none; stroke-width: 22; }
.medidor .fondo { stroke: #e9edf0; }
.medidor .numero { font-size: 26px; font-weight: 600; fill: var(--pizarra); font-family: 'Open Sans', sans-serif; }
.medidor .unidad, .medidor .extremo { font-size: 12px; fill: var(--suave); font-family: 'Open Sans', sans-serif; }
.medidor.solar .valor { stroke: #c62828; }
.medidor.humedad .valor { stroke: #2e8b57; }
.medidor.sonda .valor { stroke: #00a99d; }
.medidor.suelo .valor { stroke: #3d4a54; }
.medidor.hoja .valor { stroke: #6aa84f; }

/* brujula y rosa de los vientos */
.brujula, .rosa { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; }
.brujula .aro, .rosa .anillo { fill: none; stroke: #c9d3da; stroke-width: 1; }
.brujula .marca { stroke: #8a99a6; stroke-width: 2; }
.brujula .rumbo, .rosa .rumbo { font-size: 12px; fill: var(--suave); font-family: 'Open Sans', sans-serif; font-weight: 600; }
.brujula .aguja { fill: #2f80c0; }
.brujula .centro { fill: var(--pizarra); }
.rosa .escala { font-size: 10px; fill: var(--suave); font-family: 'Open Sans', sans-serif; }
.rosa path { stroke: #fff; stroke-width: .5; }
.leyenda-rosa { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--suave); justify-content: center; margin-top: 6px; }
.leyenda-rosa i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

/* sol y luna */
.wl-sol { display: flex; justify-content: space-around; text-align: center; margin: 4px 0 8px; }
.wl-sol i { display: block; font-size: 20px; color: #f2a33a; margin-bottom: 2px; }
.wl-sol div:last-child i { color: #5b6b7a; }
.wl-sol b { display: block; font-size: 20px; color: var(--pizarra); }
.wl-sol small { color: var(--suave); }
.luna { width: 90px; height: 90px; display: block; margin: 0 auto; }
.luna .oscura { fill: #3d4a54; }
.luna .iluminada { fill: #f4f1e6; }
.luna .borde { fill: none; stroke: #3d4a54; stroke-width: 2; }

.grafico.presion .linea { stroke: #3d4a54; } .grafico.presion .punto { fill: #3d4a54; }
.grafico.solar .linea { stroke: #c62828; } .grafico.solar .punto { fill: #c62828; }