/* =========================================================
   UNDERGROUND+ — más callejero, oscuro y con textura
   (Se aplica a TODO el sitio sin perder legibilidad)
   ========================================================= */

/* Paleta “toxic neon” */
:root{
  --acid:#39FF14;      /* verde tóxico */
  --hazard:#FACC15;    /* amarillo cinta de peligro */
  --blood:#FF0054;     /* rojo intenso */
  --uv:#A855F7;        /* violeta UV */
}

/* Vignette oscura + cerca metálica + ruido */
body{
  background:
    radial-gradient(1600px 900px at 50% 10%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
body::before{
  /* Patrón de malla metálica (chain-link) */
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<defs><pattern id='f' width='20' height='20' patternUnits='userSpaceOnUse'>\
<path d='M0 10 Q10 0 20 10 M0 10 Q10 20 20 10' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.3'/></pattern></defs>\
<rect width='100%' height='100%' fill='url(%23f)'/></svg>") center/220px 220px repeat;
  mix-blend-mode: overlay; opacity:.35;
}
body::after{
  /* Splatters de spray (muy sutiles) */
  content:"";
  position:fixed; inset:-40px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(220px 160px at 8% 12%, rgba(57,255,20,.10), transparent 62%),
    radial-gradient(200px 140px at 90% 6%, rgba(96,165,250,.10), transparent 65%),
    radial-gradient(180px 160px at 12% 88%, rgba(244,114,182,.10), transparent 68%),
    radial-gradient(220px 160px at 92% 94%, rgba(168,85,247,.08), transparent 65%);
  filter: blur(14px);
}

/* Marca en el navbar: “letrero de neón” con flicker */
.navbar-brand{
  font-family:"Rubik Dirt","Staatliches","Bebas Neue",cursive;
  letter-spacing:1px;
  -webkit-text-stroke: 1px rgba(0,0,0,.45);
  text-shadow:
    0 0 6px rgba(57,255,20,.45),
    0 0 24px rgba(96,165,250,.35),
    0 0 48px rgba(244,114,182,.25);
  animation: neon-flicker 3.6s infinite steps(60, end);
}
@keyframes neon-flicker{
  0%, 2%, 4%, 80%, 83%, 100% { opacity:1; }
  1%, 3%, 81% { opacity:.65; }
  82% { opacity:.3; }
}

/* Paneles con borde “cinta de peligro” */
.urban-panel, .bg-white:not(.ticket-view){
  position:relative;
  border:1px dashed rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}
.urban-panel::before{
  content:"";
  position:absolute; left:-8px; right:-8px; top:-12px; height:12px; pointer-events:none;
  background: repeating-linear-gradient(135deg, var(--hazard) 0 18px, #111 18px 36px);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.4));
  opacity:.9;
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}

/* Títulos “stencil industrial” */
h1,h2,h3{
  font-family:"Staatliches","Bebas Neue","Urbanist",system-ui;
  text-transform:uppercase; letter-spacing:.08em;
}
h1::after, h2::after{
  content:""; display:block; margin-top:6px; height:6px; width:160px;
  background: linear-gradient(90deg, var(--acid), var(--accent-2), var(--accent-3));
  filter: blur(.6px);
  border-radius:8px;
}

/* Cards de rol: sticker + cinta + overspray más agresivo */
.card-role{
  border:1px dashed rgba(255,255,255,.22);
  box-shadow: 0 20px 48px rgba(0,0,0,.55);
}
.card-role::before{ opacity:.28; }
.card-role::after{
  content:"";
  position:absolute; top:-12px; left:14px;
  width:92px; height:20px; border-radius:3px; transform: rotate(-7deg);
  background: linear-gradient(180deg,#fef08a,#fde047);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.card-role:hover{ transform: translateY(-5px) rotate(-.5deg); }
.card-role .badge{
  border:1px dashed rgba(255,255,255,.38);
  text-shadow: 0 0 6px rgba(255,255,255,.28);
}

/* Formulario: oscuro, claro y nítido */
.form-label{
  color:#eaf0f6; text-transform:uppercase; letter-spacing:.06em; font-weight:800;
}
.form-control, .form-select{
  background:#0a1018; color:#f3f4f6;
  border:1px dashed rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.form-control::placeholder{ color:#8da0b6; }
.form-control:focus, .form-select:focus{
  border-color: rgba(57,255,20,.6);
  box-shadow: 0 0 0 2px rgba(57,255,20,.35), 0 0 14px rgba(57,255,20,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Botones con “cap” y micro-vibración */
.btn{
  border:1px dashed rgba(255,255,255,.26);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.btn-dark{
  background:
    radial-gradient(220px 100px at 20% 20%, rgba(57,255,20,.10), transparent 65%),
    linear-gradient(180deg, #0d1420, #090f18);
}
.btn-dark:hover{ filter: brightness(1.12); transform: translateY(-1px); }
.btn-danger{
  background: linear-gradient(180deg, var(--blood), #b3003a);
  border-color: rgba(255,0,84,.4);
}

/* Chips de horario: sticker con glow tóxico al activo */
.slot-btn{
  background:#0c1420; color:#e5e7eb;
  border:1px dashed rgba(255,255,255,.26) !important;
  border-radius:999px;
}
.slot-btn.active{
  background:#07111d !important;
  border-color: rgba(57,255,20,.7) !important;
  box-shadow:
    0 0 12px rgba(57,255,20,.35),
    inset 0 0 14px rgba(57,255,20,.22);
}

/* Tabla admin más dura */
.table thead{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  text-transform:uppercase; letter-spacing:.06em;
}
.table tbody tr:nth-child(odd){ background: rgba(255,255,255,.03); }
.table tbody tr:hover{ background: rgba(57,255,20,.08); }

/* Dropdown oscuro sólido */
.dropdown-menu{
  background:#070d14; color:#f3f4f6;
  border:1px dashed rgba(255,255,255,.28);
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
}
.dropdown-item:hover{ background:#0f172a; }

/* Ticket sigue blanco pero con marco duro para contraste */
.ticket-view{
  border:2px solid #0b1220;
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
}
.ticket-view .small.text-muted{ color:#1f2937 !important; }

/* Micro-animación “glitch” para títulos al hacer hover */
@keyframes glitch {
  0% { text-shadow: 2px 0 var(--acid), -2px 0 var(--accent-2); }
  20%{ text-shadow: -2px -1px var(--acid), 2px 1px var(--accent-2); }
  40%{ text-shadow: 2px 1px var(--acid), -2px -1px var(--accent-2); }
  60%{ text-shadow: -2px 0 var(--acid), 2px 0 var(--accent-2); }
  80%{ text-shadow: 2px -1px var(--acid), -2px 1px var(--accent-2); }
  100%{ text-shadow: none; }
}
h1:hover, h2:hover{ animation: glitch .6s steps(20,end); }

/* Sticker wobble */
@keyframes sticker-wobble{ 0%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-1px) rotate(-.35deg)} 50%{transform:translateY(0) rotate(.25deg)} 75%{transform:translateY(-1px) rotate(.15deg)} 100%{transform:translateY(0) rotate(0)} }
.card-role:hover{ animation: sticker-wobble .45s ease-in-out; }

/* Sigue sin cortar dropdowns en tablas */
.table-responsive{ overflow: visible !important; }
.table .btn-group,.table .dropdown{ position: static !important; }
.dropdown-menu{ z-index:1080; }

/* Impresión: limpio y legible */
@media print{
  body::before, body::after{ display:none !important; }
}
/* ============================
   BOOKING • Modo lectura claro
   Se aplica solo a la caja .role-top (páginas de Peluquería/Manicurista/Spa)
   ============================ */

/* La tarjeta del rol pasa a fondo claro y bordes nítidos */
.role-top{
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  color:#0f172a !important;
  border:1px solid #e2e8f0 !important;
  box-shadow: 0 20px 44px rgba(2,6,23,.10) !important;
}

/* Títulos y textos claros (sin neón dentro del formulario) */
.role-top h1, .role-top h2, .role-top h3{ color:#0b1320 !important; text-shadow:none !important; }
.role-top p, .role-top .lead-muted, .role-top .text-help{ color:#475569 !important; }

/* Labels bien legibles */
.role-top .form-label{
  color:#0f172a !important;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
}

/* Inputs/selects en claro con alto contraste */
.role-top .form-control,
.role-top .form-select{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;    /* #cbd5e1 = slate-300 */
  border-radius:12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.role-top .form-control::placeholder{ color:#64748b !important; } /* slate-500 */
.role-top .form-control:focus,
.role-top .form-select:focus{
  outline: none !important;
  border-color:#0ea5e9 !important;         /* azul vivo */
  box-shadow: 0 0 0 3px rgba(14,165,233,.25) !important;
}

/* Chips de horarios: fondo claro, texto oscuro; activo = acento sólido */
.role-top .slot-btn{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
  border-radius:999px !important;
  padding:.45rem .85rem !important;
  font-weight:600 !important;
  box-shadow: 0 2px 8px rgba(2,6,23,.06) !important;
}
.role-top .slot-btn:hover{ background:#f8fafc !important; }
.role-top .slot-btn.active{
  background:#0f172a !important;          /* oscuro sólido */
  color:#ffffff !important;
  border-color:#0f172a !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.25) !important;
}

/* Botones de acción bien contrastados */
.role-top .btn-dark{
  background:#111827 !important;
  color:#fff !important;
  border:1px solid #0b1220 !important;
}
.role-top .btn-outline-secondary{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
}

/* Textos pequeños (horario de atención) un poco más oscuros */
.role-top .form-text{ color:#64748b !important; }

/* Si usas badges dentro del card del rol */
.role-top .badge{ background:#e2e8f0 !important; color:#0f172a !important; border:none !important; }

/* Reduce el “spray” detrás de la cabecera cuando estás en la caja del rol */
.role-top::before{ opacity:.06 !important; }

/* Responsivo: mejor spacing entre columnas en móvil */
@media (max-width: 576px){
  .role-top .row > [class^="col-"]{ margin-bottom:.75rem; }
}
/* ============================
   AUTH / SUPERFICIE CLARA Y NÍTIDA
   Para tarjetas de login/registro: .auth-card
   ============================ */
.auth-card{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #e2e8f0 !important;    /* slate-200 */
  border-radius:24px !important;
  box-shadow: 0 24px 60px rgba(2,6,23,.10) !important;
}

/* Título legible dentro del auth */
.auth-card h1, .auth-card h2, .auth-card h3, .auth-card .h5{
  color:#0b1320 !important;
  text-shadow:none !important;
}

/* Labels claras y fuertes */
.auth-card .form-label{
  color:#0f172a !important;
  font-weight:700; letter-spacing:.02em; text-transform:none;
}

/* Inputs / selects en claro (override del tema oscuro) */
.auth-card .form-control,
.auth-card .form-select{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;     /* slate-300 */
  border-radius:12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.auth-card .form-control::placeholder{ color:#64748b !important; }  /* slate-500 */
.auth-card .form-control:focus,
.auth-card .form-select:focus{
  outline:none !important;
  border-color:#0ea5e9 !important;         /* azul vivo */
  box-shadow: 0 0 0 3px rgba(14,165,233,.25) !important;
}

/* Botones con contraste real */
.auth-card .btn-dark{
  background:#111827 !important;
  color:#fff !important;
  border:1px solid #0b1220 !important;
}
.auth-card .btn-outline-secondary{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
}

/* Textos de ayuda / mensajes */
.auth-card .text-muted,
.auth-card .form-text{ color:#475569 !important; }  /* slate-600 */

/* Espaciado más cómodo en móviles */
@media (max-width: 576px){
  .auth-card .row > [class^="col-"]{ margin-bottom:.75rem; }
}
/* ============================
   ADMIN • Superficie clara y legible
   Aplica a cualquier tarjeta con .admin-surface
   ============================ */
.admin-surface{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #e2e8f0 !important;     /* slate-200 */
  border-radius:24px !important;
  box-shadow: 0 20px 44px rgba(2,6,23,.10) !important;
}

/* Títulos/texto dentro del admin claro */
.admin-surface h1, .admin-surface h2, .admin-surface h3, .admin-surface .h5{
  color:#0b1320 !important;
  text-shadow:none !important;
}
.admin-surface .text-muted, .admin-surface .form-text{ color:#475569 !important; } /* slate-600 */

/* Filtros: labels + campos */
.admin-surface .form-label{
  color:#0f172a !important;
  font-weight:700; letter-spacing:.02em; text-transform:none;
}
.admin-surface .form-control,
.admin-surface .form-select{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;     /* slate-300 */
  border-radius:12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.admin-surface .form-control::placeholder{ color:#64748b !important; } /* slate-500 */
.admin-surface .form-control:focus,
.admin-surface .form-select:focus{
  outline:none !important;
  border-color:#0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.25) !important;
}

/* Botón Filtrar bien contrastado */
.admin-surface .btn-dark{
  background:#111827 !important;
  color:#fff !important;
  border:1px solid #0b1220 !important;
}
.admin-surface .btn-outline-secondary{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
}

/* Tabla clara y limpia dentro del admin */
.admin-surface .table{ color:#0f172a !important; }
.admin-surface .table thead{
  background:#f1f5f9 !important;           /* slate-100 */
  color:#0f172a !important;
}
.admin-surface .table thead th,
.admin-surface .table tbody td{
  border-color:#e5e7eb !important;         /* gray-200 */
}

/* Dropdown del "Estado" claro y sin recortes */
.admin-surface .dropdown-menu{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
  box-shadow: 0 12px 26px rgba(2,6,23,.12) !important;
}
.admin-surface .dropdown-item:hover{ background:#f8fafc !important; }

/* Evitar que se corte el menú dentro de la tabla */
.table-responsive{ overflow: visible !important; }
.table .btn-group, .table .dropdown{ position: static !important; }
.dropdown-menu{ z-index: 1080; }
/* ===== Brand: Tag grafitero underground ===== */
.brand-underground{
  position: relative;
  display:inline-block;
  line-height: 1;
  /* combo de fuentes graff */
  font-family: "Sedgwick Ave Display","Rubik Dirt","Rubik Wet Paint","Staatliches",cursive;
  font-size: 1.65rem;
  letter-spacing: .5px;

  /* Relleno “sucio” con rayado + metal */
  color: transparent;
  background:
    repeating-linear-gradient( 8deg, #bfbfbf 0 2px, #d9d9d9 2px 4px, #cfcfcf 4px 6px),
    linear-gradient(90deg, #e5e7eb 0%, #bfbfbf 45%, #e5e7eb 100%);
  -webkit-background-clip: text;
          background-clip: text;

  /* Outline grueso tipo stencil */
  -webkit-text-stroke: 2px rgba(0,0,0,.85);

  /* Glow de spray (suave para legibilidad) */
  text-shadow:
    0 0 10px rgba(57,255,20,.32),
    0 0 26px rgba(168,85,247,.18);

  /* Anula posibles animaciones previas */
  animation: none !important;
}

/* Duplicado detrás con contorno más gordo (sombra dura) */
.brand-underground::after{
  content: attr(data-tag);
  position:absolute; inset:0; z-index:-1;
  color: transparent;
  -webkit-text-stroke: 6px rgba(0,0,0,.55);
  filter: blur(.2px) drop-shadow(0 3px 0 rgba(0,0,0,.35));
}

/* Spray/halo multicolor detrás (mezcla en pantalla) */
.brand-underground::before{
  content:"";
  position:absolute; inset:-10px -26px -16px -26px; z-index:-2;
  background:
    radial-gradient(160px 80px at 12% 60%, rgba(57,255,20,.26), transparent 60%),
    radial-gradient(140px 70px at 85% 40%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(160px 90px at 50% 0%, rgba(244,114,182,.20), transparent 65%);
  filter: blur(14px);
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.95;
}

/* Navbar oscuro: mantén contraste y tamaño responsable */
nav.navbar { overflow: visible; }
@media (max-width: 768px){
  .brand-underground{ font-size: 1.35rem; -webkit-text-stroke: 1.6px rgba(0,0,0,.85); }
  .brand-underground::after{ -webkit-text-stroke: 4.5px rgba(0,0,0,.55); }
}
/* =========================================================
   BARBER THEME — Azul · Blanco · Rojo
   Se aplica a todo el sitio (público + admin) con alta legibilidad
   ========================================================= */

/* ---------- Paleta ---------- */
:root{
  --barber-blue: #1d4ed8;       /* Blue 600 */
  --barber-blue-700:#18359f;
  --barber-red:  #dc2626;       /* Red 600 */
  --barber-red-700:#b91c1c;
  --barber-white:#ffffff;
  --ink-dark:#0f172a;
  --ink:#111827;
  --line:#e2e8f0;
}

/* ---------- Fondo con “barber pole” MUY sutil ---------- */
body::after{
  content:"";
  position:fixed; inset:-40px; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(45deg,
      rgba(29,78,216,.06) 0 22px,    /* azul */
      rgba(255,255,255,0) 22px 44px, /* blanco (transparente) */
      rgba(220,38,38,.06) 44px 66px, /* rojo */
      rgba(255,255,255,0) 66px 88px  /* blanco (transparente) */
    );
  filter: blur(14px);
  mix-blend-mode: screen;
}

/* ---------- Marca: texto con degradado azul-blanco-rojo y outline ---------- */
.brand-barber{
  position: relative;
  display:inline-block;
  font-family: "Staatliches","Bebas Neue",system-ui;
  font-size: 1.6rem;
  letter-spacing:.04em;
  color: transparent;
  background: linear-gradient(90deg, var(--barber-blue) 0%, #ffffff 50%, var(--barber-red) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-stroke: 1.25px rgba(0,0,0,.65);
  text-shadow: 0 0 10px rgba(29,78,216,.18), 0 0 10px rgba(220,38,38,.12);
}

/* ---------- Links / focus / acento ---------- */
a{ color: var(--barber-blue); }
a:hover{ color:#93c5fd; }
.form-control:focus, .form-select:focus{
  border-color: var(--barber-blue) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.25) !important;
}

/* ---------- Paneles claros y legibles (re-tema los “bg-white”) ---------- */
.bg-white:not(.ticket-view),
.urban-panel,
.admin-surface,
.auth-card,
.role-top{
  background:#ffffff !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  border-radius:24px !important;
  box-shadow: 0 22px 54px rgba(2,6,23,.10) !important;
}

/* “Barber stripe” en el borde superior de tarjetas de rol y admin */
.role-top, .admin-surface{
  position: relative;
}
.role-top::before, .admin-surface::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:6px;
  background: repeating-linear-gradient(45deg,
    var(--barber-blue) 0 14px, #ffffff 14px 28px, var(--barber-red) 28px 42px, #ffffff 42px 56px);
  border-top-left-radius:24px; border-top-right-radius:24px;
}

/* ---------- Etiquetas, inputs y textos dentro de superficies claras ---------- */
.role-top .form-label,
.admin-surface .form-label,
.auth-card .form-label{ color:var(--ink-dark) !important; font-weight:700; letter-spacing:.02em; }

.role-top .form-control, .role-top .form-select,
.admin-surface .form-control, .admin-surface .form-select,
.auth-card .form-control, .auth-card .form-select{
  background:#ffffff !important; color:var(--ink) !important;
  border:1px solid #cbd5e1 !important; border-radius:12px !important;
}

/* ---------- Botones: azul primario y rojo acción ---------- */
.btn-dark, .btn-primary{
  background: linear-gradient(180deg, var(--barber-blue), var(--barber-blue-700)) !important;
  color:#fff !important; border:1px solid var(--barber-blue-700) !important;
}
.btn-dark:hover, .btn-primary:hover{ filter: brightness(1.05); }
.btn-danger{
  background: linear-gradient(180deg, var(--barber-red), var(--barber-red-700)) !important;
  border-color: var(--barber-red-700) !important; color:#fff !important;
}
.btn-outline-secondary{
  background:#ffffff !important; color:var(--ink) !important;
  border:1px solid #cbd5e1 !important;
}

/* ---------- Chips de horarios (slot) ---------- */
.slot-btn{
  background:#ffffff !important; color:var(--ink) !important;
  border:1px solid #cbd5e1 !important; border-radius:999px !important;
  padding:.45rem .85rem !important; font-weight:600 !important;
  box-shadow: 0 2px 8px rgba(2,6,23,.06) !important;
}
.slot-btn:hover{ background:#f8fafc !important; }
.slot-btn.active{
  background: var(--barber-blue) !important; color:#ffffff !important;
  border-color: var(--barber-blue) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.22) !important;
}

/* ---------- Tabla (admin) con cabezal tricolor sutil ---------- */
.admin-surface .table{ color: var(--ink) !important; }
.admin-surface .table thead{
  background: linear-gradient(90deg,
    rgba(29,78,216,.10), rgba(255,255,255,.10) 50%, rgba(220,38,38,.10)) !important;
}
.admin-surface .table thead th,
.admin-surface .table tbody td{ border-color:#e5e7eb !important; }
.admin-surface .dropdown-menu{
  background:#ffffff !important; color:var(--ink) !important;
  border:1px solid #e5e7eb !important; box-shadow: 0 14px 30px rgba(2,6,23,.12) !important;
}

/* ---------- Badges de estados con la paleta ---------- */
.badge.status-pendiente{ background: linear-gradient(180deg,#94a3b8,#64748b); color:#fff; }
.badge.status-confirmado{ background: linear-gradient(180deg,#1d4ed8,#18359f); color:#fff; }
.badge.status-atendido{ background: linear-gradient(180deg,#16a34a,#065f46); color:#fff; }
.badge.status-cancelado{ background: linear-gradient(180deg,#dc2626,#b91c1c); color:#fff; }

/* ---------- Ticket (comprobante) en blanco con acentos barber ---------- */
.ticket-view{
  background:#ffffff !important; color:var(--ink) !important;
  border:1px solid #e5e7eb !important; border-radius:24px !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.12) !important;
}
.ticket-view .small.text-muted{ color:#334155 !important; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.ticket-view .fw-semibold{ color:#111827 !important; font-weight:800; }
.ticket-view .border{ border-color:#e5e7eb !important; border-radius:12px !important; }
.ticket-view .fw-semibold code{ color:var(--ink-dark) !important; }
.ticket-view::before{
  content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:6px;
  background: repeating-linear-gradient(45deg,
    var(--barber-blue) 0 14px, #ffffff 14px 28px, var(--barber-red) 28px 42px, #ffffff 42px 56px);
  border-top-left-radius:24px; border-top-right-radius:24px;
}

/* ---------- Navbar base (sutil, sin perder el tema) ---------- */
nav.navbar{
  background: #0d1117 !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 0 0 rgba(29,78,216,.25), 0 0 18px rgba(220,38,38,.10) inset;
}

/* ---------- Impresión limpia ---------- */
@media print{
  body::after{ display:none !important; }
  .admin-surface::before, .role-top::before, .ticket-view::before{ display:none !important; }
}
/* =========================================================
   INDEX — Tema Barber (Azul · Blanco · Rojo)
   ========================================================= */

/* Hero claro con franja barber en el borde superior */
.barber-hero{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow: 0 22px 54px rgba(2,6,23,.10);
  position: relative;
}
.barber-hero::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:8px;
  background: repeating-linear-gradient(45deg,
    var(--barber-blue) 0 16px, #ffffff 16px 32px,
    var(--barber-red) 32px 48px, #ffffff 48px 64px);
  border-top-left-radius:24px; border-top-right-radius:24px;
}

/* Título con degradado barber y fino trazo */
.barber-title{
  background: linear-gradient(90deg, var(--barber-blue), #ffffff 50%, var(--barber-red));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
  -webkit-text-stroke: .6px rgba(0,0,0,.35);
}

/* Tarjetas de servicio (sticker limpio) */
.barber-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
  position: relative;
  transition: transform .16s ease, box-shadow .16s ease;
  overflow:hidden;
}
.barber-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(2,6,23,.14);
}

/* Franja barber arriba de cada card */
.barber-stripe{
  position:absolute; inset:0 0 auto 0; height:6px;
  background: repeating-linear-gradient(45deg,
    var(--barber-blue) 0 14px, #ffffff 14px 28px,
    var(--barber-red) 28px 42px, #ffffff 42px 56px);
}

/* Badge del slug con azul sólido */
.barber-badge{
  background: var(--barber-blue) !important;
  color:#fff !important;
  border:none !important;
  font-weight:700;
  letter-spacing:.04em;
  border-radius:10px;
}

/* Hover glow sutil en cards */
.card-role::before{ opacity:.08 !important; filter: blur(18px) !important; }
.card-role:hover::before{ opacity:.14 !important; }

/* Ajustes responsivos */
@media (max-width: 575.98px){
  .barber-title{ -webkit-text-stroke: .5px rgba(0,0,0,.35); }
  .barber-hero::before{ height:6px; }
  .barber-card{ border-radius:18px; }
}
/* =========================================================
   ROL (peluquero/manicurista/spa) — Tema BARBER
   Azul · Blanco · Rojo — alto contraste y legibilidad
   ========================================================= */

/* Panel del formulario en modo claro con franja barber arriba */
.role-top{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid var(--line, #e2e8f0) !important;
  border-radius:24px !important;
  box-shadow: 0 22px 54px rgba(2,6,23,.10) !important;
  position: relative;
}
.role-top::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:8px;
  background: repeating-linear-gradient(45deg,
    var(--barber-blue, #1d4ed8) 0 16px, #ffffff 16px 32px,
    var(--barber-red, #dc2626) 32px 48px, #ffffff 48px 64px);
  border-top-left-radius:24px; border-top-right-radius:24px;
}

/* Título y textos */
.role-top h1, .role-top h2, .role-top h3{ color:#0b1320 !important; text-shadow:none !important; }
.role-top p, .role-top .text-muted, .role-top .form-text{ color:#475569 !important; }

/* Labels fuertes y claras */
.role-top .form-label{
  color:#0f172a !important;
  font-weight:700; letter-spacing:.02em; text-transform:none;
}

/* Inputs / selects en claro con focus azul */
.role-top .form-control,
.role-top .form-select{
  background:#ffffff !important; color:#0f172a !important;
  border:1px solid #cbd5e1 !important;   /* slate-300 */
  border-radius:12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.role-top .form-control::placeholder{ color:#64748b !important; }
.role-top .form-control:focus,
.role-top .form-select:focus{
  outline:none !important;
  border-color: var(--barber-blue, #1d4ed8) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.25) !important;
}

/* Chips de horarios: blancos; activo = azul sólido */
.role-top .slot-btn{
  background:#ffffff !important; color:#0f172a !important;
  border:1px solid #cbd5e1 !important; border-radius:999px !important;
  padding:.45rem .85rem !important; font-weight:600 !important;
  box-shadow: 0 2px 8px rgba(2,6,23,.06) !important;
}
.role-top .slot-btn:hover{ background:#f8fafc !important; }
.role-top .slot-btn.active{
  background: var(--barber-blue, #1d4ed8) !important;
  color:#ffffff !important; border-color: var(--barber-blue, #1d4ed8) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.22) !important;
}

/* Botones del formulario en paleta barber */
.role-top .btn-dark, .role-top .btn-primary{
  background: linear-gradient(180deg, var(--barber-blue, #1d4ed8), #18359f) !important;
  color:#fff !important; border:1px solid #18359f !important;
}
.role-top .btn-outline-secondary{
  background:#ffffff !important;
  color: var(--barber-blue, #1d4ed8) !important;
  border:1px solid var(--barber-blue, #1d4ed8) !important;
}
.role-top .btn-outline-secondary:hover{
  background: rgba(29,78,216,.08) !important;
}

/* Badge dentro de la tarjeta (si la usas) */
.role-top .badge{
  background: var(--barber-blue, #1d4ed8) !important;
  color:#fff !important; border:none !important; font-weight:700;
  letter-spacing:.04em; border-radius:10px;
}

/* Responsivo: mejor aire en móvil */
@media (max-width: 576px){
  .role-top .row > [class^="col-"]{ margin-bottom:.75rem; }
  .role-top::before{ height:6px; }
}
/* ===== ADMIN LOGIN • Barber theme ===== */
.barber-auth{
  position: relative;
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #e2e8f0 !important;
  border-radius:24px !important;
  box-shadow: 0 22px 54px rgba(2,6,23,.10) !important;
}

/* franja barber arriba */
.barber-auth::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:8px;
  background: repeating-linear-gradient(45deg,
    var(--barber-blue, #1d4ed8) 0 16px, #ffffff 16px 32px,
    var(--barber-red,  #dc2626) 32px 48px, #ffffff 48px 64px);
  border-top-left-radius:24px; border-top-right-radius:24px;
}

/* Título y etiquetas legibles */
.barber-auth h1, .barber-auth .h5 { color:#0b1320 !important; text-shadow:none !important; }
.barber-auth .form-label{
  color:#0f172a !important; font-weight:700; letter-spacing:.02em; text-transform:none;
}

/* Inputs claros + focus azul */
.barber-auth .form-control, .barber-auth .form-select{
  background:#ffffff !important; color:#0f172a !important;
  border:1px solid #cbd5e1 !important; border-radius:12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.barber-auth .form-control::placeholder{ color:#64748b !important; }
.barber-auth .form-control:focus, .barber-auth .form-select:focus{
  outline:none !important;
  border-color: var(--barber-blue, #1d4ed8) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.25) !important;
}

/* Botones con la paleta barber */
.barber-auth .btn-dark{
  background: linear-gradient(180deg, var(--barber-blue, #1d4ed8), #18359f) !important;
  border:1px solid #18359f !important; color:#fff !important;
}
.barber-auth .btn-outline-secondary{
  background:#ffffff !important;
  color: var(--barber-blue, #1d4ed8) !important;
  border:1px solid var(--barber-blue, #1d4ed8) !important;
}
.barber-auth .btn-outline-secondary:hover{ background: rgba(29,78,216,.08) !important; }

/* Nota inferior más oscura y nítida */
.barber-auth .text-muted, .barber-auth .form-text{ color:#475569 !important; }
/* =========================================================
   TICKET — Underground Barber (oscuro + barber stripe)
   ========================================================= */
.ticket-ug{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(29,78,216,.10), transparent 60%),
    linear-gradient(180deg, #0b0f12, #0c111a 70%, #0a0f17);
  color:#e5e7eb !important;
  border:1px dashed rgba(255,255,255,.18) !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 64px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Franja barber superior */
.ticket-ug::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:8px;
  background: repeating-linear-gradient(45deg,
    #1d4ed8 0 16px, #ffffff 16px 32px,
    #dc2626 32px 48px, #ffffff 48px 64px);
  border-top-left-radius:24px; border-top-right-radius:24px;
  opacity:.95; pointer-events:none;
}

/* Sutil “malla” + spray */
.ticket-ug::after{
  content:"";
  position:absolute; inset:-10px; pointer-events:none; z-index:0;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<defs><pattern id='f' width='20' height='20' patternUnits='userSpaceOnUse'>\
<path d='M0 10 Q10 0 20 10 M0 10 Q10 20 20 10' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.2'/></pattern></defs>\
<rect width='100%' height='100%' fill='url(%23f)'/></svg>") center/240px 240px repeat,
    radial-gradient(220px 140px at 8% 16%, rgba(57,255,20,.10), transparent 60%),
    radial-gradient(220px 140px at 92% 10%, rgba(168,85,247,.08), transparent 60%);
  mix-blend-mode: overlay;
}

/* Título stencil */
.ticket-ug h1, .ticket-ug .h3, .ticket-ug .h4{
  font-family:"Staatliches","Bebas Neue",system-ui;
  letter-spacing:.08em; text-transform:uppercase;
  color:#f3f4f6 !important; text-shadow: 0 0 12px rgba(0,0,0,.35);
}

/* “Stickers” de datos (las cajas .border que ya tienes) */
.ticket-ug .border{
  position: relative; z-index:1;
  background: rgba(255,255,255,.04) !important;
  border:1px dashed rgba(255,255,255,.20) !important;
  border-radius: 16px !important;
  color:#e5e7eb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.35);
}
.ticket-ug .small.text-muted{
  color:#9fb0c0 !important;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.ticket-ug .fw-semibold{ color:#ffffff !important; font-weight:800; }

/* Código del ticket: look industrial */
.ticket-ug code.ticket-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight:900; letter-spacing:.06em; color:#fff;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:.15rem .35rem; border-radius:.35rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Línea perforada decorativa antes del botón */
.ticket-ug .btn:first-of-type::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: 64px; width: 86%; height: 10px;
  background:
    radial-gradient(circle, #0b0f12 0 4px, transparent 5px) left/22px 10px repeat-x,
    linear-gradient(#94a3b8,#94a3b8) center/100% 1px no-repeat;
  opacity:.45; pointer-events:none;
}

/* Botones: azul barber con glow */
.ticket-ug .btn-primary, .ticket-ug .btn-dark{
  background: linear-gradient(180deg, #1d4ed8, #18359f) !important;
  border:1px solid #18359f !important; color:#fff !important;
  box-shadow: 0 12px 26px rgba(2,6,23,.35);
}
.ticket-ug .btn-primary:hover{ filter: brightness(1.06); transform: translateY(-1px); }

/* Botón Imprimir con “cinta” */
.ticket-ug .btn-print{
  position:absolute; right:12px; top:12px; z-index:2;
  background:#f8fafc !important; color:#0f172a !important; border:1px solid #e2e8f0 !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}
.ticket-ug .btn-print::after{
  content:""; position:absolute; left:50%; top:-10px; transform:translateX(-50%) rotate(-4deg);
  width:86px; height:16px; border-radius:3px;
  background: linear-gradient(180deg,#fef08a,#fde047);
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
}

/* Impresión: limpio en blanco y negro */
@media print{
  .ticket-ug{
    background:#fff !important; color:#000 !important;
    border:0 !important; box-shadow:none !important;
  }
  .ticket-ug::before, .ticket-ug::after, .ticket-ug .btn-print{ display:none !important; }
  .ticket-ug .border{
    background:#fff !important; color:#000 !important;
    border:1px solid #000 !important; box-shadow:none !important;
  }
  .ticket-ug .small.text-muted, .ticket-ug .fw-semibold, .ticket-ug code.ticket-code{ color:#000 !important; }
}