/* =========================================================
   Anayla Studio · Sistema unificado (portal de clienta + admin)
   Paleta cálida (inspirada en el logo):
   #4b332f café oscuro · #7a5049 mauve · #a9776a rosa polvo
   #e6cdbd crema rosado · #f6e9dd crema
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Cormorant+Garamond:ital@0;1&display=swap');

:root {
  --cafe-oscuro:  #4b332f;
  --mauve:        #7a5049;
  --rosa-polvo:   #a9776a;
  --crema-rosado: #e6cdbd;
  --crema:        #f6e9dd;
  --texto-claro:  #f6ecdf;
  --texto-oscuro: #3c2a26;

  --activo:   #7fae86;
  --agotado:  #d9a441;
  --vencido:  #c76b5f;

  --radio-xl: 28px;
  --radio-lg: 20px;
  --radio-pill: 999px;

  --sombra: 0 10px 30px rgba(75, 51, 47, 0.18);
  --transicion: .22s ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--texto-oscuro);
  background: radial-gradient(circle at 12% 8%, rgba(255,255,255,.10), transparent 40%),
              linear-gradient(160deg, var(--cafe-oscuro) 0%, var(--mauve) 42%, var(--rosa-polvo) 72%, var(--crema-rosado) 100%);
  background-attachment: fixed;
}

.page { max-width: 980px; margin: 0 auto; padding: 40px 22px 80px; }
.page-clara { color: var(--texto-oscuro); }

/* ---------- Animaciones discretas ---------- */
@keyframes subirDesvanecer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popCelebracion {
  0%   { opacity: 0; transform: scale(.85); }
  12%  { opacity: 1; transform: scale(1.03); }
  20%  { transform: scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: scale(.97); }
}
@keyframes confetiCaer {
  0%   { transform: translateY(-40px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(340px) rotate(360deg); opacity: 0; }
}

.anim-fade { animation: subirDesvanecer .55s ease both; }
.anim-fade:nth-child(2) { animation-delay: .06s; }
.anim-fade:nth-child(3) { animation-delay: .12s; }
.anim-fade:nth-child(4) { animation-delay: .18s; }
.anim-fade:nth-child(5) { animation-delay: .24s; }

/* ---------- Encabezado ---------- */
.site-header { text-align: center; margin-bottom: 34px; animation: subirDesvanecer .5s ease both; }
.brand-logo {
  width: 84px; height: 84px; object-fit: cover; border-radius: 50%;
  box-shadow: var(--sombra); margin-bottom: 14px;
}
.header-eyebrow {
  font-family: 'Cinzel', Georgia, serif; font-size: .7rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--crema-rosado); margin: 0 0 6px;
}
.site-title {
  font-family: 'Cinzel', Georgia, serif; font-size: 2.6rem; letter-spacing: .08em;
  color: var(--texto-claro); margin: 0;
}
.site-title em { font-style: normal; color: var(--crema-rosado); }
.header-rule { margin: 14px 0; color: var(--crema-rosado); }
.header-subtitle { font-style: italic; color: var(--texto-claro); opacity: .85; font-size: 1.02rem; margin: 0; }

/* ---------- Tarjetas ---------- */
.tarjeta, .form-card {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(75,51,47,.10);
  border-radius: var(--radio-xl);
  padding: 26px 28px;
  box-shadow: var(--sombra);
  margin-bottom: 20px;
}

.tarjeta-oscura {
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(246,236,223,.35);
  color: var(--texto-claro);
}

/* ---------- Formularios ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; }
.form-group label {
  font-family: 'Cinzel', Georgia, serif; font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mauve); margin-bottom: 6px;
}
.form-group input, .form-group select {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem;
  padding: 11px 16px; border: 1.5px solid var(--crema-rosado); border-radius: var(--radio-pill);
  background: var(--crema); color: var(--texto-oscuro); transition: border-color var(--transicion);
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--mauve); background: #fff; }
.form-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* ---------- Botones ---------- */
.btn-primary {
  font-family: 'Cinzel', Georgia, serif; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--mauve), var(--cafe-oscuro)); color: #fff;
  border: none; border-radius: var(--radio-pill); padding: 13px 30px; cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(75,51,47,.3); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secundario {
  font-family: 'Cinzel', Georgia, serif; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase;
  background: #fff; color: var(--mauve); border: 1.5px solid var(--crema-rosado);
  border-radius: var(--radio-pill); padding: 10px 22px; cursor: pointer; text-decoration: none; display: inline-block;
  transition: background var(--transicion), border-color var(--transicion);
}
.btn-secundario:hover { background: var(--crema); border-color: var(--mauve); }

.btn-mini {
  border: none; border-radius: var(--radio-pill); padding: 6px 14px; font-size: .8em; cursor: pointer;
  background: var(--mauve); color: #fff; transition: background var(--transicion);
}
.btn-mini:hover { background: var(--cafe-oscuro); }
.btn-mini.peligro { background: var(--vencido); }
.btn-mini.peligro:hover { background: #a3453b; }
.btn-mini[disabled] { background: #ccc; cursor: not-allowed; }

/* ---------- Tabs (pestañas de secciones / admin) ---------- */
.tabs-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 26px; }
.tab-btn {
  font-family: 'Cinzel', Georgia, serif; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.15); color: var(--texto-claro); border: 1.5px solid rgba(246,236,223,.4);
  border-radius: var(--radio-pill); padding: 10px 20px; cursor: pointer; transition: all var(--transicion);
}
.tab-btn.activo { background: var(--texto-claro); color: var(--cafe-oscuro); border-color: var(--texto-claro); }
.tab-panel { display: none; animation: subirDesvanecer .4s ease both; }
.tab-panel.activo { display: block; }

