/*
  Constelaciones Theme (Nature / Calm / Human)
  - Designed to skin an existing Bootstrap 5 UI without touching PHP logic.
*/

:root{
  --bg: #FAF7F2;
  --bg-2: #F5EFE7;
  --surface: #FFFFFF;
  --surface-2: rgba(255,255,255,.78);

  --text: #2E2A26;
  --muted: #6E655E;

  /* Paleta suave (terapéutica) */
  --primary: #4FB8AE;          /* turquesa suave */
  --primary-strong: #2A877F;   /* turquesa profundo */
  --primary-soft: #E7F6F4;     /* turquesa muy claro */

  --accent: #B9B2FF;           /* lavanda suave (usar poco) */
  --danger-soft: rgba(201,124,93,.18);  /* terracota suave */

  --border: rgba(46, 42, 38, 0.10);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-sm: 0 10px 28px rgba(46, 42, 38, 0.08);
  --shadow-xs: 0 6px 18px rgba(46, 42, 38, 0.06);

  --focus: 0 0 0 4px rgba(79,184,174,.20);
}

/* Base */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  background:
    radial-gradient(1200px 700px at 10% 0%, #FFFFFF 0%, var(--bg) 55%, var(--bg-2) 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.7;
}

a{ color: var(--primary-strong); }
a:hover{ color: var(--primary-strong); }

/* Headings (Bootstrap uses .h1/.h2... too) */
h1,h2,h3,.h1,.h2,.h3,.h4,.h5{
  font-family: Fraunces, Georgia, serif;
  letter-spacing: 0.2px;
  color: var(--text);
}

.text-muted{ color: var(--muted) !important; }

/* Layout width used by existing code */
.container-narrow{ max-width: 1100px; }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Navbar */
.navbar{
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: none !important;
}
.navbar .navbar-brand{
  font-family: Fraunces, Georgia, serif;
  letter-spacing: 0.2px;
}
.navbar .navbar-brand.brand-stack{
  line-height: 1.08;
}
.navbar .navbar-brand .brand-line1{
  display: block;
  font-size: 1.05rem;
}
.navbar .navbar-brand .brand-line2{
  display: block;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: .92rem;
  color: var(--muted);
  font-weight: 600;
}
.navbar .navbar-brand .brand-name{
  color: var(--primary-strong);
  font-weight: 600;
}

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

/* Tables */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .35px;
  color: var(--primary-strong);
  background: linear-gradient(180deg, rgba(231,246,244,.60), rgba(231,246,244,.26));
}
.table tbody tr:hover > *{
  background: rgba(231,246,244,.22);
}

/* Buttons */
.btn{
  border-radius: var(--radius-md) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.01);
}

/* Alias used in the inserted hero HTML (btn-outline) */
.btn-outline{
  color: var(--primary-strong) !important;
  border-color: rgba(79,184,174,.45) !important;
  background: transparent !important;
}
.btn-outline:hover{
  background: var(--primary-soft) !important;
  border-color: rgba(79,184,174,.45) !important;
}

.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-strong);
  --bs-btn-hover-border-color: var(--primary-strong);
  --bs-btn-active-bg: var(--primary-strong);
  --bs-btn-active-border-color: var(--primary-strong);
  --bs-btn-focus-shadow-rgb: 79,184,174;
}

.btn-outline-primary{
  --bs-btn-color: var(--primary-strong);
  --bs-btn-border-color: rgba(79,184,174,.45);
  --bs-btn-hover-bg: var(--primary-soft);
  --bs-btn-hover-border-color: rgba(79,184,174,.45);
  --bs-btn-hover-color: var(--primary-strong);
  --bs-btn-active-bg: rgba(231,246,244,.75);
  --bs-btn-active-border-color: rgba(79,184,174,.45);
  --bs-btn-focus-shadow-rgb: 79,184,174;
}

.btn-outline-secondary{
  --bs-btn-border-color: rgba(110,101,94,.35);
  --bs-btn-hover-bg: rgba(216,195,165,.18);
  --bs-btn-hover-border-color: rgba(216,195,165,.40);
  --bs-btn-hover-color: #4B3E34;
}

