/* ============================================================================
   BEWE-LIKE DESIGN SYSTEM — estilos.css
   Hoja de estilos completa para una réplica de un SaaS de gestión de
   reservas/citas/clases (tipo Bewe). Colores, tipografía y layout extraídos
   de tokens reales de app.bewe.co.

   Prefijo de componentes: .bw-
   Autor: Design System (réplica). Uso: producción.
   ----------------------------------------------------------------------------
   ÍNDICE
   01. Import de fuentes (Montserrat)
   02. :root — Variables (colores, tipografía, espaciados, radios, sombras…)
   03. Reset / Normalize básico
   04. Estilos base (body, tipografía, enlaces, títulos)
   05. Utilidades (layout helpers, texto, espaciado)
   06. Layout de la app (sidebar + panel secundario + topbar + contenido)
   07. Sidebar de iconos + tooltips
   08. Panel secundario de navegación (grupos)
   09. Topbar (buscador, notificaciones, avatar, botón COBRAR)
   10. Botones (.bw-btn y variantes)
   11. Formularios (inputs, selects, textarea, grupos con label lateral)
   12. Tablas (.bw-table)
   13. Tarjetas / paneles (.bw-card)
   14. Badges / pills de estado
   15. Tabs (pestañas)
   16. Tarjetas KPI (pastel)
   17. Buscador full-width
   18. Popover / Modal
   19. Calendario (eventos con borde izquierdo de color)
   20. Ficha de dos columnas
   21. Estados accesibles (focus, disabled)
   22. Responsive
   ========================================================================== */


/* ============================================================================
   01. IMPORT DE FUENTES
   ========================================================================== */
/* La tipografia se carga desde assets/montserrat.css (auto-alojada).
   El @import original a fonts.googleapis.com se ha eliminado: bloqueaba
   el render, dejaba la app en Arial sin internet y enviaba la IP de
   cada visitante a Google sin consentimiento. */


/* ============================================================================
   02. :root — VARIABLES CSS (TOKENS)
   ========================================================================== */
