@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   TAB BUSINESS LAB - DESIGN SYSTEM & COLOR PALETTE
   Colores extraídos directamente de la paleta oficial:
   - Aqua / Turquesa Claro: #83d3d4 (Acentos frescos, badges, resplandores)
   - Deep Teal / Verde Petróleo: #2d8183 (Identidad primaria, botones principales)
   - Burgundy / Borgoña Profundo: #910c07 (Acento fuerte, alertas, botones clave)
   - Coral / Mandarina: #f48153 (Acento cálido, interactividad, CTA secundario)
   ========================================================================== */

:root {
  /* Paleta Núcleo */
  --tbl-teal: #2d8183;
  --tbl-teal-dark: #1d5253;
  --tbl-teal-darker: #13393a;
  --tbl-teal-light: #449fa1;
  
  --tbl-aqua: #83d3d4;
  --tbl-aqua-light: #b8e6e7;
  --tbl-aqua-soft: #f0f9f9;
  
  --tbl-burgundy: #910c07;
  --tbl-burgundy-dark: #5f0905;
  --tbl-burgundy-light: #b41913;
  --tbl-burgundy-soft: #fcf1f0;
  
  --tbl-coral: #f48153;
  --tbl-coral-dark: #dc6a39;
  --tbl-coral-light: #fbd6c7;
  --tbl-coral-soft: #fef4ef;

  /* Fondos y Neutros */
  --tbl-bg-body: #f4f8f8;
  --tbl-surface: #ffffff;
  --tbl-surface-muted: #eaf3f3;
  --tbl-border: rgba(45, 129, 131, 0.18);
  --tbl-border-light: rgba(45, 129, 131, 0.08);

  --tbl-text-primary: #152e2f;
  --tbl-text-secondary: #527173;
  --tbl-text-muted: #799596;

  /* Modo Presentador (Dark Stage) */
  --tbl-stage-bg: #0a1819;
  --tbl-stage-surface: #102628;
  --tbl-stage-card: #163436;
  --tbl-stage-border: rgba(131, 211, 212, 0.16);
  --tbl-stage-text: #f0fafa;
  --tbl-stage-text-muted: #8bb3b5;

  /* Elevaciones */
  --tbl-shadow-sm: 0 2px 8px rgba(29, 82, 83, 0.06);
  --tbl-shadow-md: 0 8px 24px -4px rgba(29, 82, 83, 0.1);
  --tbl-shadow-lg: 0 20px 35px -8px rgba(29, 82, 83, 0.16);
  --tbl-shadow-coral: 0 10px 25px -5px rgba(244, 129, 83, 0.35);
  --tbl-shadow-teal: 0 10px 25px -5px rgba(45, 129, 131, 0.35);

  --tbl-radius-sm: 8px;
  --tbl-radius-md: 14px;
  --tbl-radius-lg: 20px;
  --tbl-radius-xl: 28px;
}

