/* =========================================================
   PIPA STUDIO — Estilo "cherry cola": crema + rosa chicle + un toque de bordó
   Se carga DESPUÉS de styles.css (y app-mobile.css) en TODAS las páginas.
   Para cambiar los colores de toda la web, tocá solo las variables de acá.
   ========================================================= */

:root {
  --navy: #47131c;          /* bordó cherry cola: solo textos, botones y detalles */
  --navy-dark: #47131c;
  --blue: #47131c;          /* botones principales y links */
  --blue-light: #f5dde0;    /* detalles en rosa */
  --gray-bg: #fffde9;       /* crema: fondo general */
  --gray-border: #ecd5d9;   /* borde rosado suave */
  --text: #3a1a20;
  --text-muted: #8a5560;
  --white: #fffef5;         /* crema clarito para tarjetas */
  --pink: #b8456f;          /* rosa fuerte para precios y acentos de texto */
  --danger: #a32d3c;
  --success: #3e7a5a;
  --warning: #9a6b1e;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(71, 19, 28, 0.07);
  --shadow-lg: 0 8px 30px rgba(71, 19, 28, 0.13);
  --rosa: #f5dde0;          /* rosa casi nude */
  --rosa-hover: #efcdd2;
  --rosa-soft: #faeef0;     /* rosa muy suave para fondos de sección */
  --beige-2: #fff3dc;
  --serif: Georgia, 'Times New Roman', serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;
  --rayas: repeating-linear-gradient(90deg, #47131c 0 22px, #f5dde0 22px 44px);
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; }
/* Títulos grandes en serif (sin cursiva) */
.hero h1, .section-title h2, .login-card h1 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .02em;
}
.hero h1 { font-size: 3rem; line-height: 1.1; }
.section-title h2 { font-size: 2.1rem; }
.login-card h1 { font-size: 2.2rem; }

/* ---------- Encabezado (con franja de rayas) ---------- */
.navbar, .app-header {
  background: var(--gray-bg);
  border-bottom: 0;
  box-shadow: none;
  position: relative;
}
.navbar::after, .app-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 8px;
  background: var(--rayas);
}
.app-header { padding-bottom: 26px; }
.navbar .brand, .app-header .brand {
  color: var(--navy);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.navbar .brand span, .app-header .brand span { color: var(--navy); }
.navbar nav a { color: var(--navy); }
.navbar nav a:hover { color: var(--pink); }
.navbar .cta { background: var(--navy); color: var(--white) !important; border-radius: 999px; }
.app-header a { color: var(--navy) !important; }

/* ---------- Portada ---------- */
.hero { background: var(--gray-bg); color: var(--navy); }
.hero h1 { color: var(--navy); }
.hero h1 span { color: var(--pink); }
.hero p { color: var(--text-muted); }

.landing-menu-item { background: var(--rosa); border: 1px solid transparent; }
.landing-menu-item:hover { background: var(--rosa-hover); border-color: transparent; }
.lmi-num { background: var(--navy); color: var(--gray-bg); }
.lmi-label { color: var(--navy); }
.lmi-arrow { color: var(--navy); }

/* ---------- Botones ---------- */
.btn { border-radius: 999px; }
.btn-primary { background: var(--navy); color: var(--gray-bg); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(71, 19, 28, .28); }
.btn-outline { color: var(--navy); border-color: var(--navy); }
.btn-secondary { background: var(--rosa); color: var(--navy); }
.btn-sm { border-radius: 999px; }

/* ---------- Secciones y tarjetas ---------- */
.section-alt { background: var(--rosa-soft); }
.card, .form-card, .login-card { border-radius: 18px; border: 1px solid var(--gray-border); }
.card .price { color: var(--pink); }

input, select, textarea { background: var(--white); border-color: #ecd0d9; border-radius: 10px; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); }

/* ---------- Elegir servicio, horario y packs ---------- */
.service-pick-card.selected { background: var(--rosa); border-color: var(--navy); }
.service-pick-card:hover { border-color: var(--rosa-hover); }
.gc-pack-card:hover { border-color: var(--rosa-hover); }
.gc-pack-card.selected { background: var(--rosa); border-color: var(--navy); }
.gc-pack-price { color: var(--pink); }
.slot-btn:hover { border-color: var(--navy); color: var(--navy); }
.slot-btn.selected { background: var(--navy); border-color: var(--navy); color: var(--gray-bg); }
.cal-day:hover:not(.disabled) { border-color: var(--navy); }
.service-cat-tab:hover { border-color: var(--navy); }
.service-step-back:hover { color: var(--pink); }

/* ---------- Mi turno (celular de las clientas) ---------- */
.mobile-menu-card { border-radius: 18px; }
.mobile-hello { font-family: var(--serif); }
.mobile-filter-tab.active { background: var(--navy); border-color: var(--navy); color: var(--gray-bg); }
.mmc-badge { background: var(--pink); }

/* ---------- Pie de página (rosa, con rayas arriba) ---------- */
footer {
  position: relative;
  background: var(--rosa);
  color: var(--navy);
  padding-top: 52px;
}
footer::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 8px;
  background: var(--rayas);
}
footer a { color: var(--navy); text-decoration: underline; }

/* ---------- Panel de gestión, Estudio y Agenda Pipa ---------- */
.sidebar { background: var(--rosa); color: var(--navy); }
.sidebar .brand { border-bottom: 1px solid rgba(71, 19, 28, .15); font-family: var(--serif); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.sidebar .brand span { color: var(--navy); }
.sidebar button.tab { color: var(--navy); }
.sidebar button.tab:hover { background: rgba(71, 19, 28, .07); color: var(--navy); }
.sidebar button.tab.active { background: var(--gray-bg); color: var(--navy); border-left-color: var(--navy); font-weight: 600; }

.login-shell { background: var(--rosa); }
.login-card h1 span { color: var(--pink); }
.modal-overlay { background: rgba(71, 19, 28, .45); }
.modal { border-radius: 18px; }
tbody tr:hover { background: var(--rosa-soft); }
#services-table tr.drag-over td { background: rgba(71, 19, 28, .08); }
.cal-staff-col.drag-over { background-color: rgba(71, 19, 28, .07); }

/* Estados de turno: siguen distinguiéndose, ahora en la paleta nueva */
.badge-reservado { background: var(--beige-2); color: var(--text-muted); }
.badge-asistio { background: var(--rosa); color: var(--pink); }
.cal-appt-block.status-reservado { background: var(--beige-2); border-color: #c9a98a; }
.cal-appt-block.status-asistio { background: var(--rosa); border-color: var(--pink); }
.cal-event { background: var(--beige-2); }
.upsell-hint { background: var(--rosa-soft); border-color: var(--rosa); }

/* ---------- Mensajes ---------- */
.msg-success { background: #e8f1ea; border-color: #c4dccb; }
.msg-error { background: #fbe3e6; border-color: #efbfc6; }