/* ============================================================
   Centro de Belleza Vella — CSS Global (Panel Admin)
   ============================================================ */

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

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Fondos */
  --vino:       #120709;
  --vino-card:  #1E0D14;
  --vino-card2: #260F18;
  --vino-borde: #3D1E2A;
  --vino-borde2:#5A2E3F;

  /* Colores de acento */
  --rosa:       #F0AABB;
  --rosa-vivo:  #E07090;
  --dorado:     #D4A040;
  --dorado-cl:  #EAB84A;
  --crema:      #F8F2EE;
  --crema-dim:  #C8B8B0;

  /* Estados */
  --success:    #3DBF7A;
  --success-bg: rgba(61,191,122,.12);
  --danger:     #E05560;
  --danger-bg:  rgba(224,85,96,.12);
  --warning:    #E8A838;
  --warning-bg: rgba(232,168,56,.12);
  --info-bg:    rgba(240,170,187,.08);

  /* Texto */
  --texto:      #F0E8E4;
  --gris:       #7A6A70;
  --gris-claro: #A89098;

  /* Tipografía */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;

  /* Forma */
  --radio:    8px;
  --radio-lg: 14px;
  --sombra:   0 4px 24px rgba(0,0,0,.4);
  --sombra-lg:0 8px 40px rgba(0,0,0,.5);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  background: var(--vino);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a   { color: var(--rosa); text-decoration: none; transition: color .2s; }
a:hover { color: var(--dorado-cl); }

/* ── Tipografía ────────────────────────────────────────────── */
h1,h2,h3,h4 {
  font-family: var(--font-display);
  line-height: 1.25;
  color: var(--crema);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
p  { color: var(--crema-dim); }

/* ── Utilidades ────────────────────────────────────────────── */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.text-center  { text-align: center; }
.text-dorado  { color: var(--dorado); }
.text-rosa    { color: var(--rosa); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.mt-1 { margin-top: .5rem;  }
.mt-2 { margin-top: 1rem;   }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem;   }
.mb-2 { margin-bottom: 1rem; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem;  }
.w-100 { width: 100%; }

/* ── Botones ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.3rem;
  border: 1.5px solid transparent;
  border-radius: var(--radio);
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .01em;
}
.btn:hover  { transform: translateY(-1px); filter: brightness(1.1); }
.btn:active { transform: translateY(0); filter: brightness(.96); }

.btn-primary {
  background: var(--rosa-vivo);
  color: #fff;
  border-color: var(--rosa-vivo);
}
.btn-dorado {
  background: var(--dorado);
  color: #1a0a10;
  font-weight: 600;
}
.btn-outline {
  background: transparent;
  border-color: var(--vino-borde2);
  color: var(--crema-dim);
}
.btn-outline:hover {
  border-color: var(--rosa);
  color: var(--rosa);
  background: var(--info-bg);
}
.btn-danger  { background: var(--danger);  color: #fff; border-color: var(--danger);  }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-sm  { padding: .35rem .85rem; font-size: .8rem; border-radius: 6px; }
.btn-lg  { padding: .85rem 1.8rem; font-size: .95rem; }

/* ── Tarjetas ──────────────────────────────────────────────── */
.card {
  background: var(--vino-card);
  border: 1px solid var(--vino-borde);
  border-radius: var(--radio-lg);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--sombra);
}

