:root{
  /* Paleta suave y romántica */
  --bg: #fffafc;
  --surface: #ffffff;
  --text: #3b2c35;
  --muted: #7d6b74;
  --primary: #f29bb2; /* rosa pastel */
  --primary-strong: #e87c99;
  --accent: #ffd7e0; /* rosa muy suave */
  --beige: #f7efe9;
  --success: #5fbf8f;
  --danger: #f26d7d;
  --shadow: 0 10px 30px rgba(234, 163, 179, 0.25);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --gap: 14px;
  --grid: 280px;
}

/* Tema oscuro */
body.theme-dark{
  --bg: #1c1619;
  --surface: #221b20;
  --text: #f5eef2;
  --muted: #c9b9c1;
  --primary: #d78198;
  --primary-strong: #c36682;
  --accent: #3a2b33;
  --beige: #2a2226;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% -10%, var(--accent), transparent 60%),
              radial-gradient(1000px 700px at 120% 10%, var(--beige), transparent 50%),
              var(--bg);
  color: var(--text);
  letter-spacing: 0.2px;
}

h1,h2,h3{ margin:0 0 8px; font-weight:700; letter-spacing:0.3px; }
p{ margin:0 0 10px; color:var(--muted); }

.app-header{
  position: sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(16px, 4vw, 28px);
  backdrop-filter: saturate(1.2) blur(6px);
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.55));
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.branding{ display:flex; align-items:center; gap:10px; }
.logo{ font-size:22px; }
.title{ font-size: clamp(18px, 2.2vw, 24px); }
.header-right{ display:flex; align-items:center; gap:14px; }

.counters{ display:flex; gap:10px; }
.counter{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.05);
  padding: 10px 12px; border-radius: var(--radius);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:flex-start;
  min-width: 90px;
}
.counter-label{ font-size:12px; color:var(--muted); }
.counter-value{ font-size:18px; font-weight:700; color:var(--text); }

.toolbar{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding: 8px clamp(12px, 3vw, 20px);
}
.tabs{ display:flex; gap:8px; background: var(--surface); padding:6px; border-radius:999px; box-shadow: var(--shadow); }
.tab{
  appearance:none; border:0; background:transparent; padding:10px 14px; border-radius:999px;
  color: var(--muted); cursor:pointer; font-weight:600; transition: all .2s ease;
}
.tab:hover{ color: var(--text); }
.tab.active{ background: var(--accent); color: var(--text); box-shadow: inset 0 2px 10px rgba(242,155,178,0.2); }

.container{ max-width: 1150px; margin: 10px auto 80px; padding: 0 16px; }
.content{ display:block; min-height: 40vh; }

/* Filtros */
.filters{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; width:100%; }
.filters input[type="search"], .filters select{
  padding:10px 14px; border:1px solid rgba(0,0,0,0.06); background: var(--surface); color: var(--text);
  border-radius:999px; outline:none; box-shadow: var(--shadow);
}
.filters input[type="search"]::placeholder{ color: var(--muted); }
.filters input[type="search"]:focus, .filters select:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px rgba(242,155,178,0.18); }
.filters select{ min-width: 180px; }
.filters input[type="search"]{ flex:1; min-width: 220px; }

.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid), 1fr));
  gap: var(--gap);
}

.card{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow); position:relative;
  transform: translateY(0) scale(1); opacity:1;
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 14px 35px rgba(234,163,179,0.35); }
.card.removing{ opacity:0; transform: translateY(8px) scale(0.98); }

