/* =========================================================
   GROW PLANNER — PULIDO VISUAL
   No modifica lógica ni datos.
   ========================================================= */

:root {
  --gp-line-soft: rgba(93, 184, 111, .18);
  --gp-line: rgba(93, 184, 111, .28);
  --gp-glow: rgba(67, 190, 91, .18);
  --gp-panel: rgba(5, 28, 17, .74);
}

/* Profundidad ambiental extremadamente sutil */
body {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(41, 126, 66, .055), transparent 27%),
    radial-gradient(circle at 88% 36%, rgba(29, 103, 65, .045), transparent 30%),
    radial-gradient(circle at 52% 92%, rgba(55, 130, 70, .035), transparent 34%);
}

/* ---------- Tarjetas de días ---------- */

.day {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -18px 35px rgba(0,0,0,.10),
    0 7px 20px rgba(0,0,0,.16);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

/* Velo superior para mejorar la legibilidad del número/texto */
.day::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 44%;
  background: linear-gradient(
    to bottom,
    rgba(2,17,11,.68),
    rgba(2,17,11,.28) 58%,
    transparent
  );
  pointer-events: none;
  border-radius: inherit;
}

/* El contenido sigue por encima de foto + velo */
.day > * {
  position: relative;
  z-index: 3;
}

.day:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 187, 108, .38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -18px 35px rgba(0,0,0,.08),
    0 11px 26px rgba(0,0,0,.22),
    0 0 20px rgba(47, 155, 70, .07);
}

/* ---------- HOY ---------- */

.day.is-today,
.day.today,
.day.current-day {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -18px 35px rgba(0,0,0,.08),
    0 0 0 1px rgba(78, 188, 91, .12),
    0 0 24px rgba(57, 168, 76, .12),
    0 10px 28px rgba(0,0,0,.20);
}

/* HOY: conservar el tamaño original del proyecto.
   Solo se mantiene por encima del fondo fotográfico. */
.day .today-badge,
.day .day-today,
.day .today-label,
.day .is-today-label,
.day .badge-today {
  position: relative;
  z-index: 6;
  overflow: visible;
  transform: none;
}

/* ---------- Microinteracciones generales ---------- */

button,
.btn,
.action-btn,
.icon-btn,
.card-action {
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    filter .16s ease;
}

button:hover,
.btn:hover,
.action-btn:hover,
.icon-btn:hover,
.card-action:hover {
  filter: brightness(1.06);
}

button:active,
.btn:active,
.action-btn:active,
.icon-btn:active,
.card-action:active {
  transform: translateY(1px) scale(.985);
}

/* ---------- Barra de métricas ---------- */