:root {
  /* ---- Tipografía ----
     Fase 1.B: Open Sans a 13px, la del panel de referencia. Montserrat
     queda de respaldo por si el woff2 no carga. Subir de 12 a 13px no es
     cosmético: con 12px TODO el texto entra en la categoría "texto
     normal" de WCAG y ni siquiera los titulares pueden acogerse al
     umbral relajado de 3:1. */
  --bw-font-family: 'Open Sans', 'Montserrat', Arial, Helvetica, sans-serif;
  --bw-fs-base: 13px;        /* tamaño base real */
  --bw-fs-xs: 10.5px;
  --bw-fs-sm: 11.5px;
  --bw-fs-md: 13px;
  --bw-fs-lg: 14.5px;        /* texto secundario / párrafos */
  --bw-fs-xl: 16px;
  --bw-fs-2xl: 20px;
  --bw-fs-3xl: 26px;         /* título de página */
  --bw-fs-4xl: 32px;
  --bw-lh-base: 19px;
  --bw-lh-tight: 1.25;
  --bw-lh-normal: 1.5;
  --bw-fw-normal: 400;
  --bw-fw-medium: 500;       /* enlaces, botones */
  --bw-fw-semibold: 600;
  --bw-fw-bold: 700;

  /* ---- Colores de marca / paleta real ---- */
  --bw-white: #FFFFFF;

  /* Azul marino oscuro (botón principal, títulos fuertes) */
  --bw-navy: #0A2030;        /* rgb(10,32,48) */
  --bw-navy-2: #092C42;      /* rgb(9,44,66) */
  --bw-navy-hover: #0F2E44;

  /* Texto */
  --bw-text: #1C293B;        /* texto principal */
  --bw-text-muted: #66788A;  /* texto secundario gris azulado */
  --bw-text-invert: #FFFFFF;

  /* ---- Acento primario TEAL / cian (color de marca) ----
     Los tonos originales de Bewe no llegan a WCAG AA:
       #22A9B0 sobre blanco  ->  2,85:1   (minimo exigido 4,5:1)
       blanco sobre #22A9B0  ->  2,85:1
     Y con la base tipografica en 12px TODO el texto cuenta como
     "texto normal" (el umbral relajado de 3:1 solo aplica a >=18,66px
     en negrita o >=24px), asi que no hay excepcion posible.

     Solucion: se conservan los tonos originales para RELLENOS
     DECORATIVOS (eventos del calendario, sliders, bordes de foco) y se
     introduce --bw-teal-text para todo lo que lleve texto encima o sea
     texto: enlaces, pestanas activas, botones de acento. La identidad
     visual se mantiene, el contraste sube a 6,07:1.

     NOTA (Fase 1.B): estos valores son ya solo el RESPALDO. La paleta
     real la calcula Domain\Tema a partir de los colores de marca del
     negocio y se inyecta como variables en el <head>, asi que estas
     declaraciones solo se ven si el tema no llega a cargarse. */
  --bw-teal: #01A2B4;        /* rgb(1,162,180) */
  --bw-teal-2: #22A9B0;      /* rgb(34,169,176) — solo relleno decorativo */
  --bw-teal-text: #016D78;   /* 6,07:1 sobre blanco — texto, iconos y botones */
  --bw-teal-dark: #015A63;   /* hover del anterior */
  --bw-teal-soft: #E2F5F7;   /* fondo teal muy suave (estados activos) */

  /* Fondos gris claro */
  --bw-bg: #FFFFFF;
  --bw-bg-100: #F9F9F9;
  --bw-bg-200: #F5F5F5;      /* panel secundario, filas alternas */
  --bw-bg-300: #F0F2F5;      /* paneles */
  --bw-bg-400: #E9ECF0;

  /* Bordes */
  --bw-border: #E4E6EB;
  --bw-border-strong: #D5D9DF;
  --bw-border-input: #DCE0E6;

  /* Gris secundario (botón cancelar).
     El #9AA5B1 original daba 2,50:1 con texto blanco encima. */
  --bw-gray: #6B7684;        /* 4,8:1 con texto blanco */
  --bw-gray-dark: #58626E;
  --bw-gray-light: #9AA5B1;  /* tono original, solo para bordes y iconos */

  /* ---- Colores auxiliares / semánticos ---- */
  --bw-magenta: #EC008C;     /* marketing */
  --bw-green: #3BA55C;
  --bw-green-soft: #E4F3E7;  /* chat IA "Linda" */
  --bw-red: #E4572E;
  --bw-red-soft: #FCE9E4;
  --bw-yellow: #F4B740;
  --bw-yellow-soft: #FDF3DD;
  --bw-orange: #F5843C;
  --bw-orange-soft: #FCE9DC;
  --bw-purple: #7B61FF;
  --bw-purple-soft: #ECE8FF;
  --bw-blue: #3E7BFA;
  --bw-blue-soft: #E4EDFF;

  /* KPI pastel (dashboard).
     Los tonos de texto originales daban entre 3,10:1 y 3,95:1 sobre su
     propio fondo pastel; se oscurecen lo justo para superar 4,5:1
     manteniendo el mismo matiz. El azul y el morado ya cumplian. */
  --bw-kpi-blue-bg: #E4EDFF;    --bw-kpi-blue-fg: #2C5BCC;   /* 5,14:1 — sin cambios */
  --bw-kpi-yellow-bg: #FDF3DD;  --bw-kpi-yellow-fg: #8A6209;  /* era #B4820F (3,10:1) */
  --bw-kpi-orange-bg: #FCE9DC;  --bw-kpi-orange-fg: #A04D12;  /* era #C9631C (3,37:1) */
  --bw-kpi-purple-bg: #ECE8FF;  --bw-kpi-purple-fg: #5B44CC;  /* sin cambios */
  --bw-kpi-teal-bg: #E2F5F7;    --bw-kpi-teal-fg: #016069;    /* era #018492 (3,95:1) */

  /* Estados semánticos.
     danger y magenta se oscurecen por el mismo motivo: con el #E4572E
     original, el boton Eliminar daba 3,68:1 y el badge 3,14:1. */
  --bw-success: #2E8449;
  --bw-warning: #8A6209;
  --bw-danger: #B8431C;
  --bw-info: #016D78;

  /* ---- Espaciado (escala base 4px) ---- */
  --bw-sp-0: 0;
  --bw-sp-1: 4px;
  --bw-sp-2: 8px;
  --bw-sp-3: 12px;
  --bw-sp-4: 16px;
  --bw-sp-5: 20px;
  --bw-sp-6: 24px;
  --bw-sp-7: 32px;
  --bw-sp-8: 40px;
  --bw-sp-9: 48px;
  --bw-sp-10: 64px;

  /* ---- Radios ---- */
  --bw-radius-sm: 4px;
  --bw-radius-md: 6px;
  --bw-radius-lg: 10px;      /* tarjetas */
  --bw-radius-xl: 16px;
  --bw-radius-pill: 20px;    /* botón pastilla COBRAR */
  --bw-radius-full: 999px;

  /* ---- Sombras (muy sutiles, estilo Bewe) ---- */
  --bw-shadow-soft: rgba(228, 226, 226, 0.9) -2px -2px 1.4px 0,
                    rgba(228, 226, 226, 0.9) 2px 2px 1.4px 0;
  --bw-shadow-card: 0 1px 3px rgba(28, 41, 59, 0.06),
                    0 1px 2px rgba(28, 41, 59, 0.04);
  --bw-shadow-md: 0 4px 12px rgba(28, 41, 59, 0.10);
  --bw-shadow-lg: 0 8px 30px rgba(28, 41, 59, 0.16);
  --bw-shadow-popover: 0 10px 40px rgba(9, 44, 66, 0.20);

  /* ---- Layout ---- */
  --bw-sidebar-w: 65px;
  --bw-subnav-w: 240px;
  --bw-topbar-h: 60px;

  /* ---- Transiciones ---- */
  --bw-transition: 160ms ease;
  --bw-transition-slow: 260ms ease;

  /* ---- Foco accesible ---- */
  --bw-focus-ring: 0 0 0 3px rgba(1, 162, 180, 0.35);

  /* ---- z-index ---- */
  --bw-z-sidebar: 100;
  --bw-z-subnav: 90;
  --bw-z-topbar: 80;
  --bw-z-popover: 500;
  --bw-z-modal: 1000;
  --bw-z-tooltip: 1100;
  /* Los avisos van por ENCIMA de los modales: casi todas las acciones
     del panel ocurren dentro de uno, y un aviso por debajo no se ve. */
  --bw-z-aviso: 1200;

  /* ---- Breakpoints (referencia; usados en media queries) ---- */
  --bw-bp-sm: 640px;
  --bw-bp-md: 900px;
  --bw-bp-lg: 1200px;
}


