/* ============================================================================
   TEMA BASE DE DEVTOOLSHUB
   Estilos compartidos por el landing, "Mi cuenta" y futuras páginas.
   Agregar una herramienta no debería requerir tocar este archivo.
   ============================================================================ */
:root {
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #020617;
  color: #e2e8f0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
a { color: inherit; }
.wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; width: 100%; }

/* Barras */
header.site, footer.site {
  border-color: rgba(30, 41, 59, 0.8);
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(12px);
}
header.site { border-bottom: 1px solid rgba(30,41,59,.8); position: sticky; top: 0; z-index: 40; }
footer.site { border-top: 1px solid #1e293b; margin-top: 4rem; }
.bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand .logo {
  padding: .6rem; border-radius: 1rem; color: #fff;
  background: linear-gradient(to top right, var(--brand-600), #7c3aed);
  box-shadow: 0 10px 25px -5px rgba(59,130,246,.3);
}
.brand h1 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.brand small { color: #94a3b8; }
nav.site a { color: #cbd5e1; text-decoration: none; margin-left: 1rem; font-size: .9rem; }
nav.site a:hover { color: #fff; }

/* Tarjetas tipo glass */
.glass-card {
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition: all .3s;
}
.glass-card:hover { border-color: rgba(59,130,246,.4); background: rgba(30,41,59,.8); }
.glass-panel {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
}

/* Botones */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:.75rem; font-size:.8rem; font-weight:600;
  border:0; cursor:pointer; text-decoration:none; transition: all .2s; }
.btn-primary { color:#fff; background: linear-gradient(to right, var(--brand-600), var(--brand-500)); box-shadow:0 10px 25px -5px rgba(59,130,246,.3); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { color:#e2e8f0; background:#1e293b; }
.btn-ghost:hover { background:#334155; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Varios */
.badge { padding:.25rem .6rem; border-radius:.5rem; font-size:.7rem; font-weight:600; }
.badge-ok { color:#34d399; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.2); }
.badge-soon { color:#fbbf24; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); }
.tag { padding:.15rem .5rem; font-size:.65rem; font-family: ui-monospace, monospace; color:#94a3b8; background:#0f172a; border:1px solid #1e293b; border-radius:.35rem; }
.grid { display:grid; grid-template-columns: repeat(1, 1fr); gap:1.5rem; }
@media (min-width:768px){ .grid { grid-template-columns: repeat(2,1fr);} }
@media (min-width:1024px){ .grid { grid-template-columns: repeat(3,1fr);} }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(2,6,23,.8); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal.open { display: flex; }
.modal .box { width: 100%; max-width: 32rem; padding: 1.75rem; }
input.field { width:100%; padding:.7rem .9rem; border-radius:.75rem; background:#0f172a; border:1px solid #1e293b; color:#e2e8f0; font-size:.9rem; }
input.field:focus { outline:none; border-color: var(--brand-500); }
.plan { padding:1rem; border-radius:1rem; background:rgba(15,23,42,.8); border:1px solid #1e293b; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.plan.sel { border-color: var(--brand-500); }
.muted { color:#94a3b8; font-size:.8rem; }
.price { font-weight:700; color: var(--brand-500); }