/* ============================================================
   María Paula Muriel Photography — Sistema de diseño
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Mulish:wght@300;400;500;600;700;800&family=Allura&display=swap');

:root {
  /* — Superficies / fondo cálido — */
  --bg: #faf7f5;
  --cream: #f4ece6;
  --surface: #ffffff;
  --surface-2: #f7f2ef;
  --surface-3: #f0e9e4;

  /* — Tinta — */
  --ink: #2c2830;
  --ink-2: #6d6671;
  --ink-3: #6d6872;
  --line: #ebe2dc;
  --line-2: #e2d7d0;

  /* — Acentos (la tríada: rosa · celeste · verde, más presentes) — */
  --rose: #e67a9b;
  --rose-deep: #cf6f88;
  --rose-soft: #f9d9e2;
  --rose-tint: #fdeef3;

  --sky: #7cbcdb;
  --sky-deep: #4f93b8;
  --sky-soft: #d5eaf3;
  --sky-tint: #eef7fb;

  --sand: #e0b88c;
  --sand-soft: #f4e6d4;
  --sand-tint: #fbf4ea;

  --green: #93ca8a;
  --green-deep: #5fa15a;
  --green-soft: #dcefd5;
  --green-tint: #f0f9ec;

  /* — Semánticos — */
  --published: #6fa985;
  --published-soft: #e2f0e7;
  --draft: #c79a5e;
  --draft-soft: #f6ead4;
  --danger: #d4736f;
  --danger-soft: #f7e0de;
  --danger-text: #9a3d38;
  --danger-line: #f0bbb8;
  --published-text: #1f6045;
  --draft-text: #7a4c15;
  --sky-text: #285a72;

  /* — Tipografía — */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --script: 'Allura', cursive;

  /* — Radios — */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* — Sombras suaves — */
  --sh-xs: 0 1px 2px rgba(70, 50, 60, 0.04);
  --sh-sm: 0 2px 10px rgba(90, 60, 70, 0.06);
  --sh-md: 0 10px 30px rgba(90, 60, 70, 0.08);
  --sh-lg: 0 24px 60px rgba(80, 55, 65, 0.13);
  --sh-rose: 0 10px 26px rgba(207, 111, 136, 0.28);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

#root { min-height: 100vh; }

::selection { background: var(--rose-soft); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* Tipografía utilitaria */
.serif { font-family: var(--serif); }
.script { font-family: var(--script); }
.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Scrollbar discreto */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ——— Botones ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  border: none; border-radius: var(--r-pill);
  padding: 13px 26px; line-height: 1;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible, button:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
button:focus-visible { border-radius: var(--r-sm); }

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
  box-shadow: var(--sh-rose);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(207,111,136,.38); }

.btn-ghost {
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--sh-xs);
}
.btn-ghost:hover { border-color: var(--rose); color: var(--rose-deep); transform: translateY(-2px); box-shadow: var(--sh-sm); }

.btn-dark {
  color: #fff; background: var(--ink);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

.btn-soft {
  color: var(--ink); background: var(--surface-2);
  border: 1px solid transparent;
}
.btn-soft:hover { background: var(--rose-tint); color: var(--rose-deep); }

.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 16px 34px; font-size: 15px; }
.btn-block { width: 100%; }

/* ——— Inputs ——— */
.field-label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 8px; letter-spacing: .01em;
}
.input, .textarea, .select {
  width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 13px 15px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 4px var(--rose-tint); background: #fff;
}
.textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236d6872' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px;
}

/* ——— Cards ——— */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}