/* ============================================================================
   03. RESET / NORMALIZE BÁSICO
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100vh;
  line-height: var(--bw-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--bw-fw-semibold); line-height: var(--bw-lh-tight); }

hr { border: none; border-top: 1px solid var(--bw-border); }


/* ============================================================================
   04. ESTILOS BASE
   ========================================================================== */
body {
  font-family: var(--bw-font-family);
  font-size: var(--bw-fs-base);
  line-height: var(--bw-lh-base);
  color: var(--bw-text);
  background: var(--bw-bg-200);
}

p { font-size: var(--bw-fs-lg); color: var(--bw-text); }

.bw-h1 { font-size: var(--bw-fs-3xl); font-weight: var(--bw-fw-bold);   color: var(--bw-navy-2); }
.bw-h2 { font-size: var(--bw-fs-2xl); font-weight: var(--bw-fw-semibold); color: var(--bw-navy-2); }
.bw-h3 { font-size: var(--bw-fs-xl);  font-weight: var(--bw-fw-semibold); color: var(--bw-text); }
.bw-h4 { font-size: var(--bw-fs-lg);  font-weight: var(--bw-fw-semibold); color: var(--bw-text); }

.bw-page-title {
  font-size: var(--bw-fs-3xl);
  font-weight: var(--bw-fw-bold);
  color: var(--bw-navy-2);
  letter-spacing: -0.01em;
}

.bw-link {
  color: var(--bw-teal-text);
  font-weight: var(--bw-fw-medium);
  transition: color var(--bw-transition);
}
.bw-link:hover { color: var(--bw-teal-dark); text-decoration: underline; }

.bw-text-muted   { color: var(--bw-text-muted); }
.bw-text-teal    { color: var(--bw-teal-text); }
.bw-text-navy    { color: var(--bw-navy-2); }
.bw-text-danger  { color: var(--bw-danger); }
.bw-text-success { color: var(--bw-success); }

/* Etiqueta de sección en mayúsculas (usada en subnav, formularios) */
.bw-section-label {
  font-size: var(--bw-fs-sm);
  font-weight: var(--bw-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-text-muted);
}


/* ============================================================================
   05. UTILIDADES
   ========================================================================== */
.bw-flex        { display: flex; }
.bw-inline-flex { display: inline-flex; }
.bw-grid        { display: grid; }
.bw-items-center { align-items: center; }
.bw-items-start  { align-items: flex-start; }
.bw-items-end    { align-items: flex-end; }
.bw-justify-between { justify-content: space-between; }
.bw-justify-center  { justify-content: center; }
.bw-justify-end     { justify-content: flex-end; }
.bw-flex-col    { flex-direction: column; }
.bw-flex-wrap   { flex-wrap: wrap; }
.bw-flex-1      { flex: 1 1 auto; }
.bw-gap-1 { gap: var(--bw-sp-1); }
.bw-gap-2 { gap: var(--bw-sp-2); }
.bw-gap-3 { gap: var(--bw-sp-3); }
.bw-gap-4 { gap: var(--bw-sp-4); }
.bw-gap-6 { gap: var(--bw-sp-6); }

.bw-mt-2 { margin-top: var(--bw-sp-2); }
.bw-mt-4 { margin-top: var(--bw-sp-4); }
.bw-mt-6 { margin-top: var(--bw-sp-6); }
.bw-mb-2 { margin-bottom: var(--bw-sp-2); }
.bw-mb-4 { margin-bottom: var(--bw-sp-4); }
.bw-mb-6 { margin-bottom: var(--bw-sp-6); }

.bw-w-full { width: 100%; }
.bw-text-center { text-align: center; }
.bw-text-right  { text-align: right; }
.bw-uppercase   { text-transform: uppercase; }
.bw-nowrap      { white-space: nowrap; }
.bw-hidden      { display: none !important; }

.bw-divider { height: 1px; background: var(--bw-border); border: 0; margin: var(--bw-sp-4) 0; }


/* ============================================================================
   06. LAYOUT DE LA APP
   Estructura: [sidebar iconos] [panel secundario] [ (topbar) + contenido ]
   ========================================================================== */
.bw-app {
  display: grid;
  grid-template-columns: var(--bw-sidebar-w) var(--bw-subnav-w) 1fr;
  grid-template-rows: 100vh;
  min-height: 100vh;
  background: var(--bw-bg);
}

/* Variante sin panel secundario (secciones sin submódulos) */
.bw-app--no-subnav {
  grid-template-columns: var(--bw-sidebar-w) 1fr;
}

.bw-main {
  display: flex;
  flex-direction: column;
  min-width: 0;              /* permite que las tablas hagan scroll */
  height: 100vh;
  overflow: hidden;
}

.bw-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--bw-sp-6) var(--bw-sp-7);
  background: var(--bw-bg);
}

.bw-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-sp-4);
  margin-bottom: var(--bw-sp-6);
  flex-wrap: wrap;
}

/* Envuelve: en movil, tres botones con el nombre del mes dentro se salen
   de la pantalla si se obligan a ir en una sola linea. */