.metrics-bar,
.metrics-strip,
.dashboard-metrics {
  background:
    linear-gradient(145deg, rgba(7,34,21,.78), rgba(3,22,14,.72));
  border-color: var(--gp-line-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 7px 22px rgba(0,0,0,.13);
}

.metrics-bar > *,
.metrics-strip > *,
.dashboard-metrics > * {
  transition: background-color .16s ease, transform .16s ease;
}

.metrics-bar > *:hover,
.metrics-strip > *:hover,
.dashboard-metrics > *:hover {
  background: rgba(54, 139, 71, .055);
  transform: translateY(-1px);
}

/* ---------- Tarjetas secundarias ---------- */

.note-card,
.notes-card,
.events-card,
.photos-card,
.secondary-card {
  background:
    linear-gradient(145deg, rgba(7,32,20,.76), rgba(3,22,14,.70));
  border-color: var(--gp-line-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 7px 22px rgba(0,0,0,.12);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.note-card:hover,
.notes-card:hover,
.events-card:hover,
.photos-card:hover,
.secondary-card:hover {
  border-color: var(--gp-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 26px rgba(0,0,0,.16);
}

/* ---------- Fotos ---------- */

.photos-card img,
.photo-card img,
.gallery img {
  transition: transform .22s ease, filter .22s ease;
}

.photos-card img:hover,
.photo-card img:hover,
.gallery img:hover {
  transform: scale(1.025);
  filter: brightness(1.04) saturate(1.04);
}

/* ---------- Gráficas ---------- */

.chart-card,
.weekly-chart,
.chart-panel {
  background:
    linear-gradient(145deg, rgba(4,27,17,.72), rgba(2,19,13,.68));
  border-color: var(--gp-line-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

/* ---------- Respeto por accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
  .day,
  button,
  .btn,
  .action-btn,
  .icon-btn,
  .card-action,
  .photos-card img,
  .photo-card img,
  .gallery img {
    transition: none !important;
  }
}


/* =========================================================
   HOY — RESTAURAR TAMAÑO COMPACTO ORIGINAL
   Este override se deja al final para ganar a las múltiples
   reglas heredadas de 01/02/04-calendar.
   ========================================================= */
.day.today::before {
  top: 6px !important;
  left: 6px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: 0 !important;

  padding: 2px 6px !important;
  margin: 0 !important;

  border-radius: 4px !important;
  font-size: .55rem !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  font-weight: 800 !important;

  white-space: nowrap !important;
  box-sizing: border-box !important;

  animation: none !important;
}


/* =========================================================
   HOY — CENTRADO + 25% MÁS GRANDE
   ========================================================= */
.day.today::before {
  top: -11px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  padding: 2.5px 7.5px !important;
  font-size: .6875rem !important; /* .55rem × 1.25 */
  line-height: 1 !important;
  letter-spacing: .14em !important;

  border-radius: 999px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;

  background: linear-gradient(135deg, var(--primary-glow), var(--primary)) !important;
  color: #06130a !important;
  box-shadow: 0 4px 12px rgba(126, 224, 138, .5) !important;

  animation: none !important;
}

/* =========================================================
   HOY — MÓVIL: dentro de la tarjeta, no sobresaliendo
   La regla de arriba (CENTRADO + 25% MÁS GRANDE) la sube -11px por
   encima de la tarjeta. En pantallas ≤640px, .calendar-shell tiene
   overflow-x:auto (ver 02-calendar.css), lo que por comportamiento
   estándar de CSS fuerza overflow-y a "auto" aunque esté puesto en
   "visible" — así que ese sobresaliente se recorta y la etiqueta casi
   no se ve. Se queda dentro de la tarjeta solo en móvil. Tiene que ir
   DESPUÉS de la regla de arriba en este mismo archivo para ganarle
   (misma especificidad + !important en ambas: gana la que esté más
   abajo en el CSS ya combinado). */
@media (max-width: 640px) {
  .day.today::before {
    top: 8px !important;
  }
}


/* =========================================================
   FOND BOTÁNICO — CAJAS DE NOMBRES DE LOS DÍAS
   ========================================================= */

/*
  El selector base cubre las cajas reales de nombres si están
  marcadas como .weekday-header / .day-name. Los selectores
  alternativos permiten integrarlo sin tocar HTML existente.
*/
.weekday-header,
.day-name,
.weekday-name,
.calendar-weekday {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    linear-gradient(
      180deg,
      rgba(9, 38, 24, .94),
      rgba(5, 27, 17, .92)
    );

  border: 1px solid rgba(83, 157, 96, .20);
  border-radius: 10px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 3px 10px rgba(0,0,0,.10);
}

/* La imagen ocupa toda la caja y se desvanece hacia los bordes. */
.weekday-header::after,
.day-name::after,
.weekday-name::after,
.calendar-weekday::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  opacity: .62;
  mix-blend-mode: screen;
  pointer-events: none;

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.62) 10%,
    #000 28%,
    #000 72%,
    rgba(0,0,0,.62) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.62) 10%,
    #000 28%,
    #000 72%,
    rgba(0,0,0,.62) 90%,
    transparent 100%
  );
}

/* Texto siempre limpio y por encima de la ilustración. */
.weekday-header > *,
.day-name > *,
.weekday-name > *,
.calendar-weekday > * {
  position: relative;
  z-index: 2;
}

.weekday-header,
.day-name,
.weekday-name,
.calendar-weekday {
  color: rgba(232, 244, 233, .90);
  text-shadow: 0 1px 5px rgba(0,0,0,.42);
}

/* No hay resaltado especial del fin de semana. */
.weekday-header:nth-child(6),
.weekday-header:nth-child(7),
.day-name:nth-child(6),
.day-name:nth-child(7) {
  border-color: rgba(83,157,96,.20);
}


/* =========================================================
   GROWPLANNER — FONDO REAL DE LOS ENCABEZADOS .weekday
   ---------------------------------------------------------
   El calendario genera las cajas de LUNES...DOMINGO como
   elementos .weekday. Las reglas anteriores apuntaban a
   selectores inexistentes, por eso no se veía ningún cambio.
   Estas reglas usan el selector REAL.
   ========================================================= */

.calendar .weekday {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Mantener el aspecto base, añadiendo la imagen por debajo. */
  background-color: rgba(5, 27, 17, .96);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  border-color: rgba(83, 157, 96, .34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -10px 22px rgba(0,0,0,.16),
    0 4px 12px rgba(0,0,0,.18);
}

/* Velo para integrar la fotografía con el verde oscuro. */
.calendar .weekday::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(3,20,12,.62),
      rgba(3,20,12,.12) 42%,
      rgba(3,20,12,.34)
    ),
    linear-gradient(
      180deg,
      rgba(3,20,12,.18),
      rgba(3,20,12,.42)
    );

  opacity: .92;
}

/* Texto de los encabezados: limpio y legible. */
.calendar .weekday {
  color: #eafbe6;
  text-shadow:
    0 1px 3px rgba(0,0,0,.72),
    0 0 8px rgba(0,0,0,.35);
}

/* El hover mejora un poco la foto, sin convertirla en un efecto fuerte. */
.calendar .weekday:hover {
  background-size: 108%;
  filter: brightness(1.035);
}

/* No se destaca sábado/domingo. */
.calendar .weekday:nth-child(6),
.calendar .weekday:nth-child(7) {
  border-color: rgba(83,157,96,.34);
}


/* =========================================================
   FONDOS FOTOGRÁFICOS REALES — NOMBRES DE LOS DÍAS
   ========================================================= */

.calendar .weekday {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: rgba(5,27,17,.96);
  overflow: hidden;
  isolation: isolate;
}

.calendar .weekday::after {
  background:
    linear-gradient(
      90deg,
      rgba(3,20,12,.74),
      rgba(3,20,12,.28) 45%,
      rgba(3,20,12,.58)
    ),
    linear-gradient(
      180deg,
      rgba(3,20,12,.24),
      rgba(3,20,12,.54)
    );
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

.calendar .weekday {
  text-shadow:
    0 1px 4px rgba(0,0,0,.85),
    0 0 9px rgba(0,0,0,.45);
}


/* =========================================================
   FONDOS DE DÍAS — FOTOGRAFÍA MUY SUTIL
   Misma presencia visual que las fotografías de las tarjetas.
   ========================================================= */

.calendar .weekday {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* La fotografía queda muy por debajo del texto. */
  background-blend-mode: luminosity;
  background-color: rgba(5, 27, 17, .96);

  border-color: rgba(83, 157, 96, .22);
}

.calendar .weekday::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* Capa oscura fuerte para que la hoja sea solo una textura. */
  background:
    linear-gradient(
      90deg,
      rgba(3, 20, 12, .88),
      rgba(3, 20, 12, .68) 50%,
      rgba(3, 20, 12, .88)
    ),
    linear-gradient(
      180deg,
      rgba(3, 20, 12, .74),
      rgba(3, 20, 12, .88)
    );

  opacity: .92;
}

/* Evita que el hover haga aparecer demasiado la fotografía. */
.calendar .weekday:hover {
  background-size: cover;
  filter: brightness(1.02);
}


/* =========================================================
   ENCABEZADOS DE DÍAS — BORDE SÓLIDO
   ========================================================= */
.calendar .weekday {
  border: 1px solid #4f9b5d !important;
  border-style: solid !important;
  border-color: #4f9b5d !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 3px 10px rgba(0,0,0,.12);
}


/* =========================================================
   MENÚ DE ACCIONES DEL DÍA — REDISEÑO VISUAL
   Solo cambia presentación. Las acciones y datos son los mismos.
   ========================================================= */

.day-menu {
  width: 240px !important;
  max-width: calc(100vw - 16px);
  padding: 9px !important;
  background:
    linear-gradient(145deg, rgba(8, 31, 20, .985), rgba(3, 18, 12, .985)) !important;
  border: 1px solid rgba(76, 174, 91, .42) !important;
  border-radius: 17px !important;
  box-shadow:
    0 22px 48px rgba(0,0,0,.48),
    0 0 28px rgba(50, 156, 68, .10),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.day-menu::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin: 1px auto 7px;
  border-radius: 999px;
  background: rgba(111, 205, 119, .30);
}

.day-menu-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day-menu-divider {
  height: 1px;
  margin: 7px 4px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(95, 165, 105, .24),
    transparent
  );
}

.day-menu .color-option {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  width: 100%;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--text) !important;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}

.day-menu .color-option:hover:not(:disabled) {
  background: rgba(54, 151, 72, .12) !important;
  border-color: rgba(83, 179, 96, .18) !important;
  transform: none;
}

.day-menu .day-menu-icon {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(72, 158, 83, .10);
  font-size: 1.08rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.day-menu .day-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .92rem;
  line-height: 1.15;
}

.day-menu .day-menu-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(91, 197, 103, .22);
  border-radius: 999px;
  color: #7be486;
  background: rgba(67, 171, 79, .09);
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.day-menu .day-menu-state i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #62d76d;
  box-shadow: 0 0 7px rgba(98,215,109,.55);
}

