/* public/themes/modern-white/assets/css/app.css
   Base CSS: Studium 360
*/

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  font-size: var(--text-base);
}

/* ✅ Jerarquía tipográfica (lo que más mejora “se ve feo”) */
h1,h2,h3{
  line-height:1.15;
  margin:0 0 var(--space-2) 0;
}
h1{ font-size: var(--text-2xl); letter-spacing:-.02em; }
h2{ font-size: var(--text-xl); }
h3{ font-size: 18px; }
p{ margin:0 0 var(--space-2) 0; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding: clamp(var(--space-4), 4vw, var(--space-6)) clamp(var(--space-3), 3vw, var(--space-4));
}

.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding: 14px var(--space-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}
.brand{
  display:flex; gap:10px; align-items:center;
  font-weight:800; letter-spacing:.2px;
}
.badge{
  font-size:12px; color:var(--muted);
  border:1px solid var(--border);
  padding:4px 10px;
  border-radius:999px;
}

.nav-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:600}
.nav-links a:hover{color:var(--text)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:999px;
  padding: 8px 18px;
  text-decoration:none;
  font-weight:700;
  border:1px solid var(--border);
  color:var(--text);
  background:#fff;
  transition: transform .08s ease, filter .08s ease, box-shadow .08s ease;
}
.btn-primary{
  background:var(--primary);
  color: var(--bg);
  border-color:transparent;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn:focus{outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.18);}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-ghost:hover {
  background: var(--color-bg-soft);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  background: rgba(0,0,0,.04);
}

.btn-outline:active {
  background: rgba(0,0,0,.08);
}

.nav .nav-links .btn.btn-primary,
  .nav .nav-links a.btn.btn-primary,
  .nav .nav-links .btn-primary {
    color: var(--bg);
}

.card{
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  background:#fff;
}

/* ===== Generic forms ===== */
.form{ margin-top:12px; display:grid; gap:12px; max-width:820px; }
.field{ display:grid; gap:6px; }
.label{ font-weight:700; }

.input,.textarea,.select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:16px;
  background:#fff;
  color:var(--text);
}
.textarea{ resize:vertical; }
.input:focus,.textarea:focus,.select:focus{
  outline:none;
  border-color:#cbd5ff;
  box-shadow:0 0 0 4px rgba(203,213,255,.35);
}
.form-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ===== Badges (status) ===== */
.badge-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid var(--border);
  background: rgba(0,0,0,.03);
  color: var(--muted);
}

.badge-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--muted);
  opacity:.9;
}

.badge-status--published{
  background: rgba(37,99,235,.08);   /* primary soft */
  border-color: rgba(37,99,235,.22);
  color: var(--text);
}
.badge-status--published::before{ background: var(--primary); }

.badge-status--draft{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
  color: var(--muted);
}
.badge-status--draft::before{ background: rgba(0,0,0,.45); }


/* estolo para el layout.php */

.cp-footer-min{
  margin-top: 40px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}

.cp-footer-min__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.cp-footer-min__brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cp-footer-min__logo{
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}

.cp-footer-min__text{
  min-width: 0;
}

.cp-footer-min__title{
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--c-text-strong);
  line-height: 1.1;
}

.cp-footer-min__subtitle{
  font-size: 0.82rem;
  color: var(--c-muted);
  margin-top: 2px;
}

.cp-footer-min__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--c-muted);
  font-size: 0.92rem;
}

.cp-footer-min__meta a{
  color: var(--c-link);
  text-decoration: none;
}

.cp-footer-min__meta a:hover{
  color: var(--c-link-hover);
  text-decoration: underline;
}

.cp-footer-min__dot{
  color: var(--c-border);
}

@media (max-width: 720px){
  .cp-footer-min__inner{
    align-items: flex-start;
    flex-direction: column;
  }

  .cp-footer-min__meta{
    gap: 8px;
  }
}