.bw-content-actions { display: flex; align-items: center; gap: var(--bw-sp-3); flex-wrap: wrap; }


/* ============================================================================
   07. SIDEBAR DE ICONOS + TOOLTIPS
   ========================================================================== */
.bw-sidebar {
  grid-row: 1 / -1;
  width: var(--bw-sidebar-w);
  background: var(--bw-white);
  border-right: 1px solid var(--bw-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--bw-sp-3) 0;
  gap: var(--bw-sp-1);
  z-index: var(--bw-z-sidebar);
}

.bw-sidebar__logo {
  width: 38px;
  height: 38px;
  border-radius: var(--bw-radius-lg);
  background: var(--bw-navy-2);
  color: var(--bw-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bw-fw-bold);
  font-size: var(--bw-fs-xl);
  margin-bottom: var(--bw-sp-3);
}

.bw-sidebar__sep {
  width: 32px;
  height: 1px;
  background: var(--bw-border);
  margin: var(--bw-sp-2) 0;
}

.bw-nav-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--bw-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bw-text-muted);
  font-size: 20px;
  transition: background var(--bw-transition), color var(--bw-transition);
}
.bw-nav-icon:hover { background: var(--bw-bg-200); color: var(--bw-text); }

.bw-nav-icon.is-active {
  color: var(--bw-teal-text);
  background: var(--bw-teal-soft);
}
.bw-nav-icon.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--bw-teal-2);
}

/* Tooltip al pasar el ratón */
.bw-nav-icon__tip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  transform-origin: left center;
  background: var(--bw-navy-2);
  color: var(--bw-white);
  padding: 5px 10px;
  border-radius: var(--bw-radius-md);
  font-size: var(--bw-fs-sm);
  font-weight: var(--bw-fw-medium);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bw-transition), transform var(--bw-transition);
  z-index: var(--bw-z-tooltip);
}
.bw-nav-icon__tip::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--bw-navy-2);
}
.bw-nav-icon:hover .bw-nav-icon__tip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}


/* ============================================================================
   08. PANEL SECUNDARIO DE NAVEGACIÓN
   ========================================================================== */
.bw-subnav {
  grid-row: 1 / -1;
  width: var(--bw-subnav-w);
  background: var(--bw-bg-200);
  border-right: 1px solid var(--bw-border);
  overflow-y: auto;
  padding: var(--bw-sp-5) 0;
  z-index: var(--bw-z-subnav);
}

.bw-subnav__title {
  font-size: var(--bw-fs-2xl);
  font-weight: var(--bw-fw-bold);
  color: var(--bw-navy-2);
  padding: 0 var(--bw-sp-5) var(--bw-sp-4);
}

.bw-subnav__group { margin-bottom: var(--bw-sp-5); }

.bw-subnav__group-label {
  font-size: var(--bw-fs-sm);
  font-weight: var(--bw-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bw-text-muted);
  padding: 0 var(--bw-sp-5) var(--bw-sp-2);
}

.bw-subnav__link {
  display: block;
  padding: 9px var(--bw-sp-5);
  font-size: var(--bw-fs-lg);
  color: var(--bw-text);
  border-left: 3px solid transparent;
  transition: background var(--bw-transition), color var(--bw-transition);
}
.bw-subnav__link:hover { background: var(--bw-bg-300); }

.bw-subnav__link.is-active {
  color: var(--bw-teal-text);
  font-weight: var(--bw-fw-semibold);
  border-left-color: var(--bw-teal-2);
  background: var(--bw-white);
}


/* ============================================================================
   09. TOPBAR
   ========================================================================== */
.bw-topbar {
  height: var(--bw-topbar-h);
  flex: 0 0 var(--bw-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-sp-4);
  padding: 0 var(--bw-sp-7);
  background: var(--bw-white);
  border-bottom: 1px solid var(--bw-border);
  z-index: var(--bw-z-topbar);
}

.bw-topbar__title {
  font-size: var(--bw-fs-2xl);
  font-weight: var(--bw-fw-bold);
  color: var(--bw-navy-2);
}

.bw-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--bw-sp-4);
}

.bw-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--bw-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bw-text-muted);
  font-size: 18px;
  transition: background var(--bw-transition), color var(--bw-transition);
}
.bw-icon-btn:hover { background: var(--bw-bg-200); color: var(--bw-text); }

.bw-icon-btn__dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: var(--bw-radius-full);
  background: var(--bw-magenta);
  border: 2px solid var(--bw-white);
}

/* Avatar */
.bw-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--bw-radius-full);
  background: var(--bw-teal-soft);
  color: var(--bw-teal-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--bw-fw-semibold);
  font-size: var(--bw-fs-lg);
  overflow: hidden;
  flex: 0 0 auto;
}
.bw-avatar--sm { width: 28px; height: 28px; font-size: var(--bw-fs-sm); }
.bw-avatar--lg { width: 56px; height: 56px; font-size: var(--bw-fs-xl); }
.bw-avatar img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================================
   10. BOTONES
   ========================================================================== */
.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bw-sp-2);
  font-family: var(--bw-font-family);
  font-size: var(--bw-fs-md);
  font-weight: var(--bw-fw-medium);
  line-height: 1;
  padding: 9px 18px;
  border-radius: var(--bw-radius-md);
  border: 1px solid transparent;
  color: var(--bw-white);
  background: var(--bw-teal-text);
  cursor: pointer;
  transition: background var(--bw-transition), color var(--bw-transition),
              border-color var(--bw-transition), box-shadow var(--bw-transition),
              transform var(--bw-transition);
  white-space: nowrap;
  user-select: none;
}
.bw-btn:hover { transform: translateY(-1px); }
.bw-btn:active { transform: translateY(0); }