.day-menu .color-option.is-active {
  background: rgba(63, 157, 74, .10) !important;
  border-color: rgba(87, 184, 98, .24) !important;
}

.day-menu .color-option.is-danger {
  color: #ff9a9a !important;
  background: rgba(176, 39, 39, .075) !important;
}

.day-menu .color-option.is-danger:hover:not(:disabled) {
  background: rgba(191, 46, 46, .15) !important;
  border-color: rgba(229, 88, 88, .24) !important;
}

.day-menu .color-option.is-danger .day-menu-icon {
  background: rgba(214, 60, 60, .12);
}

.day-menu .color-option.is-disabled,
.day-menu .color-option:disabled {
  opacity: .34 !important;
  filter: grayscale(.75) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.day-menu .day-menu-photo {
  color: rgba(232, 244, 233, .88) !important;
}

.day-menu .day-menu-photo .day-menu-icon {
  background: rgba(92, 174, 101, .08);
}

@media (max-width: 560px) {
  .day-menu {
    width: calc(100vw - 16px) !important;
    max-height: min(72vh, 520px);
    overflow-y: auto;
  }

  .day-menu .color-option {
    min-height: 46px;
  }

  .day-menu .day-menu-label {
    font-size: .88rem;
  }
}


/* Menú de días compacto: sin etiqueta ACTIVO */
.day-menu {
  width: 240px !important;
  max-width: calc(100vw - 16px);
  padding: 7px !important;
}

.day-menu .color-option {
  min-height: 42px;
  padding: 7px 8px !important;
  gap: 9px;
}

.day-menu .day-menu-icon {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
  font-size: 1rem;
}

.day-menu .day-menu-label {
  font-size: .86rem;
}

/* Ya no se muestra ningún indicador de estado dentro del menú. */
.day-menu .day-menu-state {
  display: none !important;
}

@media (max-width: 560px) {
  .day-menu {
    width: calc(100vw - 16px) !important;
  }
}


/* Menú de días: reducción adicional del 25% */
.day-menu {
  width: 180px !important;
  max-width: calc(100vw - 16px);
  padding: 5px !important;
  border-radius: 13px !important;
}

.day-menu .color-option {
  min-height: 35px;
  padding: 5px 6px !important;
  gap: 7px;
  border-radius: 8px !important;
}

.day-menu .day-menu-icon {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: .88rem;
}

.day-menu .day-menu-label {
  font-size: .74rem;
}

.day-menu .day-menu-divider {
  margin: 4px 3px;
}

.day-menu::before {
  width: 34px;
  height: 3px;
  margin: 0 auto 4px;
}

@media (max-width: 560px) {
  .day-menu {
    width: calc(50vw - 8px) !important;
  }
}


/* El menú usa coordenadas de viewport y sigue al botón al hacer scroll. */
.day-menu {
  position: fixed !important;
  z-index: 10000 !important;
}

/* Candado integrado en el menú; el botón independiente se elimina. */
.day-head .lock-btn { display: none !important; }
.day-menu .day-menu-lock {
  color: #dff8e2 !important;
  background: rgba(75,164,86,.08) !important;
  border-color: rgba(83,177,94,.16) !important;
}
.day-menu .day-menu-lock:hover { background: rgba(75,164,86,.16) !important; }
.day-menu .day-menu-lock.is-locked {
  color: #b9f2c0 !important;
  background: rgba(55,145,69,.13) !important;
}
.day-menu .color-option.is-disabled,
.day-menu .color-option:disabled {
  opacity: .30 !important;
  filter: grayscale(.75) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* =========================================================
   COSTE TOTAL — MISMA TIPOGRAFÍA QUE "Sin cepa"
   Solo cambia el tono a azul.
   ========================================================= */
.strain-tag #costInline,
.cost-inline {
  font-family: inherit !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  line-height: inherit !important;
  color: #42d6b8 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.42) !important;
  white-space: nowrap !important;
}


/* NADA pasa al menú como "Sin acciones"; no queda botón visible en la tarjeta. */
.metrics {
  grid-template-areas: "temp hum" "ph ec" !important;
}
.day-menu .day-menu-nothing {
  color: #cbd5e1 !important;
}
.day-menu .day-menu-nothing:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 9%, transparent) !important;
}


/* =========================================================
   MÉTRICAS — ESTILO 3
   Compactas, modernas, icono + valor + banda de unidad.
   ========================================================= */
.metric-style3 {
  position: relative !important;
  height: 52px !important;
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  grid-template-rows: 1fr 16px !important;
  grid-template-areas:
    "icon value"
    "unit unit" !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-top-width: 3px !important;
  border-radius: 7px !important;
  background: rgba(7,25,17,.74) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 3px 9px rgba(0,0,0,.18) !important;
  transition: border-color .18s ease, transform .15s ease, box-shadow .18s ease !important;
}

.metric-style3:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 5px 12px rgba(0,0,0,.24) !important;
}

.metric-style3:focus-within {
  box-shadow: 0 0 0 1px currentColor, 0 5px 14px rgba(0,0,0,.24) !important;
}

.metric-style3 .metric-icon {
  grid-area: icon;
  align-self: center;
  justify-self: center;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}