/* Base */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--tbl-text-primary);
  background-color: var(--tbl-bg-body);
  background-image: 
    radial-gradient(at 0% 0%, rgba(131, 211, 212, 0.18) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(244, 129, 83, 0.08) 0px, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main, .page-wrapper {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--tbl-text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Navbar */
.tbl-navbar {
  background: linear-gradient(135deg, var(--tbl-teal-darker) 0%, var(--tbl-teal-dark) 50%, var(--tbl-teal) 100%) !important;
  border-bottom: 2px solid var(--tbl-aqua);
  box-shadow: 0 4px 20px rgba(19, 57, 58, 0.2);
  padding: 0.85rem 0;
}

.tbl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: #ffffff !important;
  text-decoration: none;
}

.tbl-palette-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tbl-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.tbl-dot-1 { background-color: var(--tbl-aqua); }
.tbl-dot-2 { background-color: var(--tbl-teal); }
.tbl-dot-3 { background-color: var(--tbl-burgundy); }
.tbl-dot-4 { background-color: var(--tbl-coral); }

/* Tarjetas y Contenedores */
.tbl-card {
  background: var(--tbl-surface);
  border: 1px solid var(--tbl-border-light);
  border-radius: var(--tbl-radius-md);
  box-shadow: var(--tbl-shadow-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tbl-card:hover {
  box-shadow: var(--tbl-shadow-lg);
}

.tbl-card-interactive:hover {
  transform: translateY(-2px);
}

/* Botones con estilo propio de la paleta */
.btn {
  font-weight: 600;
  border-radius: 10px;
  padding: 0.55rem 1.25rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:active {
  transform: scale(0.98);
}

/* Primario: Deep Teal */
.btn-primary, .btn-teal {
  background-color: var(--tbl-teal);
  border-color: var(--tbl-teal);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(45, 129, 131, 0.25);
}

.btn-primary:hover, .btn-primary:focus, .btn-teal:hover {
  background-color: var(--tbl-teal-dark);
  border-color: var(--tbl-teal-dark);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(45, 129, 131, 0.35);
  transform: translateY(-1px);
}

.btn-outline-primary, .btn-outline-teal {
  color: var(--tbl-teal);
  border-color: var(--tbl-teal);
  background: transparent;
}

.btn-outline-primary:hover, .btn-outline-teal:hover {
  background-color: var(--tbl-teal);
  border-color: var(--tbl-teal);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(45, 129, 131, 0.25);
}

/* Acento Cálido: Coral */
.btn-coral, .btn-accent {
  background: linear-gradient(135deg, var(--tbl-coral) 0%, var(--tbl-coral-dark) 100%);
  border-color: var(--tbl-coral);
  color: #ffffff;
  box-shadow: var(--tbl-shadow-coral);
}

.btn-coral:hover, .btn-accent:hover {
  background: linear-gradient(135deg, #f7946c 0%, var(--tbl-coral) 100%);
  border-color: var(--tbl-coral-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-outline-coral {
  color: var(--tbl-coral-dark);
  border-color: var(--tbl-coral);
  background: transparent;
}

.btn-outline-coral:hover {
  background-color: var(--tbl-coral);
  border-color: var(--tbl-coral);
  color: #ffffff;
}

/* Acento Fuerza: Borgoña */
.btn-burgundy, .btn-danger {
  background-color: var(--tbl-burgundy);
  border-color: var(--tbl-burgundy);
  color: #ffffff;
}

.btn-burgundy:hover, .btn-danger:hover {
  background-color: var(--tbl-burgundy-dark);
  border-color: var(--tbl-burgundy-dark);
  color: #ffffff;
}

.btn-outline-danger, .btn-outline-burgundy {
  color: var(--tbl-burgundy);
  border-color: var(--tbl-burgundy);
}

.btn-outline-danger:hover, .btn-outline-burgundy:hover {
  background-color: var(--tbl-burgundy);
  border-color: var(--tbl-burgundy);
  color: #ffffff;
}

/* Aqua Acento */
.btn-aqua {
  background-color: var(--tbl-aqua);
  border-color: var(--tbl-aqua);
  color: var(--tbl-teal-darker);
}

.btn-aqua:hover {
  background-color: var(--tbl-aqua-light);
  border-color: var(--tbl-aqua-light);
  color: var(--tbl-teal-darker);
}

/* Botón de Presentación (Gradiente especial Teal -> Coral) */
.btn-present {
  background: linear-gradient(135deg, var(--tbl-teal) 0%, #1e6365 50%, var(--tbl-coral-dark) 150%);
  color: #ffffff;
  border: none;
  box-shadow: var(--tbl-shadow-teal);
}

.btn-present:hover {
  background: linear-gradient(135deg, var(--tbl-teal-light) 0%, var(--tbl-teal) 50%, var(--tbl-coral) 150%);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Inputs y Formularios */
.form-control, .form-select {
  border-radius: 10px;
  border: 1.5px solid #cde3e4;
  padding: 0.65rem 0.95rem;
  font-size: 0.98rem;
  color: var(--tbl-text-primary);
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
  border-color: var(--tbl-teal);
  box-shadow: 0 0 0 0.25rem rgba(131, 211, 212, 0.45);
  background-color: #ffffff;
}

.form-control-lg {
  border-radius: 12px;
  font-size: 1.35rem;
  letter-spacing: 0.15em;
  font-weight: 700;
}

/* Badges */
.badge {
  border-radius: 6px;
  font-weight: 600;
  padding: 0.4em 0.65em;
}

.badge-teal {
  background-color: var(--tbl-aqua-soft);
  color: var(--tbl-teal-dark);
  border: 1px solid var(--tbl-aqua-light);
}

.badge-coral {
  background-color: var(--tbl-coral-soft);
  color: var(--tbl-coral-dark);
  border: 1px solid var(--tbl-coral-light);
}

.badge-burgundy {
  background-color: var(--tbl-burgundy-soft);
  color: var(--tbl-burgundy);
  border: 1px solid rgba(145, 12, 7, 0.2);
}

.badge-aqua {
  background-color: var(--tbl-aqua);
  color: var(--tbl-teal-darker);
}

/* Alertas */
.alert {
  border-radius: var(--tbl-radius-sm);
  border-width: 1px;
  font-weight: 500;
}

.alert-danger {
  background-color: var(--tbl-burgundy-soft);
  border-color: rgba(145, 12, 7, 0.25);
  color: var(--tbl-burgundy);
}

.alert-success {
  background-color: var(--tbl-aqua-soft);
  border-color: var(--tbl-aqua-light);
  color: var(--tbl-teal-dark);
}

/* Hero / PIN Card */
.tbl-hero-box {
  background: #ffffff;
  border-radius: var(--tbl-radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--tbl-shadow-lg);
  border: 1px solid var(--tbl-border-light);
  position: relative;
  overflow: hidden;
}

.tbl-hero-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--tbl-aqua) 0%, var(--tbl-teal) 35%, var(--tbl-burgundy) 70%, var(--tbl-coral) 100%);
}

.tbl-code-input {
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.25em !important;
  text-align: center;
  color: var(--tbl-teal-darker);
  border: 2px solid var(--tbl-teal-light);
  background: var(--tbl-aqua-soft);
  border-radius: 14px;
}

.tbl-code-input:focus {
  border-color: var(--tbl-teal);
  box-shadow: 0 0 0 0.35rem rgba(45, 129, 131, 0.25);
}

/* Participante (join.php) */
.tbl-join-page {
  background: #eef6f6;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(131, 211, 212, 0.25) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(244, 129, 83, 0.18) 0%, transparent 40%);
  min-height: 100vh;
}

.tbl-opt-btn {
  text-align: left;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 16px 20px;
  border-radius: 14px;
  border: 2px solid #bce1e2;
  background: #ffffff;
  color: var(--tbl-teal-darker);
  box-shadow: var(--tbl-shadow-sm);
  transition: all 0.15s ease-in-out;
}

.tbl-opt-btn:hover {
  background: var(--tbl-aqua-soft);
  border-color: var(--tbl-teal);
  color: var(--tbl-teal);
  transform: translateY(-2px);
  box-shadow: var(--tbl-shadow-md);
}

.tbl-opt-btn.active, .tbl-opt-btn-chosen {
  background: linear-gradient(135deg, var(--tbl-teal) 0%, var(--tbl-teal-dark) 100%) !important;
  border-color: var(--tbl-teal-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(45, 129, 131, 0.35) !important;
}

.tbl-scale-btn {
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.35rem;
  border: 2px solid #bce1e2;
  background: #ffffff;
  color: var(--tbl-teal-darker);
  transition: all 0.15s ease;
}

.tbl-scale-btn:hover {
  border-color: var(--tbl-coral);
  color: var(--tbl-coral);
  background: var(--tbl-coral-soft);
}

.tbl-scale-btn.active {
  background: linear-gradient(135deg, var(--tbl-coral) 0%, var(--tbl-coral-dark) 100%) !important;
  border-color: var(--tbl-coral-dark) !important;
  color: #ffffff !important;
  box-shadow: var(--tbl-shadow-coral) !important;
}

/* Pantalla del Presentador (Dark Stage en present.php) */
.tbl-stage-body {
  background: var(--tbl-stage-bg) !important;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(45, 129, 131, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(244, 129, 83, 0.12) 0%, transparent 45%) !important;
  color: var(--tbl-stage-text) !important;
  min-height: 100vh;
}

.tbl-stage-panel {
  background: var(--tbl-stage-surface);
  border: 1px solid var(--tbl-stage-border);
  border-radius: var(--tbl-radius-lg);
  padding: 30px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.tbl-stage-panel-light {
  background: #ffffff;
  color: var(--tbl-text-primary);
  border-radius: var(--tbl-radius-lg);
  padding: 30px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(131, 211, 212, 0.2);
}

.tbl-stage-join-box {
  background: linear-gradient(180deg, #132d2f 0%, #0d2022 100%);
  border: 1px solid var(--tbl-stage-border);
  border-radius: var(--tbl-radius-lg);
  padding: 24px;
  color: #ffffff;
}

.tbl-code-display {
  color: var(--tbl-aqua);
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(131, 211, 212, 0.4);
}

/* Respuestas abiertas en pantalla */
.tbl-text-pill {
  background: linear-gradient(135deg, #f0fafa 0%, #e1f4f4 100%);
  color: var(--tbl-teal-darker);
  border: 1px solid #bce1e2;
  border-radius: 12px;
  padding: 12px 18px;
  margin: 6px;
  display: inline-block;
  font-weight: 600;
  font-size: 1.05rem;
  box-shadow: var(--tbl-shadow-sm);
  animation: tblPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tblPopIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Footer sutil */
.tbl-footer {
  margin-top: auto;
  padding: 1.8rem 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--tbl-text-muted);
  border-top: 1px solid var(--tbl-border-light);
}

/* Visor de Recursos */
.tbl-viewer-bar {
  background: linear-gradient(90deg, #0e1d1f 0%, #152d2f 100%);
  border-bottom: 2px solid var(--tbl-teal);
}