/* Variante ACENTO teal (Editar / Modificar / Guardar) — es el default */
.bw-btn--accent { background: var(--bw-teal-text); color: var(--bw-white); }
.bw-btn--accent:hover { background: var(--bw-teal-dark); }

/* Variante PRIMARY oscura (COBRAR) */
.bw-btn--primary { background: var(--bw-navy); color: var(--bw-white); }
.bw-btn--primary:hover { background: var(--bw-navy-hover); }

/* Pastilla (COBRAR real: radius 20px, padding ancho, mayúsculas) */
.bw-btn--pill {
  border-radius: var(--bw-radius-pill);
  padding: 8px 40px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--bw-fw-medium);
}

/* Outline teal (Nuevo cliente / Nuevo servicio) */
.bw-btn--outline {
  background: var(--bw-white);
  color: var(--bw-teal-text);
  border-color: var(--bw-teal-text);
}
.bw-btn--outline:hover { background: var(--bw-teal-soft); color: var(--bw-teal-dark); }

/* Secundario gris (Cancelar) */
.bw-btn--secondary { background: var(--bw-gray); color: var(--bw-white); }
.bw-btn--secondary:hover { background: var(--bw-gray-dark); }

/* Ghost (enlace-botón, ej. "Descargar en Excel") */
.bw-btn--ghost {
  background: transparent;
  color: var(--bw-teal-text);
  padding: 8px 10px;
  font-weight: var(--bw-fw-medium);
}
.bw-btn--ghost:hover { background: var(--bw-teal-soft); transform: none; }

/* Peligro (Eliminar) */
.bw-btn--danger { background: var(--bw-danger); color: var(--bw-white); }
.bw-btn--danger:hover { background: #cf471f; }

/* Tamaños */
.bw-btn--sm { padding: 6px 12px; font-size: var(--bw-fs-sm); }
.bw-btn--lg { padding: 12px 26px; font-size: var(--bw-fs-lg); }
.bw-btn--block { display: flex; width: 100%; }

/* Disabled */
.bw-btn:disabled,
.bw-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}


/* ============================================================================
   11. FORMULARIOS
   ========================================================================== */
.bw-label {
  display: block;
  font-size: var(--bw-fs-md);
  font-weight: var(--bw-fw-medium);
  color: var(--bw-text);
  margin-bottom: var(--bw-sp-2);
}

/* Etiqueta lateral en mayúsculas (fichas/formularios estilo Bewe) */
.bw-label--side {
  text-transform: uppercase;
  font-size: var(--bw-fs-sm);
  letter-spacing: 0.04em;
  color: var(--bw-text-muted);
  font-weight: var(--bw-fw-semibold);
  margin: 0;
}

.bw-input,
.bw-select,
.bw-textarea {
  width: 100%;
  font-family: var(--bw-font-family);
  font-size: var(--bw-fs-lg);
  color: var(--bw-text);
  background: var(--bw-white);
  border: 1px solid var(--bw-border-input);
  border-radius: var(--bw-radius-md);
  padding: 9px 12px;
  transition: border-color var(--bw-transition), box-shadow var(--bw-transition);
}
.bw-input::placeholder,
.bw-textarea::placeholder { color: var(--bw-text-muted); }

.bw-input:hover,
.bw-select:hover,
.bw-textarea:hover { border-color: var(--bw-border-strong); }

.bw-input:focus,
.bw-select:focus,
.bw-textarea:focus {
  outline: none;
  border-color: var(--bw-teal-2);
  box-shadow: var(--bw-focus-ring);
}

.bw-textarea { min-height: 90px; resize: vertical; }

.bw-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2366788A' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.bw-input:disabled,
.bw-select:disabled,
.bw-textarea:disabled {
  background: var(--bw-bg-200);
  color: var(--bw-text-muted);
  cursor: not-allowed;
}

/* Grupo vertical estándar */
.bw-form-group { margin-bottom: var(--bw-sp-4); }

/* Grupo con label lateral (label izquierda / campo derecha) */
.bw-form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: var(--bw-sp-4);
  padding: var(--bw-sp-3) 0;
  border-bottom: 1px solid var(--bw-border);
}
.bw-form-row:last-child { border-bottom: none; }

.bw-help {
  /* En bloque: es un <span> y, junto a un campo que no ocupa todo el
     ancho —un select estrecho, un importe—, se colocaba A SU DERECHA en
     vez de debajo, y el texto largo se salia de la tarjeta. */
  display: block;
  font-size: var(--bw-fs-sm);
  color: var(--bw-text-muted);
  margin-top: var(--bw-sp-1);
}

/* Checkbox / radio con acento teal */
.bw-check {
  display: inline-flex;
  align-items: center;
  gap: var(--bw-sp-2);
  font-size: var(--bw-fs-lg);
  cursor: pointer;
}
.bw-check input[type="checkbox"],
.bw-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--bw-teal-2);
  cursor: pointer;
}

