/* ═══════════════════════════════════════════════════════════
   Suite de Laboratorio Textil · Lugo — estilos base
   (keyframes y estados extraídos del diseño Lab Textil Suite.dc)
   ═══════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #05070f; }
a { color: #ff4d5e; text-decoration: none; }
a:hover { color: #ffffff; }
::selection { background: #e1000f; color: #fff; }
input:focus { outline: none; }

[hidden] { display: none !important; }

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes lt-weave-x { from { background-position: 0 0; } to { background-position: 120px 0; } }
@keyframes lt-weave-y { from { background-position: 0 0; } to { background-position: 0 120px; } }
@keyframes lt-blob-a { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(60px,-40px,0) scale(1.18); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes lt-blob-b { 0% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-70px,50px,0) scale(0.9); } 100% { transform: translate3d(0,0,0) scale(1.1); } }
@keyframes lt-spin { to { transform: rotate(360deg); } }
@keyframes lt-spin-rev { to { transform: rotate(-360deg); } }
@keyframes lt-rise { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lt-sweep { 0% { transform: translateX(-120%) skewX(-18deg); } 55%, 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes lt-pulse { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes lt-shake { 0%,100% { transform: translateX(0); } 15% { transform: translateX(-12px); } 30% { transform: translateX(10px); } 45% { transform: translateX(-8px); } 60% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
@keyframes lt-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(2400%); } }
@keyframes lt-ring { from { transform: scale(0); opacity: .9; } to { transform: scale(24); opacity: 0; } }
@keyframes lt-dash { to { stroke-dashoffset: -400; } }
@keyframes lt-bar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes lt-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lt-pop { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes lt-glow { 0%,100% { opacity: .8; filter: drop-shadow(0 0 8px rgba(255,255,255,.16)); } 50% { opacity: 1; filter: drop-shadow(0 0 20px rgba(255,255,255,.4)); } }
@keyframes lt-breathe { 0% { opacity: 0; transform: scale(.94); filter: blur(6px); } 18%, 62% { opacity: 1; transform: scale(1); filter: blur(0); } 88%, 100% { opacity: 0; transform: scale(1.05); filter: blur(6px); } }

/* ── Grid: spans (desktop 4 columnas) ──────────────────────── */
.span-2 { grid-column: span 2; }
.span-2x2 { grid-column: span 2; grid-row: span 2; }

/* ── Hovers (style-hover del diseño) ───────────────────────── */
.btn-enter:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 40px -10px rgba(225,0,15,1); }
.btn-enter:active { transform: scale(.97); }

.btn-cam:hover { transform: translateY(-2px) scale(1.03); }
.btn-cam:active { transform: scale(.97); }

#btn-lock:hover { background: rgba(225,0,15,.18); color: #fff; transform: translateY(-2px); }
#cam-cancel:hover { background: rgba(255,255,255,.08); color: #fff; }

.tile-picking:hover { transform: translateY(-10px) scale(1.015); box-shadow: 0 44px 90px -30px rgba(225,0,15,1); }
.tile-catalogo:hover { transform: translateY(-10px) scale(1.015); box-shadow: 0 40px 80px -30px rgba(34,211,238,.95); }
.tile-mosaico:hover { transform: translateY(-10px) scale(1.015); box-shadow: 0 44px 90px -30px rgba(124,58,237,1); }
.tile-photo:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 40px 80px -30px rgba(99,102,241,1); }
.tile-portal:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 40px 80px -30px rgba(56,189,248,.95); }
.tile-cam:hover { transform: translateY(-10px) scale(1.015); box-shadow: 0 40px 80px -30px rgba(236,72,153,.95); }

.tile:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 3px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  #apps-grid { grid-template-columns: 1fr !important; }
  .span-2, .span-2x2 { grid-column: span 1; grid-row: span 1; }
  #suite { padding: 24px 18px 56px !important; }
  #lock-card { padding: 30px 24px 26px !important; }
  .lock-rings { inset: -40px !important; }
  .lock-rings > div:first-child { width: 340px !important; height: 340px !important; }
  .lock-rings > div:last-child { width: 260px !important; height: 260px !important; }
  #lock-pass { font-size: 16px !important; }
}

/* ── Movimiento reducido ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   TEMA CLARO / OSCURO
   El documento vive en variables; el oscuro es el diseño base.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: radial-gradient(120% 90% at 12% 8%, #12203c 0%, #070b16 45%, #04060d 100%);
  --ink: #e8ecf5;
  --muted: #6f7d99;
  --selection-bg: #e1000f;
}

html[data-theme="light"] {
  --bg: radial-gradient(120% 90% at 12% 8%, #eef2fa 0%, #f6f8fc 45%, #e9edf7 100%);
  --ink: #0e1525;
  --muted: #5a6478;
}

/* Transición suave al cambiar de tema */
html.theme-switch, html.theme-switch * {
  transition: background .45s ease, background-color .45s ease,
    color .45s ease, border-color .45s ease, box-shadow .45s ease !important;
}

