/* El panel. MOVIL PRIMERO: lo que se mira desde el trabajo, no desde un
   escritorio. La temperatura enorme y el color haciendo el trabajo.

   Desde el 4-9-2026 el panel viste LOS AZULES DE LA MARCA, como la web: Sergio
   los vio juntos y los verdes de antes perdieron. La escala de estado sigue
   siendo la misma idea con el azul de la casa: cian = el agua esta bien,
   ambar = va subiendo, coral = fuera de rango. Un color no se usa nunca para
   otra cosa. La variable se sigue llamando --turquesa aunque valga cian:
   renombrarla tocaria el CSS entero para no cambiar nada visible. */

:root {
    --agua:      #06304F;
    --agua2:     #031B2E;
    --superficie:#0A3E63;
    --turquesa:  #00B8F4;
    --verde:     #46D39A;
    --ambar:     #FFB020;
    --coral:     #FF6B5B;
    --claro:     #EAF4FB;
    --tenue:     #8FA9BD;
    --borde:     rgba(0,184,244,.20);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--agua);
    color: var(--claro);
    font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--turquesa); text-decoration: none; }
a:hover { text-decoration: underline; }

.centro { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1rem; }

/* --- barra --- */
.barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--borde);
    margin-bottom: 1.4rem;
}
.marca { font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; color: var(--claro); }
.marca span { color: var(--turquesa); }
.marca img { display: block; }
.marca a { display: block; }
.barra .quien { color: var(--tenue); font-size: .85rem; }

/* --- tarjeta de acuario --- */
.tarjeta {
    display: block; background: var(--agua2); border: 1px solid var(--borde);
    border-radius: .7rem; padding: 1rem 1.1rem; margin-bottom: .8rem;
    color: inherit;
}
/* El hover NO toca el color del borde: ahora ese color ES el estado del
 acuario, y teñir de turquesa una tarjeta roja al pasar el raton seria
 decir que esta bien justo cuando se va a hacer clic en ella. */
.tarjeta:hover { text-decoration: none; filter: brightness(1.14); }
.tarjeta .fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tarjeta h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.tarjeta .donde { color: var(--tenue); font-size: .8rem; margin: .15rem 0 0; }

/* LA TEMPERATURA. Es lo unico que se mira desde lejos, asi que es lo unico
   grande. Tabular para que no baile al cambiar de 9,9 a 10,0. */