/* Toggle switch */
.bw-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.bw-switch input { opacity: 0; width: 0; height: 0; }
.bw-switch__slider {
  position: absolute; inset: 0;
  background: var(--bw-gray);
  border-radius: var(--bw-radius-full);
  transition: background var(--bw-transition);
}
.bw-switch__slider::before {
  content: ""; position: absolute;
  height: 16px; width: 16px; left: 3px; top: 3px;
  background: var(--bw-white); border-radius: 50%;
  transition: transform var(--bw-transition);
}
.bw-switch input:checked + .bw-switch__slider { background: var(--bw-teal-2); }
.bw-switch input:checked + .bw-switch__slider::before { transform: translateX(18px); }
.bw-switch input:focus-visible + .bw-switch__slider { box-shadow: var(--bw-focus-ring); }


/* ============================================================================
   12. TABLAS
   ========================================================================== */
.bw-table-wrap {
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-lg);
  overflow: hidden;
  background: var(--bw-white);
}

.bw-table {
  width: 100%;
  font-size: var(--bw-fs-lg);
  border-collapse: collapse;
}

.bw-table thead th {
  text-align: left;
  font-size: var(--bw-fs-sm);
  font-weight: var(--bw-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bw-text-muted);
  background: var(--bw-bg-200);
  padding: var(--bw-sp-3) var(--bw-sp-4);
  border-bottom: 1px solid var(--bw-border);
  white-space: nowrap;
}

.bw-table tbody td {
  padding: var(--bw-sp-3) var(--bw-sp-4);
  border-bottom: 1px solid var(--bw-border);
  color: var(--bw-text);
  vertical-align: middle;
}

.bw-table tbody tr { transition: background var(--bw-transition); }
.bw-table tbody tr:hover { background: var(--bw-bg-100); }

/* Filas alternas (variante rayada) */
.bw-table--striped tbody tr:nth-child(even) { background: var(--bw-bg-100); }
.bw-table--striped tbody tr:nth-child(even):hover { background: var(--bw-bg-200); }

.bw-table tbody tr:last-child td { border-bottom: none; }

/* Celda de estado Sí / No */
.bw-cell-yes { color: var(--bw-success); font-weight: var(--bw-fw-semibold); }
.bw-cell-no  { color: var(--bw-text-muted); }

/* nowrap: un importe partido en dos lineas ("1.450,00" arriba y "€"
   debajo) se lee como dos cifras y obliga a releer la fila. Las columnas
   de dinero son estrechas por definicion, asi que el corte aparece en
   cuanto la tabla se aprieta. */
.bw-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }


/* ============================================================================
   13. TARJETAS / PANELES
   ========================================================================== */
.bw-card {
  background: var(--bw-white);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-lg);
  box-shadow: var(--bw-shadow-card);
  padding: var(--bw-sp-5);
}

.bw-card--flat { box-shadow: none; }
.bw-card--soft { box-shadow: var(--bw-shadow-soft); border-color: transparent; }

.bw-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-sp-3);
  margin-bottom: var(--bw-sp-4);
  padding-bottom: var(--bw-sp-3);
  border-bottom: 1px solid var(--bw-border);
}
.bw-card__title {
  font-size: var(--bw-fs-xl);
  font-weight: var(--bw-fw-semibold);
  color: var(--bw-navy-2);
}
.bw-card__body { font-size: var(--bw-fs-lg); }

.bw-panel {
  background: var(--bw-bg-300);
  border-radius: var(--bw-radius-lg);
  padding: var(--bw-sp-5);
}


/* ============================================================================
   14. BADGES / PILLS DE ESTADO
   ========================================================================== */
.bw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--bw-fs-sm);
  font-weight: var(--bw-fw-semibold);
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--bw-radius-full);
  background: var(--bw-bg-300);
  color: var(--bw-text-muted);
  white-space: nowrap;
}
.bw-badge--teal    { background: var(--bw-teal-soft);   color: var(--bw-teal-dark); }
.bw-badge--success { background: var(--bw-green-soft);  color: var(--bw-success); }
.bw-badge--warning { background: var(--bw-yellow-soft); color: var(--bw-kpi-yellow-fg); }
.bw-badge--danger  { background: var(--bw-red-soft);    color: var(--bw-danger); }
.bw-badge--info    { background: var(--bw-blue-soft);   color: var(--bw-kpi-blue-fg); }
.bw-badge--purple  { background: var(--bw-purple-soft); color: var(--bw-kpi-purple-fg); }
.bw-badge--magenta { background: #FCE0F0;               color: var(--bw-magenta); }

/* Punto de estado */
.bw-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }


/* ============================================================================
   15. TABS (PESTAÑAS)
   ========================================================================== */
.bw-tabs {
  display: flex;
  gap: var(--bw-sp-1);
  border-bottom: 1px solid var(--bw-border);
  margin-bottom: var(--bw-sp-5);
}

.bw-tab {
  position: relative;
  padding: 10px var(--bw-sp-4);
  font-size: var(--bw-fs-lg);
  font-weight: var(--bw-fw-medium);
  color: var(--bw-text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--bw-transition), border-color var(--bw-transition);
  cursor: pointer;
}
.bw-tab:hover { color: var(--bw-text); }
.bw-tab.is-active {
  color: var(--bw-teal-text);
  font-weight: var(--bw-fw-semibold);
  border-bottom-color: var(--bw-teal-text);
}