/* ── Formularios ───────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--rosa);
  margin-bottom: .3rem;
  letter-spacing: .03em;
}
.form-control {
  width: 100%;
  padding: .65rem 1rem;
  background: var(--vino);
  border: 1.5px solid var(--vino-borde);
  border-radius: var(--radio);
  color: var(--crema);
  font-family: var(--font-ui);
  font-size: .875rem;
  transition: border-color .18s, box-shadow .18s;
  outline: none;
}
.form-control:focus {
  border-color: var(--rosa-vivo);
  box-shadow: 0 0 0 3px rgba(224,112,144,.15);
}
.form-control::placeholder { color: var(--gris); }
select.form-control option { background: var(--vino-card2); color: var(--crema); }

/* ── Tablas ────────────────────────────────────────────────── */
.tabla-wrapper {
  overflow-x: auto;
  border-radius: var(--radio-lg);
  border: 1px solid var(--vino-borde);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .855rem;
}
.tabla thead th {
  background: var(--vino-card2);
  color: var(--rosa);
  padding: .7rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .06em;
  white-space: nowrap;
  border-bottom: 1px solid var(--vino-borde);
}
.tabla tbody td {
  padding: .72rem 1rem;
  border-bottom: 1px solid rgba(61,30,42,.6);
  vertical-align: middle;
  color: var(--crema-dim);
}
.tabla tbody td strong { color: var(--crema); }
.tabla tbody tr:hover { background: rgba(240,170,187,.03); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tfoot td {
  background: var(--vino-card2);
  border-top: 1px solid var(--vino-borde);
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .7rem;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  }
.badge-info    { background: var(--info-bg);     color: var(--rosa);    }

/* ── Flash messages ────────────────────────────────────────── */
.flash {
  padding: .8rem 1.1rem;
  border-radius: var(--radio);
  margin-bottom: 1.2rem;
  font-size: .875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.flash::before { font-size: 1rem; }
.flash-ok    { background: var(--success-bg); border: 1px solid rgba(61,191,122,.3); color: var(--success); }
.flash-ok::before { content: '✓'; }
.flash-error { background: var(--danger-bg);  border: 1px solid rgba(224,85,96,.3);  color: var(--danger); }
.flash-error::before { content: '⚠'; }

/* ── Stat cards ────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--vino-card);
  border: 1px solid var(--vino-borde);
  border-radius: var(--radio-lg);
  padding: 1.3rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--vino-borde2);
  border-radius: 0 0 0 var(--radio-lg);
}
.stat-card.dorado::after  { background: var(--dorado); }
.stat-card.success::after { background: var(--success); }
.stat-card.danger::after  { background: var(--danger); }

.stat-label {
  font-size: .7rem;
  color: var(--gris);
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: .35rem;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--crema);
  line-height: 1.1;
}
.stat-value.dorado  { color: var(--dorado); }
.stat-value.success { color: var(--success); }
.stat-value.danger  { color: var(--danger); }

/* ── Panel layout ──────────────────────────────────────────── */
.panel-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  background: var(--vino-card);
  border-right: 1px solid var(--vino-borde);
  padding: 1.8rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--vino-borde) transparent;
}
.sidebar-logo {
  padding: 0 1.4rem 1.6rem;
  border-bottom: 1px solid var(--vino-borde);
  margin-bottom: 1.2rem;
}
.sidebar-logo span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--rosa);
  display: block;
  line-height: 1.4;
}
.sidebar-logo small {
  font-size: .68rem;
  color: var(--gris);
  letter-spacing: .1em;
  font-weight: 600;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .62rem 1.4rem;
  color: var(--gris-claro);
  font-size: .845rem;
  transition: all .16s;
  border-left: 2.5px solid transparent;
  text-decoration: none;
}
.sidebar-nav a:hover {
  background: var(--info-bg);
  color: var(--crema);
  border-left-color: var(--vino-borde2);
}
.sidebar-nav a.activo {
  background: rgba(240,170,187,.08);
  color: var(--rosa);
  border-left-color: var(--rosa-vivo);
  font-weight: 500;
}
.sidebar-nav a svg { flex-shrink: 0; opacity: .7; }
.sidebar-nav a:hover svg,
.sidebar-nav a.activo svg { opacity: 1; }
.sidebar-nav .nav-section {
  font-size: .66rem;
  color: var(--gris);
  letter-spacing: .12em;
  padding: 1.1rem 1.4rem .35rem;
  font-weight: 700;
}
.sidebar-footer {
  margin-top: auto;
  padding: 1.3rem 1.4rem;
  border-top: 1px solid var(--vino-borde);
}
.sidebar-footer .user-name {
  font-size: .82rem;
  color: var(--crema-dim);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sidebar-footer .user-name::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

/* ── Panel main ────────────────────────────────────────────── */
.panel-main {
  padding: 2rem 2.2rem;
  overflow-y: auto;
  background: var(--vino);
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--vino-borde);
}
.panel-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--crema);
}
.panel-title span { color: var(--rosa); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .panel-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap;
    padding: .8rem 1rem;
    border-right: none; border-bottom: 1px solid var(--vino-borde);
  }
  .sidebar-logo { padding: 0 1rem .5rem; border: none; margin: 0; }
  .sidebar-nav  { display: flex; flex-wrap: wrap; width: 100%; }
  .sidebar-nav a {
    padding: .4rem .7rem; border-left: none;
    border-bottom: 2px solid transparent; font-size: .78rem;
  }
  .sidebar-nav a.activo { border-left: none; border-bottom-color: var(--rosa-vivo); }
  .sidebar-footer { display: none; }
  .panel-main { padding: 1.2rem 1rem; }
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--vino-card);
  border: 1px solid var(--vino-borde2);
  border-radius: var(--radio-lg);
  padding: 1.8rem;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--sombra-lg);
  animation: slideUp .22s ease;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--vino-borde);
}
.modal-close {
  background: none; border: none;
  color: var(--gris); font-size: 1.2rem;
  cursor: pointer; line-height: 1; padding: .2rem;
  transition: color .18s;
  border-radius: 4px;
}
.modal-close:hover { color: var(--rosa); background: var(--info-bg); }

@keyframes slideUp {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── Paginación ────────────────────────────────────────────── */
.paginacion {
  display: flex; gap: .4rem; margin-top: 1.3rem;
  justify-content: center; flex-wrap: wrap;
}
.paginacion a, .paginacion span {
  padding: .35rem .75rem;
  border-radius: var(--radio);
  font-size: .82rem;
  background: var(--vino-card2);
  border: 1px solid var(--vino-borde);
  color: var(--gris-claro);
  transition: all .15s;
}
.paginacion a:hover { border-color: var(--rosa); color: var(--rosa); background: var(--info-bg); }
.paginacion .actual {
  background: var(--rosa-vivo); color: #fff;
  border-color: var(--rosa-vivo); font-weight: 600;
}

/* ── Empty state ───────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gris); }
.empty-state svg { opacity: .25; margin: 0 auto 1rem; }

/* ── Tabs ──────────────────────────────────────────────────── */
.tab-btn.activo {
  background: var(--rosa-vivo) !important;
  color: #fff !important;
  border-color: var(--rosa-vivo) !important;
}