.grados {
    font-size: 2.6rem; font-weight: 800; line-height: 1;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.grados small { font-size: .95rem; font-weight: 500; opacity: .65; }

.estado { font-size: .82rem; margin-top: .35rem; }

/* Los cuatro estados, cada uno con su color y su borde */
/* EL COLOR DEL ESTADO Y EL CHROME DE LA TARJETA SON DOS COSAS.
   El color del texto vale en cualquier sitio: la ficha lo usa sobre el numero
   grande, que no es una tarjeta. El borde y el fondo son de la tarjeta y solo
   de ella —por eso van con .tarjeta delante—, porque si no la ficha pintaria
   un rectangulo de color sin borde ni margenes alrededor del numero. */
.tarjeta.ok       { border-color: var(--turquesa); background: rgba(0,184,244,.07); }
.tarjeta.subiendo { border-color: var(--ambar);    background: rgba(255,176,32,.09); }
.tarjeta.alto     { border-color: var(--coral);    background: rgba(255,107,91,.09); }
.tarjeta.bajo     { border-color: var(--turquesa); background: rgba(0,184,244,.07); }
.tarjeta.sin_datos{ border-color: var(--tenue);    background: rgba(121,184,179,.06); }
/* sin_limites: hay dato pero nadie lo juzga. El mismo gris que sin_datos,
   porque el mensaje es el mismo — aqui no se esta vigilando nada. */
.tarjeta.sin_limites{ border-color: var(--tenue);  background: rgba(121,184,179,.06); }

.ok       .grados, .ok .estado       { color: var(--turquesa); }
.subiendo .grados, .subiendo .estado { color: var(--ambar); }
.alto     .grados, .alto .estado     { color: var(--coral); }
.bajo     .grados, .bajo .estado     { color: var(--turquesa); }
.sin_datos .grados, .sin_datos .estado { color: var(--tenue); }
.sin_limites .grados, .sin_limites .estado { color: var(--tenue); }

/* --- agrupacion por cuenta: solo aparece si hay mas de una --- */
.grupo-nota { color: var(--tenue); font-size: .78rem; margin: -.3rem 0 .7rem; }
.rol-tarjeta { color: var(--tenue); font-size: .72rem; margin: .15rem 0 0;
  text-transform: uppercase; letter-spacing: .05em; }

.grupo { color: var(--tenue); font-size: .78rem; text-transform: uppercase;
         letter-spacing: .09em; margin: 1.6rem 0 .6rem; }
.grupo .rol { color: var(--ambar); text-transform: none; letter-spacing: 0; }

/* --- ficha --- */
.ficha .grados { font-size: 4rem; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
         gap: .8rem; margin: 1.2rem 0; }
.dato { background: var(--agua2); border: 1px solid var(--borde);
        border-radius: .6rem; padding: .7rem .8rem; }
.dato b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dato span { color: var(--tenue); font-size: .78rem; }

.rangos { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0; }
.rangos a { background: var(--agua2); border: 1px solid var(--borde);
            border-radius: 999px; padding: .3rem .85rem; font-size: .85rem; }
.rangos a.activo { background: var(--turquesa); color: var(--agua); border-color: var(--turquesa); font-weight: 600; }

.grafica { background: var(--agua2); border: 1px solid var(--borde);
           border-radius: .7rem; padding: .6rem; overflow-x: auto; }
.grafica svg { display: block; width: 100%; height: auto; cursor: crosshair; }

/* EL TOOLTIP AL PASAR EL RATÓN. La cruz y el punto viven dentro del SVG (sus
   coordenadas son las del dibujo), pero el panel flota sobre la página: si
   viviera dentro de la .grafica, su overflow lo recortaría. */
.grafica-cruza { stroke: rgba(255,255,255,.30); stroke-width: 1; pointer-events: none; }
.grafica-punto { stroke: var(--agua2); stroke-width: 1.5; pointer-events: none; }
.grafica-tooltip {
    position: fixed; z-index: 60; pointer-events: none;
    min-width: 9.5rem; max-width: 16rem;
    background: var(--agua); border: 1px solid var(--borde);
    border-radius: 10px; padding: .6rem .75rem;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.grafica-tooltip .gt-cuando {
    color: var(--tenue); font-size: .78rem; margin-bottom: .4rem;
}
.grafica-tooltip .gt-fila {
    display: flex; align-items: baseline; gap: .5rem; margin-top: .2rem;
}
.grafica-tooltip .gt-llave {
    align-self: center; flex: 0 0 auto; width: 14px; height: 3px; border-radius: 2px;
}
.grafica-tooltip .gt-nombre {
    font-size: .8rem; color: var(--tenue); flex: 1 1 auto;
}
.grafica-tooltip .gt-valor {
    font-size: 1.25rem; font-weight: 700; color: var(--claro);
    font-variant-numeric: tabular-nums;
}

/* BORRAR EL ACUARIO, la zona peligrosa del final de la ficha. El rótulo es un
   botón coral de verdad —como las demás acciones que no se deshacen— y el
   desplegable de dentro pide confirmación antes de tocar nada. */
.borrar-acuario { margin-top: 1.6rem; }
.borrar-acuario summary {
    cursor: pointer; list-style: none; display: inline-block;
    background: var(--coral); color: #04141B;
    border: 0; border-radius: 9px; padding: .5rem 1.1rem;
    font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: .9rem;
}
.borrar-acuario summary:hover { background: #FF8577; }
.borrar-acuario summary::-webkit-details-marker { display: none; }
.borrar-acuario form {
    margin-top: .7rem; padding: .9rem 1rem;
    border: 1px dashed rgba(255,107,91,.4); border-radius: .7rem;
}

/* --- entrar --- */
.puerta { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.puerta form { width: 100%; max-width: 22rem; }
.puerta h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
.puerta p.sub { color: var(--tenue); margin: 0 0 1.6rem; font-size: .9rem; }
label { display: block; font-size: .85rem; color: var(--tenue); margin: .9rem 0 .3rem; }
input {
    width: 100%; padding: .7rem .8rem; font-size: 1rem;
    background: var(--agua2); color: var(--claro);
    border: 1px solid var(--borde); border-radius: .5rem;
}
input:focus { outline: 2px solid var(--turquesa); outline-offset: 1px; }
/* ── LOS CONTROLES, UNA SOLA VEZ ───────────────────────────────────────────
   Esto estaba al revés y por eso todo se veía desparejo: `button` significaba
   «el botón gigante del formulario de entrar» —ancho completo, margen arriba—
   así que los otros diecisiete botones del panel tenían que DESHACERLO uno a
   uno, y cada cual se reinventaba su color, su radio y su altura. Diecinueve
   radios distintos en un mismo panel.
   Ahora `button` es el botón normal, como en la intranet, y lo que se declara
   aparte es la excepción: el ancho de la puerta. Tres variantes y ni una más:
   maciza (la que hace la cosa), floja (la alternativa) y de peligro. */

button {
    background: var(--turquesa); color: #04141B;
    border: 0; border-radius: 9px; padding: .5rem 1.1rem;
    font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
    font-family: 'Outfit', system-ui, sans-serif;
    width: auto; margin: 0;
}
button:hover { background: #33C9FF; }

/* La alternativa: mismo sitio, menos peso. Para lo que acompaña. */
button.flojo { background: transparent; color: var(--turquesa);
  border: 1px solid rgba(0,184,244,.5); }
button.flojo:hover { background: rgba(0,184,244,.12); }

/* Lo que no se puede deshacer va en coral, y nunca es el botón por defecto:
   detrás de estos siempre hay una confirmación. */
button.peligro { background: var(--coral); color: #04141B; }
button.peligro:hover { background: #FF8577; }

button.chico { font-size: .78rem; padding: .3rem .7rem; border-radius: 7px; }
button[disabled] { opacity: .4; cursor: not-allowed; }

/* LA PUERTA es la excepción: ahí el botón ocupa el ancho del formulario porque
   es lo único que hay que pulsar en toda la pantalla. */
.puerta button { width: 100%; margin-top: 1.2rem; padding: .8rem; font-size: 1rem; }

/* UN <summary> CON PINTA DE BOTÓN. Los `details` del panel abren cosas que en
   otro sitio serían botones —añadir una revisión, una foto, una persona— y se
   pintaban a mano cada vez. `.pastilla` lo dice una sola vez, y `.flojo` le
   quita peso igual que a un botón. */
.pastilla { cursor: pointer; list-style: none; display: inline-block;
  background: var(--turquesa); color: #04141B;
  border: 0; border-radius: 9px; padding: .5rem 1.1rem;
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: .9rem; }
.pastilla::-webkit-details-marker { display: none; }
.pastilla:hover { background: #33C9FF; }
.pastilla.flojo { background: transparent; color: var(--turquesa);
  border: 1px solid rgba(0,184,244,.5); }
.pastilla.flojo:hover { background: rgba(0,184,244,.12); }

/* Y LOS CAMPOS, también una vez. Antes cada caja se los repetía. */
.centro input[type=text], .centro input[type=email], .centro input[type=password],
.centro input[type=date], .centro input[type=datetime-local], .centro select {
  color: var(--claro);
  border: 1px solid rgba(255,255,255,.18); border-radius: 9px;
  padding: .5rem .7rem; font: inherit; font-size: .9rem; }
.centro input[type=text], .centro input[type=email], .centro input[type=password],
.centro input[type=date], .centro input[type=datetime-local] {
  background: rgba(255,255,255,.05); }
/* EL DESPLEGABLE, CON FONDO SÓLIDO Y NO TRANSLÚCIDO. Un `rgba(255,255,255,.05)`
   se ve bien cerrado —deja pasar el azul oscuro del panel— pero la lista que se
   abre la pinta el sistema sobre BLANCO, y ahí ese mismo color deja letras
   claras sobre fondo claro: ilegible justo en el momento de elegir. Con un
   color macizo y las opciones pintadas a mano, se lee en los dos estados. */
.centro select { background: var(--agua); }
.centro select option { background: var(--agua); color: var(--claro); }
.centro input::placeholder { color: var(--tenue); }

.error { background: rgba(255,107,91,.12); border: 1px solid var(--coral);
         color: var(--coral); border-radius: .5rem; padding: .7rem .8rem;
         font-size: .88rem; margin-top: 1rem; }

.pie { color: var(--tenue); font-size: .8rem; text-align: center;
       margin: 2.5rem 0 2rem; }

/* APUNTAR EL TERMOMETRO: el diario del acuario.
   Discreto pero presente: para quien no tiene medidor ES el producto de la
   cuenta gratis, y para quien lo tiene, un segundo testigo. */
.apunte { border: 1px dashed rgba(255,255,255,.18); border-radius: 12px;
          padding: 1rem 1.2rem; margin: 0; }
.apunte > b { font-family: 'Outfit', system-ui, sans-serif; }
.apunte-porque { margin: .25rem 0 .8rem; font-size: .88rem; color: var(--tenue); }
.apunte form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.apunte input[type=text] { width: 6.5rem; }
.apunte input, .apunte select { padding: .5rem .7rem;
  border-radius: 9px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05); color: inherit; font: inherit; }
.apunte input[type=datetime-local] { width: auto; }

/* LA REVISION: una fila por magnitud. La etiqueta con ancho fijo alinea los
   campos en columna, que es como se rellena un formulario de varios numeros
   sin perderse. En movil las filas caben igual porque los campos son cortos. */
.apunte form.revision { display: block; }
.revision-fila { display: flex; align-items: center; gap: .7rem; margin: .5rem 0; }
.revision-fila label { flex: 0 0 12rem; margin: 0; font-size: .88rem; color: inherit; }
.revision-fila label span { color: var(--tenue); font-size: .78rem; }
.revision-fila input[type=text] { width: 6.5rem; }
/* La que mide el aparato no pide campo: ensena el dato y de donde sale. */
.revision-fila.aparato span { color: var(--tenue); font-size: .85rem; }
.revision-fila.aparato b { color: var(--turquesa); font-variant-numeric: tabular-nums; }
.apunte form.revision button { margin-top: .6rem; }

/* La fila de acciones: apuntar y añadir foto, hombro con hombro. El que se
   abre ocupa la fila entera; el otro espera debajo. */
.fila-acciones { display: flex; gap: .7rem; align-items: flex-start;
  flex-wrap: wrap; margin: .9rem 0 1.4rem; }
/* Solo la revision toma la fila entera al abrirse: su formulario es largo.
   La foto abierta es una cajita y se queda en su sitio, a la derecha. */
.fila-acciones details.apunte[open] { flex-basis: 100%; }

/* La revision plegada es UN BOTON: cerrada no hay caja, solo el boton de
   añadir; abierta aparece la caja punteada con el formulario. */
details.apunte:not([open]) { border: none; padding: 0; margin: 0; }

details.apunte[open] > .boton-revision { margin-bottom: .5rem; }

/* LOS ULTIMOS VALORES: la fila de chips que responde «¿como esta el agua?»
   de un vistazo. Cada chip lleva el color de su estado y a su tarjeta. */
.ultimos { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.ultimo { display: flex; flex-direction: column; gap: .05rem;
  border: 1px solid var(--borde); border-radius: 10px; padding: .45rem .8rem;
  text-decoration: none; color: inherit; background: var(--agua2); }
/* Al pasar el raton, nada de subrayar el numero (el a:hover global lo hacia):
   solo se aclara un poco el fondo, que es lo que pide un chip. */
.ultimo:hover { text-decoration: none; background: var(--superficie); }
.ultimo:hover span, .ultimo:hover b { text-decoration: none; }
.ultimo span { color: var(--tenue); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; }
.ultimo b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ultimo.ok       { border-color: var(--turquesa); } .ultimo.ok b       { color: var(--turquesa); }
.ultimo.bajo     { border-color: var(--turquesa); } .ultimo.bajo b     { color: var(--turquesa); }
.ultimo.subiendo { border-color: var(--ambar); }    .ultimo.subiendo b { color: var(--ambar); }
.ultimo.alto     { border-color: var(--coral); }    .ultimo.alto b     { color: var(--coral); }
.ultimo.sin_datos b, .ultimo.sin_limites b { color: var(--tenue); }

/* La temporalidad, pegada a la gráfica que cambia y a la derecha: título y
   select juntos al borde, sin estorbar la lectura. */
.rangos-select { display: flex; flex-direction: row; align-items: center;
  justify-content: flex-end; gap: .45rem; white-space: nowrap; margin: 0 0 .9rem; }
.rangos-titulo { font-size: .66rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tenue); }
.rangos-select select { width: auto; background: var(--agua2); color: inherit;
  font: inherit; font-size: .82rem; border: 1px solid var(--borde);
  border-radius: 9px; padding: .3rem .5rem; cursor: pointer; }
.rangos-select button { margin-left: .3rem; }

/* EL COLOR DE CADA MAGNITUD, muy suave, de fondo: el de los tests de toda la
   vida — el pH verde, los nitritos violeta, los nitratos rojizos, el amonio
   amarillo, la temperatura calida. Diferencia sin gritar: el estado sigue
   mandando en el borde y en el numero. Van DESPUES de los fondos de estado
   para ganarles, a proposito. */
.ultimo.mag-temperatura,          .medida.mag-temperatura          { background: rgba(255,150,80,.07); }
.ultimo.mag-temperatura_ambiente, .medida.mag-temperatura_ambiente { background: rgba(120,180,255,.07); }
.ultimo.mag-ph,                   .medida.mag-ph                   { background: rgba(110,220,130,.08); }
.ultimo.mag-nitritos,             .medida.mag-nitritos             { background: rgba(190,120,255,.08); }
.ultimo.mag-nitratos,             .medida.mag-nitratos             { background: rgba(255,110,110,.07); }
.ultimo.mag-amonio,               .medida.mag-amonio               { background: rgba(255,220,90,.07); }

/* EL LAPIZ DEL NOMBRE: editar ahi mismo, sin JavaScript.
   El <details> va ANTES del h1 en el HTML (el selector ~ solo mira hacia
   delante) pero se pinta despues con order; abierto, esconde el titulo y su
   formulario ocupa el hueco. El propio lapiz cierra. */
.cabecera-nombre { display: flex; align-items: baseline; gap: .5rem;
  flex-wrap: wrap; margin: 0 0 .1rem; }
/* En pantalla ancha, todo en UNA linea: el nombre cede sitio (con puntos
   suspensivos si hace falta) antes que empujar el periodo abajo. */
@media (min-width: 640px) {
  .cabecera-nombre { flex-wrap: nowrap; }
  .cabecera-nombre h1 { min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
}
/* El nombre y su lapiz, JUNTOS a la izquierda; a la derecha solo el periodo.
   Antes el margen automatico iba en el h1 y empujaba el lapiz al otro lado,
   lejos del nombre que edita. */
.cabecera-nombre h1 { margin: 0; font-size: 1.3rem; order: 1; }
.editar-ficha { order: 2; }
.editar-ficha summary { cursor: pointer; list-style: none; color: var(--tenue);
  font-size: 1rem; }
.editar-ficha summary::-webkit-details-marker { display: none; }
.editar-ficha summary:hover { color: inherit; }
.editar-ficha[open] { order: 1; flex: 1; display: flex; gap: .5rem;
  align-items: center; }
.editar-ficha[open] ~ h1 { display: none; }
.editar-ficha form { display: flex; gap: .5rem; flex-wrap: wrap; flex: 1; }
.editar-ficha input { flex: 1; min-width: 9rem; max-width: 18rem;
  padding: .45rem .7rem; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05); color: inherit; font: inherit; }
.editar-ficha input.litros { flex: 0 0 5.5rem; min-width: 0; }


/* EL BOTON DEL SERVICIO: macizo y turquesa, como los botones que hacen cosas.
   Estuvo en hueco y no se veia — y es justo el que nos da de comer. */
.obtener { font-size: .82rem; font-weight: 700; color: #04141B;
  background: #00B8F4; border-radius: 9px; padding: .4rem .8rem;
  text-decoration: none; white-space: nowrap; display: inline-block; }
.obtener:hover { background: #33C9FF; }
.oferta .obtener { margin: .35rem .6rem .1rem 0; }
.oferta-ya { white-space: nowrap; }

/* LA OFERTA DEL MEDIDOR, dentro de la tarjeta de temperatura cuando solo hay
   apuntes a mano. Discreta: es una puerta, no un anuncio. */
.oferta { color: var(--tenue); font-size: .82rem; margin: .6rem 0 0;
  border-top: 1px dashed rgba(255,255,255,.12); padding-top: .6rem; }

/* La miniatura de la lista: PEGADA AL BORDE y de alto completo.
   A 64 px cuadrados no identificaba nada — era un sello. Ahora ocupa un cuarto
   del ancho y todo el alto de la tarjeta, sin marco: los margenes negativos
   son justo el relleno de .tarjeta, asi que se come el hueco y llega hasta el
   borde por dentro. El radio, un pelo menor que el de la tarjeta, para que
   encaje por dentro de su curva. */
.mini-portada { flex: 0 0 32%; align-self: stretch; width: 32%;
  min-width: 7rem; min-height: 6.5rem; border: 0; display: block;
  margin: -1rem .3rem -1rem -1.1rem; border-radius: .6rem 0 0 .6rem;
  /* `cover` recorta sin deformar: la foto conserva sus proporciones y se
     queda con el centro, que es donde esta el acuario. El min-height evita
     que en una tarjeta corta quede una tira fina, que se veia pobre. */
  object-fit: cover; object-position: 50% 45%; }

/* LA PORTADA DEL ACUARIO: el identificador visual, arriba del todo.
   Ancha y recortada a una franja: se reconoce el tanque de un vistazo sin
   comerse la pantalla que de verdad se viene a mirar. */
.portada-acuario { display: block; border-radius: 14px; overflow: hidden;
  margin: 0 0 1rem; background: var(--agua2); line-height: 0; }
.portada-acuario img { width: 100%; height: clamp(11rem, 32vw, 20rem);
  object-fit: cover; object-position: 50% 45%; display: block; }
.portada-acuario:hover img { filter: brightness(1.06); }

/* QUIEN VE ESTE ACUARIO. Plegado: no es cosa de cada dia, pero tiene que
   estar donde uno piensa en ello — de pie delante del tanque. */
.compartir { border: 1px solid var(--borde); border-radius: 12px;
  padding: .9rem 1.1rem; margin: 1.6rem 0; }
.compartir > summary { cursor: pointer; display: flex; gap: .5rem;
  align-items: baseline; flex-wrap: wrap; list-style: none; }
.compartir > summary::-webkit-details-marker { display: none; }
.compartir > summary b { font-family: 'Outfit', system-ui, sans-serif; }
.compartir > summary span { color: var(--tenue); font-size: .85rem; }
.compartir[open] > summary { margin-bottom: .7rem; }

/* Un rótulo pequeño que separa «quién entra» de «meter a alguien»: sin él,
   las dos cosas se leían como una sola mancha de texto. */
.rotulo-lista { color: var(--tenue); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .09em; margin: 0 0 .1rem; }

/* Y el formulario, detrás de su propio botón. Cerrado no ocupa nada; abierto
   se enmarca, para que se vea que es otra cosa. */
.anadir-persona { margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.09); }

.anadir-persona[open] > summary { margin-bottom: .9rem; }

.gente { list-style: none; margin: 0 0 .2rem; padding: 0; }
.gente li { display: flex; gap: .4rem; align-items: center; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.06); flex-wrap: wrap; }
.gente .quien-es { flex: 1; min-width: 12rem; }
.gente li:last-child { border-bottom: 0; }
.gente .quien-es b { font-weight: 600; font-size: .95rem; }
.gente .quien-es span { display: block; color: var(--tenue); font-size: .78rem; }
.gente li.pendiente .quien-es b { color: var(--ambar); }

/* Cambiar lo que puede hacer alguien que ya entra: dos desplegables y guardar.
   Antes había que echarle y volver a invitarle, que para subir de «mira» a
   «cuida» es un rodeo absurdo. */
/* «cambiar» y «quitar» son BOTONES, no texto subrayado: son acciones, y un
   enlace subrayado en mitad de una lista de personas se lee como un pie de
   página. Pequeños y de contorno, que acompañan a cada fila sin gritar. */
.editar-permiso summary, .quitar-acceso summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-size: .75rem; font-weight: 600; border-radius: 7px;
  padding: .25rem .6rem; border: 1px solid; text-decoration: none; }
.editar-permiso summary::-webkit-details-marker,
.quitar-acceso summary::-webkit-details-marker { display: none; }
.editar-permiso summary { color: var(--turquesa); border-color: rgba(0,184,244,.45); }
.editar-permiso summary:hover { background: rgba(0,184,244,.12); }
.editar-permiso[open] > summary { background: rgba(0,184,244,.12); }
.editar-permiso form { display: flex; gap: .35rem; margin-top: .4rem; flex-wrap: wrap; }
.editar-permiso select { font-size: .8rem; padding: .25rem .45rem; }

/* Quitar el acceso tambien va en dos gestos: se lo estas quitando a una
   persona, no borrando una fila. */
.quitar-acceso summary { color: var(--coral); border-color: rgba(255,107,91,.45); }
.quitar-acceso summary:hover { background: rgba(255,107,91,.12); }
.quitar-acceso[open] > summary { background: rgba(255,107,91,.12); }
.quitar-acceso button { margin-top: .35rem; }

/* COMPARTIR: tres preguntas, una debajo de otra. Cada una con su etiqueta a
   la izquierda y sus opciones a la derecha, que es como se lee un formulario
   que decide algo — y esto decide quién entra en tu casa. */
.invitar { margin-top: .3rem; }
.invitar-fila { display: flex; gap: .7rem; align-items: flex-start;
  margin: 0 0 .7rem; flex-wrap: wrap; }
.invitar-fila > label { flex: 0 0 7.5rem; margin: .35rem 0 0; font-size: .85rem;
  color: var(--tenue); }
.invitar input[type=email], .invitar select { padding: .5rem .7rem; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  color: inherit; font: inherit; font-size: .9rem; }
.invitar input[type=email] { flex: 1; min-width: 12rem; }
.opciones { display: flex; gap: .5rem; flex-wrap: wrap; flex: 1; }
/* Cada opción es una tarjeta que se puede pulsar entera, no un punto de 3 px:
   en el móvil se elige con el dedo.
   EN FILA, Y ESO HAY QUE DECIRLO: el título va en bloque para que la
   explicación caiga debajo, y sin `flex` eso empujaba la propia marca a su
   línea — la bolita arriba y el texto debajo, como una lista mal puesta. Con
   flex, la marca a un lado y el texto entero al otro. */
.opcion { flex: 1; min-width: 12rem; border: 1px solid var(--borde);
  border-radius: 10px; padding: .55rem .7rem; cursor: pointer; margin: 0;
  display: flex; gap: .5rem; align-items: flex-start;
  color: inherit; background: var(--agua2); }
.opcion:hover { border-color: rgba(0,184,244,.45); }
.opcion input { flex: none; margin: .2rem 0 0; accent-color: var(--turquesa); }
.opcion .que { flex: 1; }
.opcion b { display: block; font-size: .9rem; font-weight: 600; }
.opcion .que span { display: block; color: var(--tenue); font-size: .76rem; line-height: 1.4; }
/* Elegida: se marca con el borde y un fondo apenas, que ya dice bastante. */
.opcion:has(input:checked) { border-color: var(--turquesa);
  background: rgba(0,184,244,.08); }
/* Y el foco del teclado, en la TARJETA y no un cerco suelto alrededor de la
   bolita, que es lo que se veía raro al pulsar. */
.opcion input { outline: none; }
.opcion:has(input:focus-visible) { outline: 2px solid var(--turquesa);
  outline-offset: 2px; }

.enlace-invitacion { display: inline-block; word-break: break-all;
  background: var(--agua2); padding: .3rem .5rem; border-radius: 6px;
  font-size: .76rem; margin-top: .2rem; }
/* La advertencia de que el acceso es de la cuenta: ambar, porque avisa. */
.aviso-cuenta { border-left: 3px solid var(--ambar); padding-left: .7rem;
  margin-top: .8rem !important; }

/* EL VISOR A PANTALLA COMPLETA, con `:target` y CERO JavaScript.
   Oculto siempre; el navegador lo ensena cuando la URL apunta a su id. El
   fondo entero es un enlace de cierre —pinchar fuera cierra, que es lo que
   todo el mundo intenta— y el boton de atras tambien, porque cerrar no es mas
   que volver al ancla anterior. */
.visor { display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(3,27,46,.95); align-items: center; justify-content: center;
  padding: 1.5rem; }
.visor:target { display: flex; }
.visor .fondo { position: absolute; inset: 0; }
.visor img { position: relative; max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 10px;
  box-shadow: 0 10px 60px rgba(0,0,0,.5); }
.visor .cerrar { position: absolute; top: .8rem; right: 1.1rem; z-index: 2;
  font-size: 1.6rem; line-height: 1; color: var(--claro); opacity: .8;
  padding: .3rem .6rem; border-radius: 8px; background: rgba(3,27,46,.6); }
.visor .cerrar:hover { opacity: 1; text-decoration: none; }

/* LAS FOTOS DEL ACUARIO */
.fotos { margin: 1.6rem 0; }
.fotos-titulo { font-size: 1rem; font-weight: 600; margin: 0 0 .6rem;
  font-family: 'Outfit', system-ui, sans-serif; }
.fotos-tira { display: flex; gap: .6rem; flex-wrap: wrap; }
.foto { margin: 0; }
.foto img { width: 138px; height: 104px; object-fit: cover; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); display: block; }
.foto figcaption { color: var(--tenue); font-size: .72rem; margin-top: .25rem;
  display: flex; gap: .35rem; align-items: center; min-height: 1.6rem; }
.foto figcaption form { margin: 0; }
/* Los de la galería son iconos, no botones: sin fondo y sin caja. */
.foto figcaption button { background: none; border: 0; color: var(--coral);
  font: inherit; font-size: .72rem; cursor: pointer; padding: 0; }
.foto figcaption b { color: var(--turquesa); font-weight: 600; }

/* La que hace de portada se distingue sin leer: borde cian y su etiqueta. */
.foto { position: relative; }
.foto.es-portada img { border-color: var(--turquesa); box-shadow: 0 0 0 1px var(--turquesa); }
.marca-portada { position: absolute; top: .3rem; left: .3rem; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .06em; background: var(--turquesa);
  color: #04141B; font-weight: 700; padding: .1rem .4rem; border-radius: 5px; }
/* Los controles son ICONOS, y con tamano de dedo: heredaban el .72rem del pie
   y quedaban invisibles. Con `title` y `aria-label`, que un simbolo sin nombre
   no lo lee nadie. */
.foto figcaption button.coronar { color: var(--turquesa); font-size: 1.25rem;
  text-decoration: none; line-height: 1; padding: .1rem .25rem !important;
  border-radius: 6px; }
.foto figcaption button.coronar:hover { background: rgba(0,184,244,.15); }

/* BORRAR, EN DOS GESTOS. Un boton suelto se pulsa sin querer en el movil y la
   foto no vuelve: los archivos no van a ninguna papelera. */
.borrar-foto { display: inline; }
.borrar-foto summary { cursor: pointer; list-style: none; font-size: 1.25rem;
  line-height: 1; padding: .1rem .25rem; border-radius: 6px;
  /* La papelera en gris hasta que se pasa por encima: es una accion que no se
     ofrece, se alcanza. Pero VISIBLE — antes heredaba el .72rem del pie y no
     se veia. */
  filter: grayscale(1); opacity: .8; }
.borrar-foto summary:hover { filter: none; opacity: 1;
  background: rgba(255,107,91,.15); }
.borrar-foto[open] summary { filter: none; opacity: 1; }
.borrar-foto summary::-webkit-details-marker { display: none; }
.borrar-foto[open] summary { color: var(--tenue); }
.borrar-foto form { display: inline; margin-left: .35rem; }
.borrar-foto button { text-decoration: none !important; }
.foto-anadir { margin: 0; }
/* Con pinta de boton secundario, a juego con «+ Añadir revision». */

/* Abierta, la cajita tiene ancho TOPE: sin el, crece hasta el ancho natural
   de su nota de texto y ya no cabe al lado del boton de revision — y toda la
   caja saltaba de linea aunque sobrara sitio. */
.foto-anadir[open] { border: 1px dashed rgba(255,255,255,.18); border-radius: 12px;
  padding: 1rem 1.2rem; width: min(24rem, 100%); min-width: 0; }
.subir-foto { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  margin-top: .3rem; }
/* El input nativo, fuera de la vista pero no del formulario: sigue siendo el
   que valida y el que abre la camara. */
.subir-foto input[type=file], .revision input[type=file] { position: absolute;
  width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.elegir { position: relative; cursor: pointer; display: inline-block;
  border: 1px solid rgba(255,255,255,.25); border-radius: 10px;
  padding: .5rem 1rem; font-size: .9rem; background: rgba(255,255,255,.05); }
.elegir:hover { background: rgba(255,255,255,.1); }
.cuantas-fotos { color: var(--tenue); font-size: .85rem; }
.cuantas-fotos:empty { display: none; }
.revision-fila label span { color: var(--tenue); font-size: .78rem; }
.subir-foto .nombre-foto { color: var(--tenue); font-size: .85rem; max-width: 13rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subir-foto .nombre-foto:empty { display: none; }

.foto-anadir form { display: flex; gap: .6rem; align-items: center;
  margin-top: .6rem; flex-wrap: wrap; }
.foto-anadir input[type=file] { color: var(--tenue); font-size: .85rem; }
.medida-limites a { color: inherit; }
.apunte-nota { margin: .6rem 0 0; font-size: .8rem; color: var(--tenue); }

/* LA PUERTA DE ATRAS A LOS DATOS EN CRUDO.
   Pequena y al final de la ficha: un acuarista no tiene por que ver nunca una
   tabla de lecturas —para eso esta la grafica—, pero quien acaba de montar un
   aparato necesita comprobar que cada dato entra cuando debe. Alcanzable, no
   ofrecido. */
.pieDatos { text-align: center; margin: 2rem 0 .5rem; font-size: .82rem; }
.pieDatos a {
    display: inline-block; margin: .25rem .3rem;
    color: var(--turquesa); border: 1px solid rgba(0,184,244,.5);
    border-radius: 9px; padding: .45rem .9rem;
    font-weight: 600; text-decoration: none;
}
.pieDatos a:hover { background: rgba(0,184,244,.12); text-decoration: none; }
.pieDatos span { display: block; margin-top: .45rem; color: var(--tenue); }

/* ── Ajustes: entre qué valores debe estar el agua ──────────────────────────
   Cada medida en su bloque, porque un acuario puede vigilar varias cosas y
   mezclarlas en una lista de campos sueltos hace imposible saber qué mínimo
   es de qué. */

.ajuste {
    background: var(--agua2);
    border: 1px solid var(--borde);
    border-radius: .7rem;
    padding: 1rem 1.1rem 1.2rem;
    margin-bottom: 1.2rem;
}
.ajuste h2 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 600; }
.ajuste h2 .unidad { color: var(--tenue); font-weight: 400; font-size: .85rem; }
.ajuste label:first-of-type { margin-top: .4rem; }

/* Mínimo y máximo van juntos: son las dos mitades de una misma respuesta. */
.pareja { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pareja label { margin-top: .7rem; }

.pista { color: var(--tenue); font-size: .78rem; line-height: 1.45; margin: .4rem 0 0; }
.pista b { color: var(--claro); }

.casilla { display: flex; align-items: center; gap: .5rem;
           margin-top: 1.1rem; color: var(--claro); font-size: .92rem; }
.casilla input { width: auto; margin: 0; }

/* Un acuario que mide y no tiene límites no da ningún error: está en verde
   para siempre. Por eso se avisa en ámbar y no en gris. */
.sin-limites {
    background: rgba(255,176,32,.10);
    border: 1px solid var(--ambar);
    border-radius: .4rem;
    padding: .6rem .8rem; margin: .6rem 0 .2rem;
    font-size: .82rem; color: var(--claro);
}

/* ── El rango, pegado al número grande ─────────────────────────────────────
   El número solo no dice si está bien. Junto a "debe estar entre 24 y 27" se
   juzga sin leer nada más, que es de lo que va el producto. */

.debe-estar {
    color: var(--tenue); font-size: .9rem;
    margin: .1rem 0 0; font-variant-numeric: tabular-nums;
}
.debe-estar b { color: var(--claro); font-weight: 600; }
.debe-estar a { color: var(--turquesa); font-size: .82rem; margin-left: .4rem; }

.aviso-bien {
    background: rgba(70,211,154,.12); border: 1px solid var(--verde);
    color: var(--verde); border-radius: .5rem; padding: .6rem .8rem;
    font-size: .88rem; margin-bottom: 1rem;
}

/* ── Sesión prestada ────────────────────────────────────────────────────────
   Tiene que cantar. Quien mira la cuenta de un cliente no puede confundirla ni
   un segundo con la suya, y sobre todo no puede olvidarse de que la dejó
   abierta. Por eso ámbar, arriba del todo y sin forma de cerrarla. */

.prestada {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    background: rgba(255,176,32,.12);
    border: 1px solid var(--ambar);
    border-radius: .5rem;
    padding: .7rem .9rem;
    margin: .8rem 0 1.1rem;
    font-size: .85rem; color: var(--claro);
}
.prestada b { color: var(--ambar); }
.prestada a {
    color: var(--agua); background: var(--ambar);
    border-radius: .4rem; padding: .35rem .7rem;
    font-weight: 700; white-space: nowrap;
}
.prestada a:hover { text-decoration: none; filter: brightness(1.1); }

/* ── Quién mide, sin gastar sitio ───────────────────────────────────────────
   En la lista solo cabe el nombre del modelo, justo bajo el número grande.
   Repetir ahí la temperatura era decir dos veces lo mismo en la misma tarjeta.
   El resto —MAC, sonda, valor, frescura— va en el globo del ratón; en móvil no
   hay ratón, y por eso la ficha lo enseña entero al tocar. */

.quien-mide {
    list-style: none; margin: .15rem 0 0; padding: 0;
    font-size: .74rem; color: var(--tenue); line-height: 1.45;
}
.quien-mide li { border-bottom: 1px dotted var(--borde); display: inline-block; cursor: help; }
.quien-mide li + li { margin-top: .1rem; }
.quien-mide.sin-sonda { color: var(--ambar); }

/* En la ficha, una línea por aparato. La que manda no repite su valor: ya es el
   número grande de arriba. */

.titulo-seccion {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--tenue); font-weight: 700; margin: 1.5rem 0 .6rem;
}
.canales { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
/* Rejilla y no flex: la fila tiene tres partes —quién es, su dato, y qué hace—
   y la tercera ocupa el ancho entero debajo de las otras dos. */
.canal {
    display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
    align-items: start;
    background: var(--agua2); border: 1px solid var(--borde);
    border-radius: .5rem; padding: .6rem .8rem;
}
.canal .aviso-bien, .canal .aviso-mal { grid-column: 1 / -1; }

/* QUÉ HACE ESTA SONDA, en una frase entera y en la propia sonda. Antes era una
   pastilla que ponía «principal», y eso obliga a saberse de antes qué significa
   esa palabra en este producto. */
.canal-papel {
    grid-column: 1 / -1;
    margin: .35rem 0 0; padding-top: .4rem;
    border-top: 1px solid var(--borde);
    font-size: .76rem; color: var(--claro);
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.canal-papel b { color: var(--turquesa); }
.canal-papel .tenue { color: var(--tenue); }
.canal-papel a { color: var(--turquesa); margin-left: auto; }
.canal-papel .cambiar { margin: 0 0 0 auto; }
/* LA QUE EMITE SE RESALTA, NO SE MUEVE.
   Las filas van siempre por orden de alta —el mismo del que sale su color— así
   que al cambiar cuál emite no salta nada de sitio: solo se enciende otra. */
.canal.manda {
    border-color: var(--turquesa);
    background: rgba(0,184,244,.10);
}
.canal b { display: block; font-size: .92rem; }
.canal span { display: block; color: var(--tenue); font-size: .74rem; margin-top: .1rem; }
.canal code { font-size: .95em; }
.canal-dato { text-align: right; white-space: nowrap; }
.canal-dato b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ── Menú ───────────────────────────────────────────────────────────────────
   El panel no tenía ninguno: desde la lista solo se podía entrar en un acuario
   y desde un acuario volver. Todo lo demás era invisible. */

.menu { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.menu a {
    background: var(--agua2); border: 1px solid var(--borde);
    border-radius: .45rem; padding: .35rem .75rem;
    color: var(--tenue); font-size: .84rem;
}
.menu a:hover { color: var(--claro); text-decoration: none; }
.menu a.activo { background: var(--turquesa); color: var(--agua);
                 border-color: var(--turquesa); font-weight: 600; }
/* Una sonda sin acuario no la vigila nadie, así que su aviso no es gris. */
.menu a[data-aviso] { color: var(--ambar); border-color: var(--ambar); }

select {
    width: 100%; padding: .7rem .8rem; font-size: 1rem;
    background: var(--agua2); color: var(--claro);
    border: 1px solid var(--borde); border-radius: .5rem;
}
select:focus { outline: 2px solid var(--turquesa); outline-offset: 1px; }

details { margin-top: 1rem; }
details summary {
    cursor: pointer; color: var(--turquesa); font-size: .88rem;
    padding: .4rem 0; font-weight: 600;
}
details[open] summary { margin-bottom: .3rem; }

.canal-dato a { color: var(--turquesa); font-size: .85rem; }

/* ── Añadir algo ────────────────────────────────────────────────────────────
   Cada alta vive donde vive su padre —el medidor dentro del acuario, el acuario
   dentro del cliente— así que el enlace no es un botón grande: es una línea
   discreta al final de la lista a la que pertenece. */

/* Pequeños a propósito: añadir un acuario o un cliente se hace de uvas a peras,
   y un botón grande para algo que casi nunca se pulsa se come la pantalla que sí
   se mira todos los días. */
.anadir { margin: .35rem 0 1.1rem; }
.anadir a {
    display: inline-block; color: var(--tenue); font-size: .76rem;
    border: 1px dashed var(--borde); border-radius: .35rem; padding: .2rem .55rem;
}
.anadir a:hover { color: var(--turquesa); border-color: var(--turquesa);
                  text-decoration: none; }
.anadir .tope { color: var(--tenue); font-size: .74rem; }

/* ── Acciones de la pantalla principal ──────────────────────────────────────
   Sustituyen a la barra de pestañas. A la derecha lo que se crea, a la
   izquierda lo que reclama atención. Si no hay ni una cosa ni la otra, la fila
   no existe: una barra con un solo botón que siempre dice lo mismo es ruido. */

.acciones { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.acciones .mas {
    margin-left: auto;
    background: var(--turquesa); color: var(--agua);
    border-radius: .45rem; padding: .4rem .85rem;
    font-size: .86rem; font-weight: 700;
}
.acciones .mas:hover { text-decoration: none; filter: brightness(1.08); }
/* Una sonda sin acuario no la vigila nadie: eso no se pinta en gris. */
.acciones .ojo {
    color: var(--ambar); border: 1px solid var(--ambar);
    border-radius: .45rem; padding: .35rem .75rem; font-size: .84rem;
}
.acciones .ojo:hover { background: rgba(255,176,32,.10); text-decoration: none; }

/* ── La ficha: una tarjeta por magnitud ─────────────────────────────────────
   Antes la ficha daba por hecho que un acuario mide UNA cosa: un número enorme
   ocupando todo, sus límites debajo, y en otra sección más abajo qué aparato lo
   daba. Había que atar los dos cabos con la vista, y en cuanto entre el pH no
   hay dónde ponerlo.

   Ahora cada magnitud es una tarjeta con su valor, sus límites y sus sondas
   DENTRO. El color del borde sigue diciendo cómo está, como en la lista. */

.medida {
    background: var(--agua2); border: 1px solid var(--borde);
    border-radius: .7rem; padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.medida.ok       { border-color: var(--turquesa); background: rgba(0,184,244,.05); }
.medida.subiendo { border-color: var(--ambar);    background: rgba(255,176,32,.07); }
.medida.alto     { border-color: var(--coral);    background: rgba(255,107,91,.07); }
.medida.bajo     { border-color: var(--turquesa); background: rgba(0,184,244,.05); }
.medida.sin_datos{ border-color: var(--tenue); }
.medida.sin_limites{ border-color: var(--tenue); }

.medida-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.medida-cab h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.medida-limites { color: var(--tenue); font-size: .8rem; margin: .2rem 0 0; }
.medida-limites b { color: var(--claro); }
.medida-limites .alerta { color: var(--ambar); font-weight: 600; }

/* El valor manda, pero ya no ocupa la pantalla entera: tiene que caber otro
   igual justo debajo. */
.medida-valor { text-align: right; white-space: nowrap; }
.medida-valor b { display: block; font-size: 2.1rem; font-weight: 700;
                  line-height: 1.1; font-variant-numeric: tabular-nums; }
.medida-valor span { display: block; font-size: .78rem; margin-top: .1rem; }
.medida.ok .medida-valor b,       .medida.ok .medida-valor span       { color: var(--turquesa); }
.medida.subiendo .medida-valor b, .medida.subiendo .medida-valor span { color: var(--ambar); }
.medida.alto .medida-valor b,     .medida.alto .medida-valor span     { color: var(--coral); }
.medida.bajo .medida-valor b,     .medida.bajo .medida-valor span     { color: var(--turquesa); }
.medida.sin_datos .medida-valor b,.medida.sin_datos .medida-valor span{ color: var(--tenue); }
.medida.sin_limites .medida-valor b,.medida.sin_limites .medida-valor span{ color: var(--tenue); }

.medida .canales { margin-top: .8rem; }
.medida .canal { background: var(--agua); }
.medida-ritmo { color: var(--tenue); font-size: .78rem; margin: .7rem 0 0; }
.medida-ritmo b { color: var(--claro); }
.sin-nada { margin: 0; color: var(--tenue); font-size: .9rem; }
.sin-nada b { color: var(--claro); }
.sin-nada a { color: var(--turquesa); }

/* Ajustar límites y añadir sensor: discretos, arriba de las medidas. */
.acciones-ficha { display: flex; gap: .4rem; margin: 0 0 1rem; }
.acciones-ficha a {
    color: var(--tenue); font-size: .76rem;
    border: 1px solid var(--borde); border-radius: .35rem; padding: .2rem .6rem;
}
.acciones-ficha a:hover { color: var(--turquesa); border-color: var(--turquesa);
                          text-decoration: none; }

/* La gráfica vive dentro de la tarjeta de su magnitud, así que no lleva su
   propio marco: ya está dentro de uno. */
.medida .grafica { background: var(--agua); border: 1px solid var(--borde);
                   border-radius: .5rem; padding: .5rem .3rem .2rem; margin-top: .9rem; }
.grafica-pie { color: var(--tenue); font-size: .72rem; text-align: center; margin: .4rem 0 0; }

/* ── El color, junto al modelo de su sonda ──────────────────────────────────
   Hubo una leyenda debajo de la gráfica, con una línea por sonda. Sobraba: el
   color ya está aquí arriba, pegado al modelo, y las filas están en la misma
   tarjeta que la gráfica. Una leyenda que repite lo que tienes tres centímetros
   más arriba solo alarga la pantalla.

   El cuadradito es de la sonda y no cambia nunca: sale del orden en que se
   dieron de alta, no de cuál emite los avisos. */

/* «que avise esta»: pequeño y sin gritar. Se pulsa cuando una sonda se estropea,
   no todos los días. */
.cambiar { margin: .3rem 0 0; }
/* El de «que emita esta» lleva `.flojo .chico` en el HTML: no necesita
   estilo propio. Aquí solo el sitio. */

.aviso-mal {
    background: rgba(255,107,91,.12); border: 1px solid var(--coral);
    color: var(--coral); border-radius: .5rem; padding: .6rem .8rem;
    font-size: .88rem; margin-bottom: 1rem;
}

/* ── Salud de cada sonda ────────────────────────────────────────────────────
   Que el agua esté en rango no significa que la sonda funcione: puede estar
   dando un número creíble y estar rota. Esta línea dice si habla, si le faltan
   lecturas y si le llega la WiFi. */

.salud { font-size: .72rem !important; margin-top: .2rem; }
.salud.bien    { color: var(--turquesa) !important; }
.salud.revisar { color: var(--ambar) !important; }
.salud.mal     { color: var(--coral) !important; }
.salud::before { content: "● "; }

/* La muestra de color, la misma que su línea en la gráfica. */
.pinta { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
         margin-right: .45rem; vertical-align: baseline; }

/* El aviso dentro de una tarjeta: pegado a lo que acaba de cambiar, no arriba
   del todo donde el usuario no lo ve después del salto. */
.medida .aviso-bien, .medida .aviso-mal { margin: 0 0 .8rem; font-size: .82rem; }

/* El aviso dentro de la fila de una sonda: la fila pasa a columna para que el
   mensaje ocupe todo el ancho en vez de pelearse con el valor de la derecha. */
.canal .aviso-bien, .canal .aviso-mal {
    margin: 0 0 .6rem; font-size: .78rem; padding: .45rem .6rem;
}

/* ── El detalle de las sondas, plegado ──────────────────────────────────────
   La ficha es un resumen: cuánto marca y su curva. Con una sola magnitud cabía
   todo, pero el día que un acuario mida temperatura, pH y densidad esta
   pantalla sería un listado interminable.

   Sale abierto solo si hay algo que mirar —una sonda que no está bien, o un
   mensaje esperando—, porque un problema escondido detrás de un clic es un
   problema que no se ve. */

/* Dos niveles: el de fuera abre la gráfica, y dentro de ella otro abre las
   sondas. Comparten estilo de resumen porque son la misma idea repetida; lo que
   cambia es que el de dentro va más apagado, para que se lea como algo que
   cuelga del primero y no como un hermano suyo. */

.detalle-grafica { margin-top: .8rem; }
.detalle-grafica > summary,
.detalle-sondas  > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: .5rem;
    color: var(--tenue); font-size: .78rem; font-weight: 600;
    padding: .35rem 0;
}
.detalle-grafica > summary::-webkit-details-marker,
.detalle-sondas  > summary::-webkit-details-marker { display: none; }
.detalle-grafica > summary::before,
.detalle-sondas  > summary::before { content: "▸"; color: var(--turquesa); }
.detalle-grafica[open] > summary::before,
.detalle-sondas[open]  > summary::before { content: "▾"; }
.detalle-grafica > summary:hover,
.detalle-sondas  > summary:hover { color: var(--claro); }
.detalle-sondas { margin-top: .8rem; }
.detalle-sondas > summary { font-size: .74rem; opacity: .85; }
.detalle-grafica > summary .ojo,
.detalle-sondas  > summary .ojo {
    color: var(--ambar); border: 1px solid var(--ambar);
    border-radius: .25rem; padding: 0 .35rem; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .05em;
}
.detalle-sondas .canales { margin-top: .5rem; }



/* El enlace a la ficha de la cuenta. En turquesa —que en este panel es el color
   de lo que se puede pulsar— y sin mayúsculas, para que no se confunda con el
   encabezado del que cuelga. */
.ir { color: var(--turquesa); text-transform: none; letter-spacing: 0;
      font-size: .78rem; font-weight: 600; }
.ir:hover { text-decoration: underline; }
.grupo .ir { margin-left: .6rem; }
.acciones .ir { border: 1px solid var(--turquesa); border-radius: .45rem;
                padding: .35rem .75rem; }
.acciones .ir:hover { background: rgba(0,184,244,.10); text-decoration: none; }
.aviso-bien input[type=text] {
    background: var(--agua); border: 1px solid var(--turquesa);
    color: var(--claro); margin-top: .2rem;
}

/* «mis datos», junto a «salir». El enlace estuvo un rato siendo el propio
   nombre, y no valía: un nombre no dice que se pueda pulsar ni a dónde lleva.
   Con su etiqueta se encuentra, igual que se encuentra «salir». */
.barra .quien a { color: var(--tenue); }
.barra .quien a:hover { color: var(--turquesa); }