/* Emphasis button used in reservations: "Ya tengo cuenta" */
.btn-account-toggle{
  font-weight: 800;
  letter-spacing: .2px;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  background: var(--primary-soft);
}
.btn-account-toggle:hover{
  background: rgba(231,246,244,.85);
}


/* Soft chips for the 🔴/🔵 history buttons in reservations list */
button.btn.btn-link.p-0.align-baseline{
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid transparent;
  text-decoration: none !important;
}
button.btn.btn-link.p-0.align-baseline.text-danger{
  background: var(--danger-soft);
  border-color: rgba(201,124,93,.28);
  color: #6A2F1E !important;
}
button.btn.btn-link.p-0.align-baseline.text-primary{
  background: rgba(79,184,174,.14);
  border-color: rgba(79,184,174,.26);
  color: var(--primary-strong) !important;
}
button.btn.btn-link.p-0.align-baseline:hover{ filter: brightness(0.98); }

/* Inputs */
.form-control, .form-select{
  border-radius: var(--radius-md) !important;
  border-color: var(--border) !important;
  background: var(--surface-2) !important;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(79,184,174,.70) !important;
  box-shadow: var(--focus) !important;
}

/* Bloques dinámicos (muy suave) */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  transition: opacity .65s ease, transform .65s ease, filter .65s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Badges: more "soft" look */
.badge{
  border-radius: 999px !important;
}

/* Alerts */
.alert{
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border);
}

/* Modal (global) */
.modal-content{
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
}
.modal-header{
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.92));
  border-bottom: 1px solid var(--border) !important;
}
.modal-footer{
  border-top: 1px solid var(--border) !important;
}

/* Notes History Modal: make note blocks feel like cards */
#notesHistoryModal .modal-title{
  font-family: Fraunces, Georgia, serif;
}
#notesHistoryAdmin > div.border.rounded.p-2,
#notesHistoryUser > div.border.rounded.p-2{
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xs);
}
#notesHistoryAdmin > div.border.rounded.p-2{
  background: rgba(216,195,165,.22);
}
#notesHistoryUser > div.border.rounded.p-2{
  background: var(--primary-soft);
}
#notesHistoryModal .note-view{
  color: var(--text);
}

/* Make small buttons inside modal match the theme a bit better */
#notesHistoryModal .btn-outline-danger{
  --bs-btn-border-color: rgba(201,124,93,.40);
  --bs-btn-hover-bg: rgba(201,124,93,.18);
  --bs-btn-hover-border-color: rgba(201,124,93,.40);
  --bs-btn-hover-color: #6A2F1E;
}

/* Improve readability of main content blocks */
main.container{ padding-top: 22px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
  .reveal{ opacity: 1 !important; transform:none !important; filter:none !important; }
}



/* ===== Hero con fotografía (home) ===== */
.hero.hero-photo{
  position: relative;
  overflow: hidden;
  padding: 26px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  min-height: 240px;
  display: grid;
  align-content: center;
}

.hero.hero-photo::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/hero-constelaciones.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  filter: saturate(1.02);
}

.hero.hero-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 260px at 70% 20%, rgba(79,184,174,.20), transparent 60%),
    radial-gradient(800px 260px at 15% 25%, rgba(185,178,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(250,247,242,.92), rgba(250,247,242,.74));
}

.hero.hero-photo > *{
  position: relative;
  z-index: 1;
}

/* Keep hero text readable on large screens */
.hero.hero-photo .hero-title,
.hero.hero-photo .hero-subtitle,
.hero.hero-photo .hero-actions{
  max-width: 760px;
}

.hero .hero-title{
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  margin: 0 0 10px;
}

.hero .hero-subtitle{
  max-width: 78ch;
  color: var(--muted);
  margin: 0 0 14px;
}

.hero .hero-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.hero .hero-actions .btn{
  padding: 12px 18px;
}

/* ===== Tarjetas de valor (home) ===== */
.feature-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.feature-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}

.feature-card .feature-img{
  width: 100%;
  height: 132px;
  object-fit: cover;
  display: block;
}

.feature-card .feature-body{
  padding: 14px 14px 16px;
  flex: 1 1 auto;
}

