/* Botones, inputs, modales y shell de login — sistema 4d3 */

/* -------------------------------------------------------------------------- */
/* Barra tricolor fija arriba de la página                                    */
/* -------------------------------------------------------------------------- */
.color-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 100;
  background: linear-gradient(
    90deg,
    var(--pastel-green) 0%,
    var(--pastel-blue) 50%,
    var(--pastel-coral) 100%
  );
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Tipografía utilitaria                                                       */
/* -------------------------------------------------------------------------- */
.section-number,
.mono-label {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
}
.section-number {
  display: inline-block;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Botones                                                                     */
/* -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
/* Capa de relleno scanline: empieza fuera del botón a la izquierda
   (width:100% + translateX(-100%)) y se desliza a translateX(0) en hover.
   z-index:-1 con isolation:isolate la mantiene tras el texto sin
   escapar al contexto de apilamiento del padre. */
.btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 100%;
  background: repeating-linear-gradient(
    0deg,
    var(--accent) 0 2px,
    var(--accent-strong) 2px 4px
  );
  transform: translateX(-100%);
  transition: transform var(--transition);
  z-index: -1;
  pointer-events: none;
}
/* Asegurar que cualquier hijo del botón (icono, span de etiqueta…) queda
   por encima del relleno scanline. Para los nodos de texto sueltos, el flujo
   normal ya los pinta sobre los descendientes con z-index negativo. */
.btn > * { position: relative; z-index: 1; }

.btn:hover { color: var(--white); }
.btn:hover::before { transform: translateX(0); }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Primario: relleno sólido por defecto, oscurecimiento limpio en hover.
   Sin scanlines aquí — sobre fondo opaco resultan ilegibles. */
.btn-primary {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.btn-primary::before { content: none; }
.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--white);
}
.btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-primary[disabled]:hover { background: var(--accent); border-color: var(--accent); }

/* Ghost: outline neutral. El scanline usa el color de acento (azul) en
   lugar de --fg, que en modo oscuro era blanco y se camuflaba con el texto. */
.btn-ghost {
  border-color: var(--border-strong);
  color: var(--fg);
}
.btn-ghost::before {
  background: repeating-linear-gradient(
    0deg,
    var(--accent) 0 2px,
    var(--accent-strong) 2px 4px
  );
}
.btn-ghost:hover {
  color: var(--white);
  border-color: var(--accent);
}

/* Danger: outline coral. Scanline en tonos coral; texto blanco en hover. */
.btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger::before {
  background: repeating-linear-gradient(
    0deg,
    var(--pastel-coral) 0 2px,
    var(--danger) 2px 4px
  );
}
.btn-danger:hover {
  color: var(--white);
  border-color: var(--danger);
}

/* -------------------------------------------------------------------------- */
/* Inputs                                                                      */
/* -------------------------------------------------------------------------- */
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;
  transition: border-color var(--transition);
}
.input:focus {
  outline: none;
  border-color: var(--accent);
}

/* -------------------------------------------------------------------------- */
/* Shell de login                                                              */
/* -------------------------------------------------------------------------- */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 64px 16px 32px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 48px 40px 36px;
  z-index: 1;
}