html[data-theme="light"] body { background: #e9edf7; }
html[data-theme="light"] #lt-root { background: var(--bg) !important; color: var(--ink) !important; }

/* ── Fondo vivo: rejilla oscura en claro, blobs más suaves ─── */
html[data-theme="light"] #lt-bg > div:nth-child(1) {
  background-image: repeating-linear-gradient(90deg, rgba(14,21,37,.5) 0 1px, transparent 1px 60px) !important;
  opacity: .07 !important;
}
html[data-theme="light"] #lt-bg > div:nth-child(2) {
  background-image: repeating-linear-gradient(0deg, rgba(14,21,37,.5) 0 1px, transparent 1px 60px) !important;
  opacity: .05 !important;
}
html[data-theme="light"] #lt-bg > div:nth-child(3) { background: radial-gradient(circle, rgba(225,0,15,.22), transparent 65%) !important; }
html[data-theme="light"] #lt-bg > div:nth-child(4) { background: radial-gradient(circle, rgba(34,211,238,.28), transparent 65%) !important; }
html[data-theme="light"] #lt-bg > div:nth-child(5) { background: radial-gradient(circle, rgba(124,58,237,.16), transparent 70%) !important; }
html[data-theme="light"] #lt-bg > div:nth-child(6) {
  background: radial-gradient(120% 100% at 50% 0%, transparent 40%, rgba(233,237,247,.85) 100%) !important;
}

/* ── Pantalla de bloqueo en claro ──────────────────────────── */
html[data-theme="light"] #lock-screen > div:first-child span { color: #8791a6 !important; }
html[data-theme="light"] #lock-card {
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(244,246,251,.95)) !important;
  border-color: rgba(14,21,37,.12) !important;
  box-shadow: 0 40px 120px -30px rgba(60,74,105,.45), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-theme="light"] #lock-card > div:nth-of-type(2) {
  background: linear-gradient(90deg, transparent, rgba(14,21,37,.06), transparent) !important;
}
html[data-theme="light"] #lock-card label { color: #7d889e !important; }
html[data-theme="light"] #lock-form > div {
  background: rgba(255,255,255,.75) !important;
  border-color: rgba(14,21,37,.16) !important;
}
html[data-theme="light"] #lock-pass { color: #0e1525 !important; }
html[data-theme="light"] #lock-pass::placeholder { color: #9aa4b8 !important; }

/* ── Cabecera y textos de la suite en claro ────────────────── */
html[data-theme="light"] #suite header { border-bottom-color: rgba(14,21,37,.12) !important; }
html[data-theme="light"] #suite header > div:first-child > div > div:first-child { color: #0e1525 !important; }
html[data-theme="light"] #suite header > div:first-child > div > div:last-child,
html[data-theme="light"] #today { color: #5a6478 !important; }
html[data-theme="light"] #clock { color: #0e1525 !important; }
html[data-theme="light"] #suite h1 { color: #0e1525 !important; }
html[data-theme="light"] footer { border-top-color: rgba(14,21,37,.12) !important; color: #7d889e !important; }

/* Logo BV: el PNG es blanco con alfa → en claro se oscurece para que sea visible */
html[data-theme="light"] .bv-logo {
  filter: brightness(0) saturate(100%) invert(12%) sepia(18%) saturate(1200%) hue-rotate(185deg) !important;
  animation: lt-float 6s ease-in-out infinite !important;
}

/* Botones neutros (Bloquear / tema / Cancelar) */
html[data-theme="light"] #btn-lock,
html[data-theme="light"] #btn-theme,
html[data-theme="light"] #cam-cancel {
  border-color: rgba(14,21,37,.18) !important;
  background: rgba(14,21,37,.05) !important;
  color: #3c475e !important;
}
html[data-theme="light"] #btn-lock:hover { background: rgba(225,0,15,.12) !important; color: #8e0018 !important; }
html[data-theme="light"] #btn-theme:hover { background: rgba(14,21,37,.1) !important; color: #0e1525 !important; }
html[data-theme="light"] #cam-cancel:hover { background: rgba(14,21,37,.09) !important; color: #0e1525 !important; }

/* ── Tarjeta SubTrack en claro ─────────────────────────────── */
html[data-theme="light"] #suite .span-2:not(.tile):not(a) {
  background: linear-gradient(150deg, rgba(228,233,244,.92) 0%, rgba(238,242,249,.95) 100%) !important;
  border-color: rgba(14,21,37,.24) !important;
  box-shadow: 0 26px 60px -40px rgba(100,116,139,.5) !important;
}
html[data-theme="light"] #suite .span-2:not(.tile):not(a) .tile-title { color: #2c3649 !important; }

/* ── Modal Cámara en claro ─────────────────────────────────── */
html[data-theme="light"] #cam-modal { background: rgba(233,237,247,.72) !important; }
html[data-theme="light"] #cam-card {
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(252,244,249,.96)) !important;
  border-color: rgba(14,21,37,.12) !important;
  box-shadow: 0 50px 120px -30px rgba(120,50,80,.35) !important;
}
html[data-theme="light"] #cam-card > div:nth-of-type(2) {
  background: linear-gradient(90deg, transparent, rgba(14,21,37,.05), transparent) !important;
}
html[data-theme="light"] #cam-card > div:nth-of-type(3) > div:last-child > div:first-child { color: #0e1525 !important; }
html[data-theme="light"] #cam-card > div:nth-of-type(3) > div:last-child > div:last-child { color: #a35277 !important; }
html[data-theme="light"] #cam-form > div {
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(14,21,37,.18) !important;
}
html[data-theme="light"] #cam-pass { color: #0e1525 !important; }
html[data-theme="light"] #cam-pass::placeholder { color: #9aa4b8 !important; }