/* ——— Badges / chips ——— */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 11px; border-radius: var(--r-pill); line-height: 1;
}
.badge-published { background: var(--published-soft); color: var(--published-text); }
.badge-draft { background: var(--draft-soft); color: var(--draft-text); }
.badge-temp { background: var(--sky-soft); color: var(--sky-text); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ——— Animaciones ——— */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Estado base = visible. Las animaciones de entrada solo corren cuando el
   documento es visible (clase .anim-on en <html>), para que el contenido NUNCA
   quede oculto si el navegador congela la animación (tab en segundo plano). */
html.anim-on .animate-fadeUp { animation: fadeUp .7s cubic-bezier(.2,.8,.2,1) both; }
html.anim-on .animate-fadeIn { animation: fadeIn .6s ease both; }
html.anim-on .animate-scaleIn { animation: scaleIn .4s cubic-bezier(.2,.8,.2,1) both; }
/* Entrada escalonada: --d define el retardo */
html.anim-on .stag { animation: fadeUp .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0s); }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(100deg, var(--surface-3) 30%, #f9f4f0 50%, var(--surface-3) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* Layout helpers */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }

@media (max-width: 720px) {
  .wrap, .wrap-narrow { padding: 0 20px; }
}

/* ——— Masonry (CSS columns) ——— */
.masonry { column-count: 3; column-gap: 22px; }
.masonry-item { break-inside: avoid; margin-bottom: 22px; width: 100%; }

/* ——— Hover de foto ——— */
.photo-frame .pf-img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.pf-hover { cursor: pointer; }
.pf-hover::after { content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(40,30,40,.22), transparent 45%);
  opacity: 0; transition: opacity .4s; border-radius: inherit; }
.pf-hover:hover .pf-img { transform: scale(1.06); }
.pf-hover:hover::after { opacity: 1; }
.masonry-item:hover, .coll-card:hover { transform: translateY(-3px); }
.coll-card:hover { box-shadow: var(--sh-md); }
.iconbtn:hover { filter: brightness(.97); transform: translateY(-1px); }

.dash-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
}

/* ——— Transición de ruta (sin animación que pueda ocultar el contenido) ——— */

/* ——————————————————— RESPONSIVE ——————————————————— */
@media (max-width: 1080px) {
  .masonry { column-count: 2; }
}
@media (max-width: 980px) {
  .nav-links { display: none !important; }
  .nav-burger { display: block !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .hero-photo { max-width: 420px; }
  .coll-grid { grid-template-columns: 1fr 1fr !important; }
  .about-strip, .about-hero, .detail-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .detail-grid > div:last-child { position: static !important; }
  .style-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .dash-cols, .upload-grid, .about-edit-grid { grid-template-columns: 1fr !important; }
  .recent-grid { grid-template-columns: 1fr 1fr !important; }
  .upload-grid > div:last-child, .about-edit-grid > div:last-child { position: static !important; }
  /* Sidebar deslizable */
  .dash-sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    z-index: 50;
    width: min(248px, 86vw) !important;
    height: 100dvh !important;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform .3s;
    box-shadow: var(--sh-lg);
  }
  .dash-sidebar.open { transform: translateX(0); }
  .dash-sidebar-head { flex: 0 0 auto; padding-top: max(18px, env(safe-area-inset-top)) !important; padding-bottom: 14px !important; }
  .dash-sidebar-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .dash-sidebar-actions { flex: 0 0 auto; padding-bottom: max(14px, env(safe-area-inset-bottom)) !important; background: var(--surface); }
  .dash-burger { display: block !important; }
}
@media (max-width: 760px) {
  .login-wrap { grid-template-columns: 1fr !important; }
  .login-art { display: none !important; }
  .login-mark { display: block !important; }
  .preview-modal .detail-grid, .preview-modal [style*="grid-template-columns: 1.3fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .masonry { column-count: 1; }
  .coll-grid, .style-grid, .stat-grid, .recent-grid { grid-template-columns: 1fr !important; }
  .dash-stat-grid { grid-template-columns: 1fr 1fr; }
  .edit-photo-state-grid { grid-template-columns: 1fr !important; }
  .manage-grid { grid-template-columns: 1fr !important; }
  .catalog-grid { grid-template-columns: 1fr !important; }
  .about-edit-inner-cols { grid-template-columns: 1fr !important; }
  .preview-footer { flex-direction: column !important; align-items: stretch !important; }
  .preview-actions { flex-direction: column; }
  .preview-actions .btn { width: 100%; }
}

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