/* ============================================================
   Escala · escena-toro — componente de "escena" reutilizable
   (fondo verde + toro con mascara CSS + red de sinapsis + tarjeta
   de vidrio), nacido en el rediseno del login (2026-08-31).

   Como usarlo en una pagina nueva:
   1. <link rel="stylesheet" href="ruta/a/escena-toro.css">
      (ajusta la ruta segun la profundidad, igual que con office.css)
   2. require '.../includes/escena_toro_head.php';
   3. Imprime tu contenido propio: un <span class="eyebrow-toro">,
      un <h2>, un <p class="sub">, y lo que necesites (formulario,
      botones .btn-toro, campos .campo-toro, alertas .alert, links
      .link-toro).
   4. require '.../includes/escena_toro_foot.php';

   El toro (images/toro-colaborador.png, junto a este CSS) se resuelve
   siempre relativo a ESTE archivo, no a la pagina que lo incluye —
   por eso funciona igual sin importar la profundidad del caller.
   ============================================================ */

:root{
  --pino:#04302B;--teal:#00524A;--verde:#0C7A6D;--laton:#D9A441;
  --carbon:#0b0b0c;--carbon2:#1c1c1c;
}

.escena-toro{position:relative;min-height:100vh;overflow:hidden;color:#fff;font-family:'Inter',sans-serif;
  background:radial-gradient(160% 130% at 65% 15%,#0a5347 0%,var(--teal) 45%,#021c17 100%)}

@keyframes vagarToro{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(50px,-40px) scale(1.15)}66%{transform:translate(-35px,30px) scale(.92)}}
.blob-toro{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none}
.blob-toro.b1{width:26%;height:46%;background:rgba(12,122,109,.4);top:-10%;left:-6%;animation:vagarToro 18s ease-in-out infinite}

@keyframes pulsoGlowToro{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}
.glow-toro{position:absolute;width:34%;height:60%;border-radius:50%;left:44%;top:14%;
  background:radial-gradient(circle, rgba(12,122,109,.4) 0%, transparent 70%);filter:blur(34px);
  animation:pulsoGlowToro 5s ease-in-out infinite;pointer-events:none}

.synapsis-toro{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
@keyframes nodoToro{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes viajarToro{0%{offset-distance:0%;opacity:0}8%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes pulsoAnilloToro{0%{r:2;opacity:.6}100%{r:9;opacity:0}}

@keyframes brilloToro{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.toro-rim,.toro-fill{position:absolute;left:45%;top:25%;width:47%;height:50%;z-index:3;
  -webkit-mask-image:url(images/toro-colaborador.png);mask-image:url(images/toro-colaborador.png);
  -webkit-mask-mode:alpha;mask-mode:alpha;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  pointer-events:none}
.toro-rim{background:var(--laton);filter:blur(9px);transform:scale(1.03);opacity:.6}
.toro-fill{background:linear-gradient(115deg,var(--carbon) 0%,var(--carbon2) 40%,#c99a4e 62%,var(--carbon) 100%);
  background-size:220% 100%;animation:brilloToro 10s ease-in-out infinite}

@keyframes flotarToro{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 6px))}}
.wrap-toro{position:absolute;left:4%;top:50%;transform:translateY(-50%);z-index:5;
  animation:flotarToro 7s ease-in-out infinite;width:min(420px,92vw)}
.card-toro{padding:48px 42px;border-radius:22px;background:rgba(4,20,17,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;
  border:1px solid rgba(217,164,65,.3);box-shadow:0 30px 70px rgba(0,0,0,.5)}

.marca-mini-toro{display:flex;align-items:center;gap:11px}
.icono-toro{display:block;width:30px;height:22px;flex-shrink:0;
  -webkit-mask-image:url(images/toro-colaborador.png);mask-image:url(images/toro-colaborador.png);
  -webkit-mask-mode:alpha;mask-mode:alpha;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  background:var(--laton)}
.wordmark-toro{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:.04em;font-size:20px}
.tag-toro{font-size:9.5px;letter-spacing:.2em;color:rgba(255,255,255,.5);margin-top:1px}

@keyframes barridoRuleToro{0%{left:100%}100%{left:-100%}}
.fleur-toro{display:block;width:14px;height:14px;flex-shrink:0;
  -webkit-mask-image:url(images/fleur-de-lis.webp);mask-image:url(images/fleur-de-lis.webp);
  -webkit-mask-mode:alpha;mask-mode:alpha;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  background:var(--laton);opacity:.85}
.rule-toro{width:44px;height:2px;position:relative;overflow:hidden;background:rgba(217,164,65,.2);margin:14px 0 20px}

.marca-esquina-toro{position:absolute;bottom:20px;right:24px;z-index:4;display:flex;
  align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;font-family:'Inter',sans-serif}
.rule-toro::after{content:'';position:absolute;top:0;left:100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,var(--laton),transparent);animation:barridoRuleToro 2.6s ease-in-out infinite}

.eyebrow-toro{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--laton);
  font-weight:600;margin-bottom:10px}
.card-toro h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:25px;
  letter-spacing:-.01em;line-height:1.2;margin-bottom:9px}
.card-toro .sub{color:rgba(255,255,255,.6);font-size:14px;line-height:1.5;margin-bottom:6px}

.alert{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;font-size:12.5px;
  margin:16px 0;background:rgba(192,73,47,.18);color:#ffd6cc;border-left:3px solid #c0492f;animation:shakeToro .5s ease-out}
.alert.success{background:rgba(12,122,109,.2);color:#c9f2ea;border-left-color:var(--verde)}
@keyframes shakeToro{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.campo-toro{margin:18px 0 6px}
.campo-toro label{display:block;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:8px}
.num-field-toro input{width:100%;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:20px;
  letter-spacing:.1em;color:#fff;padding:15px 17px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:10px;transition:border-color .2s, box-shadow .2s}
.num-field-toro input::placeholder{color:rgba(255,255,255,.35)}
.num-field-toro input:focus{outline:none;border-color:var(--laton);box-shadow:0 0 0 3px rgba(217,164,65,.18)}

.texto-field-toro input{width:100%;font-family:'Inter',sans-serif;font-weight:500;font-size:15px;
  color:#fff;padding:15px 17px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:10px;transition:border-color .2s, box-shadow .2s}
.texto-field-toro input::placeholder{color:rgba(255,255,255,.35)}
.texto-field-toro input:focus{outline:none;border-color:var(--laton);box-shadow:0 0 0 3px rgba(217,164,65,.18)}

.btn-toro{position:relative;overflow:hidden;width:100%;border:none;cursor:pointer;font-family:'Inter',sans-serif;
  font-weight:800;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;padding:16px;border-radius:10px;
  background:var(--laton);color:var(--pino);display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;transition:transform .15s, box-shadow .2s;box-shadow:0 6px 18px rgba(0,0,0,.25);text-decoration:none}
.btn-toro:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.32)}
.btn-toro:hover svg{transform:translateX(4px)}
.btn-toro:active{transform:translateY(0)}
.btn-toro:focus-visible{outline:3px solid var(--laton);outline-offset:3px}
.btn-toro svg{width:16px;height:16px;transition:transform .2s}
.btn-toro::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);
  animation:barrerToro 4.5s ease-in-out infinite}
@keyframes barrerToro{0%,100%{left:-60%}55%,100%{left:160%}}
.btn-toro.loading{color:transparent;pointer-events:none}
.btn-toro.loading::before{content:'';position:absolute;width:18px;height:18px;top:50%;left:50%;
  margin:-9px 0 0 -9px;border:3px solid rgba(4,48,43,.35);border-top-color:var(--pino);border-radius:50%;
  animation:spinToro .8s linear infinite;z-index:2}
@keyframes spinToro{to{transform:rotate(360deg)}}

.link-toro{display:block;text-align:center;font-size:11px;color:rgba(255,255,255,.55);margin-top:16px;text-decoration:none}
.link-toro b{color:var(--laton);font-weight:600}
.link-toro:hover{color:rgba(255,255,255,.8)}
.link-toro:focus-visible{outline:3px solid var(--laton);outline-offset:3px;border-radius:4px}

.pie-toro{display:block;text-align:center;font-size:9.5px;letter-spacing:.16em;color:rgba(255,255,255,.35);
  margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}

@media (max-width:760px){
  .toro-rim,.toro-fill,.synapsis-toro,.glow-toro,.marca-esquina-toro{display:none}
  .wrap-toro{left:50%;transform:translate(-50%,-50%);width:min(360px,88vw)}
  @keyframes flotarToro{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
}
@media (prefers-reduced-motion:reduce){
  .blob-toro,.glow-toro,.toro-fill,.wrap-toro,.rule-toro::after,.btn-toro::after,.alert{animation:none}
  .synapsis-toro circle{animation:none !important;opacity:.5}
}
@media (max-width:760px){
  .card-toro{padding:36px 30px}
}