/* ═══════════════════════════════════════════════════════════════════════════
   PRISMA · EL LOGIN, UNO SOLO PARA TODAS LAS APPS (2026-09-22)
   ───────────────────────────────────────────────────────────────────────────
   Luis: «si cambio entre pestañas, lo único que debe moverse es el nombre; todo lo demás,
   milimétricamente en la misma posición, porque es la misma estructura». Este archivo es
   ESA estructura, y es IDÉNTICO en ARIA, CIMA, CEPAS y VIVERO (se copia tal cual; el
   original vive en accesos/prisma-login.css). Cada app sólo marca sus piezas con estas
   clases y elige su botón con `data-pl="aria|cima|cepas|vivero"` en la tarjeta.

   Las medidas son fijas en píxeles a propósito: con rem o con clamp cada app heredaba su
   propio tamaño de letra raíz y la tarjeta cambiaba de alto al pasar de una a otra.
   El selector lleva `:not(#_)` dos veces para ganarle a las reglas viejas de cada app
   (algunas con id); así este archivo manda sin tener que borrar nada de ellas.

   Lo único distinto entre apps: el DEGRADADO DEL BOTÓN y CÓMO SE MUEVE, sacados de la
   foto de fondo de cada una.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La pantalla: la tarjeta, siempre en el centro exacto. */
/* Sin tocar su display: cada app lo esconde a su manera (clase oculto, hidden, o lo quita). */
html:not(#_):not(#_) .pl-pantalla{ position:fixed !important; inset:0 !important; align-items:center !important; justify-content:center !important;
  place-items:center !important; padding:16px !important; overflow:auto !important; box-sizing:border-box !important; }

/* La tarjeta de vidrio. */
html:not(#_):not(#_) .pl-caja{ position:relative !important; z-index:10 !important; box-sizing:border-box !important;
  width:340px !important; max-width:100% !important; margin:auto !important; padding:28px 28px 24px !important;
  border-radius:18px !important; text-align:center !important; color:#FFFFFF !important;
  background:rgba(26,38,51,.45) !important; border:1px solid rgba(255,255,255,.22) !important;
  backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important;
  box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; animation:none !important; transform:none !important; }