.card-img{ aspect-ratio: 4 / 3; width:100%; object-fit:cover; background: linear-gradient(120deg, #ffe2ea, #ffeef3); }
.card-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px; }
.card-title{ font-size: clamp(16px, 2.2vw, 18px); }
.card-desc{ font-size:14px; color:var(--muted); display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden; }
.card-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.badge{ background: var(--accent); color:var(--text); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; }

.card-actions{ position:absolute; top:8px; right:8px; display:flex; gap:6px; }
.icon-btn{
  appearance:none; border:0; background: rgba(255,255,255,0.95); width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer; box-shadow: var(--shadow);
  transition: transform .15s ease, background .2s ease;
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn.active{ color: var(--danger); }
body.theme-dark .icon-btn{ background: rgba(255,255,255,0.12); color: var(--text); }

.btn{ appearance:none; border:1px solid transparent; background: var(--surface); color: var(--text); padding:10px 14px; border-radius: 999px; cursor:pointer; transition: all .2s ease; font-weight:600; }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.primary{ background: linear-gradient(180deg, var(--primary), var(--primary-strong)); color:#fff; }
.btn.ghost{ background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); }
.btn.danger{ background: var(--danger); color:#fff; }

.section-title{ margin: 18px 6px 10px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding: 20px; }
.modal[aria-hidden="false"]{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.18); backdrop-filter: blur(2px); }
.modal-dialog{ position:relative; background: var(--surface); width:min(920px, 96vw); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.25); overflow:hidden; }
.modal-dialog.wide{ width:min(1100px, 96vw); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.modal-body{ padding: 12px 16px 2px; }
.modal-footer{ display:flex; gap:8px; justify-content:flex-end; padding: 14px 16px; border-top: 1px solid rgba(0,0,0,0.06); }

.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.span-2{ grid-column: 1 / -1; }
.field-inline{ display:flex; align-items:center; gap:8px; padding: 4px 0 8px; }
.field-label{ font-size:13px; color:var(--muted); }
input[type="text"], textarea{
  width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,0.08); background: #fff; border-radius: 12px; outline:none;
  transition: border .2s ease, box-shadow .2s ease;
}
input[type="text"]:focus, textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px rgba(242,155,178,0.18); }
textarea{ resize: vertical; }
.hint{ font-size:12px; color: var(--muted); }
body.theme-dark input[type="text"], body.theme-dark textarea, body.theme-dark .filters input[type="search"], body.theme-dark .filters select{ background:#2b2328; color: var(--text); border-color: rgba(255,255,255,0.08); }

/* Chips (Etiquetas) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background: var(--accent); color: var(--text); border-radius:999px; font-size:12px; }
.chip button{ appearance:none; border:0; background:transparent; cursor:pointer; color:inherit; }
body.theme-dark .chip{ background: rgba(255,255,255,0.12); }

/* Zona de drop para fotos */
.drop-zone{ display:flex; gap:8px; align-items:center; justify-content:flex-start; padding:12px; border:2px dashed rgba(0,0,0,0.12); border-radius: 12px; background: var(--surface); }
.drop-zone.dragover{ border-color: var(--primary); box-shadow: 0 0 0 4px rgba(242,155,178,0.18); }
.form-errors{ margin-top:8px; color: var(--danger); font-weight:600; }

.photo-preview{ display:flex; flex-wrap:wrap; gap:10px; padding: 10px 0 4px; }
.thumb{ width:88px; height:88px; border-radius: 12px; overflow:hidden; position:relative; border:1px solid rgba(0,0,0,0.06); background: #fff; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb .remove{ position:absolute; inset:auto 6px 6px auto; }

/* Detalle */
.modal-body.detail{ display:grid; grid-template-columns: 1.3fr 1fr; gap:16px; }
.detail-gallery{ display:flex; flex-direction:column; gap:8px; }
.gallery-viewport{ position:relative; aspect-ratio: 4/3; background: linear-gradient(120deg, #ffe2ea, #ffeef3); border-radius: var(--radius); overflow:hidden; display:grid; place-items:center; }
.gallery-viewport img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-viewport .nav{ position:absolute; top:50%; transform: translateY(-50%); width:40px; height:40px; font-size:20px; }
.gallery-viewport .prev{ left:8px; }
.gallery-viewport .next{ right:8px; }
.gallery-thumbs{ display:flex; gap:8px; overflow:auto; padding: 2px 2px 4px; }
.gallery-thumbs .thumb{ width:70px; height:70px; cursor:pointer; opacity:.8; }
.gallery-thumbs .thumb.active{ outline:3px solid var(--primary); opacity:1; }

.detail-info{ display:flex; flex-direction:column; gap:10px; }
.detail-meta{ display:flex; align-items:center; justify-content:space-between; }
.detail-title{ font-size: clamp(18px, 2.5vw, 24px); }
.detail-desc{ line-height:1.5; }
.detail-map{ margin-top:8px; display:flex; flex-direction:column; gap:10px; }
.map-sim{ position:relative; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(0,0,0,0.06); box-shadow: var(--shadow); background:
  radial-gradient(150px 150px at 30% 30%, #ffe2ea 0 60%, transparent 61%),
  radial-gradient(150px 150px at 70% 60%, #ffe8d9 0 60%, transparent 61%),
  radial-gradient(150px 150px at 40% 80%, #e3f6ef 0 60%, transparent 61%),
  #f7f3f5;
  min-height: 200px; display:grid; place-items:center; }
.map-sim .pin{ position:absolute; top:16px; left:16px; font-size:22px; }
.map-sim .map-label{ background: rgba(255,255,255,0.8); padding:8px 12px; border-radius:999px; box-shadow: var(--shadow); }
.map-actions{ display:flex; }

/* Empty state */
.empty{ display:grid; place-items:center; padding: 50px 0; text-align:center; }
.empty .heart{
  width:100px; height:90px; position:relative; margin: 10px auto 14px;
}
.empty .heart::before, .empty .heart::after{
  content:""; position:absolute; top:0; width:52px; height:80px; background: var(--primary);
  border-radius: 52px 52px 0 0; transform: rotate(-45deg); transform-origin:0 100%; box-shadow: var(--shadow);
}
.empty .heart::after{ left:48px; transform: rotate(45deg); transform-origin:100% 100%; }
.empty p{ color: var(--muted); }

/* Toast */
.toast{ position:fixed; left:50%; bottom:20px; transform: translateX(-50%) translateY(10px);
  background: rgba(0,0,0,0.8); color:#fff; padding:10px 14px; border-radius: 999px; opacity:0; pointer-events:none; transition: all .25s ease; }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* Responsive */
@media (max-width: 900px){
  .modal-body.detail{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
  .counters{ display:none; }
  :root{ --grid: 240px; }
}

@media (max-width: 520px){
  :root{ --grid: 200px; }
  .modal-dialog{ width:100vw; height:100vh; border-radius:0; }
  .modal-header, .modal-footer{ padding: 14px; }
  .modal-body{ padding: 12px 14px; max-height: calc(100vh - 140px); overflow:auto; }
}

@media (max-width: 380px){
  :root{ --grid: 160px; --gap: 10px; }
  .filters input[type="search"]{ min-width: 160px; }
}

@media (min-width: 1400px){
  :root{ --grid: 320px; }
}

@media (min-width: 900px){
  .toolbar{ flex-direction:row; justify-content:space-between; }
  .filters{ width:auto; justify-content:flex-end; }
}

/* Safe areas (notches) */
body{ padding-bottom: env(safe-area-inset-bottom); }
.app-header{ padding-top: calc(18px + env(safe-area-inset-top)); }