.login-logo {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.login-logo .dot {
  width: 18px;
  height: 18px;
  background:
    linear-gradient(
      135deg,
      var(--pastel-green) 0%,
      var(--pastel-blue) 50%,
      var(--pastel-coral) 100%
    );
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.login-tagline {
  text-align: center;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 36px;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form .field { display: flex; flex-direction: column; gap: 6px; }
.login-form label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.login-form .btn-primary { width: 100%; margin-top: 6px; }

.login-msg {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-size: 0.875rem;
  background: var(--accent-soft);
  color: var(--fg);
}
.login-msg.error { background: var(--danger-soft); border-left-color: var(--danger); color: var(--danger); }
.login-msg.ok    { background: var(--accent-normal-soft); border-left-color: var(--accent-normal); }

.login-footer {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  text-align: center;
}

.login-section-number {
  position: absolute;
  top: 22px;
  left: 32px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
}

/* -------------------------------------------------------------------------- */
/* Rhombus loader (sustituye al spinner anterior)                              */
/* -------------------------------------------------------------------------- */
.spinner {
  width: 36px;
  height: 36px;
  margin: 8px auto;
  background: linear-gradient(
    135deg,
    var(--pastel-green) 0%,
    var(--pastel-blue) 50%,
    var(--pastel-coral) 100%
  );
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: rhombus-spin 1.2s linear infinite;
}
@keyframes rhombus-spin {
  to { transform: rotate(360deg); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------- */
/* Decoración rómbica flotante (login)                                         */
/* -------------------------------------------------------------------------- */
.geo-decor {
  position: absolute;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
.geo-decor.rhombus {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.geo-decor.rhombus.green {
  width: 220px; height: 220px;
  top: 12%; left: -60px;
  background: var(--pastel-green);
  animation: geo-float 7s ease-in-out infinite alternate;
}
.geo-decor.rhombus.coral {
  width: 160px; height: 160px;
  bottom: 14%; right: -40px;
  background: var(--pastel-coral);
  animation: geo-float 6s ease-in-out infinite alternate-reverse;
}
.geo-decor.raster {
  background: repeating-linear-gradient(
    0deg,
    var(--pastel-blue) 0 1px,
    transparent 1px 4px
  );
}
.geo-decor.raster.top-right {
  width: 200px; height: 140px;
  top: 8%; right: 6%;
  transform: rotate(-12deg);
  animation: geo-float 8s ease-in-out infinite alternate;
}
.geo-decor.raster.bottom-left {
  width: 180px; height: 120px;
  bottom: 10%; left: 4%;
  transform: rotate(8deg);
  animation: geo-float 5s ease-in-out infinite alternate-reverse;
}
@keyframes geo-float {
  from { transform: translateY(0) rotate(var(--rot, 0deg)); }
  to   { transform: translateY(-20px) rotate(var(--rot, 0deg)); }
}
.geo-decor.raster.top-right    { --rot: -12deg; }
.geo-decor.raster.bottom-left  { --rot: 8deg; }

@media (max-width: 768px) {
  .geo-decor { display: none; }
  .login-card { padding: 40px 24px 28px; }
  .login-section-number { top: 18px; left: 24px; }
}

/* -------------------------------------------------------------------------- */
/* Modal                                                                       */
/* -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
@media (min-width: 768px) {
  .modal-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
.modal-card {
  position: relative;
  width: min(640px, 92vw);
  max-height: 90vh;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
:root[data-theme="dark"] .modal-card {
  background: rgba(42, 42, 42, 0.92);
}
@media (min-width: 768px) {
  :root[data-theme="dark"] .modal-card {
    background: rgba(42, 42, 42, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

.modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
}
.modal-head h2::before {
  content: attr(data-section);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.modal-body { padding: 18px 22px 22px; overflow-y: auto; }

/* -------------------------------------------------------------------------- */
/* Secciones de ajustes                                                        */
/* -------------------------------------------------------------------------- */
.settings-sec {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-sec h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.settings-sec.danger h3 { color: var(--danger); }
.settings-sec .subtle { color: var(--fg-muted); font-size: 0.8125rem; }

.radio-group { display: flex; gap: 14px; flex-wrap: wrap; }
.radio-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  cursor: pointer;
}

.session-list { display: flex; flex-direction: column; gap: 8px; }
.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--pastel-blue);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}
.session-row .subtle {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* -------------------------------------------------------------------------- */
/* Menú contextual                                                             */
/* -------------------------------------------------------------------------- */
.ctx-menu {
  position: absolute;
  z-index: 5;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.ctx-menu[hidden] { display: none; }
.ctx-item {
  padding: 9px 12px;
  text-align: left;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg);
  transition: background var(--transition), color var(--transition);
}
.ctx-item:hover { background: var(--accent-soft); color: var(--accent-strong); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* -------------------------------------------------------------------------- */
/* Lucide icons: tamaño y stroke por defecto                                   */
/* -------------------------------------------------------------------------- */
[data-lucide] {
  width: 1em;
  height: 1em;
  stroke-width: 1.5;
  vertical-align: -0.125em;
}
.icon-lg [data-lucide] { width: 1.25em; height: 1.25em; }