/* ============================================================================
   16. TARJETAS KPI (PASTEL)
   ========================================================================== */
.bw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--bw-sp-4);
}

.bw-kpi {
  border-radius: var(--bw-radius-lg);
  padding: var(--bw-sp-5);
  background: var(--bw-kpi-blue-bg);
  color: var(--bw-kpi-blue-fg);
  display: flex;
  flex-direction: column;
  gap: var(--bw-sp-2);
  min-height: 110px;
}
.bw-kpi__label {
  font-size: var(--bw-fs-md);
  font-weight: var(--bw-fw-medium);
  opacity: 0.9;
  text-transform: none;
}
.bw-kpi__value {
  font-size: var(--bw-fs-3xl);
  font-weight: var(--bw-fw-bold);
  line-height: 1.1;
}
.bw-kpi__trend { font-size: var(--bw-fs-sm); font-weight: var(--bw-fw-semibold); }

.bw-kpi--blue   { background: var(--bw-kpi-blue-bg);   color: var(--bw-kpi-blue-fg); }
.bw-kpi--yellow { background: var(--bw-kpi-yellow-bg); color: var(--bw-kpi-yellow-fg); }
.bw-kpi--orange { background: var(--bw-kpi-orange-bg); color: var(--bw-kpi-orange-fg); }
.bw-kpi--purple { background: var(--bw-kpi-purple-bg); color: var(--bw-kpi-purple-fg); }
.bw-kpi--teal   { background: var(--bw-kpi-teal-bg);   color: var(--bw-kpi-teal-fg); }


/* ============================================================================
   17. BUSCADOR FULL-WIDTH
   ========================================================================== */
.bw-search {
  position: relative;
  width: 100%;
}
.bw-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bw-text-muted);
  font-size: 16px;
  pointer-events: none;
}
.bw-search__input {
  width: 100%;
  font-family: var(--bw-font-family);
  font-size: var(--bw-fs-lg);
  color: var(--bw-text);
  background: var(--bw-white);
  border: 1px solid var(--bw-border-input);
  border-radius: var(--bw-radius-md);
  padding: 11px 14px 11px 40px;
  transition: border-color var(--bw-transition), box-shadow var(--bw-transition);
}
.bw-search__input::placeholder { color: var(--bw-text-muted); }
.bw-search__input:focus {
  outline: none;
  border-color: var(--bw-teal-2);
  box-shadow: var(--bw-focus-ring);
}

/* Buscador compacto de topbar */
.bw-search--top .bw-search__input { padding-top: 8px; padding-bottom: 8px; background: var(--bw-bg-200); border-color: transparent; }


/* ============================================================================
   18. POPOVER / MODAL
   ========================================================================== */
.bw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 44, 66, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bw-sp-4);
  z-index: var(--bw-z-modal);
}

.bw-modal {
  background: var(--bw-white);
  border-radius: var(--bw-radius-lg);
  box-shadow: var(--bw-shadow-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}
.bw-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bw-sp-5);
  border-bottom: 1px solid var(--bw-border);
}
.bw-modal__title { font-size: var(--bw-fs-xl); font-weight: var(--bw-fw-semibold); color: var(--bw-navy-2); }
.bw-modal__close { font-size: 20px; color: var(--bw-text-muted); line-height: 1; }
.bw-modal__close:hover { color: var(--bw-text); }
.bw-modal__body { padding: var(--bw-sp-5); }
.bw-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--bw-sp-3);
  padding: var(--bw-sp-4) var(--bw-sp-5);
  border-top: 1px solid var(--bw-border);
}

/* Popover (flotante, no modal) */
.bw-popover {
  position: absolute;
  background: var(--bw-white);
  border-radius: var(--bw-radius-lg);
  box-shadow: var(--bw-shadow-popover);
  border: 1px solid var(--bw-border);
  padding: var(--bw-sp-4);
  min-width: 240px;
  z-index: var(--bw-z-popover);
}
.bw-popover__arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--bw-white);
  border-left: 1px solid var(--bw-border);
  border-top: 1px solid var(--bw-border);
  transform: rotate(45deg);
  top: -7px; left: 24px;
}


/* ============================================================================
   19. CALENDARIO
   ========================================================================== */
.bw-calendar {
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-lg);
  overflow: hidden;
  background: var(--bw-white);
}

.bw-calendar__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-sp-3);
  padding: var(--bw-sp-3) var(--bw-sp-4);
  border-bottom: 1px solid var(--bw-border);
}
.bw-calendar__nav { display: flex; align-items: center; gap: var(--bw-sp-2); }
.bw-calendar__date { font-weight: var(--bw-fw-semibold); color: var(--bw-navy-2); font-size: var(--bw-fs-lg); }

/* Rejilla de franjas horarias */
.bw-cal-grid {
  display: grid;
  grid-template-columns: 56px 1fr;
}
.bw-cal-hour {
  font-size: var(--bw-fs-sm);
  color: var(--bw-text-muted);
  text-align: right;
  padding: var(--bw-sp-2) var(--bw-sp-2) 0 0;
  border-top: 1px solid var(--bw-border);
  height: 64px;
}
.bw-cal-slot {
  border-top: 1px solid var(--bw-border);
  border-left: 1px solid var(--bw-border);
  height: 64px;
  padding: 3px;
  position: relative;
}