html:not(#_):not(#_) .pl-caja *{ box-sizing:border-box; font-style:normal !important; }

/* La estrella, el nombre y su función. */
html:not(#_):not(#_) .pl-estrella{ display:block !important; width:44px !important; height:44px !important; margin:0 auto 16px !important;
  padding:0 !important; filter:none !important; opacity:1 !important; transform:none !important; object-fit:contain !important; }
html:not(#_):not(#_) .pl-nombre{ display:block !important; margin:0 !important; padding:0 0 0 .2em !important; height:42px !important;
  font-family:Marcellus, 'PP Fragment Glare', Georgia, serif !important; font-weight:400 !important; font-size:41.6px !important;
  line-height:42px !important; letter-spacing:.2em !important; color:#FFFFFF !important; text-shadow:none !important; white-space:nowrap !important; }
html:not(#_):not(#_) .pl-funcion{ display:block !important; margin:12px 0 26px !important; padding:0 0 0 .34em !important; height:14px !important;
  font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif !important; font-weight:400 !important; font-size:10.24px !important;
  line-height:14px !important; letter-spacing:.34em !important; text-transform:uppercase !important; color:rgba(255,255,255,.85) !important;
  text-shadow:none !important; white-space:nowrap !important; }

/* El formulario: dos campos, la fila de opciones y el botón, con el mismo aire entre todos. */
html:not(#_):not(#_) .pl-form{ display:flex !important; flex-direction:column !important; gap:12px !important; margin:0 !important;
  padding:0 !important; text-align:left !important; max-width:none !important; width:100% !important;
  align-items:stretch !important; justify-items:stretch !important; }
html:not(#_):not(#_) .pl-campo{ position:relative !important; display:block !important; width:100% !important; max-width:none !important; height:44px !important; margin:0 !important; padding:0 !important; }
html:not(#_):not(#_) .pl-inp{ position:relative !important; z-index:1 !important; display:block !important; width:100% !important; max-width:none !important; height:44px !important; margin:0 !important;
  padding:0 46px 0 46px !important; border-radius:99px !important; border:1px solid transparent !important;
  background:#FFFFFF !important; color:#1A2633 !important; box-shadow:none !important; outline:none !important;
  font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif !important; font-weight:400 !important; font-size:14px !important;
  line-height:42px !important; letter-spacing:.01em !important; -webkit-appearance:none; appearance:none; }
html:not(#_):not(#_) .pl-inp::placeholder{ color:rgba(26,38,51,.55) !important; opacity:1 !important; font-weight:400 !important; }
html:not(#_):not(#_) .pl-inp:focus{ border-color:#006D82 !important; box-shadow:0 0 0 3px rgba(0,109,130,.25) !important; }
html:not(#_):not(#_) .pl-ico{ position:absolute !important; left:16px !important; top:50% !important; transform:translateY(-50%) !important;
  z-index:3 !important; display:flex !important; align-items:center !important; justify-content:center !important;
  width:18px !important; height:18px !important; margin:0 !important; font-size:18px !important; line-height:1 !important;
  color:#005565 !important; pointer-events:none !important; }
html:not(#_):not(#_) .pl-ico svg{ width:18px !important; height:18px !important; }
/* el glifo, a 18 px aunque venga en una caja propia (en ARIA iba a 24 y se veía relleno) */
html:not(#_):not(#_) .pl-ico > .material-icons-outlined, html:not(#_):not(#_) .pl-ico.material-icons-outlined{ font-size:18px !important; line-height:1 !important; width:18px !important; height:18px !important; }
html:not(#_):not(#_) .pl-ojo{ position:absolute !important; right:14px !important; top:50% !important; transform:translateY(-50%) !important;
  z-index:4 !important; display:flex !important; align-items:center !important; justify-content:center !important;
  width:24px !important; height:24px !important; margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
  color:rgba(26,38,51,.55) !important; cursor:pointer !important; font-size:18px !important; box-shadow:none !important; }
html:not(#_):not(#_) .pl-ojo:hover{ color:#005565 !important; }
html:not(#_):not(#_) .pl-ojo svg, html:not(#_):not(#_) .pl-ojo .material-icons-outlined{ width:18px !important; height:18px !important; font-size:18px !important; }

/* La fila de «Mantener sesión» y «¿Olvidó su contraseña?»: SIEMPRE en una sola línea. */
html:not(#_):not(#_) .pl-opciones{ display:flex !important; width:100% !important; align-items:center !important; justify-content:space-between !important;
  gap:8px !important; height:20px !important; margin:0 !important; padding:0 4px !important; border:0 !important; white-space:nowrap !important;
  font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif !important; font-size:11px !important; line-height:20px !important;
  font-weight:400 !important; letter-spacing:0 !important; color:rgba(255,255,255,.90) !important; }
html:not(#_):not(#_) .pl-recordar{ display:flex !important; align-items:center !important; gap:6px !important; margin:0 !important;
  cursor:pointer !important; user-select:none !important; font:inherit !important; color:inherit !important; }
html:not(#_):not(#_) .pl-recordar input{ width:14px !important; height:14px !important; margin:0 !important; accent-color:#005565 !important; cursor:pointer !important; flex:none !important; }
html:not(#_):not(#_) .pl-olvido{ margin:0 !important; padding:0 !important; border:0 !important; background:none !important; cursor:pointer !important;
  font:inherit !important; color:#EADFCE !important; text-align:right !important; white-space:nowrap !important; text-decoration:none !important; }
html:not(#_):not(#_) .pl-olvido:hover{ text-decoration:underline !important; }

/* EL BOTÓN: la misma figura en todas; el degradado y su movimiento, de cada app. */
html:not(#_):not(#_) .pl-boton{ position:relative !important; flex:none !important; overflow:hidden !important; display:flex !important; align-items:center !important;
  justify-content:center !important; gap:8px !important; width:100% !important; height:46px !important; margin:4px 0 0 !important; padding:0 20px !important;
  border-radius:99px !important; border:1px solid rgba(255,255,255,.22) !important; color:#FFFFFF !important; cursor:pointer !important;
  font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif !important; font-weight:400 !important; font-size:12px !important;
  line-height:1 !important; letter-spacing:.22em !important; text-transform:uppercase !important; text-shadow:none !important;
  box-shadow:0 12px 30px -12px rgba(26,38,51,.62) !important; transform:none !important; transition:border-color 120ms linear, filter 120ms linear !important;
  background-color:#005565 !important; background-image:var(--pl-grad) !important; background-size:var(--pl-tam, 300% 300%) !important;
  animation:var(--pl-mov) !important; }
html:not(#_):not(#_) .pl-boton:hover{ border-color:rgba(255,255,255,.60) !important; filter:brightness(1.08) !important; transform:none !important; }
html:not(#_):not(#_) .pl-boton:disabled{ opacity:.7 !important; cursor:progress !important; }
html:not(#_):not(#_) .pl-boton > .atlas-foco{ display:none !important; }   /* las manchas viejas de CIMA */
html:not(#_):not(#_) .pl-boton .material-icons-outlined, html:not(#_):not(#_) .pl-boton svg{ font-size:18px !important; width:18px !important; height:18px !important; }

/* La raya y el pie. */
html:not(#_):not(#_) .pl-pie{ display:block !important; margin:28px 0 0 !important; padding:0 !important; text-align:center !important; }
html:not(#_):not(#_) .pl-raya{ display:block !important; width:75% !important; height:0 !important; margin:0 auto 12px !important; border:0 !important;
  border-top:1px solid rgba(255,255,255,.22) !important; }
html:not(#_):not(#_) .pl-lema{ display:block !important; margin:0 !important; padding:0 0 0 .3em !important;
  font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif !important; font-weight:400 !important; font-size:9px !important;
  line-height:12px !important; letter-spacing:.3em !important; text-transform:uppercase !important; color:rgba(255,255,255,.80) !important; text-shadow:none !important; }

/* Los avisos (clave temporal, error): mismo ancho y letra en todas. Son lo único que puede
   cambiar el alto, y sólo cuando hay algo que decir. */
html:not(#_):not(#_) .pl-aviso{ margin:0 !important; font-family:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif !important;
  font-size:11px !important; line-height:1.45 !important; font-weight:400 !important; color:#EADFCE !important; text-align:center !important; }

/* ── EL BOTÓN DE CADA APP: su degradado y su movimiento, en función de su foto ─────────── */
/* ARIA · la hoja (una hoja verde de cerca): verdes de savia que derivan en diagonal, lento. */
html:not(#_):not(#_) .pl-caja[data-pl="aria"]{ --pl-grad:linear-gradient(-45deg, #1E4A30, #3F6B3A, #7D9B5B, #2C5A3C, #1E4A30);
  --pl-tam:300% 300%; --pl-mov:plDiagonal 14s ease-in-out infinite; }
/* CIMA · la copa (el dosel desde arriba): el verde hondo del bosque y el deep del mar, en barrido lateral. */
html:not(#_):not(#_) .pl-caja[data-pl="cima"]{ --pl-grad:linear-gradient(90deg, #0E3A36, #005565, #2F6B4F, #0E3A36, #005565);
  --pl-tam:400% 100%; --pl-mov:plBarrido 11s linear infinite; }
/* CEPAS · el tronco (los anillos de un corte): la madera que late desde el centro, como anillos. */
html:not(#_):not(#_) .pl-caja[data-pl="cepas"]{ --pl-grad:radial-gradient(circle at 50% 50%, #8A6A2F 0%, #5E4228 30%, #3A2A1E 58%, #6B4A30 80%, #3A2A1E 100%);
  --pl-tam:220% 520%; --pl-mov:plAnillos 7s ease-in-out infinite alternate; }
/* VIVERO · el invernadero en flor (flores rojas y hojas): el rojo de las flores que sube entre el verde. */
html:not(#_):not(#_) .pl-caja[data-pl="vivero"]{ --pl-grad:linear-gradient(180deg, #2E5A3E, #6E2328, #B3261E, #7A2A24, #2E5A3E);
  --pl-tam:100% 400%; --pl-mov:plSube 9s ease-in-out infinite alternate; }

@keyframes plDiagonal{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@keyframes plBarrido{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }
@keyframes plAnillos{ from{ background-size:220% 520%; background-position:50% 50%; } to{ background-size:320% 760%; background-position:50% 50%; } }
@keyframes plSube{ from{ background-position:50% 100%; } to{ background-position:50% 0%; } }
@media (prefers-reduced-motion:reduce){ html:not(#_):not(#_) .pl-boton{ animation:none !important; } }

/* Mientras el login está a la vista, la página de atrás no se desplaza: si mostraba su barra
   de desplazamiento (ARIA, que es más alta que la ventana), esa barra le robaba ancho a la
   pantalla y la tarjeta, centrada en lo que quedaba, se corría unos píxeles a la izquierda. */
html:has(.pl-pantalla:not(.oculto):not(.hidden):not([hidden])),
html:has(.pl-pantalla:not(.oculto):not(.hidden):not([hidden])) body{ overflow:hidden !important; scrollbar-gutter:auto !important; }