.metric-style3 .metric-value-wrap {
  grid-area: value;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.metric-style3 .metric-input {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  padding: 0 7px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #f2f7f4 !important;
  text-align: center !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

.metric-style3 .metric-input::placeholder {
  color: rgba(220,235,226,.42) !important;
  opacity: 1;
  font-weight: 700 !important;
}

.metric-style3 .metric-input:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

.metric-style3 .metric-unit {
  grid-area: unit;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 16px;
  padding: 0 5px;
  color: #fff !important;
  font-size: .56rem !important;
  font-weight: 850 !important;
  letter-spacing: .02em;
  line-height: 1;
}

.metric-style3.metric-temp {
  color: #36b89c;
  border-top-color: #36b89c !important;
}
.metric-style3.metric-temp .metric-icon { color: #36b89c; }
.metric-style3.metric-temp .metric-unit { background: #168c73; }

.metric-style3.metric-hum {
  color: #4d91e6;
  border-top-color: #4d91e6 !important;
}
.metric-style3.metric-hum .metric-icon { color: #4d91e6; }
.metric-style3.metric-hum .metric-unit { background: #2677c9; }

.metric-style3.metric-ph {
  color: #8b6bd3;
  border-top-color: #8b6bd3 !important;
}
.metric-style3.metric-ph .metric-icon {
  color: #a993ef;
  font-size: .72rem;
  border: 1px solid rgba(169,147,239,.75);
  border-radius: 50%;
}
.metric-style3.metric-ph .metric-unit { background: #7253b7; }

.metric-style3.metric-ec {
  color: #f1a91a;
  border-top-color: #f1a91a !important;
}
.metric-style3.metric-ec .metric-icon { color: #f1a91a; }
.metric-style3.metric-ec .metric-unit { background: #db9410; }

.metric-style3.out-of-range {
  border-color: var(--danger) !important;
  border-top-color: var(--danger) !important;
  box-shadow: 0 0 8px rgba(239,68,68,.28) !important;
}
.metric-style3.out-of-range .metric-input {
  color: var(--danger-bright) !important;
}

.metric-style3.is-disabled {
  opacity: .58;
}


/* =========================================================
   MÉTRICAS — ajuste solicitado
   Sin línea superior, sin línea inferior y sin símbolo/franja inferior.
   ========================================================= */
.metric-style3 {
  border-top: 0 !important;
  border-bottom: 0 !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "icon value" !important;
}

.metric-style3 .metric-unit {
  display: none !important;
}

.metric-style3.metric-temp,
.metric-style3.metric-hum,
.metric-style3.metric-ph,
.metric-style3.metric-ec {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}


/* =========================================================
   MÉTRICAS — tamaño compacto
   Reducidas para encajar mejor dentro de la tarjeta del día.
   ========================================================= */
.metric-style3 {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 6px !important;
  grid-template-columns: 23px 1fr !important;
}

.metric-style3 .metric-icon {
  width: 20px !important;
  height: 20px !important;
  font-size: 14px !important;
}

.metric-style3 .metric-input {
  padding: 0 5px !important;
  font-size: .78rem !important;
}

.metric-style3.metric-ph .metric-icon {
  font-size: .62rem !important;
}

.metric-style3 .metric-tooltip {
  font-size: .65rem !important;
}


/* =========================================================
   MÉTRICAS — iconos y separación refinados
   ========================================================= */
.metric-style3 {
  grid-template-columns: 18px 1fr !important;
}

.metric-style3 .metric-icon {
  width: 17px !important;
  height: 20px !important;
  font-size: 13px !important;
  margin-right: -1px !important;
}

.metric-style3 .metric-input {
  padding-left: 1px !important;
  padding-right: 2px !important;
  text-align: left !important;
}

.metric-style3.metric-temp .metric-icon {
  position: relative;
  font-size: 0 !important;
  width: 14px !important;
  height: 20px !important;
}

/* Termómetro limpio construido con CSS, evitando el glifo ♨. */
.metric-style3.metric-temp .metric-icon::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 5px 5px 4px 4px;
  box-sizing: border-box;
}

.metric-style3.metric-temp .metric-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset 0 0 0 2px rgba(7,25,17,.74);
}

.metric-style3.metric-hum .metric-icon,
.metric-style3.metric-ec .metric-icon {
  margin-right: 0 !important;
}

.metric-style3.metric-ph .metric-icon {
  margin-right: 0 !important;
}

.metric-style3.metric-ph .metric-input,
.metric-style3.metric-ec .metric-input,
.metric-style3.metric-hum .metric-input {
  padding-left: 1px !important;
}


/* =========================================================
   MÉTRICAS — ajuste de iconos
   pH y EC sin símbolo; humedad con gota limpia por CSS.
   ========================================================= */
.metric-style3.metric-ph .metric-icon,
.metric-style3.metric-ec .metric-icon {
  display: none !important;
}

.metric-style3.metric-ph,
.metric-style3.metric-ec {
  grid-template-columns: 1fr !important;
}

.metric-style3.metric-ph .metric-input,
.metric-style3.metric-ec .metric-input {
  padding-left: 3px !important;
  text-align: center !important;
}

.metric-style3.metric-hum .metric-icon {
  position: relative;
  width: 14px !important;
  height: 19px !important;
  font-size: 0 !important;
  margin-right: 0 !important;
}

.metric-style3.metric-hum .metric-icon::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 8px;
  height: 13px;
  background: currentColor;
  border-radius: 70% 70% 70% 0;
  transform: rotate(-45deg);
}

.metric-style3.metric-hum .metric-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 3px;
  height: 6px;
  border-radius: 50%;
  background: rgba(7,25,17,.72);
}


/* Aviso visible cuando una métrica queda fuera del rango de su fase. */
.metric-style3 {
  overflow: visible !important;
  margin-bottom: 15px !important;
}
.metric-range-message {
  position: absolute;
  left: 2px;
  right: 2px;
  top: calc(100% + 3px);
  z-index: 8;
  padding: 3px 5px;
  border: 1px solid rgba(239,68,68,.34);
  border-radius: 4px;
  background: rgba(80,16,20,.96);
  color: #ffb4b4;
  font-size: .56rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.28);
}
.metric-style3:not(.out-of-range) .metric-range-message {
  display: none !important;
}
.metric-style3.out-of-range .metric-range-message {
  display: block !important;
}


/* Aviso de rango: SOLO visible mientras el ratón está sobre el campo. */
.metric-style3 .metric-range-message {
  display: none !important;
}
.metric-style3.out-of-range:hover .metric-range-message {
  display: block !important;
}


/* =========================================================
   AVISO DE RANGO — HOVER REAL
   hidden por defecto; visible únicamente mientras el ratón
   está dentro del campo afectado.
   ========================================================= */
.metric-style3 .metric-range-message {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.metric-style3.out-of-range:hover .metric-range-message,
.metric-style3.out-of-range .metric-range-message.is-hovered {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* =========================================================
   ICONOS REACTIVOS — temperatura y humedad
   ========================================================= */
.metric-style3.metric-temp .metric-icon.range-normal {
  color: #36b89c !important;
}
.metric-style3.metric-temp .metric-icon.range-high {
  color: #ef4444 !important;
}
.metric-style3.metric-temp .metric-icon.range-low {
  color: #4d91e6 !important;
}

.metric-style3.metric-hum .metric-icon.range-normal {
  color: #4d91e6 !important;
}
.metric-style3.metric-hum .metric-icon.range-high {
  color: #ef4444 !important;
}
.metric-style3.metric-hum .metric-icon.range-low {
  color: #4d91e6 !important;
}

/* El termómetro CSS hereda el color del icono. */
.metric-style3.metric-temp .metric-icon::before,
.metric-style3.metric-temp .metric-icon::after,
.metric-style3.metric-hum .metric-icon::before {
  color: inherit;
  background-color: currentColor;
}
.metric-style3.metric-temp .metric-icon::before {
  background-color: transparent;
  border-color: currentColor;
}
.metric-style3.metric-hum .metric-icon::after {
  background: rgba(7,25,17,.72);
}


/* EC usa exactamente el mismo color de texto que pH. */
.metric-style3.metric-ec .metric-input,
.metric-style3.metric-ec .metric-unit {
  color: #a993ef !important;
}
.metric-style3.metric-ph .metric-input,
.metric-style3.metric-ph .metric-unit {
  color: #a993ef !important;
}


/* pH y EC: mismo verde base que las métricas en rango. */
.metric-style3.metric-ph .metric-input,
.metric-style3.metric-ph .metric-unit,
.metric-style3.metric-ec .metric-input,
.metric-style3.metric-ec .metric-unit {
  color: #36b89c !important;
}


/* Color solicitado para pH y EC en estado normal. */
.metric-style3.metric-ph .metric-input,
.metric-style3.metric-ph .metric-unit,
.metric-style3.metric-ec .metric-input,
.metric-style3.metric-ec .metric-unit {
  color: #33cc99 !important;
}


/* Las cuatro métricas comparten #33cc99 en estado normal. */
.metric-style3.metric-temp .metric-icon.range-normal,
.metric-style3.metric-hum .metric-icon.range-normal,
.metric-style3.metric-ph .metric-input,
.metric-style3.metric-ph .metric-unit,
.metric-style3.metric-ec .metric-input,
.metric-style3.metric-ec .metric-unit {
  color: #33cc99 !important;
}

/* pH y EC fuera de rango: mismo rojo que Temp/Hum, con más
   especificidad (.out-of-range añadido) para ganarle al verde de
   arriba, que no distingue el estado. */
.metric-style3.metric-ph.out-of-range .metric-input,
.metric-style3.metric-ph.out-of-range .metric-unit,
.metric-style3.metric-ec.out-of-range .metric-input,
.metric-style3.metric-ec.out-of-range .metric-unit {
  color: #ef4444 !important;
}


/* =========================================================
   MÉTRICAS — espaciado horizontal uniforme
   Temp/Hum y pH/EC comparten exactamente la misma separación.
   ========================================================= */
.metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 6px !important;
  row-gap: 6px !important;
}

.metric {
  min-width: 0 !important;
  width: 100% !important;
}

.metric-style3 {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* =========================================================
   LAYOUT REAL DE LAS 4 MÉTRICAS
   Fuerza las posiciones: Temp | Hum / pH | EC
   con columnas y separación idénticas.
   ========================================================= */
.metrics,
.metrics-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 6px !important;
  row-gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.metrics .metric,
.metrics-grid .metric {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}

.metrics .metric[data-metric="temp"],
.metrics-grid .metric[data-metric="temp"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.metrics .metric[data-metric="hum"],
.metrics-grid .metric[data-metric="hum"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.metrics .metric[data-metric="ph"],
.metrics-grid .metric[data-metric="ph"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.metrics .metric[data-metric="ec"],
.metrics-grid .metric[data-metric="ec"] {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.metrics .metric-style3 {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}


/* El renderer asigna gridArea inline a cada .metric; anulamos ese shorthand
   para que la rejilla de dos columnas controle realmente las cuatro posiciones. */
.metrics > .metric,
.metrics-grid > .metric {
  grid-area: auto !important;
}
.metrics > .metric[data-metric="temp"] { grid-column: 1 !important; grid-row: 1 !important; }
.metrics > .metric[data-metric="hum"]  { grid-column: 2 !important; grid-row: 1 !important; }
.metrics > .metric[data-metric="ph"]   { grid-column: 1 !important; grid-row: 2 !important; }
.metrics > .metric[data-metric="ec"]   { grid-column: 2 !important; grid-row: 2 !important; }


/* =========================================================
   MÉTRICAS — acabado compacto basado en la referencia
   Reduce especialmente el espacio inferior bajo pH / EC.
   ========================================================= */
.metrics {
  column-gap: 6px !important;
  row-gap: 4px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  align-content: start !important;
}

.metric-style3 {
  margin-bottom: 0 !important;
}

.metric-style3 .metric-range-message {
  position: absolute !important;
  top: calc(100% + 3px) !important;
  bottom: auto !important;
}

/* El aviso hover no reserva espacio cuando está oculto. */
.metric-style3 .metric-range-message {
  display: none !important;
  visibility: hidden !important;
}
.metric-style3.out-of-range:hover .metric-range-message {
  display: block !important;
  visibility: visible !important;
}

/* Acerca la segunda fila y elimina cualquier espacio residual. */
.metrics > .metric[data-metric="ph"],
.metrics > .metric[data-metric="ec"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* Espacio inferior bajo pH/EC: reducido, pero conservado. */
.metrics {
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
}

/* GP-WEEKDAY-FIX-V3
   Fixed to viewport so it cannot disappear because of calendar/grid overflow. */
#gpWeekdayFixed{
  position:fixed !important;
  z-index:9000 !important;
  pointer-events:none !important;
  display:none;
  box-sizing:border-box;
}
#gpWeekdayFixed .gp-weekday-fixed-grid{
  display:grid;
  width:100%;
  height:100%;
  align-items:stretch;
}
#gpWeekdayFixed .gp-weekday-fixed-cell{
  width:80%;
  justify-self:center;
  min-width:0;
  min-height:48px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  overflow:hidden;
  text-align:center;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#eafbe6;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  border:1px solid #4f9b5d !important;
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -8px 18px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.22);
  text-shadow:0 1px 4px rgba(0,0,0,.85),0 0 9px rgba(0,0,0,.45);
  position:relative;
}
#gpWeekdayFixed .gp-weekday-fixed-cell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(3,20,12,.74),rgba(3,20,12,.28) 45%,rgba(3,20,12,.58)),linear-gradient(180deg,rgba(3,20,12,.24),rgba(3,20,12,.54));
  pointer-events:none;
}
#gpWeekdayFixed .gp-weekday-fixed-cell{
  isolation:isolate;
}
#gpWeekdayFixed .gp-weekday-fixed-cell::before{z-index:0;}
#gpWeekdayFixed .gp-weekday-fixed-cell{z-index:0;}
/* GP-WEEKDAY-FIX-V5 */
#gpWeekdayFixed{display:block!important;}
.calendar > .weekday{
  position:relative!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* GP-RANGE-FINAL-V5: el campo nunca se oculta; solo el aviso responde al hover */
.metric-style3.out-of-range {
  display: grid !important;
  visibility: visible !important;
}
.metric-style3.out-of-range .metric-field {
  display: flex !important;
  visibility: visible !important;
}
.metric-style3 .metric-range-message {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.metric-style3.out-of-range:hover .metric-range-message {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* GP-FINAL-V6: cabecera de días fija verticalmente y avisos de rango solo al hover. */
#gpWeekdayFixed {
  position: fixed !important;
  top: calc(var(--gp-toolbar-height, 0px) + 8px) !important;
  display: block !important;
  z-index: 9000 !important;
}

.metric-style3.out-of-range {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.metric-style3.out-of-range .metric-field {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.metric-style3 .metric-range-message {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.metric-style3.out-of-range:hover .metric-range-message,
.metric-style3.out-of-range .metric-range-message.is-hovered {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* GP-VALUE-OUT-OF-RANGE-FIX */
.metric-style3.out-of-range input,
.metric-style3.out-of-range .metric-input,
.metric-style3.out-of-range .metric-field {
  visibility: visible !important;
  opacity: 1 !important;
}

/* GP-RANGE-EDITABLE-FIX */
.metric-style3.out-of-range input,
.metric-style3.out-of-range input[type="text"],
.metric-style3.out-of-range input[type="number"],
.metric-style3.out-of-range .metric-input {
  pointer-events: auto !important;
  user-select: text !important;
  cursor: text !important;
  -webkit-user-select: text !important;
}

/* GP-RANGE-WARNING-STYLE-V2 */
.metric-style3.out-of-range .metric-range-message {
  opacity: 1 !important;
  background: #111 !important;
  background-color: #111 !important;
  z-index: 2147483647 !important;
  position: absolute !important;
  font-size: 110% !important;
  line-height: normal !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.55) !important;
  isolation: isolate !important;
}
.metric-style3.out-of-range:hover .metric-range-message {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2147483647 !important;
}

/* GP-RANGE-WARNING-V3: el aviso se coloca por encima de todas las métricas */
.metric-style3 {
  position: relative !important;
}
.metric-style3.out-of-range .metric-range-message {
  position: fixed !important;
  z-index: 2147483647 !important;
  isolation: isolate !important;
  background: #111 !important;
  opacity: 1 !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* GP-WEEKDAY-VISUAL-RESTORE */
#gpWeekdayFixed {
  background: #111 !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  box-shadow:
    0 0 8px rgba(255,255,255,.75),
    0 0 18px rgba(255,255,255,.45) !important;
}
#gpWeekdayFixed .weekday-cell,
#gpWeekdayFixed .weekday-item,
#gpWeekdayFixed > div {
  background: #111 !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  box-shadow:
    0 0 8px rgba(255,255,255,.75),
    0 0 18px rgba(255,255,255,.45) !important;
}

/* GP-WEEKDAY-CLEAN-V1
   El contenedor de la cabecera no tiene marco/fondo propio.
   Solo las 7 casillas individuales llevan el acabado visual. */
#gpWeekdayFixed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#gpWeekdayFixed .gp-weekday-fixed-grid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#gpWeekdayFixed .gp-weekday-fixed-cell {
  background-image: none !important;
  background: #123d2b !important;
  border: 2px solid #38a66a !important;
  box-shadow:
    0 0 7px rgba(56,166,106,.95),
    0 0 16px rgba(56,166,106,.60),
    inset 0 0 7px rgba(18,61,43,.35) !important;
  color: #eafff1 !important;
}

#gpWeekdayFixed .gp-weekday-fixed-cell::before {
  display: none !important;
  content: none !important;
}


/* GP-LAYERS-MODALS-V1
   Ajustes y ventanas emergentes por delante de la cabecera fija de días.
   No modifica el fotoperiodo. */
#gpWeekdayFixed {
  z-index: 9000 !important;
}

.modal-overlay {
  position: fixed !important;
  z-index: 20000 !important;
  isolation: isolate !important;
}

.settings-menu {
  position: fixed !important;
  z-index: 20001 !important;
  isolation: isolate !important;
}

.toast {
  z-index: 20002 !important;
}

/* GP-RANGE-TOPMOST-V1
   El aviso de fuera de rango solo aparece al pasar el ratón
   y queda por delante de cualquier otra capa de la página. */
.metric-style3 {
  position: relative !important;
  isolation: isolate !important;
}
.metric-style3 .metric-range-message {
  position: fixed !important;
  z-index: 2147483647 !important;
  isolation: isolate !important;
  pointer-events: none !important;
  background: #111 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.metric-style3.out-of-range:hover .metric-range-message,
.metric-style3.out-of-range .metric-range-message.is-hovered {
  display: block !important;
  position: fixed !important;
  z-index: 2147483647 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* GP-RANGE-BLOCKED-DAY-V1
   Los avisos de fuera de rango no se muestran en días bloqueados. */
.day-blocked .metric-range-message,
.day-locked .metric-range-message,
.is-blocked .metric-range-message,
.is-locked .metric-range-message,
[data-blocked="true"] .metric-range-message,
[data-locked="true"] .metric-range-message {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* GP-MOBILE-WEEKDAY-HIDE-V1
   En móvil el calendario muestra un solo día a pantalla completa
   (ver 02-calendar.css); la cabecera de días fija superpuesta, hecha
   para la rejilla ancha de escritorio, ya no encaja y se oculta. Las
   reglas de arriba en este mismo archivo la fuerzan a display:block
   con !important, así que este override tiene que ir aquí (al final,
   mismo archivo) para ganar en la cascada. */
@media (max-width: 640px) {
  #gpWeekdayFixed { display: none !important; }
}

/* GP-TUYA-FORM-V1 — campos del modal "Sensores (SmartLife/Tuya)".
   Antes usaban .auth-field (css/05-auth.css), pensada solo para las
   páginas sueltas de login/registro; dentro de #tuyaModal se veía
   rota (etiqueta e input en línea, texto cortado). Reutiliza el
   mismo lenguaje visual que .modal-field (03-modals.css) pero sin
   el max-width:320px pensado para un único campo centrado. */
#tuyaModal .tuya-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#tuyaModal .tuya-field { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 0 0 14px; }
#tuyaModal .tuya-field label { font-size: .74rem; font-weight: 800; text-transform: uppercase; color: var(--muted); }
#tuyaModal .tuya-field input,
#tuyaModal .tuya-field select { width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font-size: 1rem; font-weight: 700; }
#tuyaModal .tuya-field input:focus,
#tuyaModal .tuya-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px #2f7d3222; }
/* GP-TUYA-STOCKMATCH-V1 — cabecera y listas alineadas con el mismo
   lenguaje visual que Stock/Plantillas (.stock-head, .stock-kicker,
   tarjetas oscuras con borde #294832), para que todos los modales
   "de gestión" de la app se vean iguales. */
#tuyaModal .stock-head p { margin: 0; }
#tuyaModal .tuya-section { margin: 18px 0; padding: 14px; border: 1px solid #294832; border-radius: 13px; background: rgba(0,0,0,.16); }
#tuyaModal .tuya-devices-title { margin: 0 0 12px; font-size: .95rem; color: var(--text); }
#tuyaModal .tuya-hint { margin: -6px 0 12px; font-size: .78rem; color: #a4bda9; }
/* GP-TUYA-CARDS-V1 — cada dispositivo es una tarjeta de solo lectura
   (como .stock-card) en una rejilla de 4 columnas, con botones Editar
   (pasa a modo formulario) y Borrar; ya no son filas siempre editables. */
#tuyaModal .tuya-device-list,
#testDevicesModal .tuya-device-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
#tuyaModal .tuya-device-card,
#testDevicesModal .tuya-device-card { display: flex; flex-direction: column; gap: 8px; padding: 11px; border: 1px solid #294832; border-radius: 13px; background: rgba(0,0,0,.22); min-width: 0; transition: opacity .15s, border-color .15s; }
#tuyaModal .tuya-device-card.is-off { opacity: .5; border-color: #223a2a; }
#tuyaModal .tuya-card-top,
#testDevicesModal .tuya-card-top { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
#tuyaModal .tuya-card-enable { flex: none; display: flex; align-items: center; padding-top: 1px; cursor: pointer; }
#tuyaModal .tuya-card-enable input[type="checkbox"] { width: 17px; height: 17px; accent-color: #3fa34a; cursor: pointer; margin: 0; }
#tuyaModal .tuya-card-body,
#testDevicesModal .tuya-card-body { min-width: 0; flex: 1; }
#tuyaModal .tuya-card-name,
#testDevicesModal .tuya-card-name { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tuyaModal .tuya-card-id,
#testDevicesModal .tuya-card-id { display: block; margin-top: 3px; color: #8fa894; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tuyaModal .tuya-card-energy-hint { display: block; margin-top: 3px; color: #8be596; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tuyaModal .tuya-card-actions,
#testDevicesModal .tuya-card-actions { display: flex; gap: 6px; }
#tuyaModal .tuya-card-actions button,
#testDevicesModal .tuya-card-actions button { flex: 1; border: 1px solid #294832; background: #102318; color: #d9f3df; border-radius: 8px; padding: 6px 4px; font-size: .78rem; cursor: pointer; }
#tuyaModal .tuya-card-actions button:hover,
#testDevicesModal .tuya-card-actions button:hover { background: #183420; }
#tuyaModal .tuya-card-actions .tuya-card-save { border-color: #3fa34a; color: #8be596; }
#tuyaModal .tuya-card-actions .tuya-card-del { border-color: #633535; color: #ffaaaa; background: #281616; }
#tuyaModal .tuya-card-actions .tuya-card-del:hover { background: #341c1c; }
#tuyaModal .tuya-card-form { display: flex; flex-direction: column; gap: 6px; }
#tuyaModal .tuya-card-form input { width: 100%; box-sizing: border-box; min-height: 34px; padding: 0 9px; border-radius: 8px; border: 1px solid #294832; background: #0c1c12; color: #edf8ef; font-size: .78rem; font-weight: 700; }
#tuyaModal .tuya-card-form input:focus { outline: none; border-color: #3fa34a; box-shadow: 0 0 0 3px rgba(63,163,74,.18); }
#tuyaModal .tuya-check { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border: 1px solid #294832; border-radius: 10px; background: rgba(63,163,74,.06); font-size: .82rem; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
#tuyaModal .tuya-check:hover { border-color: #3fa34a; background: rgba(63,163,74,.12); }
#tuyaModal .tuya-check input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: #3fa34a; margin: 0; cursor: pointer; }
/* Subsecciones de "Enchufes inteligentes" (Ventilación/Extractor/...):
   mismo cuerpo que .tuya-section pero un peldaño más discreto, para
   que se note que están anidadas dentro de la sección padre. */
#tuyaModal .tuya-subsection,
#testDevicesModal .tuya-subsection { margin: 14px 0 0; padding: 12px; border: 1px solid #223a2a; border-radius: 11px; background: rgba(0,0,0,.12); }
#tuyaModal .tuya-subsection:first-of-type,
#testDevicesModal .tuya-subsection:first-of-type { margin-top: 2px; }
#tuyaModal .tuya-subsection-title,
#testDevicesModal .tuya-subsection-title { margin: 0 0 10px; font-size: .8rem; font-weight: 800; color: #a4bda9; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 1000px) {
  #tuyaModal .tuya-device-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  #tuyaModal .tuya-device-list,
  #testDevicesModal .tuya-device-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  #tuyaModal .tuya-form-grid { grid-template-columns: 1fr; }
  #tuyaModal .tuya-device-list { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  #testDevicesModal .tuya-device-list { grid-template-columns: 1fr; }
}
/* Como mucho 3 columnas aquí (no 4, a diferencia de #tuyaModal) -a
   petición del usuario-; va después para ganar por orden en el CSS ante
   el empate de especificidad con la regla compartida de arriba. */
#testDevicesModal .tuya-device-list { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Modal "Probar dispositivos": lista de enchufes con estado ON/OFF real
   y botones de encender/apagar uno a uno, más los tres de acción masiva
   de arriba. Mismo lenguaje visual que #tuyaModal. */
#testDevicesModal .test-devices-bulk { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
#testDevicesModal .test-devices-bulk button { flex: 1; min-width: 150px; padding: 12px; border-radius: 12px; border: 1px solid #294832; background: #102318; color: #d9f3df; font-size: .88rem; font-weight: 800; cursor: pointer; }
#testDevicesModal .test-devices-bulk button:hover { background: #183420; }
#testDevicesModal .test-devices-bulk #testDevicesAllOn { border-color: #3fa34a; color: #8be596; }
#testDevicesModal .test-devices-bulk #testDevicesAllOff { border-color: #a34a4a; color: #ffaaaa; }
/* "Probar dispositivos" reutiliza el mismo lenguaje visual que
   #tuyaModal (.tuya-subsection/.tuya-device-list/.tuya-device-card/
   .tuya-card-top/-body/-name/-id/-actions, ver reglas compartidas más
   arriba) -a petición del usuario, para que ambas ventanas se vean lo
   más parecidas posible-: cada categoría es una .tuya-subsection con su
   .tuya-subsection-title, y cada fila una .tuya-device-card (clase
   añadida en el HTML junto a .test-device-row, que sigue existiendo
   solo como gancho para los data-attributes y listeners de JS). Lo que
   no tiene equivalente en #tuyaModal -consumo, estado on/off, lectura
   de sensor- se queda en clases propias .test-device-*. */
#testDevicesModal .test-devices-empty { color: #8fa894; font-size: .85rem; padding: 20px 0; text-align: center; }
#testDevicesModal .test-device-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#testDevicesModal .test-device-energy,
#testDevicesModal .test-device-status { font-size: .72rem; color: #8fa894; white-space: nowrap; }
#testDevicesModal .test-device-sensor-reading { font-size: .85rem; font-weight: 800; color: #8be596; white-space: nowrap; }
#testDevicesModal .test-device-readonly-note { font-size: .72rem; color: #8fa894; font-style: italic; }

/* =========================================================
   AVISO DE MÉTRICA FUERA DE RANGO — versión flotante (JS)
   Reemplaza a .metric-range-message, que vivía anidado dentro de la
   tarjeta del día y nunca conseguía pintarse por delante de otros
   campos del mismo día pese a subir su z-index hasta el máximo posible
   (ver el historial de reglas .metric-range-message más arriba en este
   mismo archivo) — estaba atrapado dentro del contexto de apilado de
   un antepasado. Esta versión la añade calendar.js directamente a
   <body> y la posiciona por JS, así que no depende de ningún ancestro
   ni de ningún otro z-index de la página. */
.metric-range-message-floating {
  display: none;
  position: fixed;
  z-index: 2147483647;
  max-width: 220px;
  padding: 5px 9px;
  border: 1px solid rgba(239,68,68,.5);
  border-radius: 6px;
  background: rgba(60,12,15,.98);
  color: #ffb4b4;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}

/* =========================================================
   GROWPLANNER PRO — vista previa de la pantalla de suscripción
   Sin cobro real todavía; ver js/premium.js.
   ========================================================= */
.premium-demo-banner {
  margin: 0 0 16px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(224,163,42,.4);
  background: rgba(224,163,42,.12);
  color: #fcd34d;
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
}
.premium-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px 20px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 14%, var(--panel)), var(--panel));
  box-shadow: var(--shadow);
  text-align: center;
}
.premium-plan-toggle { display: flex; gap: 4px; background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.premium-plan-opt { flex: 1; min-width: 0; padding: 9px 2px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.premium-plan-opt:hover { color: var(--text); }
.premium-plan-opt.is-selected { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); }

/* Botón de "Tarjeta de débito o crédito": se muestra en el mismo sitio
   donde antes el propio widget de PayPal generaba un botón para pagar
   con tarjeta sin cuenta -función que tu cuenta de PayPal todavía no
   tiene aprobada (Advanced Credit and Debit Card Payments), así que ese
   botón fallaba con un error de PayPal al pulsarlo-. Se deja visible
   -para que quede claro que la opción existe y llegará- pero atenuado y
   sin acción real: al pulsarlo solo avisa de que todavía no está
   disponible, en vez de abrir un pago que iba a fallar seguro. */
.payment-card-disabled-btn {
  width: 100%;
  margin-top: 10px;
  padding: 13px 16px;
  border: none;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale(.3);
}
.premium-price { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.premium-price-amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--primary-glow); line-height: 1; }
.premium-price-period { font-size: .95rem; color: var(--muted); font-weight: 600; }
.premium-price-alt { margin-top: 4px; font-size: .78rem; color: var(--muted); }
.premium-save { color: var(--primary-glow); font-weight: 700; }
.premium-price-original { font-size: 1.15rem; color: var(--muted); text-decoration: line-through; font-weight: 600; }
.premium-discount-badge { margin-left: 2px; background: linear-gradient(135deg, #dc2626, #f87171); color: #fff; font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.premium-features { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.premium-features li { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; color: var(--text); line-height: 1.4; }
.premium-check { flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(63,163,74,.22); color: var(--primary-glow); display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; }
.premium-addon { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: rgba(0,0,0,.18); cursor: pointer; text-align: left; }
.premium-addon input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; }
.premium-addon-body { display: flex; flex-direction: column; gap: 4px; }
.premium-addon-body strong { font-size: .84rem; color: var(--text); }
.premium-addon-body small { font-size: .74rem; color: var(--muted); line-height: 1.4; }
.premium-addon-total { margin: -4px 0 14px; padding: 8px 12px; border-radius: 8px; background: rgba(63,163,74,.14); color: var(--primary-glow); font-size: .82rem; text-align: center; }
.premium-card .btn-confirm-start { width: 100%; box-sizing: border-box; }
.premium-fineprint { margin: 12px 0 0; font-size: .72rem; color: var(--muted-2); line-height: 1.5; }

/* =========================================================
   ICONO DE HUMEDAD — gota en SVG en vez de la forma dibujada
   con ::before/::after (demasiado frágil a 14×19px). El SVG lo
   inserta calendar.js directamente en .metric-icon; aquí solo se
   apaga el dibujo CSS antiguo para que no se vean los dos a la vez,
   y se centra el SVG dentro del hueco del icono.
   ========================================================= */
.metric-style3.metric-hum .metric-icon::before,
.metric-style3.metric-hum .metric-icon::after {
  content: none !important;
}
.metric-style3.metric-hum .metric-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.metric-style3.metric-hum .metric-icon svg {
  width: 12px;
  height: 16px;
}

/* =========================================================
   PLANTAS MUERTAS — lista por cepa
   Antes los inputs no tenían ninguna regla propia y salían con el
   blanco por defecto del navegador, rompiendo con el resto de la app.
   ========================================================= */
#deadDayModal .dead-strain-intro { margin: 10px 0 12px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
#deadDayModal .dead-strain-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 2px; margin-bottom: 14px; }
#deadDayModal .dead-strain-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
#deadDayModal .dead-strain-name { font-weight: 700; font-size: .9rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#deadDayModal .dead-stepper { display: flex; align-items: center; gap: 6px; flex: none; }
#deadDayModal .dead-step-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 1.1rem; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, border-color .15s, color .15s; }
#deadDayModal .dead-step-btn:hover { background: rgba(214,36,31,.16); border-color: var(--danger); color: var(--danger-bright); }
#deadDayModal .dead-input.dead-strain-count { width: 46px; min-height: 30px; height: 30px; padding: 0; border: 1.5px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: .95rem; font-weight: 800; text-align: center; }
#deadDayModal .dead-input.dead-strain-count:focus { outline: none; border-color: var(--danger); box-shadow: 0 0 0 3px rgba(214,36,31,.18); }
#deadDayModal .dead-strain-total { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 10px; background: rgba(214,36,31,.1); border: 1px solid rgba(214,36,31,.3); color: var(--text); font-size: .88rem; font-weight: 700; }
#deadDayModal .dead-strain-total strong { color: var(--danger-bright); font-size: 1.05rem; }

/* =========================================================
   MÉTRICAS Temp/Hum — centrar el dato en la casilla igual que
   pH y EC: el icono pasa a ser una insignia flotante en la
   esquina (fuera del flujo del grid) para que la columna de
   valor ocupe todo el ancho y el texto quede realmente centrado,
   en vez de centrado solo en el hueco que dejaba la columna del
   icono.
   ========================================================= */
.metric-style3.metric-temp,
.metric-style3.metric-hum {
  grid-template-columns: 1fr !important;
}
.metric-style3.metric-temp .metric-icon,
.metric-style3.metric-hum .metric-icon {
  position: absolute !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: start !important;
  top: 50% !important;
  left: 6px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}
.metric-style3.metric-temp .metric-input,
.metric-style3.metric-hum .metric-input {
  text-align: center !important;
  padding-left: 16px !important;
  padding-right: 0 !important;
}

/* La tarjeta del día (.day) tiene las esquinas redondeadas (17px) y
   overflow:hidden, pero .metrics -su pie, con Temp/Hum- es un
   rectángulo de esquinas rectas: en las dos esquinas de abajo queda un
   triangulito con el fondo de la tarjeta asomando entre la curva de
   fuera y la esquina recta de dentro. Redondeando .metrics igual que
   la tarjeta, la curva de fuera y la de dentro coinciden y desaparece. */
.metrics {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}