/* Evento: bloque con borde izquierdo de color sobre fondo gris muy claro */
.bw-event {
  background: var(--bw-bg-200);
  border-left: 4px solid var(--bw-teal-2);
  border-radius: var(--bw-radius-sm);
  padding: 6px 8px;
  font-size: var(--bw-fs-sm);
  color: var(--bw-text);
  line-height: 1.35;
  cursor: pointer;
  transition: background var(--bw-transition), box-shadow var(--bw-transition);
  overflow: hidden;
}
.bw-event:hover { background: var(--bw-bg-300); box-shadow: var(--bw-shadow-card); }
.bw-event__time { font-weight: var(--bw-fw-semibold); color: var(--bw-navy-2); }
.bw-event__title { font-weight: var(--bw-fw-medium); }
.bw-event__cap { color: var(--bw-text-muted); font-weight: var(--bw-fw-semibold); }

/* Variantes de color del borde del evento */
.bw-event--teal   { border-left-color: var(--bw-teal-2); }
.bw-event--red    { border-left-color: var(--bw-red); }
.bw-event--purple { border-left-color: var(--bw-purple); }
.bw-event--orange { border-left-color: var(--bw-orange); }
.bw-event--green  { border-left-color: var(--bw-green); }
/* Clase llena (aforo completo) */
.bw-event--full   { border-left-color: var(--bw-red); }
.bw-event--full .bw-event__cap { color: var(--bw-danger); }


/* ============================================================================
   20. FICHA DE DOS COLUMNAS
   ========================================================================== */
.bw-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bw-sp-5);
  align-items: start;
}
/* min-width:0 porque un item de grid no baja de su contenido minimo por
   defecto: sin esto, una tabla ancha dentro de la columna estira el grid
   entero y se sale por la derecha, en vez de desplazarse dentro de su
   propia caja. Pasa en cualquier pantalla que no le de sitio, no solo en
   movil. */
.bw-profile__col { display: flex; flex-direction: column; gap: var(--bw-sp-5); min-width: 0; }

.bw-profile__header {
  display: flex;
  align-items: center;
  gap: var(--bw-sp-4);
  margin-bottom: var(--bw-sp-5);
}
.bw-profile__name { font-size: var(--bw-fs-2xl); font-weight: var(--bw-fw-bold); color: var(--bw-navy-2); }
.bw-profile__meta { color: var(--bw-text-muted); font-size: var(--bw-fs-md); }

/* Progreso de sesiones de bono */
.bw-progress {
  height: 8px;
  border-radius: var(--bw-radius-full);
  background: var(--bw-bg-300);
  overflow: hidden;
}
.bw-progress__bar {
  height: 100%;
  background: var(--bw-teal-2);
  border-radius: var(--bw-radius-full);
}

/* Fila de dato (label izq / valor der) para fichas */
.bw-data-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--bw-sp-3);
  padding: var(--bw-sp-2) 0;
  font-size: var(--bw-fs-lg);
  border-bottom: 1px dashed var(--bw-border);
}
.bw-data-row:last-child { border-bottom: none; }
.bw-data-row__label {
  text-transform: uppercase;
  font-size: var(--bw-fs-sm);
  letter-spacing: 0.04em;
  color: var(--bw-text-muted);
  font-weight: var(--bw-fw-semibold);
}
.bw-data-row__value { color: var(--bw-text); }


/* ============================================================================
   21. ESTADOS ACCESIBLES
   ========================================================================== */
:where(a, button, input, select, textarea, [tabindex], .bw-nav-icon,
       .bw-subnav__link, .bw-tab, .bw-event):focus-visible {
  outline: 2px solid var(--bw-teal-2);
  outline-offset: 2px;
  border-radius: var(--bw-radius-sm);
}

.bw-btn:focus-visible,
.bw-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--bw-focus-ring);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================================
   22. RESPONSIVE
   ========================================================================== */

/* Tablet: colapsar panel secundario (se muestra como cajón deslizable) */
@media (max-width: 1100px) {
  .bw-app {
    grid-template-columns: var(--bw-sidebar-w) 1fr;
  }
  .bw-subnav {
    position: fixed;
    top: 0;
    left: var(--bw-sidebar-w);
    height: 100vh;
    transform: translateX(-110%);
    transition: transform var(--bw-transition-slow);
    box-shadow: var(--bw-shadow-md);
  }
  .bw-subnav.is-open { transform: translateX(0); }

  .bw-profile { grid-template-columns: 1fr; }
}

/* Móvil */
@media (max-width: 640px) {
  :root {
    --bw-sidebar-w: 56px;
  }
  .bw-content { padding: var(--bw-sp-4); }
  .bw-topbar { padding: 0 var(--bw-sp-4); }
  .bw-topbar__title { font-size: var(--bw-fs-xl); }

  .bw-btn--pill { padding: 8px 22px; }

  .bw-form-row { grid-template-columns: 1fr; gap: var(--bw-sp-2); }
  .bw-data-row { grid-template-columns: 1fr; gap: 2px; }

  .bw-kpi-grid { grid-template-columns: 1fr 1fr; }

  /* Tablas con scroll horizontal */
  .bw-table-wrap { overflow-x: auto; }
  .bw-table { min-width: 560px; }
}

@media (max-width: 400px) {
  .bw-kpi-grid { grid-template-columns: 1fr; }
}