/* =========================================
   BASE GLOBAL
   - Reset mínimo + tipografía + tema (CSS vars)
   ========================================= */
* { box-sizing: border-box; }

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

body.mapa-fullscreen-activo{
  overflow: hidden;
}

/* =========================================
   MODAL SIMPLE
   ========================================= */
.modal{
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  padding: 16px;
}

.modal.activo{
  display: flex;
}

.modal_contenido{
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra);
  width: min(520px, 92vw);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal_encabezado{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal_formulario{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal_mensajes{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal_formulario input[type="file"]{
  border: 1px dashed var(--borde);
  background: var(--superficie_alt);
  padding: 10px;
  border-radius: 10px;
}

.modal_acciones{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* =========================================
   Tooltip clima
   ========================================= */
.clima-tooltip{
  position: absolute;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: var(--sombra);
  font-size: 12px;
  color: var(--texto);
  pointer-events: none;
  min-width: 160px;
}

.clima-tooltip-titulo{
  font-weight: 700;
  margin-bottom: 6px;
}

.clima-tooltip-item{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.clima-tooltip-item:last-child{
  margin-bottom: 0;
}

.clima-tooltip-color{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.clima-serie{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.clima-serie span{
  text-align: center;
}

.clima-color{
  width: 24px;
  height: 18px;
  border: none;
  background: transparent;
  padding: 0;
}

/* =========================================
   LAYOUT PRINCIPAL
   - Grid: sidebar + contenido
   ========================================= */
.app{
  display: grid;
  grid-template-columns: var(--ancho_barra) 1fr;
  min-height: 100vh;
}

/* =========================================
   SIDEBAR (DESKTOP)
   - Sticky para que el menú quede visible
   ========================================= */
.barra_lateral{
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  padding: 8px;

  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  overflow: visible;

  /* (tuviste duplicado; esto es lo que ya estabas aplicando) */
  display:flex;
  flex-direction:column;
}

.fecha_actual{
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 9px;
  background: var(--superficie);
  border: 1px solid var(--borde);

  font-size: 13px;
  font-weight: 600;
}

/* Quitar subrayado de TODOS los enlaces del sidebar */
.barra_lateral a,
.barra_lateral a:hover,
.barra_lateral a:focus,
.barra_lateral a:active{
  text-decoration: none;
}

/* =========================================
   BLOQUE MARCA
   ========================================= */
.marca{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;   /* 👈 clave */


  padding: 12px;
  border-radius: var(--radio_sm);
  border: 1px solid var(--borde);
  background: linear-gradient(135deg, rgba(79,163,125,0.18), transparent);
}

.logo{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--marca);
  box-shadow: var(--sombra);
}

.marca_texto h1{ font-size: 14px; margin: 0; }
.marca_texto p{
  margin: 2px 0 0;
  color: var(--texto_sec);
  font-size: 12px;
}

/* Botón tipo icono (si todavía lo usas en algún lado) */
.boton_icono{
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;

  border: 1px solid var(--borde);
  background: var(--superficie);
  cursor: pointer;
  font-weight: 800;
}

/* Por defecto las siglas no se ven */
.marca_siglas{
  display:none;
  font-weight: 800;
  letter-spacing: 0.8px;
  font-size: 14px;
  color: var(--texto);
}

/* En colapsado: ocultar textos largos y mostrar siglas */
html[data-barra="colapsada"] .marca_texto h1,


html[data-barra="colapsada"] .marca_siglas{
  display:inline-block;
}
/* Siglas: por defecto ocultas */
.marca_siglas{
  display:none;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 14px;
  color: var(--texto);
}

/* En colapsado: ocultar textos largos, mostrar GD */
html[data-barra="colapsada"] .marca_texto h1,
html[data-barra="colapsada"] .marca_texto p{
  display:none;
}

html[data-barra="colapsada"] .marca_siglas{
  display:inline-block;
}


/* =========================================
   NAVEGACIÓN
   - Links del menú lateral
   ========================================= */
.navegacion{
  margin-top: 8px;
  display: flex;
  flex-direction: column;

  /* tenías gap 6 y luego 2; por cascada la última era 2 */
  gap: 2px;
}

.navegacion a{
  padding: 8px 10px;
  border-radius: 12px;

  color: var(--texto_sec);
  border: 1px solid transparent;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.navegacion a:hover{
  background: var(--superficie_alt);
  color: var(--texto);
  border-color: var(--borde);
}

/* Estado activo (ruta actual) */
.navegacion a.activo{
  background: rgba(47,111,78,0.14);
  color: var(--texto);
  border-color: rgba(47,111,78,0.25);

  position: relative;
}

.navegacion a.activo::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: var(--marca);
}

/* Iconos (tal cual los tenías) */
.nav_ico svg{
  width: 40px;
  height: 40px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* Texto SIEMPRE neutral */
.navegacion a .nav_texto,
.navegacion a .nav_meta{
  color: var(--texto);
}

/* nav_meta existe pero no es visible */
.nav_meta{
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  font-size: 0;
}

/* ======================================
   Colores por módulo (SOLO ICONOS)
   ====================================== */
.navegacion a[data-tip="Panel principal"] .nav_ico svg{ stroke: #3B82F6; }
.navegacion a[data-tip="Producción"] .nav_ico svg{ stroke: #2F6F4E; }
.navegacion a[data-tip="Sanidad"] .nav_ico svg{ stroke: #EF4444; }
.navegacion a[data-tip="Clima"] .nav_ico svg{ stroke: #F59E0B; }
.navegacion a[data-tip="Riego"] .nav_ico svg{ stroke: #0EA5E9; }
.navegacion a[data-tip="Estrategias de ventanas"] .nav_ico svg{ stroke: #F59E0B; }
.navegacion a[data-tip="Diseño de invernaderos"] .nav_ico svg{ stroke: #14B8A6; }

/* Hover / activo (solo iconos) */
.navegacion a:hover .nav_ico svg{ filter: brightness(1.15); }
.navegacion a.activo .nav_ico svg{ filter: brightness(1.25); }

/* =========================================
   CONTROL COLAPSAR BARRA LATERAL
   - Tu CSS tenía 3 versiones (control_colapsar + control_btn + ::after)
   - Por cascada, la que manda es la última que tenías: control_btn + textos por clase
   - Se elimina el ::after (porque rompía los textos) SIN cambiar diseño final
   ========================================= */
.control_barra{
  padding: 8px 6px 6px;
}

.control_btn{
  width: 100%;
  display:flex;
  align-items:center;
  gap:10px;

  padding: 12px 14px;
  border-radius: 14px;

  background: var(--superficie_alt);
  border: 1px solid var(--borde);

  color: var(--texto);
  cursor: pointer;
  font-weight: 600;
}

.control_btn:hover{
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.control_ico{
  align-items: center;   /* centra vertical */
  justify-content: center; /* centra horizontal */
  width: 20px;
  height: 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.control_ico svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control_texto{
  font-size: 13px;
  white-space: nowrap;
}



/* Cuando está colapsada, se muestra "Expandir menú" */
html[data-barra="colapsada"] .control_texto_colapsar{ display:none; }

/* (Esto ya lo tenías al final: en colapsado NO se ven textos) */
html[data-barra="colapsada"] .control_btn{
  justify-content: center;
}
html[data-barra="colapsada"] .control_texto{
  display:none;
}

/* =========================================
   BOTONES / ÍCONOS VARIOS
   ========================================= */
#btnColapsar svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform .2s ease;
}

/* Empujar el botón de tema hacia la derecha */
#btnTema{ margin-left: auto; }

/* Gira cuando la barra está colapsada */
html[data-barra="colapsada"] #btnColapsar svg{
  transform: rotate(180deg);
}

/* =========================================
   CONTENIDO PRINCIPAL
   ========================================= */
.main{ padding: 18px 18px 32px; }

.barra_superior{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* Mensajes globales */
.mensajes{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.mensaje{
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--sombra);
  font-size: 13px;
  font-weight: 600;
}

.mensaje.success{ border-color: rgba(63,174,108,0.4); background: rgba(63,174,108,0.12); }
.mensaje.error{ border-color: rgba(192,57,43,0.4); background: rgba(192,57,43,0.12); }
.mensaje.warning{ border-color: rgba(230,162,60,0.4); background: rgba(230,162,60,0.12); }
.mensaje.info{ border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.12); }

/* ======================================
   Icono tema (sol/luna) - sin emojis
   ====================================== */
.ico_tema{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ico_tema svg{
  position: static;
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.ico_sol, .ico_luna{ opacity: .35; }
html[data-tema="claro"] .ico_sol{ opacity: 1; }
html[data-tema="oscuro"] .ico_luna{ opacity: 1; }

/* Migas */
.migas{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.migas_texto{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.titulo_pagina{
  font-size: 18px;
  font-weight: 700;
  margin: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta{ font-size: 12px; color: var(--texto_sec); }

/* Acciones */
.acciones{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.beta_countdown{
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--superficie) 96%, var(--texto_sec) 4%);
  color: var(--texto_sec);
  border-radius: 999px;
  padding: 7px 10px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(63, 174, 108, 0.5);
  box-shadow: 0 0 0 0 rgba(63, 174, 108, 0.2);
  animation: beta-borde-pulso 2.4s ease-in-out infinite;
}

.beta_countdown > *{
  position: relative;
  z-index: 2;
}

.beta_countdown_mini{
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 8px;
  letter-spacing: 0.2px;
  opacity: 0.85;
}

.beta_countdown .beta_word{
  font-weight: 700;
  color: #3fae6c;
}

.beta_countdown .beta_orb{
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 88%, #ffffff 12%);
  box-shadow:
    0 0 0 0 color-mix(in srgb, var(--ok) 42%, transparent),
    0 0 9px color-mix(in srgb, var(--ok) 78%, transparent);
  margin-right: 7px;
  animation: beta-orb-pulso 1.6s ease-out infinite;
}

.beta_countdown .beta_orb::before,
.beta_countdown .beta_orb::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(63, 174, 108, 0.32);
  box-shadow: 0 0 10px rgba(63, 174, 108, 0.45);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  filter: blur(1.4px);
}

.beta_countdown .beta_orb::before{
  animation: beta-pulso-anillo 1.8s ease-out infinite;
}

.beta_countdown .beta_orb::after{
  animation: beta-pulso-anillo 1.8s ease-out infinite 0.9s;
}

.beta_countdown::after{
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 26%;
  left: -40%;
  transform: skewX(-18deg);
  background: linear-gradient(
    90deg,
    rgba(63, 174, 108, 0) 0%,
    rgba(63, 174, 108, 0.22) 45%,
    rgba(63, 174, 108, 0.44) 50%,
    rgba(63, 174, 108, 0.22) 55%,
    rgba(63, 174, 108, 0) 100%
  );
  animation: beta-barrido 10s cubic-bezier(.42, 0, 1, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes beta-barrido{
  0%{
    left: -40%;
    opacity: 0.08;
  }
  100%{
    left: 110%;
    opacity: 0.65;
  }
}

@keyframes beta-borde-pulso{
  0%, 100%{
    box-shadow: 0 0 0 0 rgba(63, 174, 108, 0.18);
  }
  50%{
    box-shadow: 0 0 0 1px rgba(63, 174, 108, 0.28), 0 0 10px rgba(63, 174, 108, 0.16);
  }
}

@keyframes beta-orb-pulso{
  0%{
    transform: scale(0.95);
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent),
      0 0 8px color-mix(in srgb, var(--ok) 75%, transparent);
    opacity: 0.85;
  }
  60%{
    transform: scale(1.08);
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent),
      0 0 12px color-mix(in srgb, var(--ok) 85%, transparent);
    opacity: 1;
  }
  100%{
    transform: scale(0.95);
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent),
      0 0 8px color-mix(in srgb, var(--ok) 70%, transparent);
    opacity: 0.9;
  }
}

@keyframes beta-pulso-anillo{
  0%{
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.4);
  }
}

.busqueda{
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  min-width: 260px;
}

.busqueda input{
  border: none;
  outline: none;
  width: 100%;
  background: transparent;
  color: var(--texto);
  font-size: 14px;
}

/* Botones genéricos */
.boton{
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);

  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;

  font-weight: 600;
  font-size: 13px;
}

.boton.principal{
  background: var(--marca);
  border-color: transparent;
  color: #fff;
}

.boton.fantasma{ background: transparent; }

/* =========================================
   GRID + TARJETAS (KPIs)
   ========================================= */
.grid{
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 7px;
}

.tarjeta{
  grid-column: span 3;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px;
}

.layout-lienzo{
  width: 100%;
  height: clamp(360px, calc(100vh - 260px), 760px);
  max-height: calc(100vh - 220px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie_alt);
  border-radius: 10px;
  min-height: 0;
}

.tarjeta-mapas{
  display: flex;
  flex-direction: column;
  /* Evita scroll vertical fantasma: el alto real lo define layout-lienzo por JS */
  min-height: 0;
}

.tarjeta-mapas .layout-lienzo{
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  margin-top: 16px;
  overflow: hidden;
}

.tarjeta-mapas .layout-imagen{
  max-height: 100%;
}

.mapas-encabezado{
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) minmax(160px, 0.8fr) minmax(160px, 0.8fr) minmax(260px, 1.1fr) minmax(220px, 1fr) auto;
  grid-template-areas: "selector sistema sector leyendas orientacion acciones";
  align-items: stretch;
  gap: 10px;
  margin-bottom: 10px;
}

.clima-encabezado{
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.2fr) auto;
  grid-template-areas: "selector rango acciones";
}

.clima-rangos{
  margin-top: 10px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 10px;
  background: var(--superficie_alt);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clima-rangos-encabezado{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.clima-rangos-lista{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}

.clima-rango-serie{
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 86px 86px 44px;
  gap: 8px;
  align-items: center;
  justify-content: stretch;
}

.clima-rango-serie span{
  font-size: 12px;
  font-weight: 700;
  color: var(--texto);
}

.clima-rango-serie[data-range-state="auto"] span::after{
  content: " - Automático";
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: .02em;
}

.clima-rango-serie[data-range-state="fijo"] span::after{
  content: " - Fijo";
  font-size: 10px;
  font-weight: 700;
  color: #0f766e;
  letter-spacing: .02em;
}

.clima-rango-serie .boton{
  width: 100%;
  min-width: 0;
}

.clima-rango-serie .boton:disabled{
  background: color-mix(in srgb, var(--superficie_alt) 82%, #94a3b8 18%);
  border-color: color-mix(in srgb, var(--borde) 70%, #94a3b8 30%);
  color: var(--texto_sec);
  cursor: not-allowed;
}

.clima-rango-serie .clima-color{
  width: 38px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: transparent;
  justify-self: end;
  overflow: hidden;
}

.clima-rango-serie .clima-color::-webkit-color-swatch-wrapper{
  padding: 0;
}

.clima-rango-serie .clima-color::-webkit-color-swatch{
  border: none;
  border-radius: 7px;
}

.clima-rango-serie .clima-color::-moz-color-swatch{
  border: none;
  border-radius: 7px;
}

.clima-rangos[data-estado="oculto"] .clima-rangos-lista,
.clima-rangos[data-estado="oculto"] #clima-rango-modo,
.clima-rangos[data-estado="oculto"] .texto_suave{
  display: none;
}

.clima-rangos[data-estado="oculto"]{
  padding: 6px;
  display: inline-flex;
  align-self: flex-start;
}

.clima-rango{
  grid-area: rango;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.clima-nav-botones{
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.clima-nav-botones .boton{
  min-width: 42px;
  padding-inline: 10px;
  border-radius: 0;
}

.clima-nav-botones .boton:first-child{
  border-top-left-radius: var(--radio_sm);
  border-bottom-left-radius: var(--radio_sm);
}

.clima-nav-botones .boton:last-child{
  border-top-right-radius: var(--radio_sm);
  border-bottom-right-radius: var(--radio_sm);
  margin-left: -1px;
}

.clima-rango-campo{
  display: flex;
  align-items: center;
  gap: 8px;
}

.clima-encabezado .mapas-selector{
  grid-area: selector;
}

.clima-encabezado .mapas-accion{
  grid-area: acciones;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}

.diseno-encabezado{
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) auto;
  grid-template-areas: "selector sistema acciones";
}

.clima-lienzo{
  height: auto;
  max-height: none;
  min-height: 0;
}

.mapas-bloque{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie_alt);
  padding: 6px 10px;
}

.mapas-selector{
  justify-content: space-between;
  grid-area: selector;
}

.mapas-sistema{
  grid-area: sistema;
}

.mapas-sector{
  grid-area: sector;
}

.mapas-selector .boton,
.boton-icono-layout{
  border-radius: 10px;
  padding: 7px 10px;
}

.mapas-leyendas{
  margin-top: 0;
  justify-content: space-between;
  gap: 6px;
  grid-area: leyendas;
}

.mapas-orientacion{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--texto);
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 10px;
  grid-area: orientacion;
}

.mapas-brujula{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.mapas-orientacion-titulo{
  opacity: 0.85;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 2px;
}

.mapas-brujula .brujula-item{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--borde);
  background: color-mix(in srgb, var(--superficie_alt) 88%, var(--texto) 12%);
  border-radius: 999px;
  padding: 3px 8px;
  line-height: 1;
}

.mapas-brujula .brujula-item strong{
  font-size: 11px;
  font-weight: 800;
}

.mapas-brujula b{
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  color: var(--texto);
}

.mapas-accion{
  justify-content: center;
  padding: 0;
  gap: 6px;
  grid-area: acciones;
}

.boton-icono-layout{
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.boton-icono-layout svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.tarjeta.encabezado-oculto .mapas-encabezado{
  position: relative;
  grid-template-columns: 1fr;
  grid-template-areas: "acciones";
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

.tarjeta.encabezado-oculto .mapas-selector,
.tarjeta.encabezado-oculto .mapas-leyendas,
.tarjeta.encabezado-oculto .mapas-orientacion,
.tarjeta.encabezado-oculto .clima-rango{
  display: none;
}

.tarjeta.encabezado-oculto .clima-tipos-dato{
  display: none !important;
}

.tarjeta.encabezado-oculto .mapas-accion{
  position: absolute;
  right: 0;
  top: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 4px;
  box-shadow: var(--sombra);
  z-index: 20;
}

/* En sanidad, al ocultar encabezado dejamos solo:
   animacion + ocultar encabezado + fullscreen. */
.tarjeta.mapas-sanidad.encabezado-oculto .mapas-accion{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tarjeta.mapas-sanidad.encabezado-oculto .mapas-sim-escala,
.tarjeta.mapas-sanidad.encabezado-oculto .mapas-sim-modo,
.tarjeta.mapas-sanidad.encabezado-oculto #leyenda-severidad{
  display: none !important;
}

.tarjeta.mapas-sanidad.encabezado-oculto .mapas-sim-controles{
  width: auto !important;
}


.layout-imagen{
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.layout-svg-inline{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.layout-svg-inline svg{
  width: 100%;
  height: 100%;
  display: block;
  max-height: 100%;
}

.mapas-sim-controles{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 4px;
}

.mapas-sim-semana{
  font-size: 12px;
  font-weight: 700;
  color: var(--texto);
  padding: 0 6px;
}

.mapas-sim-semana.avance-bajo{
  color: var(--error);
}

.mapas-sim-semana.avance-medio{
  color: var(--advertencia);
}

.mapas-sim-semana.avance-alto{
  color: var(--ok);
}

.plagas-selector{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.plaga-opcion{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto);
}

.plaga-opcion input[type="checkbox"]{
  width: 14px;
  height: 14px;
  accent-color: var(--ok);
}

.plaga-opcion .plaga-color{
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: transparent;
}

.plagas-modal-lista{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 12px;
  max-height: 55vh;
  overflow: auto;
  padding: 4px 2px;
}

#modal-plagas .aviso-plagas-modal{
  margin: 6px 0 10px;
  font-size: 12px;
}

#btn-plagas-mas{
  margin-top: 4px;
  white-space: nowrap;
}

.mapas-sanidad .mapas-encabezado{
  grid-template-columns: minmax(170px, 0.85fr) minmax(280px, 1fr) auto;
  grid-template-areas: "selector sistema acciones";
  align-items: stretch;
  gap: 10px;
}

.mapas-sanidad .mapas-encabezado .mapas-bloque{
  min-height: 56px;
  padding: 5px 8px;
}

.mapas-sanidad .plagas-selector{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.mapas-sanidad .mapas-sistema{
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.mapas-sanidad .mapas-selector{
  justify-content: flex-start;
}

.mapas-sanidad #selector-plaga{
  width: 100%;
  justify-content: flex-start;
  align-content: flex-start;
}

.mapas-sanidad .mapas-selector select#selector-invernadero{
  max-width: 200px;
  width: 100%;
}

.mapas-sanidad .mapas-accion{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
}

.mapas-sanidad .mapas-accion > *{
  max-width: 100%;
}

.mapas-sanidad .mapas-sim-controles{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-height: 36px;
  padding: 3px 4px;
  border-radius: 10px;
}

.mapas-sanidad .mapas-sim-acciones-mapa{
  flex-wrap: nowrap;
  justify-content: flex-start;
}

@media (max-width: 500px){
  .mapas-sanidad .mapas-sim-acciones-mapa{
    flex-wrap: wrap;
  }
}

.mapas-sanidad #selector-modo-intensidad{
  min-width: 132px;
}

.mapas-sanidad #selector-escala-tiempo{
  min-width: 112px;
}

.mapas-sanidad #sim-semana{
  min-width: 74px;
  text-align: center;
}

.mapas-sanidad #leyenda-severidad{
  padding: 0 6px;
  border-left: 1px solid var(--borde);
  border-right: 1px solid var(--borde);
}

.mapas-sanidad .plaga-opcion{
  gap: 4px;
  font-size: 11px;
  flex: 0 0 auto;
}

.mapas-sanidad .plaga-opcion .plaga-color{
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.mapas-sanidad .plaga-opcion .plaga-color::-webkit-color-swatch-wrapper{
  padding: 0;
}

.mapas-sanidad .plaga-opcion .plaga-color::-webkit-color-swatch{
  border: none;
  border-radius: 4px;
}

.mapas-sanidad .plaga-opcion .plaga-color::-moz-color-swatch{
  border: none;
  border-radius: 4px;
}

.tarjeta-mapas .layout-lienzo{
  position: relative;
}

.tarjeta-mapas .burbuja-leyenda-mapa{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  box-shadow: var(--sombra);
  z-index: 6;
  backdrop-filter: blur(2px);
}

.tarjeta-mapas .burbuja-leyenda-contenido{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.tarjeta-mapas .burbuja-leyenda-mapa[data-colapsada="1"] .burbuja-leyenda-contenido{
  display: none;
  pointer-events: none;
}

.tarjeta-mapas .burbuja-leyenda-mapa .insignia{
  margin: 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
}

.tarjeta-mapas .burbuja-orientacion{
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  box-shadow: var(--sombra);
  z-index: 6;
  backdrop-filter: blur(2px);
}

.tarjeta-mapas .burbuja-orientacion-contenido{
  position: relative;
  width: 100%;
  height: 100%;
}

.tarjeta-mapas .burbuja-orientacion[data-colapsada="1"]{
  opacity: 0;
  pointer-events: none;
}

.tarjeta-mapas .burbuja-orientacion[data-colapsada="1"] .burbuja-orientacion-contenido{
  display: none;
}

.tarjeta-mapas .burbuja-orientacion-contenido svg{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%) scale(.95);
}

.tarjeta-mapas .burbuja-orientacion-contenido svg circle,
.tarjeta-mapas .burbuja-orientacion-contenido svg line{
  fill: none;
  stroke: var(--texto_sec);
  stroke-width: 2.2;
}

.tarjeta-mapas .burbuja-orientacion-contenido svg polygon{
  fill: var(--texto_sec);
  stroke: none;
}

.tarjeta-mapas .brujula-letra{
  --anillo-radio: 27px;
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 10px;
  font-weight: 800;
  color: var(--texto);
  line-height: 1;
  min-width: 14px;
  display: grid;
  place-items: center;
  text-align: center;
  user-select: none;
}

.tarjeta-mapas .brujula-n{
  left: calc(50% - var(--anillo-radio));
  top: 50%;
  transform: translate(-50%, -50%);
}

.tarjeta-mapas .brujula-s{
  left: calc(50% + var(--anillo-radio));
  top: 50%;
  transform: translate(-50%, -50%);
}

.tarjeta-mapas .brujula-o{
  left: 50%;
  top: calc(50% - var(--anillo-radio));
  transform: translate(-50%, -50%);
}

.tarjeta-mapas .brujula-p{
  left: 50%;
  top: calc(50% + var(--anillo-radio));
  transform: translate(-50%, -50%);
}

.tarjeta-mapas .burbuja-orientacion-contenido svg circle:last-child{
  fill: var(--texto);
  stroke: none;
}

.mapas-produccion .burbuja-orientacion{
  right: 18px;
  bottom: 18px;
  width: 78px;
  height: 78px;
}

.mapas-produccion .burbuja-orientacion-contenido svg{
  width: 56px;
  height: 56px;
}

.mapas-produccion .brujula-letra{
  --anillo-radio: 29px;
}

.mapas-sanidad .layout-lienzo{
  position: relative;
}

.mapas-sanidad .burbuja-leyenda-mapa{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  box-shadow: var(--sombra);
  z-index: 6;
  backdrop-filter: blur(2px);
}

.tarjeta-mapas .hud-flotante-toggle{
  position: absolute;
  left: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  z-index: 7;
  border-radius: 10px;
  color: var(--info);
  background: color-mix(in srgb, var(--info) 14%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--info) 45%, var(--borde));
  box-shadow: var(--sombra);
  backdrop-filter: blur(2px);
}

.tarjeta-mapas .hud-flotante-toggle svg{
  width: 20px;
  height: 20px;
}

.tarjeta-mapas .hud-flotante-toggle:hover{
  background: color-mix(in srgb, var(--info) 22%, var(--superficie));
  border-color: color-mix(in srgb, var(--info) 60%, var(--borde));
}


.mapas-sanidad .burbuja-leyenda-contenido{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.mapas-sanidad .burbuja-leyenda-mapa[data-colapsada="1"] .burbuja-leyenda-contenido{
  display: none;
  pointer-events: none;
}

.mapas-sanidad .burbuja-leyenda-mapa .insignia{
  margin: 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
}

.mapas-sanidad .burbuja-orientacion{
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  box-shadow: var(--sombra);
  z-index: 6;
  backdrop-filter: blur(2px);
}

.mapas-sanidad .burbuja-orientacion-contenido{
  position: relative;
  width: 100%;
  height: 100%;
}

.mapas-sanidad .burbuja-orientacion[data-colapsada="1"]{
  opacity: 0;
  pointer-events: none;
}

.mapas-sanidad .burbuja-orientacion[data-colapsada="1"] .burbuja-orientacion-contenido{
  display: none;
}

.mapas-sanidad .burbuja-orientacion-rosa{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%) scale(.95);
}

.mapas-sanidad .burbuja-orientacion-rosa circle,
.mapas-sanidad .burbuja-orientacion-rosa line{
  fill: none;
  stroke: var(--texto_sec);
  stroke-width: 2.2;
}

.mapas-sanidad .burbuja-orientacion-rosa polygon{
  fill: var(--texto_sec);
  stroke: none;
}

.mapas-sanidad .burbuja-orientacion-rosa circle:last-child{
  fill: var(--texto);
  stroke: none;
}

.mapas-sanidad .burbuja-orientacion span{
  --anillo-radio: 27px;
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  color: var(--texto);
  line-height: 1;
  min-width: 16px;
  text-align: center;
  user-select: none;
}

.mapas-sanidad .burbuja-orientacion-norte{
  left: calc(50% - var(--anillo-radio));
  top: 50%;
  transform: translate(-50%, -50%);
}

.mapas-sanidad .burbuja-orientacion-sur{
  left: calc(50% + var(--anillo-radio));
  top: 50%;
  transform: translate(-50%, -50%);
}

.mapas-sanidad .burbuja-orientacion-oriente{
  left: 50%;
  top: calc(50% - var(--anillo-radio));
  transform: translate(-50%, -50%);
}

.mapas-sanidad .burbuja-orientacion-poniente{
  left: 50%;
  top: calc(50% + var(--anillo-radio));
  transform: translate(-50%, -50%);
}

@media (max-width: 1240px){
  .mapas-sanidad .mapas-encabezado{
    grid-template-columns: 1fr;
    grid-template-areas:
      "selector"
      "sistema"
      "acciones";
    align-items: start;
  }

  .mapas-sanidad .mapas-bloque{
    width: 100%;
    min-width: 0;
  }

  .mapas-sanidad .mapas-selector{
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
  }

  .mapas-sanidad .mapas-selector .boton{
    width: 100%;
  }

  .mapas-sanidad .mapas-selector select#selector-invernadero{
    max-width: none;
  }

  .mapas-sanidad .mapas-accion{
    width: 100%;
    justify-content: flex-start;
  }

  .mapas-sanidad .mapas-sim-controles{
    justify-content: flex-start;
    width: auto;
  }

  .mapas-sanidad #leyenda-severidad{
    border-left: 0;
    border-right: 0;
  }
}

@media (max-width: 900px){
  .mapas-sanidad .mapas-encabezado{
    grid-template-columns: 1fr;
  }

  .mapas-sanidad .mapas-accion{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    padding: 6px;
    gap: 6px;
  }

  .mapas-sanidad .mapas-bloque{
    width: 100%;
    min-width: 0;
  }

  .mapas-sanidad .mapas-selector{
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-content: stretch;
    gap: 6px;
  }

  .mapas-sanidad .mapas-selector .texto_suave{
    justify-self: start;
  }

  .mapas-sanidad .mapas-selector .boton{
    width: 100%;
  }

  .mapas-sanidad .mapas-selector select#selector-invernadero{
    max-width: none;
  }

  .mapas-sanidad .plagas-selector{
    width: 100%;
    justify-content: flex-start;
  }

  .mapas-sanidad .mapas-sim-controles{
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
  }

  .mapas-sanidad .mapas-sim-controles .boton{
    min-width: 36px;
  }

  .mapas-sanidad #leyenda-severidad{
    grid-column: 1 / -1;
  }

  .mapas-sanidad #leyenda-severidad{
    border-left: 0;
    border-right: 0;
    padding: 0;
  }

  .mapas-sanidad .burbuja-leyenda-mapa{
    left: 10px;
    bottom: 10px;
    padding: 6px;
    gap: 4px;
  }

  .tarjeta-mapas .hud-flotante-toggle{
    left: 10px;
    top: 10px;
    width: 36px;
    height: 36px;
  }

  .mapas-sanidad .burbuja-leyenda-mapa .insignia{
    font-size: 10px;
    padding: 5px 7px;
  }
}

@media (max-width: 500px){
  .mapas-sanidad .mapas-accion{
    grid-template-columns: 1fr;
  }
}
.tarjeta.layout-pantalla-completa{
  position: fixed;
  inset: 0;
  z-index: 9999;
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.tarjeta.layout-pantalla-completa .layout-lienzo{
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  margin-top: 0;
}

.tarjeta.layout-pantalla-completa .layout-imagen{
  max-height: none;
}

.tarjeta.layout-pantalla-completa .mapas-encabezado{
  padding: 8px 8px 0;
}

@media (max-width: 1024px){
  .tarjeta.layout-pantalla-completa{
    inset: 0;
    padding: 0;
    border-radius: 0;
  }

  .tarjeta.layout-pantalla-completa .mapas-encabezado{
    padding: 6px 6px 0;
    margin-bottom: 6px;
  }
}

.tarjeta h3{
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--texto_sec);
  font-weight: 700;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.kpi{ display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.valor{ font-size: 28px; font-weight: 800; letter-spacing: -0.6px; line-height: 1; }
.unidad{ font-size: 12px; color: var(--texto_sec); margin-left: 6px; font-weight: 700; }
.sub{ margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.texto_suave{ color: var(--texto_sec); font-size: 12px; }

/* Insignias */
.insignia{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--borde);
  background: var(--superficie_alt);

  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.punto{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--texto_suave);
}

.insignia.ok{ border-color: rgba(63,174,108,0.35); background: rgba(63,174,108,0.12); }
.insignia.ok .punto{ background: var(--ok); }
.insignia.pasillo{ border-color: rgba(122,122,122,0.4); background: rgba(122,122,122,0.14); }
.insignia.pasillo .punto{ background: #8f8f8f; }
.mapas-leyendas .insignia{
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 1240px){
  .mapas-encabezado{
    grid-template-columns: 1fr;
  }

  .mapas-brujula{
    flex-wrap: wrap;
  }
}

@media (max-width: 1024px){
  .mapas-sanidad .mapas-encabezado{
    grid-template-columns: 1fr;
    grid-template-areas:
      "selector"
      "sistema"
      "acciones";
  }

  .mapas-sanidad .mapas-selector,
  .mapas-sanidad .mapas-sistema,
  .mapas-sanidad .mapas-accion{
    grid-column: 1 / -1;
  }

  .mapas-encabezado{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "selector acciones"
      "sistema sector"
      "leyendas leyendas"
      "orientacion orientacion";
    grid-auto-rows: minmax(40px, auto);
  }

  .mapas-selector{
    grid-column: 1 / 2;
  }

  .mapas-accion{
    grid-column: 2 / 3;
    justify-content: flex-end;
  }

  .mapas-sistema{
    grid-column: 1 / 2;
  }

  .mapas-sector{
    grid-column: 2 / 3;
  }

  .mapas-leyendas{
    grid-column: 1 / 3;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .mapas-orientacion{
    grid-column: 1 / 3;
    justify-content: flex-start;
  }

  .clima-encabezado{
    grid-template-columns: 1fr;
    grid-template-areas:
      "selector"
      "rango"
      "acciones";
  }

  .clima-encabezado .mapas-selector,
  .clima-encabezado .clima-rango,
  .clima-encabezado .mapas-accion{
    grid-column: 1 / -1;
    width: 100%;
  }

  .clima-rango{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .clima-rango-campo{
    flex: 1 1 240px;
  }

  .clima-rango-campo .boton{
    width: 100%;
    min-width: 0;
  }

  .diseno-encabezado{
    grid-template-columns: 1fr;
    grid-template-areas:
      "selector"
      "sistema"
      "acciones";
  }

  .diseno-encabezado .mapas-selector,
  .diseno-encabezado .mapas-sistema,
  .diseno-encabezado .mapas-accion{
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 640px){
  .mapas-encabezado{
    grid-template-columns: 1fr auto;
    gap: 8px;
    grid-template-areas:
      "selector acciones"
      "sistema sistema"
      "sector sector"
      "leyendas leyendas"
      "orientacion orientacion";
  }

  .diseno-encabezado{
    grid-template-columns: 1fr;
    grid-template-areas:
      "selector"
      "sistema"
      "acciones";
    grid-auto-rows: auto;
  }

  .diseno-encabezado .mapas-selector,
  .diseno-encabezado .mapas-sistema,
  .diseno-encabezado .mapas-accion{
    grid-column: 1 / -1;
    width: 100%;
  }

  .clima-encabezado{
    grid-template-columns: 1fr;
    grid-template-areas:
      "selector"
      "rango"
      "acciones";
    grid-auto-rows: auto;
  }

  .clima-encabezado .mapas-selector,
  .clima-encabezado .clima-rango,
  .clima-encabezado .mapas-accion{
    grid-column: 1 / -1;
    width: 100%;
  }

  .mapas-leyendas .insignia{
    font-size: 10px;
    padding: 6px 8px;
  }

  .mapas-orientacion{
    font-size: 12px;
  }

  .mapas-orientacion-titulo{
    font-size: 10px;
  }

  .mapas-brujula .brujula-item{
    padding: 2px 7px;
  }

  .mapas-brujula b{
    font-size: 14px;
  }

  .clima-rango{
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 6px;
  }

  .clima-nav-botones{
    justify-self: stretch;
    width: 100%;
  }

  .clima-nav-botones .boton{
    flex: 1 1 0;
    min-width: 0;
  }

  .clima-rango-campo{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: stretch;
  }

  .clima-rango-campo .texto_suave{
    min-width: 0;
    line-height: 1.1;
  }

  .clima-rango-campo .boton{
    width: 100%;
  }

  .clima-encabezado .mapas-bloque{
    min-height: 0;
    padding: 6px 8px;
  }

  .clima-encabezado .mapas-accion{
    justify-content: flex-start;
    gap: 5px;
  }
}

.insignia.advertencia{ border-color: rgba(230,162,60,0.35); background: rgba(230,162,60,0.12); }
.insignia.advertencia .punto{ background: var(--advertencia); }

.insignia.error{ border-color: rgba(192,57,43,0.35); background: rgba(192,57,43,0.12); }
.insignia.error .punto{ background: var(--error); }

.insignia.info{ border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.12); }
.insignia.info .punto{ background: var(--info); }

/* =========================================
   SIDEBAR COLAPSABLE (MODO B)
   ========================================= */
html[data-barra="colapsada"]{ --ancho_barra: 76px; }

html[data-barra="colapsada"] .navegacion a{
  justify-content: center;
  gap: 0;
  position: relative;
}
html[data-barra="colapsada"] .nav_texto,
html[data-barra="colapsada"] .nav_meta{ display: none; }

/* Tooltip */
html[data-barra="colapsada"] .navegacion a::after{
  content: attr(data-tip);
  position: absolute;
  left: 86px;
  top: 50%;
  transform: translateY(-50%);

  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);

  box-shadow: var(--sombra);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 2000;
}
html[data-barra="colapsada"] .navegacion a:hover::after{ opacity: 1; }

/* Ajuste del indicador activo en modo colapsado */
html[data-barra="colapsada"] .navegacion a.activo::before{
  left: 6px;
  transform: none;
  top: 10px;
  bottom: 10px;
  width: 4px;
  height: auto;
}
html[data-barra="colapsada"] .marca{
  justify-content: center;
}

html[data-barra="colapsada"] .marca_texto{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================================
   RESPONSIVE (<= 1024px)
   ========================================= */
@media (max-width: 1024px){
  html[data-barra="colapsada"] .navegacion a::after{ display: none; }

  .app{ grid-template-columns: 1fr; }
  .barra_lateral{ height: auto; position: relative; }

  .barra_superior{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .acciones{
    width: 100%;
    justify-content: flex-start;
  }

  .busqueda{ min-width: 0; width: 100%; }
  .tarjeta{ grid-column: span 12; }
}

/* =========================================
   SIDEBAR MÓVIL TIPO HAMBURGUESA
   ========================================= */
.overlay_menu{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999;
  display: none;
}

@media (max-width: 1024px){
  .barra_lateral{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;

    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  html[data-menu-movil="abierto"] .barra_lateral{
    transform: translateX(0);
  }

  html[data-menu-movil="abierto"] .overlay_menu{
    display: block;
  }

  .boton_hamburguesa{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
  }
}

@media (min-width: 1025px){
  .boton_hamburguesa{ display: none; }
}

/* ======================================
   Barra de carga iluminándose (sin JS)
   ====================================== */
.carga_dev{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:14px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.carga_texto{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.barra_carga{
  position:relative;
  width: min(320px, 42vw);
  height: 14px;

  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie_alt);
  overflow:hidden;
  flex: 0 0 auto;
}

.barra_relleno{
  position:absolute;
  inset:0;
  width: 35%;
  transform: translateX(-40%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--marca) 85%, white),
    var(--marca),
    color-mix(in srgb, var(--marca) 85%, white),
    transparent
  );
  border-radius: 999px;
  box-shadow:
    0 0 12px color-mix(in srgb, var(--marca) 70%, white),
    0 0 24px color-mix(in srgb, var(--marca) 55%, white),
    0 0 48px color-mix(in srgb, var(--marca) 35%, white);
  animation: carga_mover 1.6s ease-in-out infinite;
}

.barra_brillo{
  position:absolute;
  inset:-60% 0;
  width: 45%;
  transform: translateX(-80%) rotate(14deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.75),
    transparent
  );
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: carga_brillo 1.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes carga_mover{
  0%   { transform: translateX(-60%); }
  50%  { transform: translateX(210%); }
  100% { transform: translateX(-60%); }
}

@keyframes carga_brillo{
  0%   { transform: translateX(-120%) rotate(14deg); opacity: 0; }
  25%  { opacity: 1; }
  60%  { opacity: .9; }
  100% { transform: translateX(240%) rotate(14deg); opacity: 0; }
}

@media (max-width: 640px){
  .carga_dev{ flex-direction:column; align-items:stretch; }
  .barra_carga{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .barra_relleno, .barra_brillo{ animation: none; }
  .barra_relleno{ width: 55%; transform: none; opacity: .8; }
  .barra_brillo{ display:none; }
}

/* ===============================
   Usuario en barra lateral
   =============================== */
.usuario_barra{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--borde);
}

.usuario_link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color: var(--texto_sec);
  border:1px solid transparent;
}

.usuario_link:hover{
  background: var(--superficie_alt);
  color: var(--texto);
  border-color: var(--borde);
}

.usuario_icono{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.usuario_icono svg{
  width:18px;
  height:18px;
  stroke: currentColor;
  fill: none;
  stroke-width:2;
}

.usuario_texto{
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html[data-barra="colapsada"] .usuario_texto{
  display: none;
}

html[data-barra="colapsada"] .usuario_link{
  justify-content:center;
  position:relative;
}

html[data-barra="colapsada"] .usuario_link::after{
  content: attr(data-tip);
  position:absolute;
  left:86px;
  top:50%;
  transform:translateY(-50%);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}

html[data-barra="colapsada"] .usuario_link:hover::after{ opacity:1; }

/* Inputs Django */
.tarjeta input[type="password"],
.tarjeta input[type="text"],
.tarjeta input[type="email"]{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  outline:none;
}
.plagas-leyenda{
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.separador-vertical{
  width: 1px;
  height: 18px;
  background: var(--borde);
  display: inline-block;
  margin: 0 4px;
}