/* ---------- Insignias / estados ---------- */
.badge { display: inline-block; padding: 4px 14px; border-radius: var(--radio-pill); font-size: .72rem; font-family: 'Cinzel', Georgia, serif; letter-spacing: .04em; }
.badge-activo  { background: #eaf5ec; color: #3f7a4b; }
.badge-agotado { background: #fbf1de; color: #a9762d; }
.badge-vencido { background: #f7e9e6; color: var(--vencido); }
.badge-cancelado { background: #ececec; color: #888; }

/* ---------- Barra de progreso ---------- */
.progreso-track { width: 100%; height: 9px; background: rgba(75,51,47,.08); border-radius: var(--radio-pill); overflow: hidden; }
.progreso-fill { height: 100%; background: linear-gradient(90deg, var(--rosa-polvo), var(--mauve)); border-radius: var(--radio-pill); transition: width .3s ease; }

/* ---------- Clave de clienta ---------- */
.clave-box {
  background: linear-gradient(135deg, var(--cafe-oscuro), var(--mauve));
  border-radius: var(--radio-xl); padding: 22px 26px; text-align: center; color: #fff; margin-bottom: 22px;
  box-shadow: var(--sombra);
}
.clave-box .etiqueta { font-family: 'Cinzel', Georgia, serif; font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; color: var(--crema-rosado); margin-bottom: 6px; }
.clave-box .valor { font-family: 'Cinzel', Georgia, serif; font-size: 2rem; font-weight: 600; letter-spacing: .12em; }

/* ---------- Mensajes flash ---------- */
.flash-error, .flash-success {
  border-radius: var(--radio-lg); padding: 14px 20px; margin-bottom: 20px; text-align: center; font-style: italic;
  animation: subirDesvanecer .4s ease both;
}
.flash-error   { background: #fbeceA; border: 1px solid var(--vencido); color: #8a3a30; }
.flash-success { background: #eef6ef; border: 1px solid var(--activo); color: #33633c; }

/* ---------- Tablas ---------- */
.tabla-wrap { background: rgba(255,255,255,.95); border-radius: var(--radio-lg); overflow: hidden; box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; }
thead tr { background: var(--cafe-oscuro); }
thead th { color: var(--texto-claro); text-align: left; padding: 12px 16px; font-family: 'Cinzel', Georgia, serif; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
tbody tr:nth-child(odd) { background: #fbf7f2; }
tbody tr:hover { background: var(--crema); }
tbody td { padding: 11px 16px; border-bottom: 1px solid #f0e6da; font-size: .95rem; }

/* ---------- Días de la semana (horario) ---------- */
.dias-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.dia-tab {
  flex: 0 0 auto; font-family: 'Cinzel', Georgia, serif; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(255,255,255,.15); border: none; color: var(--texto-claro); padding: 10px 16px; border-radius: var(--radio-pill);
  cursor: pointer; white-space: nowrap; transition: all var(--transicion);
}
.dia-tab.activo { background: var(--texto-claro); color: var(--cafe-oscuro); }

/* ---------- Panel de bienvenida / resumen ---------- */
.resumen-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 26px; }
.resumen-card {
  flex: 1 1 140px; background: rgba(255,255,255,.9); border-radius: var(--radio-lg); padding: 16px; text-align: center;
  box-shadow: var(--sombra);
}
.resumen-card strong { display: block; font-size: 1.6em; color: var(--cafe-oscuro); font-family: 'Cinzel', Georgia, serif; }
.resumen-card span { font-size: .82em; color: var(--mauve); }

/* ---------- Footer ---------- */
.site-footer { text-align: center; margin-top: 50px; color: var(--texto-claro); opacity: .85; font-style: italic; }
.fleuron { color: var(--crema-rosado); font-size: 1.2rem; }

/* ---------- Modal de cumpleaños ---------- */
.modal-cumple-fondo {
  position: fixed; inset: 0; background: rgba(75,51,47,.55); z-index: 999;
  display: flex; align-items: center; justify-content: center; animation: aparecer .3s ease both;
}
.modal-cumple {
  background: linear-gradient(135deg, var(--cafe-oscuro), var(--mauve), var(--rosa-polvo));
  color: #fff; border-radius: var(--radio-xl); padding: 34px 30px; max-width: 380px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: popCelebracion 3s ease forwards; position: relative; overflow: hidden;
}
.modal-cumple h2 { font-family: 'Cinzel', Georgia, serif; font-size: 1.5rem; margin: 6px 0 12px; }
.modal-cumple p { font-style: italic; font-size: 1.02rem; line-height: 1.4; }
.confeti { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: confetiCaer 2.6s ease-in forwards; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .site-title { font-size: 2.1rem; }
  .clave-box .valor { font-size: 1.6rem; }
}