.feature-card .feature-title{
  font-family: Fraunces, Georgia, serif;
  font-size: 20px;
  margin: 0 0 6px;
}

.feature-card .feature-text{
  color: var(--muted);
  margin: 0;
}

/* ===== Sobre mí (home) ===== */
.about-me{
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: var(--shadow-xs);
}
.about-grid{
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.about-photo img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 560px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(46,42,38,.10);
  box-shadow: 0 16px 44px rgba(46,42,38,.10);
}
.about-title{
  margin: 0 0 8px;
  font-size: clamp(22px, 2.2vw, 30px);
}
.about-text{
  margin: 0 0 14px;
  color: var(--muted);
  max-width: 70ch;
}
.about-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Online CTA button (index.php) */
.online-cta{
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* Botón "Solicitar Constelación Individual ONLINE" (talleres.php) */
.btn-online-individual{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(79,184,174,.22);
  color: #fff !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, rgba(79,184,174,.92) 0%, rgba(185,178,255,.86) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-online-individual:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}
.btn-online-individual:active{
  transform: translateY(0px);
  filter: brightness(0.99);
}
.btn-online-individual:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(185,178,255,.18), 0 10px 24px rgba(15, 23, 42, .12);
}
@media (max-width: 520px){
  .btn-online-individual{ width: 100%; font-size: 1.02rem; padding: 14px 16px; }
}
@media (min-width: 992px){
  .online-cta{
    width: auto !important;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================
   ADMIN: sistema único de estados (pendiente/hecho/alerta)
   - Solo afecta al admin (body.admin)
   ========================= */

.admin .status-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.12rem .55rem;
  border-radius:999px;
  border:1px solid rgba(2, 6, 23, .14);
  background: rgba(255,255,255,.92);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.2;
  white-space:nowrap;
}
.admin .status-pill .status-icon{ line-height:1; }

.admin .status-pending{
  background: rgba(255, 193, 7, .14);
  border-color: rgba(255, 193, 7, .28);
  color: #7a5a00;
}
.admin .status-done{
  background: rgba(25, 135, 84, .14);
  border-color: rgba(25, 135, 84, .26);
  color: #0f5132;
}
.admin .status-danger{
  background: rgba(220, 53, 69, .14);
  border-color: rgba(220, 53, 69, .26);
  color: #842029;
}
.admin .status-info{
  background: rgba(13, 110, 253, .12);
  border-color: rgba(13, 110, 253, .24);
  color: #084298;
}
.admin .status-muted{
  background: rgba(108, 117, 125, .12);
  border-color: rgba(108, 117, 125, .22);
  color: #495057;
}

/* Símbolo € con color consistente (admin) */
.admin .status-euro{ font-weight: 900; }
.admin .status-euro--full{ color: #198754; }
.admin .status-euro--partial{ color: #b58100; }
.admin .status-euro--none{ color: #dc3545; }
.admin .status-euro--weird{ color: #dc3545; text-decoration: underline; }
.admin .status-euro--free{ color: #0f766e; }

/* Usuario marcado como "En Formación" (admin) */
.admin .u-formacion{
  background: rgba(34, 197, 94, .16);
  border: 1px solid rgba(34, 197, 94, .24);
  border-radius: 10px;
  padding: 2px 6px;
}
.admin .badge-formacion{
  background: rgba(34, 197, 94, .18);
  border: 1px solid rgba(34, 197, 94, .28);
  color: #0f5132;
  font-weight: 800;
}

/* Botón de acciones "…" más discreto */
.admin .btn-actions{
  padding: .18rem .55rem !important;
  font-weight: 900;
  letter-spacing: .6px;
}

/* =========================
   ADMIN: navegación y tablas (mobile-first)
   - Mejora uso en smartphone/tablet sin cambiar lógica PHP
   ========================= */

/* Navbar: botones no se rompen y el menú colapsado es cómodo en móvil */
.admin .navbar .btn{ white-space: nowrap; }
.admin .navbar .navbar-brand{ white-space: nowrap; }
.admin .nav-ico{ font-size: .95em; line-height: 1; }
.admin .navbar .navbar-collapse{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px){
  .admin .navbar .navbar-brand{ font-size: 1rem; }
  .admin .navbar .navbar-collapse{
    max-height: calc(100vh - 64px);
  }
  .admin .navbar .btn{ width: 100%; justify-content: center; }
}

/* Tablas: scroll suave en horizontal + pista visual */
.admin .table-responsive{
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.admin .table-responsive::after{
  /* Desactivado: en iPhone se percibe como una banda/sombra molesta */
  display: none !important;
}

/* Compactación coherente para listados del admin */
.admin .reservations-table th,
.admin .reservations-table td{ padding: .35rem .5rem; }
.admin .reservations-table th{ white-space: nowrap; }

/* Primera columna fija para listas largas (Nombre / Fecha) */
.admin table.sticky-first-col th:first-child,
.admin table.sticky-first-col td:first-child{
  position: sticky;
  left: 0;
  z-index: 2;
  /* IMPORTANTE: opaco para que en móvil no se "mezcle" el texto al hacer scroll */
  background: #fff;
  box-shadow: none; /* sin banda/sombra */
  border-right: 1px solid rgba(0,0,0,.12);
}
.admin table.sticky-first-col thead th:first-child{ z-index: 3; }
.admin table.sticky-first-col tbody tr:hover td:first-child{
  background: #e7f6f4;
}

/* Touch targets: más cómodo en móvil */
@media (max-width: 576px){
  .admin .btn,
  .admin .form-control,
  .admin .form-select{
    min-height: 40px;
  }
  .admin .table th,
  .admin .table td{
    padding: .55rem .55rem;
    font-size: .92rem;
  }
  .admin .table thead th{ font-size: .70rem; }

  /* Online → Gestión de Citas Online: ocultar controles de Calendar/Exportar en móvil */
  .admin .gcal-status-badge,
  .admin .btn-gcal-disconnect,
  .admin .btn-export-csv{
    display: none !important;
  }

  /* Edición → Administración (talleres): en móvil, en ACCIONES dejar solo Editar y Eliminar */
  .admin .ws-actions-menu li:not(.act-keep-mobile){
    display: none !important;
  }
}


/* =========================
   Responsive polish
   - Mobile-first by default
   - Tablet: 2 columns
   - Desktop: larger hero + refined spacing
   ========================= */

/* Phones */
@media (max-width: 576px){
  main.container{ padding-top: 16px; }

  .hero.hero-photo{
    padding: 18px 14px;
    min-height: 220px;
  }
  .hero .hero-title{ font-size: clamp(24px, 7vw, 32px); }
  .hero .hero-subtitle{ font-size: 15px; line-height: 1.55; }
  .hero .hero-actions{ gap: 8px; }
  .hero .hero-actions .btn{
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
  }

  .feature-grid{ grid-template-columns: 1fr; gap: 12px; }
  .feature-card .feature-img{ height: 170px; }
  .feature-card .feature-title{ font-size: 19px; }

  .navbar .navbar-brand .brand-line1{ font-size: 1.00rem; }
  .navbar .navbar-brand .brand-line2{ font-size: .88rem; }

  .about-me{ padding: 14px; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-photo{ max-width: 520px; }
}

/* Tablets / small laptops */
@media (min-width: 577px) and (max-width: 991px){
  .hero.hero-photo{ min-height: 300px; padding: 28px 22px; }
  .feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card .feature-img{ height: 160px; }

  .about-grid{ grid-template-columns: 300px minmax(0, 1fr); }
}

/* Desktops */
@media (min-width: 992px){
  .hero.hero-photo{
    padding: 52px 44px;
    min-height: 420px;
  }
  .hero .hero-subtitle{ font-size: 18px; }

  .feature-grid{ margin-top: 18px; gap: 18px; }
  .feature-card .feature-img{ height: 150px; }
  .feature-card .feature-body{ padding: 16px 16px 18px; }
}

/* --- ONLINE: resaltado por cercanía de cita (fondo del nombre) --- */
.name-hl{
  display:inline-block;
  padding: 2px 6px;
  border-radius: 8px;
}
.name-hl-tomorrow{
  background: rgba(220, 53, 69, .16); /* rojo claro */
}
.name-hl-soon{
  background: rgba(255, 193, 7, .22); /* amarillo/ámbar claro */
}

/* Botones compactos para columna de estado online */
.btn-compact{
  padding: 0.02rem 0.32rem !important;
  line-height: 1.1 !important;
  font-size: .78rem !important;
}


/* --- ONLINE: columna cita compacta --- */
.cita-mini{font-size:.74rem; line-height:1.05;}
.cita-mini .time{opacity:.75;}

/* --- ONLINE: ajustar anchos de columnas para ver iconos --- */
@media (min-width: 992px){
  table.online-table{table-layout:fixed; width:100%;}
  table.online-table th, table.online-table td{padding-left:.55rem; padding-right:.55rem;}

  /* CITA */
  table.online-table th:nth-child(1),
  table.online-table td:nth-child(1){width:96px;}

  /* CLIENTE (más estrecha para que CONTACTO quede más a la izquierda) */
  table.online-table th:nth-child(2),
  table.online-table td:nth-child(2){width:280px;}

  /* CONTACTO */
  table.online-table th:nth-child(3),
  table.online-table td:nth-child(3){width:250px;}

  /* SOLICITADO */
  table.online-table th:nth-child(4),
  table.online-table td:nth-child(4){width:95px;}

  /* ACCIONES: más ancha y sin saltos para que se vean los iconos */
  table.online-table th:nth-child(5),
  table.online-table td:nth-child(5){width:240px;}
  table.online-table td:nth-child(5){white-space:nowrap;}
}

/* Reservation & Workshops pages */

/* Scope to avoid touching the home design */
.reservation-page,
.reservation-online-page,
.talleres-page{
  background: radial-gradient(1200px 500px at 10% -10%, rgba(14,165,164,.12), transparent 60%),
              radial-gradient(900px 400px at 90% 0%, rgba(37,99,235,.10), transparent 55%),
              var(--bg);
}

.page-shell{
  max-width: 980px;
  margin: 0 auto;
}

.soft-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(46,42,38,.10);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(2,6,23,.10);
}

.soft-card .card-header{
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.stepper{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.stepper .step{
  display:flex;
  align-items:center;
  gap:10px;
}
.stepper .dot{
  width:34px;height:34px;
  border-radius:999px;
  display:grid;place-items:center;
  font-weight:800;
  border:1px solid rgba(46,42,38,.16);
  background: rgba(255,255,255,.75);
}
.stepper .label{
  font-weight:700;
}
.stepper .sep{
  height:1px;
  width:46px;
  background: rgba(46,42,38,.14);
}
.stepper .is-active .dot{
  background: linear-gradient(135deg, rgba(14,165,164,.18), rgba(37,99,235,.14));
  border-color: rgba(14,165,164,.35);
}
.stepper .is-done .dot{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
}

.wizard-step{ display:none; }
.wizard-step.is-active{ display:block; }

.wizard-nav{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 12px;
}


/* Wizard window: mantiene visión y botones (sin scroll de página) */
.wizard-window{
  border: 1px solid rgba(46,42,38,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(2,6,23,.08);
  overflow: hidden;
}
.wizard-window .stepper{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 0;
  margin-bottom: 0;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(46,42,38,.08);
}
/* Wizard sin scroll interno (más fácil para clientes): cada paso cabe sin barra de desplazamiento */
.wizard-scroll{
  max-height: none;
  overflow: visible;
  padding: 14px;
}
.wizard-window .wizard-nav{
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 0;
  padding: 12px 14px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(46,42,38,.08);
}

/* Admin talleres: fecha/hora más compacta */
.admin .col-date{ white-space:nowrap; font-size:.92rem; line-height:1.05; }
.admin .col-date .small{ font-size:.82rem; }

/* Mis próximos talleres: panel plegable y cerrable (no molesta durante la reserva) */
.myworkshops-card{
  border: 1px solid rgba(46,42,38,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
}
.myworkshops-card .btn-toggle{
  border-radius: 999px;
  font-weight: 800;
}

.summary-box{
  border: 1px dashed rgba(46,42,38,.18);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.70);
}

/* Reserva: elección de modalidad con botones */
.reservation-page .kind-choice{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.reservation-page .kind-choice .kind-btn{
  flex:1;
  min-width:170px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(46,42,38,.16);
  background: rgba(255,255,255,.78);
  font-weight:800;
  cursor:pointer;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
.reservation-page .kind-choice .kind-btn:hover{ filter: brightness(.98); }
.reservation-page .kind-choice .kind-btn.is-selected{
  border-color: rgba(14,165,164,.45);
  background: linear-gradient(135deg, rgba(14,165,164,.18), rgba(37,99,235,.12));
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}
.reservation-page .kind-choice .kind-btn.is-selected::before{
  content:'✓';
  margin-right:10px;
  font-weight:900;
}

/* Reserva: mejorar legibilidad de etapas y campos (tonos suaves, estilo portada) */
.reservation-page .wizard-step,
.reservation-online-page .wizard-step{
  background: linear-gradient(180deg, rgba(231,246,244,.55), rgba(255,255,255,.92));
  border: 1px solid rgba(46,42,38,.08);
  border-radius: 16px;
  padding: 16px;
}

.reservation-page .wizard-scroll,
.reservation-online-page .wizard-scroll{
  padding: 14px;
}

/* Campos: que se distingan del fondo sin perder suavidad */
.reservation-page .form-control,
.reservation-page .form-select,
.reservation-online-page .form-control,
.reservation-online-page .form-select{
  background: rgba(231,246,244,.45) !important;
  border-color: rgba(46,42,38,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.reservation-page .form-control::placeholder,
.reservation-online-page .form-control::placeholder{
  color: rgba(110,101,94,.72);
}

.reservation-page .form-control:focus,
.reservation-page .form-select:focus,
.reservation-online-page .form-control:focus,
.reservation-online-page .form-select:focus{
  background: rgba(231,246,244,.65) !important;
}

/* Checkboxes y radios: un poco más visibles pero suaves */
.reservation-page .form-check-input,
.reservation-online-page .form-check-input{
  border-color: rgba(46,42,38,.22);
}
.reservation-page .form-check-input:focus,
.reservation-online-page .form-check-input:focus{
  box-shadow: var(--focus) !important;
}
@media (max-width:520px){
  .reservation-page .kind-choice .kind-btn{ min-width:100%; }
}

.chipbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(46,42,38,.14);
  background: rgba(255,255,255,.75);
  text-decoration:none !important;
  color: var(--text);
  font-weight: 700;
  font-size: .92rem;
}
.chip:hover{ filter: brightness(0.98); }
.chip.is-active{
  border-color: rgba(14,165,164,.40);
  background: linear-gradient(135deg, rgba(14,165,164,.16), rgba(37,99,235,.10));
}

.filters-panel{
  border: 1px solid rgba(46,42,38,.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.70);
}

.workshop-grid .card{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(46,42,38,.10);
  box-shadow: 0 14px 34px rgba(2,6,23,.08);
}
.workshop-cover{
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: rgba(46,42,38,.06);
}
.workshop-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.badge-soft{
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(46,42,38,.12);
  background: rgba(255,255,255,.72);
  font-weight: 800;
}
.badge-soft.badge-info{
  border-color: rgba(37,99,235,.18);
  background: rgba(37,99,235,.08);
}
.badge-soft.badge-teal{
  border-color: rgba(14,165,164,.22);
  background: rgba(14,165,164,.09);
}
.badge-soft.badge-warn{
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.12);
}
.badge-soft.badge-ok{
  border-color: rgba(34,197,94,.26);
  background: rgba(34,197,94,.12);
}

.sticky-cta{
  position: sticky;
  bottom: 10px;
  z-index: 10;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(46,42,38,.10);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
}

/* Reserva: miniaturas e información (más compacto, sin ocupar media pantalla) */
@media (min-width: 768px){
  .media-grid-compact .media-col{
    flex: 0 0 30%;
    max-width: 30%;
  }
}

.media-grid-compact .ratio{
  border-radius: 14px;
}


/* Reserva: mensaje de bienvenida al recuperar datos */
.account-welcome{
  border:1px solid rgba(14,165,164,.35);
  background:rgba(14,165,164,.10);
  color:#0f766e;
  font-weight:800;
  padding:14px 16px;
  border-radius:14px;
  text-align:left;
  white-space:normal;
  line-height:1.25;
}
.account-welcome strong{ font-weight:900; }
.account-welcome:hover{ filter:brightness(.98); }


/* Admin Users actions dropdown */
.actions-dropdown .dropdown-menu{min-width:230px;}
.actions-dropdown .dropdown-toggle-split{padding-left:.45rem;padding-right:.45rem;}

/* Botones ultra compactos (por ejemplo, contadores de plazas en Presenciales) */
.admin .btn-mini{
  padding: .18rem .45rem;
  font-size: .74rem;
  line-height: 1.1;
  border-radius: .55rem;
}

/* ===============================
   PAGOS: cabecera estable (evita que los botones "salten" debajo tras unos segundos)
   =============================== */
/*
   PAGOS: cabecera estable
   En escritorio: título a la izquierda + botones SIEMPRE a la derecha (sin "saltos" por reflow de fuentes/contadores).
   En móvil: puede bajar debajo (como te gusta ahora).
*/
.pay-head{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:start;
  column-gap:12px;
}
.pay-meta{ min-width:0; }
.pay-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

/* En móvil puede envolver (como lo quieres ahora) */
@media (max-width: 768px){
  .pay-head{ grid-template-columns: 1fr; row-gap:8px; }
  .pay-actions{ justify-self:start; flex-wrap:wrap; white-space:normal; }
}

/* Filas objetivo: que el ancla no quede "pegada" arriba */
tr[id^="r"]{ scroll-margin-top: 90px; }

/* Resaltado suave del objetivo al volver */
tr:target{
  outline: 2px solid rgba(14,165,164,.35);
  background: rgba(14,165,164,.06) !important;
}

/* ===============================
   HOME v2 (single page suave)
   =============================== */
.home-main{ padding:0 !important; max-width:100% !important; }
.home .container-narrow{ max-width: 1100px; }

/* Navbar home (con anclas) */
.home-nav{ background: rgba(255,255,255,.86) !important; backdrop-filter: blur(10px); }
.home-nav .nav-link{ font-weight:600; color:#3b4a4a; }
.home-nav .nav-link:hover{ color:#102222; }

/* HERO */
.home-hero{
  position:relative;
  min-height: 72vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding: 64px 0 56px;
}
.home-hero__bg{
  position:absolute;
  inset:0;
  background: #000;
  transform: scale(1.03);
}

/* Vídeo de fondo (traslúcido) */
.home-hero__bgvideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.52;
  filter: saturate(1.06) contrast(1.05) brightness(1.06);
}
.home-hero__bg::after{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(420px 260px at 22% 26%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(520px 320px at 78% 18%, rgba(255,255,255,.45), transparent 62%),
    radial-gradient(520px 320px at 70% 80%, rgba(255,255,255,.35), transparent 62%);
}
.home-hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(248,244,235,.55), rgba(248,244,235,.92));
}
.home-hero__content{ position:relative; text-align:center; }
.home-kicker{ letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; color:#486060; margin:0 0 10px; }
.home-h1{ font-family: "Fraunces", serif; font-weight: 650; line-height:1.02; margin:0 0 12px; font-size: clamp(2.1rem, 4.8vw, 3.4rem); }
.home-lead{ color:#3d5151; max-width: 60ch; margin: 0 auto 18px; font-size: 1.05rem; }
.home-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin: 10px 0 6px; }
.home-trust{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.home-pill{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.08); color:#3b4a4a; font-size:.86rem; }

/* Sections */
.home-section{ padding: 72px 0; background: transparent; }
.home-section--alt{ background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.65), rgba(255,255,255,.35)); }
.home-head{ margin-bottom: 20px; }
.home-head--row{ display:flex; align-items:end; justify-content:space-between; gap: 18px; flex-wrap:wrap; }
.home-h2{ font-family: "Fraunces", serif; font-weight: 650; margin:0 0 8px; font-size: 1.9rem; }
.home-sub{ margin:0; color:#516666; }
.home-h3{ font-family: "Fraunces", serif; font-weight: 600; margin:0 0 6px; }
.home-text{ margin:0; color:#445b5b; }
.home-muted{ color:#607777; font-size:.9rem; }

/* Cards */
.home-grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 992px){ .home-grid3{ grid-template-columns: 1fr; } }

.home-card{
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  transition: transform .18s ease, background .18s ease;
}
.home-card:hover{ transform: translateY(-3px); background:#fff; }
.home-card__top{ height: 160px; overflow:hidden; }
.home-card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.home-card__body{ padding: 18px 18px 16px; }
.home-link{ display:inline-block; margin-top: 10px; font-weight:700; color: var(--bs-primary); }

/* Agenda */
.home-agenda{ display:grid; gap: 12px; }
.home-agenda__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  text-decoration:none;
  color: inherit;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
}
.home-badge{
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(14,165,164,.10);
  border: 1px solid rgba(0,0,0,.08);
}
.home-badge__day{ font-weight: 800; font-size: 18px; line-height:1; }
.home-badge__mon{ font-size: 11px; letter-spacing:.12em; color:#516666; }
.home-agenda__meta{ min-width:0; }
.home-agenda__title{ font-weight: 800; }
.home-agenda__sub{ color:#516666; font-size: .9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-agenda__cta{ font-weight:800; color: var(--bs-primary); }

/* About */
.home-about{ display:grid; grid-template-columns: 420px 1fr; gap: 26px; align-items:center; }
@media (max-width: 992px){ .home-about{ grid-template-columns:1fr; } }
.home-about__photo img{
  width:100%; height:auto; display:block;
  border-radius: 42% 58% 55% 45% / 45% 45% 55% 55%;
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.08);
}
.home-ticks{ margin: 14px 0 0; padding-left: 18px; color:#516666; }
.home-signature{ margin-top: 14px; color:#607777; font-style: italic; }

/* Quotes */
.home-quote{
  padding: 18px;
  border-radius: 18px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
}

/* FAQ */
.home-faq{ display:grid; gap: 10px; max-width: 860px; }
.home-faq__q{
  width:100%; text-align:left;
  padding: 14px 16px;
  border-radius: 16px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
  font-weight: 800;
}
.home-faq__a{ display:none; padding: 0 16px 14px; color:#516666; }
.home-faq__q.is-open + .home-faq__a{ display:block; }

/* WhatsApp */
.home-wa{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  background: #25D366;
  color: #fff;
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 999px;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  font-weight: 900;
}

/* Scroll offsets for anchored sections under sticky nav */
#servicios, #proximos, #sobre-mi, #faq{ scroll-margin-top: 96px; }

/* HERO inline video (debajo del titular) */
.home-hero__inlinevideo{
  margin: 22px auto 12px;
  width: min(560px, 92%);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
  background: rgba(255,255,255,.35);
}
.home-hero__video{
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(1.06) contrast(1.04) saturate(1.05);
}
@media (max-width: 768px){
  .home-hero__inlinevideo{ width: min(520px, 94%); margin: 18px auto 10px; }
}

/* --- Admin: ajustes SOLO MÓVIL (no afectan a la web pública) --- */
@media (max-width: 900px){
  body.admin .reservations-totals{ display:none !important; }
  body.admin .reservations-filters{ display:none !important; }
  /* Menú principal (admin): en móvil mostrar solo Presencial, Online, Edición y Ver web */
  body.admin .nav-contactos,
  body.admin .nav-notas,
  body.admin .nav-usuarios{ display:none !important; }
  /* Edición > Administración: ocultar panel de filtros en móvil */
  body.admin .talleres-filters{ display:none !important; }
  /* Edición (menú): en móvil mostrar solo Administración, Admins y Salir */
  body.admin .edit-hide-mobile{ display:none !important; }
  /* Presencial: ocultar en móvil botones que no necesitas */
body.admin .btn-dir-email{ display:none !important; }
  body.admin .dropdown-exportar{ display:none !important; }
}