@charset "UTF-8";
/* Shared font loading for EventLink
   Display: Newsreader (editorial, bodas + marca)
   UI: Plus Jakarta Sans
   Labels: Montserrat
*/
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap");
/* Shared EventLink theme tokens and generic UI components */
/* ============================================================
   EventLink Design System – Theme Override v3.0
   Direction: bodas + agencias de marca / eventos de marketing
   Palette: mist · ink · teal · steel · coral
   Typography: Newsreader + Plus Jakarta Sans
   Note: --el-taupe* kept as primary aliases for backwards compat
   ============================================================ */
/* ── Design tokens ── */
:root {
  /* --- Palette --- */
  --el-cream: #F5F0EB;
  --el-warm-white: #FAF7F4;
  --el-sand: #E8DDD4;
  --el-taupe: #C4A882; /* primary gold */
  --el-taupe-dark: #A88B68;
  --el-sage: #7A9B8A; /* sage secondary */
  --el-sage-dark: #5D8B72;
  --el-deep-brown: #2D2118; /* ink */
  --el-muted: #7A6B5D;
  --el-white: #FFFFFF;
  --el-border: #DDD3C8;
  --el-warning: #D4A017;
  --el-danger: #C45C4A;
  --el-success: #5D8B72;
  --el-info: #7A9B8A;
  --el-coral: #E07A5F; /* celebration / CTA spark */
  /* Semantic aliases */
  --el-primary: var(--el-taupe);
  --el-primary-dark: var(--el-taupe-dark);
  --el-ink: var(--el-deep-brown);
  --el-mist: var(--el-cream);
  /* --- Override Modernize Bootstrap vars --- */
  --bs-primary: var(--el-taupe);
  --bs-primary-rgb: 196,168,130;
  --bs-light-primary: rgba(196, 168, 130,0.12);
  --bs-primary-bg-subtle: rgba(196, 168, 130,0.12);
  --bs-secondary: var(--el-sage);
  --bs-secondary-rgb: 122,155,138;
  --bs-light-secondary: rgba(122, 155, 138,0.12);
  --bs-secondary-bg-subtle: rgba(122, 155, 138,0.12);
  --bs-success: var(--el-success);
  --bs-warning: var(--el-warning);
  --bs-danger: var(--el-danger);
  --bs-info: var(--el-info);
  --bs-body-bg: var(--el-white);
  --bs-body-color: var(--el-deep-brown);
  --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
  --bs-body-font-size: 0.875rem;
  --bs-border-color: var(--el-border);
  /* --- Sidebar --- */
  --sidebar-width: 270px;
  --sidebar-bg: #FAFBFC;
  --sidebar-border: 1px solid var(--el-border);
  --sidebar-link-color: var(--el-deep-brown);
  --sidebar-link-hover: var(--el-deep-brown);
  --sidebar-icon-color: var(--el-taupe-dark);
  /* --- Topbar --- */
  --topbar-bg: var(--el-white);
  --topbar-border: 1px solid var(--el-border);
  /* --- Cards & Tiles --- */
  --card-bg: var(--el-white);
  --card-border: var(--el-border);
  --card-radius: 14px;
  --card-shadow: 0 1px 2px rgba(26,31,38,0.05);
  --tile-size: 160px;
}

/* ── Body & layout base ── */
body {
  background-color: var(--el-white) !important;
  color: var(--el-deep-brown) !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Headings → Newsreader ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--el-deep-brown);
}

/* ── Uppercase label style (Montserrat) ── */
.el-label,
.nav-small-cap,
.badge-label,
.text-uppercase.fs-2 {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-size: 0.65rem !important;
}

/* ── Sidebar ── */
.left-sidebar {
  background-color: var(--el-warm-white) !important;
  border-right: var(--sidebar-border) !important;
  box-shadow: none !important;
}

.sidebar-nav .sidebar-item .sidebar-link {
  color: var(--sidebar-link-color) !important;
  font-size: 0.855rem !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  margin: 1px 8px !important;
  transition: all 0.18s ease;
}

.sidebar-nav .sidebar-item .sidebar-link:hover,
.sidebar-nav .sidebar-item.selected > .sidebar-link {
  color: var(--el-deep-brown) !important;
  background-color: rgba(196, 168, 130, 0.14) !important;
  font-weight: 600 !important;
}

.sidebar-nav .sidebar-item.selected > .sidebar-link .ti,
.sidebar-nav .sidebar-item .sidebar-link:hover .ti {
  color: var(--el-taupe) !important;
}

.sidebar-nav .sidebar-item > .sidebar-link .ti {
  color: var(--el-taupe) !important;
  font-size: 1.1rem;
}

.nav-small-cap {
  color: var(--el-muted) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 24px 4px !important;
}

/* ── Brand logo ── */
.brand-logo {
  background-color: var(--el-warm-white) !important;
  border-bottom: 1px solid var(--el-border) !important;
  padding: 0 20px !important;
  min-height: 70px;
}

/* ── Topbar ── */
.topbar {
  background-color: var(--el-warm-white) !important;
  border-bottom: var(--topbar-border) !important;
  box-shadow: none !important;
}

/* ── Cards ── */
.card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
}

.card-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 1.2rem !important;
  font-weight: 600;
  color: var(--el-deep-brown) !important;
}

/* ── Tiles / Casilleros ── */
.el-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 0;
}

.el-tile {
  background: var(--el-white);
  border: 1px solid var(--el-border);
  border-radius: 14px;
  padding: 28px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 2px 12px rgba(26, 31, 38, 0.05);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.el-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(26, 31, 38, 0.12);
  border-color: var(--el-taupe);
  text-decoration: none;
}

.el-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--el-taupe), var(--el-sage));
  opacity: 0;
  transition: opacity 0.22s ease;
}

.el-tile:hover::before {
  opacity: 1;
}

.el-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.el-tile-icon.taupe {
  background: rgba(196, 168, 130, 0.15);
  color: var(--el-taupe);
}

.el-tile-icon.sage {
  background: rgba(122, 155, 138, 0.15);
  color: var(--el-sage);
}

.el-tile-icon.brown {
  background: rgba(26, 31, 38, 0.08);
  color: var(--el-deep-brown);
}

.el-tile-icon.warm {
  background: rgba(196, 154, 60, 0.12);
  color: var(--el-warning);
}

.el-tile-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--el-muted);
  margin: 0;
}

.el-tile-value {
  font-family: "Newsreader", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--el-deep-brown);
  line-height: 1;
  margin: 0;
}

.el-tile-sub {
  font-size: 0.75rem;
  color: var(--el-muted);
  margin: 0;
}

/* ── Buttons ── */
.btn-primary {
  background-color: var(--el-taupe) !important;
  border-color: var(--el-taupe) !important;
  color: #fff !important;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: var(--el-taupe-dark) !important;
  border-color: var(--el-taupe-dark) !important;
}

.btn-secondary {
  background-color: var(--el-sage) !important;
  border-color: var(--el-sage) !important;
  color: #fff !important;
}

.btn-secondary:hover {
  background-color: var(--el-sage-dark) !important;
  border-color: var(--el-sage-dark) !important;
}

.btn-outline-primary {
  border-color: var(--el-taupe) !important;
  color: var(--el-taupe-dark) !important;
}

.btn-outline-primary:hover {
  background-color: var(--el-taupe) !important;
  color: #fff !important;
}

.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary:active {
  background-color: var(--el-deep-brown) !important;
  border-color: var(--el-deep-brown) !important;
  color: #fff !important;
}

.btn-light-primary {
  background-color: rgba(196, 168, 130, 0.12) !important;
  color: var(--el-taupe) !important;
  border: none !important;
}

/* ── Badges ── */
.badge.bg-primary,
.badge.bg-light-primary {
  background-color: rgba(196, 168, 130, 0.18) !important;
  color: var(--el-taupe-dark) !important;
}

.badge.bg-secondary,
.badge.bg-light-secondary {
  background-color: rgba(122, 155, 138, 0.18) !important;
  color: var(--el-sage-dark) !important;
}

.badge.bg-success,
.badge.bg-light-success {
  background-color: rgba(15, 118, 110, 0.15) !important;
  color: var(--el-success) !important;
}

.badge.bg-warning,
.badge.bg-light-warning {
  background-color: rgba(196, 154, 60, 0.15) !important;
  color: var(--el-warning) !important;
}

.badge.bg-danger,
.badge.bg-light-danger {
  background-color: rgba(192, 123, 107, 0.15) !important;
  color: var(--el-danger) !important;
}

/* ── Tables ── */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(232,221,212,0.2);
  color: var(--el-deep-brown) !important;
}

.table thead th {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--el-muted) !important;
  border-bottom: 1px solid var(--el-border) !important;
  padding: 12px 16px !important;
  background: var(--el-warm-white) !important;
}

.table td {
  padding: 12px 16px !important;
  font-size: 0.855rem;
  vertical-align: middle;
}

.table-hover tbody tr:hover td {
  background-color: rgba(196, 168, 130, 0.06) !important;
}

/* ── Forms ── */
.form-control, .form-select {
  border-color: var(--el-border) !important;
  border-radius: 8px !important;
  font-size: 0.855rem;
  color: var(--el-deep-brown) !important;
  background-color: var(--el-white) !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--el-taupe) !important;
  box-shadow: 0 0 0 3px rgba(196, 168, 130, 0.18) !important;
}

.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--el-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* ── Status indicators (event states) ── */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.status-pendiente {
  background: var(--el-warning);
}

.status-confirmado {
  background: var(--el-success);
}

.status-cancelado {
  background: var(--el-danger);
}

.status-draft {
  background: var(--el-sand);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--el-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--el-sand);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--el-taupe);
}

/* ── Utility overrides ── */
.bg-primary {
  background-color: var(--el-taupe) !important;
}

.bg-secondary {
  background-color: var(--el-sage) !important;
}

.text-primary {
  color: var(--el-taupe) !important;
}

.text-muted {
  color: #3A4550 !important;
}

.rounded-el {
  border-radius: var(--card-radius) !important;
}

.shadow-el {
  box-shadow: var(--card-shadow) !important;
}

.border-el {
  border: 1px solid var(--el-border) !important;
}

/* ── Sidebar active indicator line ── */
.sidebar-nav .sidebar-item.selected > .sidebar-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--el-taupe);
  border-radius: 0 3px 3px 0;
}

.sidebar-nav .sidebar-item .sidebar-link {
  position: relative;
}

/* ── Page header typography ── */
.page-header-title {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--el-deep-brown);
  letter-spacing: -0.01em;
}

.page-header-subtitle {
  font-size: 0.82rem;
  color: var(--el-muted);
  font-weight: 400;
}

/* ── Avatar ring ── */
.avatar-ring {
  border: 2px solid var(--el-taupe);
  border-radius: 50%;
  padding: 2px;
}

/* ── Dividers ── */
hr, .divider {
  border-color: var(--el-border) !important;
  opacity: 1;
}

/* ── Input group ── */
.input-group-text {
  background: var(--el-sand) !important;
  border-color: var(--el-border) !important;
  color: var(--el-muted) !important;
}

/* ── Nav pills ── */
.nav-pills .nav-link.active {
  background-color: var(--el-taupe) !important;
  color: #fff !important;
}

.nav-pills .nav-link {
  color: var(--el-muted) !important;
  font-size: 0.82rem;
  font-weight: 500;
}

/* ── Progress bars ── */
.progress {
  background-color: var(--el-sand) !important;
  border-radius: 8px;
}

.progress-bar {
  background-color: var(--el-taupe) !important;
}

/* ── Section separator label ── */
.section-tag {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--el-taupe);
  background: rgba(196, 168, 130, 0.12);
  padding: 3px 10px;
  border-radius: 20px;
}

/* ============================================================
   PARCHE ANTI-AZUL v2.1 – Elimina todos los azules residuales
   ============================================================ */
:root {
  --bs-link-color: var(--el-taupe-dark);
  --bs-link-color-rgb: 15,118,110;
  --bs-link-hover-color: var(--el-deep-brown);
  --bs-link-hover-color-rgb: 26,31,38;
  --bs-link-decoration: none;
  --bs-focus-ring-color: rgba(196, 168, 130,0.25);
  --bs-focus-ring-width: 0.2rem;
  --bs-focus-ring-opacity: 0.22;
  --bs-primary-text-emphasis: var(--el-taupe-dark);
  --bs-secondary-text-emphasis: var(--el-sage-dark);
  --bs-info-text-emphasis: var(--el-sage);
  --bs-info-bg-subtle: rgba(122, 155, 138,0.12);
  --bs-info-border-subtle: rgba(122, 155, 138,0.30);
}

a {
  color: var(--el-taupe-dark) !important;
  text-decoration: none !important;
}

a:hover, a:focus {
  color: var(--el-deep-brown) !important;
  text-decoration: none !important;
}

a:focus-visible {
  outline: 2px solid rgba(196, 168, 130, 0.5) !important;
  outline-offset: 2px;
}

.btn a, a.btn, a.el-btn {
  color: inherit !important;
}

*:focus, *:focus-visible {
  outline-color: rgba(196, 168, 130, 0.6) !important;
}

.form-control:focus, .form-select:focus, .form-check-input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--el-taupe) !important;
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.22) !important;
  outline: none !important;
}

.btn:focus, .btn:focus-visible, .btn:active:focus {
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.28) !important;
  outline: none !important;
}

.btn-check:focus-visible + .btn,
.btn-check:checked + .btn:focus-visible,
.btn-check:checked + .btn {
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.28) !important;
  outline: none !important;
}

.btn-primary:focus, .btn-primary:focus-visible,
.btn-primary:active, .btn-primary.active {
  background-color: var(--el-taupe-dark) !important;
  border-color: var(--el-taupe-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.3) !important;
}

.dropdown-item:hover, .dropdown-item:focus,
.dropdown-item.active, .dropdown-item:active {
  background-color: rgba(196, 168, 130, 0.1) !important;
  color: var(--el-deep-brown) !important;
}

.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: rgba(196, 168, 130, 0.08) !important;
  color: var(--el-deep-brown) !important;
}

.list-group-item.active {
  background-color: var(--el-taupe) !important;
  border-color: var(--el-taupe) !important;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  border-bottom-color: var(--el-taupe) !important;
  color: var(--el-taupe-dark) !important;
}

.nav-tabs .nav-link:hover {
  border-color: var(--el-border) !important;
  color: var(--el-deep-brown) !important;
}

.accordion-button:not(.collapsed) {
  color: var(--el-taupe-dark) !important;
  background-color: rgba(196, 168, 130, 0.08) !important;
  box-shadow: inset 0 -1px 0 var(--el-border) !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.22) !important;
  border-color: var(--el-taupe) !important;
}

.page-link {
  color: var(--el-taupe-dark) !important;
}

.page-link:hover {
  background-color: rgba(196, 168, 130, 0.1) !important;
  color: var(--el-deep-brown) !important;
  border-color: var(--el-border) !important;
}

.page-item.active .page-link {
  background-color: var(--el-taupe) !important;
  border-color: var(--el-taupe) !important;
  color: #fff !important;
}

.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.22) !important;
  outline: none !important;
}

.breadcrumb-item a {
  color: var(--el-taupe-dark) !important;
}

.breadcrumb-item.active {
  color: var(--el-muted) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: var(--el-taupe) !important;
  color: #fff !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
  border-color: var(--el-taupe) !important;
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.22) !important;
  outline: none !important;
}

[data-bs-theme=dark] {
  --bs-link-color: var(--el-taupe);
  --bs-link-hover-color: var(--el-sand);
  --bs-link-color-rgb: 196,168,130;
  --bs-link-hover-color-rgb: 232,221,212;
  --bs-focus-ring-color: rgba(196, 168, 130,0.30);
}

[data-bs-theme=dark] .form-control:focus, [data-bs-theme=dark] .form-select:focus {
  border-color: var(--el-taupe) !important;
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.25) !important;
}

[data-bs-theme=dark] a, [data-bs-theme=dark] a:hover {
  color: var(--el-sand) !important;
}

[data-color-theme=Blue_Theme] {
  --bs-primary: var(--el-taupe) !important;
  --bs-primary-rgb: 196,168,130 !important;
  --bs-secondary: var(--el-sage) !important;
  --bs-secondary-rgb: 122,155,138 !important;
  --bs-link-hover-color: var(--el-deep-brown) !important;
  --bs-focus-ring-color: rgba(196, 168, 130,0.25) !important;
}

.sidebar-nav .sidebar-item .sidebar-link:focus,
.sidebar-nav .sidebar-item .sidebar-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.topbar .nav-link:hover, .topbar .nav-link:focus {
  color: var(--el-taupe-dark) !important;
  background-color: rgba(196, 168, 130, 0.08) !important;
}

.alert-info {
  background-color: rgba(122, 155, 138, 0.12) !important;
  border-color: rgba(122, 155, 138, 0.25) !important;
  color: var(--el-sage-dark) !important;
}

.alert-primary {
  background-color: rgba(196, 168, 130, 0.12) !important;
  border-color: rgba(196, 168, 130, 0.25) !important;
  color: var(--el-taupe-dark) !important;
}

.spinner-border.text-primary, .spinner-grow.text-primary {
  color: var(--el-taupe) !important;
}

.form-check-input:checked {
  background-color: var(--el-taupe) !important;
  border-color: var(--el-taupe) !important;
}

.form-check-input:focus {
  border-color: var(--el-taupe) !important;
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.22) !important;
}

/* ============================================================
   TEXT COLOR ENHANCEMENT v2.2 — Darker text
   Añade presencia cromática a los elementos textuales
   Paleta oscura: deep-brown #2D2118 · taupe-dark #A88B68 · sage-deep #5D8B72
           muted-dark #3A4550 · sage-dark #5D8B72
   ============================================================ */
/* ── H1 / títulos de página ── deep-brown oscuro */
h1, .h1,
.page-header-title {
  color: var(--el-deep-brown) !important;
  font-weight: 700 !important;
}

/* ── H2 / títulos de sección ── deep-brown, subrayado taupe-dark */
h2, .h2 {
  color: var(--el-deep-brown) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--el-taupe-dark);
  padding-bottom: 4px;
  display: inline-block;
}

/* ── H3 / subtítulos de card ── deep-brown */
h3, .h3,
.card-title {
  color: var(--el-deep-brown) !important;
  font-weight: 600 !important;
}

/* ── H4–H6 / labels estructurales ── taupe-dark oscuro */
h4, .h4, h5, .h5, h6, .h6 {
  color: var(--el-taupe-dark) !important;
  font-weight: 600 !important;
}

/* ── Etiquetas de sección nav (BUSCADOR, INICIO, etc.) ── deep-brown */
.nav-small-cap {
  color: var(--el-deep-brown) !important;
  opacity: 0.75;
}

/* ── Sidebar link activo: texto deep-brown ── */
.sidebar-nav .sidebar-item.selected > .sidebar-link {
  color: var(--el-deep-brown) !important;
  font-weight: 700 !important;
}

.sidebar-nav .sidebar-item.selected > .sidebar-link .ti {
  color: var(--el-taupe-dark) !important;
}

/* ── Form labels ── deep-brown máxima presencia */
.form-label {
  color: var(--el-deep-brown) !important;
  font-weight: 600 !important;
}

/* ── Table headers ── deep-brown oscuro */
.table thead th {
  color: var(--el-deep-brown) !important;
}

/* ── Tile labels ── sage profundo */
.el-tile-label {
  color: #5D8B72 !important;
}

/* ── Tile value ── deep-brown más pesado */
.el-tile-value {
  color: var(--el-deep-brown) !important;
  font-weight: 700 !important;
}

/* ── Tile sub ── muted pero ligeramente taupe */
.el-tile-sub {
  color: var(--el-muted) !important;
}

/* ── Section tags ── deep-brown sobre fondo taupe visible */
.section-tag {
  color: var(--el-deep-brown) !important;
  background: rgba(196, 168, 130, 0.25) !important;
  font-weight: 700 !important;
}

/* ── Page header subtitle ── muted-dark */
.page-header-subtitle {
  color: #3A4550 !important;
}

/* ── Card header text ── deep-brown */
.card-header {
  color: var(--el-deep-brown) !important;
  font-weight: 700;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1rem;
  border-bottom: 1px solid var(--el-border) !important;
  background: transparent !important;
}

/* ── Breadcrumb: separador y active ── */
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--el-taupe) !important;
}

.breadcrumb-item.active {
  color: var(--el-deep-brown) !important;
  font-weight: 600;
}

/* ── Nav tabs: links inactivos con color ── */
.nav-tabs .nav-link {
  color: var(--el-muted) !important;
  font-weight: 500;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--el-deep-brown) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--el-taupe-dark) !important;
}

/* ── Nav pills inactive ── */
.nav-pills .nav-link {
  color: var(--el-deep-brown) !important;
}

/* ── Dropdown items ── */
.dropdown-item {
  color: var(--el-deep-brown) !important;
  font-size: 0.855rem;
}

.dropdown-header {
  color: var(--el-taupe) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Accordion title ── */
.accordion-button {
  color: var(--el-deep-brown) !important;
  font-weight: 500;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.05rem;
}

.accordion-button:not(.collapsed) {
  color: var(--el-deep-brown) !important;
  font-weight: 700 !important;
}

/* ── List group items ── */
.list-group-item {
  color: var(--el-deep-brown) !important;
  font-size: 0.855rem;
}

.list-group-item .text-muted,
.list-group-item small {
  color: var(--el-muted) !important;
}

/* ── Badges con texto más saturado ── */
.badge.bg-primary,
.badge.bg-light-primary {
  color: var(--el-taupe-dark) !important;
  font-weight: 600;
}

.badge.bg-secondary,
.badge.bg-light-secondary {
  color: var(--el-sage-dark) !important;
  font-weight: 600;
}

.badge.bg-warning,
.badge.bg-light-warning {
  color: #8B6200 !important;
  font-weight: 600;
}

.badge.bg-danger,
.badge.bg-light-danger {
  color: #8B2A1A !important;
  font-weight: 600;
}

.badge.bg-success,
.badge.bg-light-success {
  color: #0A5C54 !important;
  font-weight: 600;
}

/* ── Alert textos ── */
.alert-info {
  color: var(--el-sage-dark) !important;
}

.alert-primary {
  color: var(--el-taupe-dark) !important;
}

.alert-warning {
  color: #8B6200 !important;
}

.alert-danger {
  color: #8B2A1A !important;
}

.alert-success {
  color: #0A5C54 !important;
}

/* ── Topbar: texto de usuario y hora ── */
.topbar .navbar-brand,
.topbar .user-name,
.topbar .app-header .user-info span {
  color: var(--el-taupe-dark) !important;
  font-weight: 600;
}

/* ── Pagination números ── */
.page-link {
  color: var(--el-deep-brown) !important;
  font-weight: 600;
}

/* ── Input placeholder ── */
::placeholder {
  color: var(--el-sand) !important;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: var(--el-sand) !important;
}

/* ── Input group text ── */
.input-group-text {
  color: var(--el-deep-brown) !important;
}

/* ── Helpers de color de texto explícito ── */
.el-text-taupe {
  color: var(--el-taupe) !important;
}

.el-text-taupe-d {
  color: var(--el-taupe-dark) !important;
}

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

.el-text-sage-d {
  color: var(--el-sage-dark) !important;
}

.el-text-brown {
  color: var(--el-deep-brown) !important;
}

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

/* ============================================================
   SIDEBAR FINAL OVERRIDE – máxima prioridad
   Corrige: a{} anti-azul sobreescribía color de links sidebar
            icono activo invisible (taupe sobre fondo taupe)
   ============================================================ */
/* ── Links sidebar: deep-brown sin importar el parche a{} ── */
.left-sidebar .sidebar-nav .sidebar-item .sidebar-link,
.left-sidebar .sidebar-nav .sidebar-item a.sidebar-link,
.sidebar-nav .sidebar-item .sidebar-link {
  color: var(--el-deep-brown) !important;
  font-size: 0.855rem !important;
  font-weight: 500 !important;
}

/* ── Hover ── */
.left-sidebar .sidebar-nav .sidebar-item .sidebar-link:hover,
.sidebar-nav .sidebar-item .sidebar-link:hover {
  color: var(--el-deep-brown) !important;
  font-weight: 600 !important;
  background-color: rgba(196, 168, 130, 0.14) !important;
}

/* ── Item activo: texto e icono oscuros sobre fondo taupe ── */
.left-sidebar .sidebar-nav .sidebar-item.selected > .sidebar-link,
.sidebar-nav .sidebar-item.selected > .sidebar-link {
  color: var(--el-deep-brown) !important;
  font-weight: 700 !important;
  background-color: rgba(196, 168, 130, 0.18) !important;
}

/* ── Icono activo: deep-brown sobre fondo taupe (antes: taupe=invisible) ── */
.left-sidebar .sidebar-nav .sidebar-item.selected > .sidebar-link .ti,
.sidebar-nav .sidebar-item.selected > .sidebar-link .ti {
  color: var(--el-deep-brown) !important;
}

/* ── Icono inactivo: muted oscuro, contraste ≥ 4.5:1 ── */
.left-sidebar .sidebar-nav .sidebar-item > .sidebar-link .ti,
.sidebar-nav .sidebar-item > .sidebar-link .ti {
  color: #4A5560 !important; /* muted oscuro, ratio ~5.2:1 */
  font-size: 1.1rem;
}

/* ── Icono en hover ── */
.left-sidebar .sidebar-nav .sidebar-item .sidebar-link:hover .ti,
.sidebar-nav .sidebar-item .sidebar-link:hover .ti {
  color: var(--el-deep-brown) !important;
}

/* ── Labels de sección INICIO / BUSCADOR / DISEÑO ── */
.left-sidebar .nav-small-cap,
.nav-small-cap {
  color: var(--el-deep-brown) !important;
  opacity: 0.55;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
}

/* ── Sidebar mini/colapsado: iconos más oscuros ── */
/* Modernize usa .mini-sidebar en el body, los iconos son lo único visible */
.mini-sidebar .sidebar-nav .sidebar-item > .sidebar-link .ti,
.mini-sidebar .left-sidebar .sidebar-nav .sidebar-item .sidebar-link .ti,
[data-sidebartype=mini-sidebar] .sidebar-nav .sidebar-item .sidebar-link .ti {
  color: #4A5560 !important; /* contraste 5.2:1 sobre #FAF7F4 ✅ AA */
  font-size: 1.2rem !important;
}

/* Mini: icono activo */
.mini-sidebar .sidebar-nav .sidebar-item.selected > .sidebar-link .ti,
[data-sidebartype=mini-sidebar] .sidebar-nav .sidebar-item.selected > .sidebar-link .ti {
  color: var(--el-deep-brown) !important;
}

/* Mini: hover */
.mini-sidebar .sidebar-nav .sidebar-item .sidebar-link:hover .ti,
[data-sidebartype=mini-sidebar] .sidebar-nav .sidebar-item .sidebar-link:hover .ti {
  color: var(--el-deep-brown) !important;
}

/* =====================================================
   EventLink · Patrón unificado de página
   Uso: envolver el contenido en .page y usar la cabecera
   via el partial `partials/page-header.twig`.
   ===================================================== */
.page {
  width: 100%;
  padding: 20px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.page-header-text {
  min-width: 0;
  flex: 1 1 auto;
}

.page-title {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--el-deep-brown, #1A1F26);
}

.page-subtitle {
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--el-muted, #5C6570);
  line-height: 1.35;
}

.page-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Evita que .page pinte fondo card involuntariamente */
.page > .card:only-child,
.page > .q-card:only-child {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

@media (max-width: 640px) {
  .page {
    padding: 14px 14px 72px;
    gap: 14px;
  }
  .page-title {
    font-size: 1.2rem;
  }
  .page-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .page-actions .dt-buttons,
  .page-actions #dtButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}
/* Organizer application shell */
/* =====================================================
   EVENTLINK · Layout principal
   - Fuera del evento desktop: sidebar global 220 px, colapsable a 64 px
   - Dentro del evento desktop: rail global 64 px + menú evento 240 px
   - Móvil: una hamburguesa. Fuera del evento abre global; dentro abre evento
   ===================================================== */
:root {
  --el-font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --el-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  /* Fondo de app: blanco limpio (evitar grises azulados tipo #f8fafc) */
  --el-bg: #FFFFFF;
  --el-surface: #FFFFFF;
  --el-border: #E3E0D8;
  --el-side-bg: #FFFFFF;
  --el-side-fg: #23272A;
  --el-side-fg-muted: #7A7F86;
  --el-side-hover: rgba(31,45,58,.075);
  --el-side-border: #E3E0D8;
  --el-accent: #C4A882;
  --el-accent-soft: #F3EBE0;
  --el-accent-dark: #A88B68;
  --el-accent-ink: #8A6A3F;
  --el-ink: #2D2118;
  --el-ink-soft: #7A6B5D;
  --el-side-width: 220px;
  --el-side-width-mini: 64px;
  --el-event-width: 252px;
  --el-topbar-h: 60px;
}

body[data-sidebartype=full] {
  background: #FFFFFF !important;
  font-family: var(--el-font-ui);
  color: var(--el-ink);
}

#main-wrapper.el-app,
#main-wrapper.el-app .page-wrapper,
#main-wrapper.el-app .body-wrapper {
  background: #FFFFFF !important;
}

#main-wrapper.el-app {
  display: block !important;
  min-height: 100vh;
}

#main-wrapper.el-app > aside.left-sidebar,
#main-wrapper.el-app .left-sidebar.with-vertical {
  display: none !important;
}

/* === Page wrapper: ancho según estado === */
#main-wrapper.el-app .page-wrapper {
  margin-left: var(--el-side-width) !important;
  width: calc(100% - var(--el-side-width)) !important;
  transition: margin-left 0.2s ease, width 0.2s ease;
}

/* Sidebar global colapsado (preferencia usuario) */
#main-wrapper.el-app.side-mini .page-wrapper {
  margin-left: var(--el-side-width-mini) !important;
  width: calc(100% - var(--el-side-width-mini)) !important;
}

/* Dentro del evento: global mini + sub-sidebar visible */
#main-wrapper.el-app.in-evento .page-wrapper {
  margin-left: calc(var(--el-side-width-mini) + var(--el-event-width)) !important;
  width: calc(100% - var(--el-side-width-mini) - var(--el-event-width)) !important;
}

/* Topbar 100 % ancho */
#main-wrapper.el-app .page-wrapper,
#main-wrapper.el-app .page-wrapper > header.topbar,
#main-wrapper.el-app .topbar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#main-wrapper.el-app .el-topbar {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 22px !important;
}

#main-wrapper.el-app .topbar > .container,
#main-wrapper.el-app .topbar > .container-fluid {
  max-width: 100% !important;
  padding: 0 !important;
}

/* =====================================================
   SIDEBAR GLOBAL (rail)
   ===================================================== */
.el-side__head {
  position: relative;
}

.el-side {
  position: fixed !important;
  top: 0;
  left: 0;
  width: var(--el-side-width);
  height: 100vh;
  height: 100dvh;
  background: var(--el-side-bg) !important;
  color: var(--el-side-fg) !important;
  border-right: 1px solid var(--el-side-border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: visible;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

#main-wrapper.el-app.side-mini .el-side,
#main-wrapper.el-app.in-evento .el-side {
  width: var(--el-side-width-mini);
}

.el-side__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--el-side-border);
  text-decoration: none;
  overflow: visible;
  min-height: 60px;
}

.el-side__brand-full {
  display: block;
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

.el-side__brand-mark {
  display: none;
  height: 32px;
  width: auto;
  max-width: 36px;
  object-fit: contain;
  margin: 0 auto;
}

#main-wrapper.el-app.side-mini .el-side__brand,
#main-wrapper.el-app.in-evento .el-side__brand {
  justify-content: center;
  padding: 14px 8px 12px;
}

#main-wrapper.el-app.side-mini .el-side__brand-full,
#main-wrapper.el-app.in-evento .el-side__brand-full {
  display: none;
}

#main-wrapper.el-app.side-mini .el-side__brand-mark,
#main-wrapper.el-app.in-evento .el-side__brand-mark {
  display: block;
}

/* legacy text mark kept harmless if present elsewhere */
.el-side__brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--el-accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  flex: 0 0 32px;
}

.el-side__brand-text {
  font-family: var(--el-font-ui);
  font-size: 0.98rem;
  color: var(--el-side-fg);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
}

#main-wrapper.el-app.side-mini .el-side__brand-text,
#main-wrapper.el-app.in-evento .el-side__brand-text {
  display: none;
}

.el-side__collapse {
  position: absolute !important;
  top: 18px;
  right: -12px;
  background: #FFFFFF !important;
  border: 1px solid var(--el-side-border) !important;
  color: var(--el-ink-soft) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  z-index: 1042;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: grid !important;
  place-items: center !important;
  cursor: pointer;
  padding: 0;
}

.el-side__collapse:hover {
  background: var(--el-accent) !important;
  color: #fff !important;
  border-color: var(--el-accent) !important;
}

.el-side__collapse i {
  font-size: 13px !important;
  line-height: 1;
}

#main-wrapper.el-app.side-mini .el-side__collapse,
#main-wrapper.el-app.in-evento .el-side__collapse {
  transform: rotate(180deg);
}

/* Dentro del evento, el toggle global se oculta (gestiona la app, no el user) */
#main-wrapper.el-app.in-evento .el-side__collapse {
  display: none !important;
}

.el-side__head .el-side__collapse {
  pointer-events: auto;
}

.el-side__nav {
  list-style: none;
  padding: 8px;
  margin: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-side__nav::-webkit-scrollbar {
  width: 4px;
}

.el-side__nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}

.el-side__group {
  padding: 14px 10px 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--el-side-fg-muted);
  white-space: nowrap;
  overflow: hidden;
}

#main-wrapper.el-app.side-mini .el-side__group,
#main-wrapper.el-app.in-evento .el-side__group {
  font-size: 0;
  padding: 8px 10px 4px;
  border-top: 1px solid var(--el-side-border);
  height: 1px;
}

.el-side__item {
  list-style: none;
}

.el-side__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 8px;
  color: var(--el-side-fg) !important;
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.el-side__link i {
  font-size: 18px;
  flex: 0 0 18px;
  color: inherit;
}

.el-side__link span {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-side__link:hover {
  background: var(--el-side-hover) !important;
  color: var(--el-ink) !important;
}

.el-side__link.active {
  background: var(--el-accent-soft) !important;
  color: var(--el-accent-dark) !important;
}

.el-side__link.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 3px;
  height: 22px;
  background: var(--el-accent);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
}

.el-side__link .dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--el-accent);
}

#main-wrapper.el-app.side-mini .el-side__link,
#main-wrapper.el-app.in-evento .el-side__link {
  justify-content: center;
  padding: 8px;
}

#main-wrapper.el-app.side-mini .el-side__link span,
#main-wrapper.el-app.in-evento .el-side__link span {
  display: none;
}

#main-wrapper.el-app.side-mini .el-side__link .dot,
#main-wrapper.el-app.in-evento .el-side__link .dot {
  top: 4px;
  right: 4px;
}

#main-wrapper.el-app.side-mini .el-side__link[data-label]:hover::after,
#main-wrapper.el-app.in-evento .el-side__link[data-label]:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--el-accent-dark);
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 1100;
  pointer-events: none;
}

.el-side__foot {
  border-top: 1px solid var(--el-side-border);
  padding: 8px;
  flex-shrink: 0;
}

/* =====================================================
   SUB-SIDEBAR DEL EVENTO (columna 2)
   ===================================================== */
.el-evside {
  position: fixed;
  top: 0;
  left: var(--el-side-width-mini);
  width: var(--el-event-width);
  height: 100vh;
  height: 100dvh;
  --el-evside-bg: #F4EDE4;
  --el-evside-line: #E5DACB;
  --el-evside-hover: rgba(45, 33, 24, 0.07);
  background: var(--el-evside-bg);
  border-right: 1px solid var(--el-evside-line);
  display: flex;
  flex-direction: column;
  z-index: 1039;
}

#main-wrapper.el-app:not(.in-evento) .el-evside {
  display: none !important;
}

.el-evside__h {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--el-evside-line, #E5DACB);
}

.el-evside__exit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--el-ink-soft);
  text-decoration: none;
  margin-bottom: 8px;
}

.el-evside__exit:hover {
  color: var(--el-accent-dark);
}

.el-evside__exit i {
  font-size: 14px;
}

.el-evside__name {
  font-family: var(--el-font-display);
  font-size: 1.08rem;
  color: var(--el-ink);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin-bottom: 6px;
  word-break: break-word;
}

.el-evside__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--el-ink-soft);
  margin-bottom: 8px;
}

.el-evside__meta .badge {
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--el-accent-soft);
  color: var(--el-accent-ink);
  border: 1px solid rgba(176, 141, 87, 0.28);
}

.el-evside__switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--el-ink-soft);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.el-evside__switch:hover {
  color: var(--el-accent-dark);
}

a.el-evside__switch {
  text-decoration: none;
}

.el-evside__switch i {
  font-size: 12px;
}

.el-evside__nav {
  list-style: none;
  padding: 8px;
  margin: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.el-evside__nav::-webkit-scrollbar {
  width: 4px;
}

.el-evside__nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}

.el-evside__group {
  padding: 16px 10px 6px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--el-side-fg-muted);
}

.el-evside__group--pwa {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--el-evside-line, #E5DACB);
}

.el-evside__item {
  list-style: none;
  position: relative;
}

.el-evside__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: 8px;
  color: var(--el-side-fg);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.el-evside__link i {
  font-size: 17px;
  flex: 0 0 17px;
  color: var(--el-ink-soft);
}

.el-evside__link span {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-evside__link:hover {
  background: var(--el-evside-hover, rgba(45, 33, 24, 0.07));
  color: var(--el-ink);
}

.el-evside__link.active {
  background: #fffaf4;
  color: var(--el-accent-dark);
}

.el-evside__link.active i {
  color: var(--el-accent);
}

.el-evside__link.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 3px;
  height: 20px;
  background: var(--el-accent);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
}

.el-evside__link.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.el-evside__link .lock {
  margin-left: auto;
  font-size: 13px;
  color: var(--el-ink-soft);
}

.el-evside__soon {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--el-accent-soft);
  color: var(--el-accent-ink);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.el-evside__star {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--el-ink-soft);
  padding: 4px;
  border-radius: 6px;
  opacity: 0;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.15s ease;
}

.el-evside__item:hover .el-evside__star {
  opacity: 1;
}

.el-evside__star.is-fav {
  opacity: 1;
  color: var(--el-accent);
}

.el-evside__star:hover {
  background: var(--el-bg);
}

.el-evside__star i {
  font-size: 14px;
}

.el-evside__pwa {
  list-style: none;
  margin: 10px 2px 6px;
}

.el-evside__pwa-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--el-ink);
  background: #fffaf4;
  border: 1px solid #ead9b3;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.el-evside__pwa-link:hover {
  background: #fff;
  border-color: #c4a882;
  color: var(--el-ink);
}

.el-evside__pwa-art {
  flex: 0 0 52px;
  width: 52px;
  height: 40px;
  color: #c4a882;
}

.el-evside__pwa-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.el-evside__pwa-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.el-evside__pwa-copy strong {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  color: #0f766e;
}

.el-evside__pwa-copy span {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--el-ink-soft);
}

.el-evside__more {
  list-style: none;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--el-evside-line, #E5DACB);
}

.el-evside__more-box {
  margin: 0;
}

.el-evside__more-sum {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--el-side-fg);
  list-style: none;
}

.el-evside__more-sum::-webkit-details-marker,
.el-evside__more-sum::marker {
  display: none;
  content: '';
}

.el-evside__more-sum:hover {
  background: var(--el-evside-hover, rgba(45, 33, 24, 0.07));
}

.el-evside__more-sum i {
  font-size: 17px;
  flex: 0 0 17px;
  color: var(--el-ink-soft);
}

.el-evside__more-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
}

.el-evside__more-list .el-evside__group {
  padding-top: 10px;
}

/* =====================================================
   TOPBAR
   ===================================================== */
.el-topbar {
  background: var(--el-surface) !important;
  border-bottom: 1px solid var(--el-border) !important;
  padding: 0 22px !important;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--el-topbar-h);
}

.el-topbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--el-border);
  color: var(--el-ink-soft);
  text-decoration: none;
  transition: all 0.15s ease;
}

.el-topbar__back:hover {
  background: #F3EDE4;
  border-color: var(--el-accent);
  color: var(--el-accent);
}

.el-topbar__back i {
  font-size: 16px;
}

.el-topbar__crumb {
  color: var(--el-ink-soft);
  font-size: 0.82rem;
}

.el-topbar__crumb a {
  color: var(--el-ink-soft);
  text-decoration: none;
}

.el-topbar__crumb a:hover {
  color: var(--el-accent-dark);
}

.el-topbar__crumb i {
  font-size: 13px;
  opacity: 0.5;
  margin: 0 4px;
  vertical-align: middle;
}

.el-topbar__event {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.el-topbar__event-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.el-topbar__event-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.el-topbar__name {
  font-weight: 600;
  font-size: 1.04rem;
  color: var(--el-ink);
  font-family: var(--el-font-display);
  letter-spacing: -0.012em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-topbar__date {
  flex: none;
  font-family: var(--el-font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--el-ink-soft);
  white-space: nowrap;
}

.el-topbar__client {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--el-border);
  background: transparent;
  color: var(--el-ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.el-topbar__client:hover {
  background: #F3EDE4;
  border-color: var(--el-accent);
  color: var(--el-accent);
}

.el-topbar__client i {
  font-size: 14px;
}

.el-topbar__user-wrap {
  margin-left: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.el-topbar__notif {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--el-ink);
  display: grid;
  place-items: center;
  text-decoration: none;
}

.el-topbar__notif-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.el-topbar__notif-menu {
  min-width: 280px;
  max-width: 360px;
  padding: 8px 0;
}

.el-topbar__notif-head {
  padding: 8px 16px 6px;
  font-weight: 700;
  font-size: 13px;
}

.el-topbar__notif-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
  padding: 10px 16px;
}

.el-topbar__notif-item span {
  font-size: 12px;
  color: #64748b;
}

.el-topbar__user {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--el-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
}

@media (min-width: 992px) {
  #elSideToggle {
    display: none !important;
  }
}
/* =====================================================
   v7 · Responsive + cabecera + avatar (parche acumulado)
   ===================================================== */
/* Avatar del usuario siempre visible y bien colocado */
#main-wrapper.el-app .el-topbar__user-wrap {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center;
}

#main-wrapper.el-app .el-topbar__user {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: var(--el-accent) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 600;
  font-size: 0.82rem;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

#main-wrapper.el-app .el-topbar__user-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

#main-wrapper.el-app .el-topbar__user-ini {
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Forzar cabecera 100% ancho real (override Spike Admin) */
#main-wrapper.el-app header.topbar,
#main-wrapper.el-app .topbar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--el-surface) !important;
  border: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20;
}

#main-wrapper.el-app .topbar .container,
#main-wrapper.el-app .topbar .container-fluid,
#main-wrapper.el-app .topbar .container-xxl,
#main-wrapper.el-app .topbar .container-xl,
#main-wrapper.el-app .body-wrapper > .container,
#main-wrapper.el-app .body-wrapper > .container-fluid,
#main-wrapper.el-app .body-wrapper > .container-xxl,
#main-wrapper.el-app .body-wrapper > .container-xl {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

#main-wrapper.el-app .el-topbar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border-bottom: 1px solid var(--el-border) !important;
  box-sizing: border-box !important;
}

#main-wrapper.el-app .body-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 22px !important;
  box-sizing: border-box !important;
}

/* Desktop ≥ 992px: rail 64 + menú del evento 240 + contenido */
@media (min-width: 992px) {
  #main-wrapper.el-app.in-evento:not(.side-peek) .el-side {
    display: flex !important;
    width: var(--el-side-width-mini) !important;
    transform: none !important;
  }
  #main-wrapper.el-app.in-evento.side-peek .el-side {
    display: flex !important;
    transform: none !important;
  }
  #main-wrapper.el-app.in-evento .el-evside {
    display: flex !important;
    left: var(--el-side-width-mini) !important;
    width: var(--el-event-width) !important;
    transform: none !important;
  }
  #main-wrapper.el-app.in-evento .page-wrapper {
    margin-left: calc(var(--el-side-width-mini) + var(--el-event-width)) !important;
    width: calc(100% - var(--el-side-width-mini) - var(--el-event-width)) !important;
  }
  #main-wrapper.el-app #elSideToggle {
    display: none !important;
  }
}
/* Móvil < 992px: solo cabecera + contenido; menús cerrados por defecto */
@media (max-width: 991.98px) {
  #main-wrapper.el-app .page-wrapper,
  #main-wrapper.el-app.in-evento .page-wrapper,
  #main-wrapper.el-app.side-mini .page-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
  /* Rail global cerrado, se abre con hamburguesa (solo fuera del evento) */
  #main-wrapper.el-app .el-side {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    width: 240px !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    z-index: 1060;
  }
  #main-wrapper.el-app.side-open .el-side {
    transform: translateX(0);
  }
  /* Dentro del evento: rail global oculto del todo en móvil */
  #main-wrapper.el-app.in-evento .el-side {
    display: none !important;
  }
  /* Menú del evento cerrado, se abre con hamburguesa */
  #main-wrapper.el-app.in-evento .el-evside {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    left: 0 !important;
    width: 280px !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    z-index: 1060;
    display: flex !important;
  }
  #main-wrapper.el-app.in-evento.side-open .el-evside {
    transform: translateX(0);
  }
  /* Overlay al abrir */
  #main-wrapper.el-app.side-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1055;
  }
  /* Hamburguesa visible en móvil */
  #main-wrapper.el-app #elSideToggle {
    display: inline-flex !important;
  }
  /* Cabecera ocupa 100% sin solapes */
  #main-wrapper.el-app header.topbar,
  #main-wrapper.el-app .el-topbar {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Nombre del evento más compacto en móvil */
  #main-wrapper.el-app .el-topbar__event {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  #main-wrapper.el-app .el-topbar__event-actions {
    flex-shrink: 0;
  }
  #main-wrapper.el-app .el-topbar__event-title {
    min-width: 0;
  }
  #main-wrapper.el-app .el-topbar__name {
    font-size: 0.96rem;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #main-wrapper.el-app .el-topbar__date {
    font-size: 0.72rem;
  }
  #main-wrapper.el-app .el-topbar__client {
    width: 28px;
    padding: 0;
  }
  #main-wrapper.el-app .el-topbar__client span {
    display: none;
  }
  /* Body con padding cómodo */
  #main-wrapper.el-app .body-wrapper {
    padding: 16px !important;
  }
}
/* =====================================================
   v8 · Sidebar 2 niveles (acordeón)
   ===================================================== */
#main-wrapper.el-app .el-side__parent {
  list-style: none;
  margin: 0;
  padding: 0;
}

#main-wrapper.el-app .el-side__parent-btn {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
  padding: 8px 10px !important;
  margin: 2px 0 !important;
  border-radius: 8px !important;
  color: var(--el-side-fg) !important;
  font-size: 0.87rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  font-family: var(--el-font-ui) !important;
}

#main-wrapper.el-app .el-side__parent-btn:hover {
  background: var(--el-side-hover) !important;
  color: var(--el-ink) !important;
}

#main-wrapper.el-app .el-side__parent-btn i {
  font-size: 18px !important;
}

#main-wrapper.el-app .el-side__chev {
  margin-left: auto !important;
  font-size: 14px !important;
  transition: transform 0.18s ease;
  opacity: 0.55 !important;
}

#main-wrapper.el-app .el-side__parent.open > .el-side__parent-btn .el-side__chev {
  transform: rotate(180deg);
  opacity: 1 !important;
}

#main-wrapper.el-app .el-side__sub {
  list-style: none !important;
  margin: 0 0 4px 0 !important;
  padding: 0 0 2px 32px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.22s ease;
}

#main-wrapper.el-app .el-side__sub li {
  list-style: none;
  margin: 0;
}

#main-wrapper.el-app .el-side__parent.open > .el-side__sub {
  max-height: min(70vh, 640px) !important;
}

#main-wrapper.el-app .el-side__sublink {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  margin: 1px 0 !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--el-side-fg) !important;
  background: transparent !important;
  text-decoration: none !important;
  font-family: var(--el-font-ui) !important;
}

#main-wrapper.el-app .el-side__sublink:hover {
  background: var(--el-side-hover) !important;
  color: var(--el-ink) !important;
}

#main-wrapper.el-app .el-side__sublink.active {
  background: var(--el-accent-soft) !important;
  color: var(--el-accent-dark) !important;
}

#main-wrapper.el-app .el-side__sublink .dot {
  position: static !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--el-accent) !important;
  margin-left: 6px !important;
}

#main-wrapper.el-app.side-mini .el-side__sub,
#main-wrapper.el-app.in-evento .el-side__sub,
#main-wrapper.el-app.side-mini .el-side__chev,
#main-wrapper.el-app.in-evento .el-side__chev {
  display: none !important;
}

#main-wrapper.el-app.side-mini .el-side__parent-btn,
#main-wrapper.el-app.in-evento .el-side__parent-btn {
  justify-content: center !important;
  padding: 8px !important;
}

#main-wrapper.el-app.side-mini .el-side__parent-btn span,
#main-wrapper.el-app.in-evento .el-side__parent-btn span {
  display: none !important;
}

/* Rail colapsado / dentro del evento: hover expande el menú principal en overlay */
@media (min-width: 992px) {
  #main-wrapper.el-app.side-peek .el-side {
    width: var(--el-side-width) !important;
    z-index: 1120 !important;
    box-shadow: 8px 0 28px rgba(47, 42, 35, 0.16) !important;
  }

  #main-wrapper.el-app.side-peek .el-side__brand {
    justify-content: flex-start !important;
    padding: 14px 16px 12px !important;
  }

  #main-wrapper.el-app.side-peek .el-side__brand-full {
    display: block !important;
  }

  #main-wrapper.el-app.side-peek .el-side__brand-mark {
    display: none !important;
  }

  #main-wrapper.el-app.side-peek .el-side__link,
  #main-wrapper.el-app.side-peek .el-side__parent-btn {
    justify-content: flex-start !important;
    padding: 8px 10px !important;
  }

  #main-wrapper.el-app.side-peek .el-side__link span,
  #main-wrapper.el-app.side-peek .el-side__parent-btn span {
    display: inline !important;
  }

  #main-wrapper.el-app.side-peek .el-side__chev {
    display: inline-block !important;
  }

  #main-wrapper.el-app.side-peek .el-side__sub {
    display: block !important;
  }

  #main-wrapper.el-app.side-peek .el-side__parent.open > .el-side__sub {
    max-height: min(70vh, 640px) !important;
  }

  #main-wrapper.el-app.side-peek .el-side__link[data-label]:hover::after {
    display: none !important;
  }
}

/* =====================================================
   v10 · Comportamiento definitivo de sidebars
   ===================================================== */
@media (min-width: 992px) {
  /* Fuera del evento: sidebar global normal */
  #main-wrapper.el-app:not(.in-evento) .el-side {
    display: flex !important;
    transform: none !important;
  }
  /* Dentro del evento: rail global mini fijo + menú del evento fijo.
     side-peek no se fuerza a mini: el hover debe poder expandir en overlay. */
  #main-wrapper.el-app.in-evento:not(.side-peek) .el-side {
    display: flex !important;
    width: var(--el-side-width-mini) !important;
    transform: none !important;
  }
  #main-wrapper.el-app.in-evento.side-peek .el-side {
    display: flex !important;
    transform: none !important;
  }
  #main-wrapper.el-app.in-evento .el-evside {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: var(--el-side-width-mini) !important;
    width: var(--el-event-width) !important;
    height: 100vh !important;
    transform: none !important;
  }
  #main-wrapper.el-app.in-evento .page-wrapper {
    margin-left: calc(var(--el-side-width-mini) + var(--el-event-width)) !important;
    width: calc(100% - var(--el-side-width-mini) - var(--el-event-width)) !important;
  }
}

/* =====================================================
   v11 · Menú del evento comprimible (rail de iconos)
   ===================================================== */
.el-evside {
  overflow: visible;
  transition: width 0.22s ease;
  background: var(--el-evside-bg, #F4EDE4);
  border-right-color: var(--el-evside-line, #E5DACB);
}
.el-evside__h {
  position: relative;
}
.el-evside__collapse {
  position: absolute !important;
  top: 18px;
  right: -12px;
  background: #FFFFFF !important;
  border: 1px solid var(--el-side-border) !important;
  color: var(--el-ink-soft) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  z-index: 1043;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: grid !important;
  place-items: center !important;
  cursor: pointer;
  padding: 0;
}
.el-evside__collapse:hover {
  background: var(--el-accent) !important;
  color: #fff !important;
  border-color: var(--el-accent) !important;
}
.el-evside__collapse i {
  font-size: 13px !important;
  line-height: 1;
}
#main-wrapper.el-app.in-evento.evside-mini .el-evside__collapse {
  transform: rotate(180deg);
}
.el-evside__exit,
.el-evside__switch,
.el-evside__link {
  position: relative;
}

@media (min-width: 992px) {
  #main-wrapper.el-app.in-evento.evside-mini .el-evside {
    width: var(--el-side-width-mini) !important;
  }
  #main-wrapper.el-app.in-evento.evside-mini .page-wrapper {
    margin-left: calc(var(--el-side-width-mini) * 2) !important;
    width: calc(100% - var(--el-side-width-mini) * 2) !important;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__h {
    padding: 10px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__name,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__meta,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__exit span,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__switch span,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__link span,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__link .lock,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__soon,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__star,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__more-sum span {
    display: none !important;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__exit,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__switch {
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__switch {
    color: var(--el-ink-soft);
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__group,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__more-list .el-evside__group {
    font-size: 0;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--el-side-border);
    height: 1px;
    overflow: hidden;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__pwa {
    margin: 8px 0 4px;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__pwa-link {
    justify-content: center;
    padding: 8px;
    gap: 0;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__pwa-art {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__pwa-copy {
    display: none !important;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__more-sum {
    justify-content: center;
    padding: 8px;
    gap: 0;
    position: relative;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__link {
    justify-content: center;
    padding: 8px;
    gap: 0;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__link.active::before {
    left: 0;
  }
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__exit[data-label]:hover::after,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__switch[data-label]:hover::after,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__link[data-label]:hover::after,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__pwa-link[data-label]:hover::after,
  #main-wrapper.el-app.in-evento.evside-mini .el-evside__more-sum[data-label]:hover::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--el-accent-dark);
    color: #FFFFFF !important;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1100;
    pointer-events: none;
  }
}
@media (max-width: 991.98px) {
  .el-evside__collapse {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  /* En móvil no hay columnas laterales ocupando espacio */
  #main-wrapper.el-app .page-wrapper,
  #main-wrapper.el-app.side-mini .page-wrapper,
  #main-wrapper.el-app.in-evento .page-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }
  /* Fuera del evento: hamburguesa abre el sidebar global */
  #main-wrapper.el-app:not(.in-evento) .el-side {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;
    transition: transform 0.22s ease !important;
    z-index: 1060 !important;
    box-shadow: 2px 0 18px rgba(47, 42, 35, 0.18) !important;
  }
  #main-wrapper.el-app:not(.in-evento).side-open .el-side {
    transform: translateX(0) !important;
  }
  /* Aunque el usuario lo tuviera colapsado en desktop, en móvil se abre completo */
  #main-wrapper.el-app.side-mini:not(.in-evento) .el-side__brand-text,
  #main-wrapper.el-app.side-mini:not(.in-evento) .el-side__link span,
  #main-wrapper.el-app.side-mini:not(.in-evento) .el-side__parent-btn span {
    display: inline-block !important;
  }
  #main-wrapper.el-app.side-mini:not(.in-evento) .el-side__link,
  #main-wrapper.el-app.side-mini:not(.in-evento) .el-side__parent-btn {
    justify-content: flex-start !important;
    padding: 8px 10px !important;
  }
  #main-wrapper.el-app.side-mini:not(.in-evento) .el-side__chev {
    display: inline-block !important;
  }
  #main-wrapper.el-app.side-mini:not(.in-evento) .el-side__parent.open > .el-side__sub {
    display: block !important;
    max-height: min(70vh, 640px) !important;
  }
  /* Dentro del evento: el sidebar global no compite con el menú del evento */
  #main-wrapper.el-app.in-evento .el-side {
    display: none !important;
  }
  /* Dentro del evento: hamburguesa abre SOLO el menú del evento */
  #main-wrapper.el-app.in-evento .el-evside {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 300px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;
    transition: transform 0.22s ease !important;
    z-index: 1060 !important;
    background: var(--el-evside-bg, #F4EDE4) !important;
    border-right: 1px solid var(--el-evside-line, #E5DACB) !important;
    box-shadow: 2px 0 18px rgba(47, 42, 35, 0.18) !important;
  }
  #main-wrapper.el-app.in-evento.side-open .el-evside {
    transform: translateX(0) !important;
  }
  /* Overlay común */
  #main-wrapper.el-app.side-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(47, 42, 35, 0.38);
    z-index: 1055;
  }
  #main-wrapper.el-app #elSideToggle {
    display: inline-flex !important;
  }
  #main-wrapper.el-app .el-side__collapse {
    display: none !important;
  }
  #main-wrapper.el-app .el-topbar {
    min-height: 58px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  #main-wrapper.el-app .el-topbar__event {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  #main-wrapper.el-app .el-topbar__event-actions {
    flex-shrink: 0;
  }
  #main-wrapper.el-app .el-topbar__event-title {
    min-width: 0;
  }
  #main-wrapper.el-app .el-topbar__name {
    font-size: 0.96rem !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  #main-wrapper.el-app .el-topbar__date {
    font-size: 0.72rem !important;
  }
  #main-wrapper.el-app .el-topbar__client {
    width: 28px;
    min-width: 28px;
    padding: 0;
  }
  #main-wrapper.el-app .el-topbar__client span {
    display: none;
  }
  #main-wrapper.el-app .el-side,
  #main-wrapper.el-app.in-evento .el-evside {
    height: 100vh !important;
    height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #main-wrapper.el-app:not(.in-evento) .el-side {
    height: 100vh !important;
    height: 100dvh !important;
  }
  #main-wrapper.el-app .el-side__nav,
  #main-wrapper.el-app .el-evside__nav {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #main-wrapper.el-app .el-side__foot {
    flex-shrink: 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  #main-wrapper.el-app .el-evside__pwa-link {
    padding: 8px;
  }
  #main-wrapper.el-app .el-evside__pwa-art {
    flex-basis: 40px;
    width: 40px;
    height: 32px;
  }
  #main-wrapper.el-app .body-wrapper {
    padding: 16px !important;
    padding-bottom: 72px !important;
  }
  #main-wrapper.el-app .page-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  #main-wrapper.el-app .page-actions .dt-buttons,
  #main-wrapper.el-app .page-actions #dtButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}
/* Provider portal shell and components */
body.el-provider-app {
  --el-bg:#f7f8fb;
  --el-surface:#ffffff;
  --el-card:#ffffff;
  --el-text:#1f2937;
  --el-muted:#7b8794;
  --el-border:#e6ebf2;
  --el-border-strong:#d4dde9;
  --el-accent:#C4A882;
  --el-accent-2:#5aa6ff;
  --el-accent-soft:#eef6ff;
  --el-accent-soft-2:#ecfdf5;
  --el-danger:#dc2626;
  --el-success:#A88B68;
  --el-warning:#c76b14;
  --el-warning-soft:#fff7ed;
  --el-shadow:0 10px 30px rgba(15,23,42,.05);
  --el-shadow-soft:0 8px 20px rgba(15,23,42,.035);
  --el-radius:18px;
  --el-radius-lg:22px;
  --el-sidebar-w:274px;
  --el-topbar-h:74px;
}

* {
  box-sizing: border-box;
}

body.el-provider-app {
  margin: 0;
  min-height: 100vh;
  background: var(--el-bg);
  color: var(--el-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
}

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

.el-provider-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--el-sidebar-w);
  background: #fff;
  border-right: 1px solid var(--el-border);
  padding: 22px 18px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.el-provider-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid var(--el-border);
}

.el-provider-logo {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #162433;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(22, 36, 51, 0.12);
}

.el-provider-brand-name {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
}

.el-provider-brand-subtitle {
  font-size: 13px;
  color: var(--el-muted);
  margin-top: 2px;
}

.el-provider-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--el-border);
  border-radius: 18px;
  background: #fff;
  padding: 12px 13px;
  box-shadow: var(--el-shadow-soft);
}

.el-provider-account-main {
  min-width: 0;
}

.el-provider-account-main strong {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-provider-account-main span {
  display: block;
  font-size: 12px;
  color: var(--el-muted);
  margin-top: 2px;
}

.el-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.el-badge-soft {
  background: var(--el-warning-soft);
  color: var(--el-warning);
  border: 1px solid #fed7aa;
}

.el-provider-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.el-nav-section {
  margin: 14px 6px 7px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 800;
  color: #9aa6b2;
}

.el-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  color: #475569;
  font-weight: 650;
  transition: 0.16s ease;
}

.el-nav-item i {
  width: 18px;
  text-align: center;
  color: #94a3b8;
}

.el-nav-item:hover {
  background: #f8fafc;
  color: var(--el-text);
}

.el-nav-item.is-active {
  background: #f4efe7;
  color: var(--el-text);
  box-shadow: inset 0 0 0 1px rgba(230, 219, 205, 0.75);
}

.el-nav-item.is-active i {
  color: var(--el-text);
}

.el-provider-shell {
  margin-left: var(--el-sidebar-w);
  min-height: 100vh;
}

.el-provider-topbar {
  height: var(--el-topbar-h);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--el-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
}

.el-topbar-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.el-topbar-title strong {
  font-size: 16px;
}

.el-topbar-kicker {
  font-size: 13px;
  color: var(--el-muted);
}

.el-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #162433;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.el-sidebar-toggle {
  display: none;
  border: 0;
  background: #fff;
  border: 1px solid var(--el-border);
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.el-provider-main {
  padding: 28px;
  max-width: 1680px;
}

.el-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.el-page-header h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.el-page-header p {
  margin: 6px 0 0;
  color: var(--el-muted);
  font-size: 15px;
  line-height: 1.45;
}

.el-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.el-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  cursor: pointer;
  font-size: 14px;
  transition: 0.16s ease;
}

.el-btn-sm {
  min-height: 38px;
  padding: 0 15px;
}

.el-btn-primary {
  background: var(--el-accent);
  color: #fff;
}

.el-btn-primary:hover {
  background: #A88B68;
  color: #fff;
}

.el-btn-outline {
  background: #fff;
  border-color: var(--el-border);
  color: var(--el-text);
}

.el-btn-outline:hover {
  border-color: var(--el-border-strong);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.el-link {
  font-size: 13px;
  color: #2563eb;
  font-weight: 800;
}

.el-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--el-border);
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--el-muted);
}

.el-alert {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--el-border);
  background: #fff;
}

.el-alert-success {
  border-color: #bbf7d0;
  color: var(--el-success);
  background: #ecfdf5;
}

.el-alert-danger {
  border-color: #fecaca;
  color: var(--el-danger);
  background: #fef2f2;
}

.el-card {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius-lg);
  box-shadow: var(--el-shadow);
  padding: 24px;
}

.el-card-compact {
  padding: 20px;
}

.el-card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.el-card-header h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.el-card-header p {
  margin: 7px 0 0;
  color: var(--el-muted);
  font-size: 14px;
  line-height: 1.45;
}

.el-card-header.compact {
  align-items: center;
  margin-bottom: 12px;
}

.el-card-header.compact h2 {
  font-size: 17px;
}

.el-kpi-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 22px;
}

.el-kpi-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.el-kpi-card {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 22px;
  padding: 18px 20px;
  min-height: 106px;
  box-shadow: var(--el-shadow);
}

.el-kpi-label {
  display: block;
  color: var(--el-muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.el-kpi-card strong {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.el-kpi-card small {
  display: block;
  color: var(--el-muted);
  font-size: 13px;
  margin-top: 8px;
}

.el-kpi-status {
  font-size: 20px !important;
  text-transform: capitalize;
}

.el-layout-grid {
  display: grid;
  gap: 28px;
}

.el-layout-grid-catalog {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.85fr);
  align-items: start;
}

.el-stack {
  display: grid;
  gap: 16px;
}

.el-form {
  display: grid;
  gap: 12px;
}

.el-form-row {
  display: grid;
  gap: 7px;
}

.el-form-row-inline {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.el-form label {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
}

.el-form input, .el-form select, .el-form textarea {
  width: 100%;
  border: 1px solid var(--el-border);
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
  font: inherit;
  color: var(--el-text);
  outline: none;
}

.el-form input:focus, .el-form select:focus, .el-form textarea:focus {
  border-color: #8bded0;
  box-shadow: 0 0 0 4px rgba(32, 214, 181, 0.12);
}

.el-form-compact input, .el-form-compact select {
  min-height: 46px;
}

.el-form-compact textarea {
  resize: vertical;
}

.el-list {
  display: grid;
  gap: 8px;
}

.el-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--el-border);
  background: #fff;
  border-radius: 14px;
  padding: 11px 12px;
}

.el-list-item strong {
  display: block;
  font-size: 14px;
}

.el-list-item span {
  display: block;
  color: var(--el-muted);
  font-size: 12px;
  margin-top: 3px;
}

.el-empty-small {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--el-border-strong);
  border-radius: 14px;
  color: var(--el-muted);
  font-size: 14px;
  background: #fff;
}

/* Trabajo proveedor: solicitudes y tareas unificadas */
.el-work-grid {
  display: grid;
  gap: 16px;
}

.el-work-card {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 24px;
  box-shadow: var(--el-shadow);
  padding: 24px;
  margin-bottom: 16px;
}

.el-work-card.is-request {
  border-left: 4px solid #bfeee5;
}

.el-work-card.is-task {
  border-left: 4px solid #dbeafe;
}

.el-work-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.el-work-kicker {
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  margin-bottom: 6px;
}

.el-work-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.025em;
  color: var(--el-text);
}

.el-work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  color: var(--el-muted);
}

.el-work-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid var(--el-border);
  background: #f8fafc;
  color: #475569;
}

.el-work-status.enviada, .el-work-status.pendiente {
  background: #eef6ff;
  border-color: #dbeafe;
  color: #2563eb;
}

.el-work-status.respondida, .el-work-status.presupuesto_recibido, .el-work-status.documento_recibido {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #A88B68;
}

.el-work-status.cancelada, .el-work-status.no_disponible {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.el-work-message {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--el-border);
  border-radius: 18px;
  background: #fbfcfe;
}

.el-work-message strong {
  display: block;
  margin-bottom: 6px;
  color: var(--el-text);
}

.el-work-message p {
  margin: 0;
  color: var(--el-muted);
  line-height: 1.5;
}

.el-work-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.el-work-panel {
  display: none;
  margin-top: 18px;
  border: 1px solid var(--el-border);
  border-radius: 22px;
  background: #fff;
  padding: 20px;
}

.el-work-panel.is-open {
  display: block;
}

.el-work-panel h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 850;
}

.el-work-panel p {
  margin: 0 0 14px;
  color: var(--el-muted);
  line-height: 1.5;
}

.el-work-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.el-ai-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #f8fbff;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 14px;
  margin: 14px 0;
}

.el-ai-note-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dbeafe;
  display: grid;
  place-items: center;
  font-weight: 850;
  color: #2563eb;
  flex: 0 0 auto;
}

.el-ai-note strong {
  display: block;
  color: #1e3a8a;
  margin-bottom: 3px;
}

.el-ai-note span {
  display: block;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

.el-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.el-choice-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--el-border);
  background: #fff;
  color: var(--el-text);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 750;
  cursor: pointer;
}

.el-choice-chip.is-active {
  background: var(--el-accent-soft);
  border-color: #bfdbfe;
  color: #2563eb;
}

.el-preview-card {
  display: none;
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid var(--el-border);
}

.el-preview-card.is-open {
  display: block;
}

.el-preview-title {
  font-weight: 850;
  margin-bottom: 8px;
}

.el-preview-text {
  white-space: pre-wrap;
  color: #475569;
  line-height: 1.5;
}

.el-example-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.el-example-card {
  border: 1px solid var(--el-border);
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
}

.el-example-card:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.el-example-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.el-example-card span {
  display: block;
  font-size: 12px;
  color: var(--el-muted);
  line-height: 1.4;
}

.el-danger-action {
  color: var(--el-danger);
  border-color: #fecaca;
}

.el-danger-action:hover {
  background: #fef2f2;
}

/* Patch catálogo web/consentimientos */
.el-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.el-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.el-field-full {
  grid-column: 1/-1;
}

.el-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--el-muted);
}

.el-field input, .el-field select, .el-field textarea {
  width: 100%;
  border: 1px solid var(--el-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  color: var(--el-text);
  font-size: 14px;
}

.el-field input:focus, .el-field select:focus, .el-field textarea:focus {
  border-color: #8bded0;
  box-shadow: 0 0 0 4px rgba(32, 214, 181, 0.12);
  outline: none;
}

.el-check-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 9px;
  font-weight: 500 !important;
  line-height: 1.35;
}

.el-check-row input {
  width: auto !important;
  margin-top: 2px;
}

.el-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.el-help-text {
  font-size: 12px;
  color: var(--el-muted);
}

.el-list-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.el-list-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.el-btn-xs {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 9px;
}

.el-empty-text {
  color: var(--el-muted);
  font-size: 13px;
  margin: 0;
}

.el-btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--el-text);
}

.el-btn-ghost:hover {
  border-color: var(--el-border);
  background: #fff;
}

.el-sidebar-backdrop {
  display: none;
}

@media (max-width: 1180px) {
  .el-kpi-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .el-layout-grid-catalog {
    grid-template-columns: 1fr;
  }
  .el-work-panel-grid {
    grid-template-columns: 1fr;
  }
  .el-example-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .el-provider-sidebar {
    transform: translateX(-100%);
    transition: 0.2s ease;
  }
  .sidebar-open .el-provider-sidebar {
    transform: translateX(0);
  }
  .el-provider-shell {
    margin-left: 0;
  }
  .el-sidebar-toggle {
    display: grid;
    place-items: center;
  }
  .el-provider-topbar {
    padding: 0 16px;
  }
  .el-topbar-title {
    display: none;
  }
  .el-provider-main {
    padding: 20px 16px;
  }
  .el-page-header {
    flex-direction: column;
  }
  .el-page-header h1 {
    font-size: 24px;
  }
  .el-page-actions {
    justify-content: flex-start;
  }
  .el-kpi-grid-4 {
    grid-template-columns: 1fr;
  }
  .el-form-row-inline {
    grid-template-columns: 1fr;
  }
  .el-sidebar-backdrop {
    display: none;
  }
  .sidebar-open .el-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.34);
    z-index: 35;
  }
  .el-form-grid {
    grid-template-columns: 1fr;
  }
  .el-list-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .el-list-actions {
    justify-content: flex-start;
  }
  .el-work-head {
    flex-direction: column;
  }
  .el-work-actions .el-btn {
    width: 100%;
  }
}
/* Catálogo inteligente proveedor */
.el-catalog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #fff8ef 48%, #eefaf7 100%);
  border: 1px solid var(--el-border);
  border-radius: 28px;
  padding: 28px;
  box-shadow: var(--el-shadow);
  overflow: hidden;
  position: relative;
}

.el-catalog-hero:after {
  content: "";
  position: absolute;
  right: -90px;
  top: -120px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(32, 214, 181, 0.12);
}

.el-catalog-hero-main {
  position: relative;
  z-index: 1;
}

.el-catalog-kicker, .el-section-label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--el-border);
  padding: 6px 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.el-catalog-hero h2 {
  margin: 13px 0 8px;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.el-catalog-hero p {
  margin: 0;
  color: #64748b;
  line-height: 1.55;
  max-width: 760px;
}

.el-catalog-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.el-catalog-hero-side {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.el-catalog-mini-board {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-auto-rows: 88px;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  transform: rotate(-1.5deg);
}

.el-board-tile {
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(212, 221, 233, 0.85);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  font-weight: 850;
  color: #334155;
}

.el-board-tile.is-large {
  grid-row: span 2;
  background: #f3efe7;
  color: #162433;
  font-size: 18px;
}

.el-catalog-kpis {
  margin-bottom: 18px;
}

.el-catalog-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.el-flow-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--el-shadow-soft);
}

.el-flow-step span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #162433;
  color: #fff;
  font-weight: 900;
  flex: 0 0 auto;
}

.el-flow-step strong {
  display: block;
  margin-bottom: 3px;
}

.el-flow-step p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.el-catalog-layout {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.38fr) minmax(330px, 0.62fr);
  align-items: start;
}

.el-action-card {
  border-left: 4px solid rgba(32, 214, 181, 0.42);
}

.el-card-header-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.el-card-header-row h2 {
  margin: 8px 0 5px;
  font-size: 22px;
  letter-spacing: -0.025em;
}

.el-card-header-row p {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
}

.el-consent-box {
  background: #fbfcfe;
  border: 1px solid var(--el-border);
  border-radius: 16px;
  padding: 12px !important;
  color: #334155;
}

.el-consent-box small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  line-height: 1.4;
}

.el-consent-box.is-soft {
  background: #fffaf4;
}

.el-dual-consent {
  display: grid;
  gap: 9px;
}

.el-inline-editor {
  border: 1px dashed var(--el-border-strong);
  border-radius: 18px;
  background: #fbfcfe;
  padding: 0;
  margin-bottom: 16px;
}

.el-inline-editor summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 850;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #334155;
}

.el-inline-editor[open] summary {
  border-bottom: 1px solid var(--el-border);
}

.el-inline-editor form {
  padding: 16px;
}

.el-card-grid {
  display: grid;
  gap: 12px;
}

.el-card-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.el-service-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--el-border);
  border-radius: 20px;
  background: #fff;
  padding: 16px;
  box-shadow: var(--el-shadow-soft);
}

.el-service-card.is-pack {
  background: #fffdf8;
}

.el-service-card h3 {
  margin: 8px 0 5px;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.el-service-card p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

.el-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
}

.el-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.el-meta-line span {
  display: inline-flex;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--el-border);
  padding: 5px 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.el-media-item strong {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-next-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #64748b;
  line-height: 1.6;
}

.el-next-card h2 {
  margin: 8px 0 0;
  font-size: 19px;
  letter-spacing: -0.02em;
}

button:disabled, .el-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .el-catalog-hero, .el-catalog-layout {
    grid-template-columns: 1fr;
  }
  .el-catalog-flow {
    grid-template-columns: 1fr;
  }
  .el-card-grid-2 {
    grid-template-columns: 1fr;
  }
  .el-catalog-hero h2 {
    font-size: 28px;
  }
}
@media (max-width: 820px) {
  .el-catalog-hero {
    padding: 20px;
  }
  .el-catalog-mini-board {
    grid-auto-rows: 70px;
  }
  .el-service-card {
    flex-direction: column;
  }
  .el-service-card form {
    width: 100%;
  }
  .el-service-card .el-btn {
    width: 100%;
  }
}
/* =====================================================
   Patch 2026-07-05 · Portal proveedor premium
   Alineado visualmente con organizador: arena, editorial,
   tarjetas limpias y dashboard más accionable.
   ===================================================== */
:root {
  --el-bg:#f8f6f1;
  --el-surface:#ffffff;
  --el-card:#ffffff;
  --el-text:#2f2a24;
  --el-muted:#7a7167;
  --el-border:#ece7dc;
  --el-border-strong:#ded3c3;
  --el-accent:#C4A882;
  --el-accent-2:#14b8a6;
  --el-accent-soft:#e6f6f4;
  --el-accent-soft-2:#f0fdfa;
  --el-danger:#b42318;
  --el-success:#147a52;
  --el-warning:#9a6900;
  --el-warning-soft:#fff3cd;
  --el-shadow:0 12px 28px rgba(31,25,18,.06);
  --el-shadow-soft:0 8px 20px rgba(31,25,18,.045);
}

body.el-provider-app {
  background: var(--el-bg);
  color: var(--el-text);
}

.el-provider-sidebar {
  background: #fffdf9;
  border-right-color: var(--el-border);
  padding: 20px 16px;
}

.el-provider-brand {
  border-bottom-color: var(--el-border);
}

.el-provider-logo, .el-avatar {
  background: #2f2a24;
  color: #fff;
  box-shadow: 0 10px 24px rgba(47, 42, 36, 0.12);
}

.el-provider-account {
  border-color: var(--el-border);
  box-shadow: var(--el-shadow-soft);
  background: #fff;
}

.el-nav-section {
  color: #a79b8e;
}

.el-nav-item {
  color: #62584f;
}

.el-nav-item i {
  color: #a99682;
}

.el-nav-item:hover {
  background: #fbfaf7;
  color: var(--el-text);
}

.el-nav-item.is-active {
  background: var(--el-accent-soft);
  color: var(--el-text);
  box-shadow: inset 0 0 0 1px rgba(139, 111, 82, 0.16);
}

.el-nav-item.is-active i {
  color: var(--el-accent);
}

.el-provider-sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--el-border);
}

.el-nav-item-logout {
  color: #8a4038;
}

.el-nav-item-logout i {
  color: #b42318;
}

.el-nav-item-logout:hover {
  background: #fdecec;
  color: #8a231b;
}

.el-provider-topbar {
  background: rgba(255, 253, 249, 0.9);
  border-bottom-color: var(--el-border);
  backdrop-filter: blur(14px);
}

.el-topbar-logout {
  width: 38px;
  height: 38px;
  border: 1px solid var(--el-border);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #8a4038;
  transition: 0.16s ease;
}

.el-topbar-logout:hover {
  background: #fdecec;
  border-color: #f4c7c3;
  color: #8a231b;
}

.el-btn-primary {
  background: #C4A882;
  border-color: #C4A882;
  color: #fff !important;
}

.el-btn-primary:hover {
  background: #A88B68;
  border-color: #A88B68;
  color: #fff !important;
}

a.el-btn-primary,
a.el-btn-primary:visited,
a.el-btn-primary i {
  color: #fff !important;
}

.el-btn-outline {
  background: #fff;
  border-color: var(--el-border);
  color: var(--el-text);
}

.el-btn-outline:hover {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #A88B68;
  box-shadow: 0 8px 18px rgba(196, 168, 130, 0.08);
}

.el-badge-soft {
  background: var(--el-accent-soft);
  color: #6f563f;
  border-color: #e7d8c7;
}

.el-card, .el-kpi-card {
  border-color: var(--el-border);
  box-shadow: var(--el-shadow);
}

.el-provider-main {
  padding: 26px;
  max-width: 1720px;
}

.el-hide-mobile {
  display: inline-flex;
}

.el-provider-home {
  display: grid;
  gap: 18px;
}

.el-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 330px;
  gap: 18px;
  align-items: stretch;
  background: linear-gradient(135deg, #fffdf9 0%, #f6efe6 58%, #fff8ef 100%);
  border: 1px solid var(--el-border);
  border-radius: 26px;
  padding: 26px;
  box-shadow: var(--el-shadow);
  overflow: hidden;
  position: relative;
}

.el-home-hero:after {
  content: "";
  position: absolute;
  right: -90px;
  top: -120px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(183, 155, 123, 0.18);
}

.el-home-hero-main, .el-home-status-card {
  position: relative;
  z-index: 1;
}

.el-home-eyebrow, .el-section-label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--el-border);
  padding: 6px 10px;
  color: var(--el-muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.el-home-hero h1 {
  margin: 13px 0 8px;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 850;
}

.el-home-hero p {
  margin: 0;
  color: var(--el-muted);
  line-height: 1.55;
  max-width: 760px;
}

.el-home-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.el-home-status-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(236, 231, 220, 0.92);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--el-shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.el-home-status-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 850;
  color: var(--el-muted);
}

.el-home-status-card strong {
  font-size: 54px;
  line-height: 0.95;
  letter-spacing: -0.06em;
  margin-top: 10px;
}

.el-home-status-card p {
  font-size: 14px;
  margin: 8px 0 16px;
  color: var(--el-muted);
}

.el-home-progress {
  height: 8px;
  border-radius: 999px;
  background: #f0e7dc;
  overflow: hidden;
}

.el-home-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--el-accent);
}

.el-home-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.el-home-kpi {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--el-shadow);
  display: flex;
  gap: 13px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.el-home-kpi:hover {
  transform: translateY(-1px);
  transition: 0.15s ease;
  color: inherit;
}

.el-home-kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-accent-soft);
  color: var(--el-accent);
  font-size: 18px;
  flex: 0 0 auto;
}

.el-home-kpi-icon.taupe {
  background: #e6f6f4;
  color: #A88B68;
}

.el-home-kpi-icon.danger {
  background: #fdecec;
  color: #b42318;
}

.el-home-kpi-icon.success {
  background: #eaf5ee;
  color: #147a52;
}

.el-home-kpi span {
  display: block;
  font-size: 13px;
  color: var(--el-muted);
  font-weight: 750;
}

.el-home-kpi strong {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.04em;
  margin-top: 4px;
}

.el-home-kpi small {
  display: block;
  color: var(--el-muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 6px;
}

.el-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.el-home-layout.secondary {
  grid-template-columns: 1fr 1fr;
}

.el-home-panel {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--el-shadow);
}

.el-home-panel-priority {
  min-height: 360px;
}

.el-home-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.el-home-panel-head.compact {
  margin-bottom: 14px;
}

.el-home-panel h2 {
  margin: 8px 0 4px;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.el-home-panel p {
  margin: 0;
  color: var(--el-muted);
  line-height: 1.45;
}

.el-home-list {
  display: grid;
  gap: 10px;
}

.el-home-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--el-border);
  border-radius: 18px;
  background: #fffdf9;
  padding: 13px;
  text-decoration: none;
  color: inherit;
}

.el-home-list-item:hover {
  background: #fbfaf7;
  border-color: rgba(139, 111, 82, 0.25);
  color: inherit;
}

.el-home-list-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--el-accent-soft);
  color: var(--el-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.el-home-list-content {
  min-width: 0;
  flex: 1;
}

.el-home-list-content strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.el-home-list-content span {
  display: block;
  color: var(--el-muted);
  font-size: 13px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-mini-status {
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--el-border);
  padding: 5px 9px;
  color: #6f563f;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.compact-list .el-home-list-item {
  background: #fff;
  padding: 12px;
}

.el-home-empty {
  border: 1px dashed var(--el-border-strong);
  border-radius: 20px;
  background: #fffdf9;
  padding: 24px;
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
  color: var(--el-muted);
}

.el-home-empty i {
  font-size: 26px;
  color: var(--el-success);
}

.el-home-empty strong {
  color: var(--el-text);
}

.el-home-empty.small {
  display: block;
  text-align: left;
  padding: 16px;
}

.el-home-checklist {
  display: grid;
  gap: 10px;
}

.el-home-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--el-border);
  border-radius: 18px;
  padding: 14px;
  background: #fffdf9;
  text-decoration: none;
  color: inherit;
}

.el-home-check:hover {
  background: #fbfaf7;
  color: inherit;
}

.el-home-check > span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #2f2a24;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  flex: 0 0 auto;
}

.el-home-check strong {
  display: block;
  font-size: 14px;
}

.el-home-check small {
  display: block;
  color: var(--el-muted);
  line-height: 1.4;
  margin-top: 3px;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-start {
  align-items: flex-start;
}

.gap-3 {
  gap: 1rem;
}

.flex-wrap {
  flex-wrap: wrap;
}

@media (max-width: 1180px) {
  .el-home-hero, .el-home-layout, .el-home-layout.secondary {
    grid-template-columns: 1fr;
  }
  .el-home-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .el-provider-main {
    padding: 18px 14px;
  }
  .el-topbar-actions {
    gap: 8px;
  }
  .el-hide-mobile {
    display: none;
  }
  .el-home-hero {
    padding: 20px;
  }
  .el-home-hero h1 {
    font-size: 28px;
  }
  .el-home-kpis {
    grid-template-columns: 1fr;
  }
  .el-home-panel-head {
    flex-direction: column;
  }
  .el-home-list-item {
    align-items: flex-start;
  }
  .el-mini-status {
    margin-left: 50px;
  }
  .el-home-status-card strong {
    font-size: 44px;
  }
}
/* =====================================================
   Patch 2026-07-05 · Compatibilidad Bootstrap mínima
   El portal proveedor no carga Bootstrap; estas clases evitan
   que formularios/tablas queden como HTML nativo.
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

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

.small {
  font-size: 12px;
}

.fw-bold {
  font-weight: 850 !important;
}

.h5 {
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 12px;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.vstack {
  display: flex;
  flex-direction: column;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.align-middle {
  vertical-align: middle !important;
}

.text-end {
  text-align: right !important;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.row > * {
  width: 100%;
  max-width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.g-2 {
  row-gap: 0.5rem;
}

.g-2 > * {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}

.g-3 {
  row-gap: 1rem;
}

.g-4 {
  row-gap: 1.5rem;
}

.col {
  flex: 1 0 0%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.col-md-3, .col-md-4, .col-md-6, .col-lg-5, .col-lg-7 {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.333333%;
  }
  .col-md-6 {
    width: 50%;
  }
}
@media (min-width: 992px) {
  .col-lg-5 {
    width: 41.666667%;
  }
  .col-lg-7 {
    width: 58.333333%;
  }
}
.form-label {
  display: block;
  margin-bottom: 7px;
  color: var(--el-text);
  font-size: 13px;
  font-weight: 850;
}

.form-control, .form-select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--el-border-strong);
  border-radius: 14px;
  background-color: #fff;
  color: var(--el-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(31, 25, 18, 0.02);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-control::placeholder {
  color: #a89d91;
}

.form-control:focus, .form-select:focus {
  outline: 0;
  border-color: rgba(139, 111, 82, 0.58);
  box-shadow: 0 0 0 4px rgba(139, 111, 82, 0.12);
  background: #fff;
}

textarea.form-control {
  min-height: 96px;
  resize: vertical;
}

.form-control[type=file] {
  padding: 9px 12px;
}

.form-control[type=file]::file-selector-button {
  margin-right: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--el-accent-soft);
  color: #6f563f;
  font-weight: 850;
  padding: 8px 10px;
  cursor: pointer;
}

.form-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8b6f52 50%), linear-gradient(135deg, #8b6f52 50%, transparent 50%);
  background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.btn, .el-btn {
  border-radius: 999px;
  border: 1px solid transparent;
  min-height: 40px;
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 850;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: 0.16s ease;
  white-space: nowrap;
}

.btn-sm, .el-btn-sm {
  min-height: 34px;
  padding: 8px 11px;
  font-size: 13px;
}

.btn-el, .btn-primary {
  background: var(--el-accent);
  border-color: var(--el-accent);
  color: #fff;
}

.btn-el:hover, .btn-primary:hover {
  background: #6f563f;
  border-color: #6f563f;
  color: #fff;
}

.btn-el-outline, .btn-outline {
  background: #fff;
  border-color: var(--el-border);
  color: var(--el-text);
}

.btn-el-outline:hover, .btn-outline:hover {
  background: #fbfaf7;
  border-color: rgba(139, 111, 82, 0.25);
  color: var(--el-text);
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
  border: 1px solid transparent;
}

.badge-soft {
  background: var(--el-accent-soft);
  color: #6f563f;
  border-color: #e7d8c7;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  color: var(--el-text);
}

.table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--el-muted);
  font-weight: 900;
  text-align: left;
  background: #fffdf9;
  border-bottom: 1px solid var(--el-border);
  padding: 12px;
}

.table td {
  border-bottom: 1px solid var(--el-border);
  padding: 13px 12px;
  vertical-align: middle;
}

.table tbody tr:hover td {
  background: #fffdf9;
}

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

.table-eventlink {
  border: 1px solid var(--el-border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.table-eventlink thead th:first-child {
  border-top-left-radius: 18px;
}

.table-eventlink thead th:last-child {
  border-top-right-radius: 18px;
}

.section-title {
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.045em;
  margin: 0 0 8px;
  font-weight: 850;
  color: var(--el-text);
}

/* Documentos proveedor */
.el-documents-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
  align-items: start;
}

.el-document-upload-card, .el-document-list-card {
  padding: 22px;
}

.el-card-header-row.compact {
  margin-bottom: 16px;
}

.el-form {
  display: grid;
  gap: 13px;
}

.el-form-grid {
  display: grid;
  gap: 12px;
}

.el-form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.el-field {
  display: grid;
  gap: 7px;
  margin: 0;
}

.el-field > span {
  font-size: 13px;
  font-weight: 850;
  color: var(--el-text);
}

.el-upload-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--el-border);
  background: #fffaf4;
  border-radius: 16px;
  padding: 12px;
  color: var(--el-muted);
  font-size: 13px;
  line-height: 1.4;
}

.el-upload-note i {
  color: var(--el-accent);
  margin-top: 2px;
}

.el-document-form .el-btn {
  justify-self: start;
}

.el-document-list-card .table-responsive {
  border-radius: 18px;
}

@media (max-width: 1180px) {
  .el-documents-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .el-form-grid.two {
    grid-template-columns: 1fr;
  }
  .el-document-upload-card, .el-document-list-card {
    padding: 18px;
  }
  .section-title {
    font-size: 28px;
  }
}
/* v3: menú de usuario y solicitudes visibles en inicio */
.el-user-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.el-avatar-button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.el-avatar-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(47, 42, 36, 0.18);
}

.el-user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 235px;
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(47, 42, 36, 0.18);
  padding: 8px;
  display: none;
  z-index: 50;
}

.el-user-menu.is-open .el-user-dropdown {
  display: block;
}

.el-user-dropdown:before {
  content: "";
  position: absolute;
  right: 16px;
  top: -7px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid var(--el-border);
  border-top: 1px solid var(--el-border);
  transform: rotate(45deg);
}

.el-user-dropdown-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--el-border);
  margin-bottom: 6px;
}

.el-user-dropdown-head strong {
  display: block;
  font-size: 14px;
  color: var(--el-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-user-dropdown-head span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--el-muted);
}

.el-user-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--el-text);
  font-size: 14px;
  font-weight: 750;
}

.el-user-dropdown a i {
  width: 18px;
  text-align: center;
  color: #8b6f52;
}

.el-user-dropdown a:hover {
  background: #fbf7f1;
  color: var(--el-text);
}

.el-user-dropdown a.danger {
  color: #8b3f2f;
}

.el-user-dropdown a.danger i {
  color: #8b3f2f;
}

.el-home-list-item.is-request {
  background: #fff8ef;
  border-color: rgba(139, 111, 82, 0.28);
}

.el-home-list-item.is-request .el-home-list-icon {
  background: #f5eadc;
  color: #8b6f52;
}

.el-home-list-titleline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.el-home-list-titleline strong {
  min-width: 0;
}

.el-home-list-titleline em {
  font-style: normal;
  border: 1px solid rgba(139, 111, 82, 0.25);
  background: #fff;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  color: #7a5b3d;
  white-space: nowrap;
}

.el-home-list-content small {
  display: block;
  color: #7d7064;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 5px;
  white-space: normal;
}

@media (max-width: 820px) {
  .el-user-dropdown {
    right: -6px;
    width: min(245px, 100vw - 24px);
  }
  .el-topbar-logout {
    display: none;
  }
}
/* v4: menú de usuario visible + compatibilidad solicitudes proveedor */
.el-provider-topbar {
  min-width: 0;
  gap: 16px;
}

.el-topbar-title {
  min-width: 0;
  overflow: hidden;
}

.el-topbar-actions {
  min-width: 0;
  flex-shrink: 0;
}

.el-user-pill {
  border: 1px solid var(--el-border);
  background: #fff;
  border-radius: 999px;
  min-height: 42px;
  padding: 3px 11px 3px 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 850;
  color: var(--el-text);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(47, 42, 36, 0.06);
  transition: 0.16s ease;
}

.el-user-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(139, 111, 82, 0.28);
  box-shadow: 0 14px 28px rgba(47, 42, 36, 0.12);
}

.el-user-pill .el-avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.el-user-pill i {
  font-size: 11px;
  color: #8b6f52;
}

.el-user-pill-label {
  white-space: nowrap;
  font-size: 13px;
}

.el-user-menu.is-open .el-user-pill {
  border-color: rgba(139, 111, 82, 0.35);
  background: #fffaf4;
}

.el-user-dropdown {
  z-index: 80;
}

@media (max-width: 920px) {
  .el-user-pill-label {
    display: none;
  }
  .el-user-pill {
    padding-right: 8px;
  }
  .el-topbar-actions .el-btn {
    padding-left: 11px;
    padding-right: 11px;
  }
}
@media (max-width: 680px) {
  .el-topbar-title .el-topbar-kicker {
    display: none;
  }
  .el-topbar-actions > a {
    display: none;
  }
  .el-provider-topbar {
    padding: 0 14px;
  }
}
/* PWA shell and mobile event experience */
/* =====================================================
   EVENTLINK PWA — CSS COMPLETO COMPACTO
   ===================================================== */
body.pwa-body, body.pwa-login-body {
  --pwa-bg: #f8f5f0;
  --pwa-card: #ffffff;
  --pwa-text: #1f2937;
  --pwa-heading: #0f2b4a;
  --pwa-muted: #6b7280;
  --pwa-muted-warm: #756e67;
  --pwa-border: #e7ded2;
  --pwa-primary: #8b7355;
  --pwa-primary-dark: #766046;
  --pwa-primary-soft: #f4efe8;
  --pwa-success: #5d8b72;
  --pwa-success-soft: #e7f5ec;
  --pwa-danger: #c07b6b;
  --pwa-danger-soft: rgba(192, 123, 107, 0.13);
  --pwa-shadow: 0 8px 20px rgba(44, 33, 24, 0.055);
  --pwa-shadow-lg: 0 14px 32px rgba(45, 33, 24, 0.15);
  --pwa-radius: 18px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html,
body.pwa-body,
body.pwa-login-body {
  min-height: 100%;
}

body.pwa-body,
body.pwa-login-body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, rgba(196, 168, 130, 0.14), transparent 24rem), var(--pwa-bg);
  color: var(--pwa-text);
}

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

a {
  color: inherit;
}

.pwa-body {
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

.pwa-main {
  width: min(780px, 100%);
  margin: 0 auto;
  padding: 0.65rem 0.65rem calc(52px + env(safe-area-inset-bottom));
}

/* =====================================================
   Header compacto
   ===================================================== */
.pwa-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: calc(0.42rem + env(safe-area-inset-top)) 0.7rem 0.42rem;
  background: rgba(250, 247, 244, 0.98);
  border-bottom: 1px solid rgba(231, 222, 210, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pwa-menu-toggle {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
}

.pwa-menu-toggle span {
  display: block;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: var(--pwa-primary);
}

.pwa-menu-toggle:active {
  background: var(--pwa-primary-soft);
}

.pwa-brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 0;
}

.pwa-brand-logo,
.pwa-brand-link img {
  display: block;
  width: auto;
  max-width: 112px;
  height: 25px;
  max-height: 25px;
  object-fit: contain;
}

.pwa-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.pwa-header-context,
.pwa-context-title,
.pwa-context-meta,
.pwa-brand,
.pwa-subtitle,
.pwa-connection,
.pwa-kicker {
  display: none !important;
}

/* =====================================================
   Usuario
   ===================================================== */
.pwa-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pwa-connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--pwa-success);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(93, 139, 114, 0.13);
}

.pwa-connection-dot.is-offline {
  background: var(--pwa-danger);
  box-shadow: 0 0 0 3px rgba(192, 123, 107, 0.14);
}

.pwa-user-button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pwa-user-initials,
.pwa-user-avatar {
  width: 31px;
  height: 31px;
  min-width: 31px;
  min-height: 31px;
  border-radius: 999px;
  background: #efe5d9;
  color: var(--pwa-primary);
  border: 1px solid rgba(196, 168, 130, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pwa-user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 40px;
  min-width: 225px;
  background: #fff;
  border: 1px solid #ddd3c8;
  border-radius: 18px;
  box-shadow: var(--pwa-shadow-lg);
  padding: 0.85rem;
  z-index: 100;
}

.pwa-user-dropdown.is-open {
  display: block;
}

.pwa-user-dropdown-name {
  font-weight: 900;
  color: #2d2118;
  font-size: 0.92rem;
}

.pwa-user-dropdown-email {
  color: #7a6b5d;
  font-size: 0.76rem;
  margin-top: 0.15rem;
  word-break: break-all;
}

.pwa-user-dropdown-connection {
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.52rem;
  border-radius: 999px;
  background: rgba(93, 139, 114, 0.12);
  color: var(--pwa-success);
  font-size: 0.74rem;
  font-weight: 800;
}

.pwa-user-dropdown-connection::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.pwa-user-dropdown-connection.is-offline {
  background: var(--pwa-danger-soft);
  color: var(--pwa-danger);
}

.pwa-user-dropdown-logout {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid #eee5dc;
  color: var(--pwa-danger);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.86rem;
}

.pwa-user-dropdown-org {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid #eee5dc;
  color: var(--pwa-primary-dark);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.86rem;
}

.pwa-user-dropdown-org + .pwa-user-dropdown-logout {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
}

.pwa-user-dropdown-action {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.7rem 0 0;
  border: 0;
  border-top: 1px solid #eee5dc;
  background: transparent;
  color: var(--pwa-primary-dark);
  text-align: left;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
}

.pwa-user-dropdown-action + .pwa-user-dropdown-org,
.pwa-user-dropdown-action + .pwa-user-dropdown-logout {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
}

/* =====================================================
   Sidebar
   ===================================================== */
.pwa-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(45, 33, 24, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.pwa-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 90;
  width: min(318px, 86vw);
  padding: calc(0.9rem + env(safe-area-inset-top)) 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
  background: #faf7f4;
  border-right: 1px solid var(--pwa-border);
  box-shadow: 18px 0 50px rgba(45, 33, 24, 0.18);
  transform: translateX(-105%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}

.pwa-sidebar-open .pwa-sidebar {
  transform: translateX(0);
}

.pwa-sidebar-open .pwa-sidebar-overlay {
  opacity: 1;
  pointer-events: auto;
}

.pwa-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pwa-sidebar-logo {
  display: block;
  width: auto;
  max-width: 124px;
  height: 30px;
  object-fit: contain;
}

.pwa-sidebar-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--pwa-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(45, 33, 24, 0.08);
}

.pwa-sidebar-context {
  margin-top: 0.85rem;
  padding: 0.85rem;
  border-radius: 19px;
  background: #fff;
  border: 1px solid #ece3d8;
  box-shadow: 0 8px 20px rgba(44, 33, 24, 0.05);
}

.pwa-sidebar-label {
  margin-bottom: 0.3rem;
  color: #9a8168;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pwa-sidebar-event-name {
  color: var(--pwa-heading);
  font-size: 1.06rem;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.pwa-sidebar-event-date {
  margin-top: 0.3rem;
  color: var(--pwa-muted-warm);
  font-size: 0.82rem;
  font-weight: 650;
}

.pwa-sidebar-nav {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.pwa-sidebar-separator {
  height: 1px;
  background: var(--pwa-border);
  margin: 0.38rem 0;
}

.pwa-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 42px;
  padding: 0.55rem 0.65rem;
  border-radius: 14px;
  color: #3c352e;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 850;
}

.pwa-sidebar-link:hover,
.pwa-sidebar-link:active {
  background: #f0e8de;
  color: var(--pwa-primary-dark);
}

.pwa-sidebar-icon {
  width: 28px;
  height: 28px;
  border-radius: 11px;
  background: #fff;
  color: var(--pwa-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  box-shadow: 0 6px 14px rgba(45, 33, 24, 0.06);
}

.pwa-sidebar-user {
  margin-top: auto;
  padding-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-top: 1px solid var(--pwa-border);
}

.pwa-sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #efe5d9;
  color: var(--pwa-primary);
  border: 1px solid rgba(196, 168, 130, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 950;
  flex: 0 0 auto;
}

.pwa-sidebar-user-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pwa-sidebar-user-info strong {
  color: #2d2118;
  font-size: 0.88rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-sidebar-user-info span {
  color: #7a6b5d;
  font-size: 0.73rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-sidebar-logout {
  margin-top: 0.7rem;
  display: block;
  padding: 0.68rem 0.8rem;
  border-radius: 15px;
  color: var(--pwa-danger);
  background: rgba(192, 123, 107, 0.1);
  text-decoration: none;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 850;
}

.pwa-sidebar-office-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.55rem 0.65rem;
  border-radius: 16px;
  background: #f7f1ea;
  border: 1px solid #eadfd1;
  color: #3c352e;
  text-decoration: none;
}

.pwa-sidebar-office-link:hover,
.pwa-sidebar-office-link:active {
  background: #efe5d9;
  color: var(--pwa-primary-dark);
}

.pwa-sidebar-office-copy {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.pwa-sidebar-office-copy strong {
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.15;
}

.pwa-sidebar-office-copy span {
  color: var(--pwa-muted-warm);
  font-size: 0.72rem;
  font-weight: 650;
}

/* =====================================================
   Timeline sticky global compacto
   ===================================================== */
.pwa-event-timeline-strip {
  position: sticky;
  top: 52px;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  width: min(780px, 100% - 1.1rem);
  margin: 0.48rem auto 0;
  padding: 0.48rem 0.56rem;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #eadfd1;
  box-shadow: 0 6px 18px rgba(44, 33, 24, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pwa-event-timeline-strip.is-now {
  background: rgba(237, 246, 240, 0.97);
  border-color: rgba(93, 139, 114, 0.28);
}

.pwa-event-timeline-strip.is-before {
  background: rgba(250, 247, 244, 0.97);
}

.pwa-event-timeline-strip.is-finished {
  background: rgba(250, 244, 241, 0.97);
  border-color: rgba(192, 123, 107, 0.22);
}

.pwa-event-timeline-strip-inner {
  min-width: 0;
  flex: 1 1 auto;
}

.pwa-strip-label {
  display: none;
}

.pwa-strip-event-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin-bottom: 0.05rem;
}

.pwa-strip-event-name {
  font-size: 0.72rem;
  font-weight: 850;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  line-height: 1.05;
}

.pwa-strip-event-date {
  flex-shrink: 0;
  font-size: 0.67rem;
  font-weight: 650;
  color: #6b7280;
  white-space: nowrap;
  line-height: 1.05;
}

.pwa-strip-event-date::before {
  content: "·";
  margin-right: 0.35rem;
  color: #d1d5db;
}

.pwa-strip-title {
  margin-top: 0.08rem;
  color: #2d2b29;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-strip-next {
  margin-top: 0.06rem;
  color: #7b7269;
  font-size: 0.67rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-strip-link {
  flex: 0 0 auto;
  min-width: 39px;
  min-height: 28px;
  padding: 0.25rem 0.52rem;
  border-radius: 999px;
  background: #f4efe8;
  color: var(--pwa-primary);
  text-decoration: none;
  font-size: 0.66rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================
   Page headings / cards
   ===================================================== */
.pwa-page-heading {
  margin-bottom: 0.7rem;
}

.pwa-page-heading h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--pwa-heading);
}

.pwa-page-heading p {
  margin: 0.32rem 0 0;
  color: #6f6a63;
  font-size: 0.84rem;
  line-height: 1.35;
}

.pwa-small-link {
  display: inline-flex;
  margin-top: 0.5rem;
  color: var(--pwa-primary);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.pwa-small-link:hover {
  color: var(--pwa-primary-dark);
  text-decoration: underline;
}

.pwa-card,
.pwa-empty-card,
.pwa-event-card {
  background: var(--pwa-card);
  border: 1px solid #ece3d8;
  border-radius: var(--pwa-radius);
  box-shadow: var(--pwa-shadow);
}

.pwa-card {
  padding: 0.78rem;
  margin-bottom: 0.75rem;
}

.pwa-card p,
.pwa-empty-card p,
.pwa-event-card p {
  font-size: 0.8rem;
  line-height: 1.34;
}

.pwa-alert {
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.pwa-alert-danger {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.pwa-muted {
  color: var(--pwa-muted);
}

/* =====================================================
   Eventos
   ===================================================== */
.pwa-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.pwa-event-card {
  padding: 0.8rem;
}

.pwa-event-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
}

.pwa-event-main {
  min-width: 0;
}

.pwa-event-title {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.2;
  font-weight: 850;
  color: #33302d;
  letter-spacing: -0.025em;
}

.pwa-event-date {
  margin-top: 0.28rem;
  font-size: 0.82rem;
  color: #746d66;
  font-weight: 650;
}

.pwa-event-place {
  margin-top: 0.18rem;
  font-size: 0.8rem;
  color: #9a938c;
}

.pwa-event-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.25rem 0.58rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
}

.pwa-event-status.is-available {
  background: var(--pwa-success-soft);
  color: #347a52;
}

.pwa-event-status.is-pending {
  background: var(--pwa-primary-soft);
  color: #9a8168;
}

.pwa-event-card-bottom {
  margin-top: 0.75rem;
}

.pwa-event-card-actions {
  display: flex;
  gap: 0.45rem;
}

.pwa-event-card-actions .pwa-btn {
  width: auto;
  flex: 1 1 0;
}

.pwa-event-help {
  font-size: 0.78rem;
  color: #938b83;
  background: #faf7f4;
  border-radius: 13px;
  padding: 0.58rem 0.65rem;
}

.pwa-event-card-actions + .pwa-event-help {
  margin-top: 0.5rem;
}

/* =====================================================
   Botones
   ===================================================== */
.pwa-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 850;
  font-size: 0.88rem;
  border: 0;
  cursor: pointer;
}

.pwa-btn-primary,
a.pwa-btn-primary,
button.pwa-btn-primary,
.pwa-event-card .pwa-btn-primary,
.pwa-events-list .pwa-btn-primary,
a.pwa-btn.pwa-btn-primary {
  background: var(--pwa-primary) !important;
  border: 1px solid var(--pwa-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(139, 115, 85, 0.2) !important;
}

.pwa-btn-primary:hover,
.pwa-btn-primary:active,
a.pwa-btn-primary:hover,
button.pwa-btn-primary:hover,
a.pwa-btn.pwa-btn-primary:hover {
  background: var(--pwa-primary-dark) !important;
  border-color: var(--pwa-primary-dark) !important;
  color: #fff !important;
}

.pwa-btn-secondary,
a.pwa-btn-secondary,
button.pwa-btn-secondary {
  background: #fff !important;
  border: 1px solid #ddd3c8 !important;
  color: var(--pwa-primary-dark) !important;
  box-shadow: none !important;
}

.pwa-btn-secondary:hover,
.pwa-btn-secondary:active,
a.pwa-btn-secondary:hover {
  background: #f7f1ea !important;
  border-color: #d4c7b8 !important;
  color: var(--pwa-primary-dark) !important;
}

/* =====================================================
   Evento dentro
   ===================================================== */
.pwa-event-topbar {
  margin-bottom: 0.65rem;
  padding: 0.6rem 0.05rem 0.1rem;
}

.pwa-event-title-main {
  margin: 0;
  color: var(--pwa-heading);
  font-size: 1.22rem;
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 900;
}

.pwa-event-meta-pills {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pwa-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: #f4efe8;
  color: #7a6651;
  font-size: 0.74rem;
  font-weight: 800;
  border: 1px solid #eadfd1;
}

.pwa-section-header,
.pwa-section-header-tight {
  margin-bottom: 0.55rem;
}

.pwa-section-header h2,
.pwa-section-header-tight h2 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 900;
  color: #2f2c29;
}

.pwa-section-header p,
.pwa-section-header-tight p {
  display: none;
}

.pwa-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pwa-timeline-simple-item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.65rem 0;
  border-bottom: 1px solid #eee5dc;
}

.pwa-timeline-simple-item:first-child {
  padding-top: 0.1rem;
}

.pwa-timeline-simple-item:last-child {
  border-bottom: 0;
}

.pwa-timeline-simple-time {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--pwa-primary);
  line-height: 1.2;
  white-space: nowrap;
}

.pwa-timeline-simple-title {
  font-size: 0.88rem;
  font-weight: 850;
  color: #2d2b29;
  line-height: 1.25;
}

.pwa-timeline-simple-place {
  margin-top: 0.15rem;
  font-size: 0.74rem;
  color: #8a8178;
  line-height: 1.25;
}

.pwa-checklist-card {
  padding: 0.6rem 0;
  border-bottom: 1px solid #eee5dc;
}

.pwa-checklist-card:last-child {
  border-bottom: 0;
}

.pwa-checklist-card strong {
  font-size: 0.88rem;
  color: #2d2b29;
}

/* =====================================================
   Barra inferior contextual compacta
   Solo muestra la sección actual
   ===================================================== */
.pwa-current-section-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(124, 92, 69, 0.1);
  padding: 0.22rem 0.65rem calc(0.22rem + env(safe-area-inset-bottom));
  box-shadow: 0 -5px 16px rgba(17, 24, 39, 0.045);
}

.pwa-current-section-item {
  height: 30px;
  border-radius: 999px;
  background: transparent;
  color: #6f523c;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
}

.pwa-current-section-item i {
  font-size: 0.82rem;
  color: #9a7a5f;
}

/* =====================================================
   Login
   ===================================================== */
.pwa-login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: radial-gradient(circle at top left, rgba(139, 115, 85, 0.18), transparent 34rem), var(--pwa-bg);
}

.pwa-login-shell {
  width: min(430px, 100%);
}

.pwa-login-card {
  padding: 1.15rem;
  background: #fff;
  border: 1px solid var(--pwa-border);
  border-radius: 26px;
  box-shadow: var(--pwa-shadow);
}

.pwa-login-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.85rem;
}

.pwa-login-logo img {
  display: block;
  width: auto;
  max-width: 168px;
  height: 40px;
  object-fit: contain;
}

.pwa-login-card h1 {
  margin: 0.55rem 0 0.25rem;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--pwa-heading);
}

.pwa-login-card p {
  color: var(--pwa-muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.pwa-form {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.pwa-form label {
  display: grid;
  gap: 0.32rem;
  font-weight: 800;
  font-size: 0.84rem;
}

.pwa-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--pwa-border);
  border-radius: 15px;
  padding: 0.68rem 0.78rem;
  font: inherit;
}

/* =====================================================
   Responsive móvil
   ===================================================== */
@media (max-width: 520px) {
  .pwa-main {
    padding: 0.58rem 0.58rem calc(48px + env(safe-area-inset-bottom));
  }
  .pwa-header {
    min-height: 50px;
    padding: calc(0.38rem + env(safe-area-inset-top)) 0.62rem 0.38rem;
  }
  .pwa-brand-logo,
  .pwa-brand-link img {
    max-width: 105px;
    height: 23px;
    max-height: 23px;
  }
  .pwa-page-heading {
    margin-bottom: 0.6rem;
  }
  .pwa-page-heading h1 {
    font-size: 1.38rem;
  }
  .pwa-page-heading p {
    font-size: 0.8rem;
  }
  .pwa-event-timeline-strip {
    top: 50px;
    width: calc(100% - 0.9rem);
    margin-top: 0.4rem;
    padding: 0.42rem 0.5rem;
    border-radius: 14px;
  }
  .pwa-strip-event-name {
    font-size: 0.69rem;
  }
  .pwa-strip-event-date {
    font-size: 0.64rem;
  }
  .pwa-strip-title {
    font-size: 0.7rem;
  }
  .pwa-strip-next {
    font-size: 0.64rem;
  }
  .pwa-strip-link {
    min-width: 36px;
    min-height: 26px;
    padding: 0.2rem 0.46rem;
    font-size: 0.64rem;
  }
  .pwa-event-title-main {
    font-size: 1.15rem;
  }
  .pwa-card {
    padding: 0.72rem;
    margin-bottom: 0.65rem;
  }
  .pwa-current-section-bar {
    padding: 0.18rem 0.58rem calc(0.18rem + env(safe-area-inset-bottom));
  }
  .pwa-current-section-item {
    height: 28px;
    font-size: 0.7rem;
  }
}
/* =========================================================
   PWA EVENTO - INTOLERANCIAS FULL WIDTH + DRAWER FILTROS
   Añadido para aprovechar espacio en móvil:
   - sin card contenedora
   - sin padding exterior
   - listado a sangre
   - filtros en drawer lateral
   ========================================================= */
.pwa-event-page--intolerancias {
  padding: 0 !important;
  gap: 0 !important;
}

.pwa-section-shell--flush {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.pwa-int-page {
  width: 100%;
  margin: 0;
  padding: 0;
}

.pwa-int-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0;
  border-bottom: 1px solid #eee5da;
  background: #f8f4ef;
  position: sticky;
  top: 0;
  z-index: 20;
}

.pwa-int-summary {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #6f6258;
  font-size: 0.78rem;
}

.pwa-int-summary strong {
  color: #2f241c;
  font-size: 0.92rem;
}

.pwa-int-filter-btn {
  border: 1px solid #ddd2c5;
  background: #fff;
  color: #5b4d42;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: auto;
  cursor: pointer;
}

.pwa-int-filter-btn:active {
  background: #f4efe8;
}

.pwa-int-main-list {
  margin: 0;
  padding: 0;
}

.pwa-int-empty {
  padding: 12px 10px;
  font-size: 0.82rem;
  color: #7a7067;
}

.pwa-int-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pwa-int-group {
  background: #fff;
  border: 0;
  border-bottom: 1px solid #efe7dc;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.pwa-int-group.is-collapsed .pwa-int-group-body {
  display: none;
}

.pwa-int-group.is-collapsed .pwa-int-collapse-btn i {
  transform: rotate(180deg);
}

.pwa-int-group.is-excluded {
  opacity: 0.45;
}

.pwa-int-group-head {
  padding: 9px 10px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  border: 0;
  background: #fff;
}

.pwa-int-group-head-main {
  min-width: 0;
}

.pwa-int-group-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.pwa-int-group-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
  color: #2f241c;
  line-height: 1.1;
}

.pwa-int-count {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  background: #f1e7dc;
  color: #6c5644;
  font-size: 0.68rem;
  font-weight: 800;
}

.pwa-int-group-mesas {
  margin-top: 3px;
  font-size: 0.72rem;
  color: #7a7067;
}

.pwa-int-collapse-btn {
  border: 0;
  background: transparent;
  color: #6b5d50;
  padding: 2px;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  cursor: pointer;
}

.pwa-int-collapse-btn i {
  transition: transform 0.16s ease;
}

.pwa-int-group-body {
  display: flex;
  flex-direction: column;
}

.pwa-int-item {
  display: block;
  padding: 8px 10px;
  border-top: 1px solid #f6efe7;
  background: #fff;
}

.pwa-int-item-main {
  min-width: 0;
}

.pwa-int-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.pwa-int-item-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #2f241c;
  line-height: 1.15;
}

.pwa-int-item-mesa {
  font-size: 0.7rem;
  color: #7a7067;
  white-space: nowrap;
}

.pwa-int-item-meta {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.7rem;
  line-height: 1.22;
  color: #55483d;
}

.pwa-int-avatar {
  display: none;
}

/* Drawer filtros intolerancias */
.pwa-int-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 12, 0.34);
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
  z-index: 1100;
}

.pwa-int-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.pwa-int-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(88vw, 360px);
  height: 100vh;
  background: #fff;
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.16);
  transform: translateX(100%);
  transition: transform 0.24s ease;
  z-index: 1110;
  display: flex;
  flex-direction: column;
}

.pwa-int-drawer.is-open {
  transform: translateX(0);
}

.pwa-int-drawer-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid #eee4d8;
}

.pwa-int-drawer-title {
  font-size: 0.96rem;
  font-weight: 900;
  color: #2f241c;
}

.pwa-int-drawer-subtitle {
  margin-top: 2px;
  font-size: 0.74rem;
  color: #7a7067;
}

.pwa-int-drawer-close {
  border: 0;
  background: #f7f1ea;
  color: #6a5d51;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
}

.pwa-int-drawer-body {
  padding: 12px 14px 16px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-int-filter-section {
  border: 1px solid #ebe1d5;
  background: #fbf8f4;
  border-radius: 12px;
  padding: 10px;
}

.pwa-int-filter-title {
  font-size: 0.8rem;
  font-weight: 900;
  color: #4f4339;
  margin-bottom: 7px;
}

.pwa-int-mode-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pwa-int-mode {
  border: 1px solid #ddd2c5;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: left;
  color: #5a4c41;
  cursor: pointer;
}

.pwa-int-mode span {
  display: block;
  font-size: 0.82rem;
  font-weight: 900;
}

.pwa-int-mode.active {
  background: #7b6655;
  border-color: #7b6655;
  color: #fff;
}

.pwa-int-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.pwa-int-label:last-child {
  margin-bottom: 0;
}

.pwa-int-label span {
  font-size: 0.74rem;
  font-weight: 800;
  color: #5b4f45;
}

.pwa-int-rule-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pwa-int-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.pwa-int-check {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e7ddd1;
  border-radius: 10px;
  padding: 7px 9px;
  background: #fff;
  font-size: 0.8rem;
}

.pwa-int-check-name {
  flex: 1 1 auto;
  font-weight: 700;
  color: #3e332b;
}

.pwa-int-check small {
  color: #7a7067;
  white-space: nowrap;
}

.pwa-int-save-btn {
  width: 100%;
}

/* Ajuste móvil: pwa-main sin margen para sección flush */
@media (max-width: 520px) {
  .pwa-main:has(.pwa-event-page--intolerancias) {
    padding-left: 0;
    padding-right: 0;
  }
  .pwa-event-page--intolerancias {
    margin-left: 0;
    margin-right: 0;
  }
  .pwa-int-drawer {
    width: 88vw;
  }
}
/* Fallback por si :has no está soportado en algún navegador */
.pwa-main.pwa-main--flush,
.pwa-main--flush {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   INTOLERANCIAS - JERARQUÍA VISUAL
   grupo más claro, invitados menos pesados
   ========================================================= */
.pwa-int-group {
  background: #fff;
  border-bottom: 1px solid #eadfd4;
}

.pwa-int-group + .pwa-int-group {
  border-top: 6px solid #f7f2eb;
}

.pwa-int-group-head {
  background: #fbf7f1;
  padding: 10px 11px 8px;
  border-bottom: 1px solid #eadfd4;
}

.pwa-int-group-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pwa-int-group-title {
  font-size: 0.98rem;
  font-weight: 900;
  color: #2d2118;
  letter-spacing: -0.02em;
}

.pwa-int-count {
  background: #eadfce;
  color: #6f5945;
  font-size: 0.66rem;
  font-weight: 850;
  padding: 2px 7px;
}

.pwa-int-group-mesas {
  margin-top: 3px;
  font-size: 0.69rem;
  color: #8b8177;
  font-weight: 500;
}

.pwa-int-item {
  padding: 8px 11px 9px;
  border-top: 1px solid #f1e9df;
  background: #fff;
}

.pwa-int-item:nth-child(even) {
  background: #fffdfb;
}

.pwa-int-item-top {
  align-items: baseline;
}

.pwa-int-item-name {
  font-size: 0.82rem;
  font-weight: 750;
  color: #211b16;
  line-height: 1.18;
}

.pwa-int-item-mesa {
  font-size: 0.68rem;
  color: #8a7e73;
  font-weight: 500;
}

.pwa-int-item-meta {
  margin-top: 2px;
  font-size: 0.69rem;
  line-height: 1.23;
  color: #5d554d;
}

.pwa-int-item-meta strong {
  font-weight: 700;
  color: #3f352e;
}

.pwa-int-item-meta .pwa-muted {
  color: #8a8178;
}

/* En pantallas pequeñas, todavía más compacto */
@media (max-width: 560px) {
  .pwa-int-group + .pwa-int-group {
    border-top-width: 5px;
  }
  .pwa-int-group-head {
    padding: 9px 10px 7px;
  }
  .pwa-int-group-title {
    font-size: 0.94rem;
  }
  .pwa-int-item {
    padding: 7px 10px 8px;
  }
  .pwa-int-item-name {
    font-size: 0.8rem;
    font-weight: 740;
  }
  .pwa-int-item-meta {
    font-size: 0.68rem;
  }
}
/* =====================================================
   INTOLERANCIAS - NOTAS INVITADO
   ===================================================== */
.pwa-int-item-name-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.pwa-int-item-actions {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
}

.pwa-int-note-btn {
  border: 1px solid #e4d9cc;
  background: #fff;
  color: #7b6655;
  width: 26px;
  height: 24px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  padding: 0;
}

.pwa-int-note-btn:active {
  background: #f4efe8;
}

.pwa-int-item-note {
  margin-top: 2px;
  font-size: 0.68rem;
  line-height: 1.22;
  color: #7a7067;
  font-weight: 450;
}

.pwa-int-item-note.is-empty {
  display: none;
}

.pwa-int-note-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 12, 0.34);
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
  z-index: 1120;
}

.pwa-int-note-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.pwa-int-note-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(88vw, 360px);
  height: 100vh;
  background: #fff;
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.16);
  transform: translateX(100%);
  transition: transform 0.24s ease;
  z-index: 1130;
  display: flex;
  flex-direction: column;
}

.pwa-int-note-drawer.is-open {
  transform: translateX(0);
}

@media (max-width: 560px) {
  .pwa-int-note-btn {
    width: 25px;
    height: 23px;
    border-radius: 8px;
    font-size: 0.68rem;
  }
  .pwa-int-item-note {
    font-size: 0.66rem;
  }
}
/* =====================================================
   INTOLERANCIAS - NOTA BAJO NOMBRE
   ===================================================== */
.pwa-int-item-note-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 0 0;
  margin: 0;
  display: block;
  width: 100%;
  text-align: left;
  color: #7a7067;
  font-size: 0.68rem;
  line-height: 1.22;
  font-weight: 450;
  cursor: pointer;
}

.pwa-int-item-note-link:active {
  color: #6f523c;
}

.pwa-int-item-note-link .js-int-nota-empty {
  color: #9a8168;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pwa-int-item-note-link .is-empty {
  display: none;
}

.pwa-int-item-actions {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .pwa-int-item-note-link {
    font-size: 0.66rem;
  }
}
.pwa-int-page {
  padding: 0 12px 12px;
}

.pwa-int-topbar {
  margin-top: 8px;
  margin-bottom: 10px;
}

.pwa-int-main-list {
  padding-bottom: 12px;
}

@media (max-width: 380px) {
  .pwa-int-page {
    padding: 0 10px 10px;
  }
}
/* Shared task views */
/**
 * Estilos comunes para todas las vistas de tareas
 */
:root {
  --primary-color: #00b4a6;
  --primary-dark: #00897b;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --success-color: #28a745;
  --light-bg: #f8f9fa;
  --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  --card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
  --border-radius: 10px;
  --transition: all 0.2s ease-in-out;
}

/* ========================================
   ESTILOS GENERALES DEL CONTENEDOR
   ======================================== */
.tareas-container {
  padding: 0;
}

/* ========================================
   HEADER Y NAVEGACIÓN
   ======================================== */
.tareas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.tareas-title {
  color: #2c3e50;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Selector de Vista */
.vista-selector .btn-group .btn {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  transition: var(--transition);
}

.vista-selector .btn.active {
  background-color: var(--primary-dark);
  color: white;
  border-color: var(--primary-dark);
  box-shadow: 0 2px 8px rgba(0, 180, 166, 0.3);
}

.vista-selector .btn:hover:not(.active) {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* ========================================
   ESTADÍSTICAS
   ======================================== */
.stats-panel {
  background: white;
  border-radius: var(--border-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--light-bg);
  transition: var(--transition);
}

.stat-item:hover {
  background: rgba(var(--primary-color), 0.1);
  transform: translateY(-2px);
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  display: block;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* ========================================
   FILTROS INTELIGENTES
   ======================================== */
.intelligent-filters {
  background: var(--light-bg);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
}

.filter-toggle {
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
  background: white;
  color: #6c757d;
  margin: 0.25rem;
}

.filter-toggle:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 180, 166, 0.2);
}

.filter-toggle.active {
  background: var(--primary-dark);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 180, 166, 0.3);
}

.relevance-info {
  background: rgba(0, 180, 166, 0.1);
  border: 1px solid rgba(0, 180, 166, 0.2);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--primary-dark);
  font-size: 0.85rem;
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* ========================================
   BOTONES DE ACCIÓN
   ======================================== */
.acciones-principales {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-nueva-tarea {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  border: none;
  color: white;
  font-weight: 500;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0, 180, 166, 0.2);
}

.btn-nueva-tarea:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 180, 166, 0.3);
  color: white;
}

.btn-auto-generar {
  background: linear-gradient(135deg, #6c757d, #495057);
  border: none;
  color: white;
  font-weight: 500;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  transition: var(--transition);
}

.btn-auto-generar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
  color: white;
}

/* ========================================
   BADGES Y ESTADOS
   ======================================== */
/* Badges de Prioridad */
.priority-badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.priority-badge.priority-alta {
  background: linear-gradient(135deg, #dc3545, #ff4757);
  color: white;
}

.priority-badge.priority-media {
  background: linear-gradient(135deg, #ffc107, #ffb142);
  color: #2c3e50;
}

.priority-badge.priority-baja {
  background: linear-gradient(135deg, #28a745, #2ed573);
  color: white;
}

/* Badges de Estado */
.status-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.status-badge.status-pendiente {
  background: #6c757d;
  color: white;
}

.status-badge.status-en_proceso {
  background: #007bff;
  color: white;
}

.status-badge.status-completada {
  background: #28a745;
  color: white;
}

/* Badge de Cita */
.cita-badge {
  background: linear-gradient(135deg, #17a2b8, #00d2d3);
  color: white;
  font-size: 0.65rem;
  padding: 0.2rem 0.4rem;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Badge de Vencida */
.overdue-label {
  background: #dc3545;
  color: white;
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
/* ========================================
   INDICADORES DE PRIORIDAD
   ======================================== */
.priority-indicator {
  width: 4px;
  height: 30px;
  border-radius: 2px;
  flex-shrink: 0;
}

.priority-indicator.priority-alta {
  background: linear-gradient(to bottom, #dc3545, #ff4757);
}

.priority-indicator.priority-media {
  background: linear-gradient(to bottom, #ffc107, #ffb142);
}

.priority-indicator.priority-baja {
  background: linear-gradient(to bottom, #28a745, #2ed573);
}

/* ========================================
   INFORMACIÓN DE TAREAS
   ======================================== */
.task-info .task-title {
  color: #2c3e50;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

.task-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #495057;
}

.task-date i {
  width: 16px;
  color: var(--primary-color);
}

.task-date.overdue {
  color: #dc3545;
  font-weight: 600;
}

.task-date.overdue i {
  color: #dc3545;
}

.task-provider {
  background: rgba(0, 180, 166, 0.1);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 180, 166, 0.2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.task-provider i {
  color: var(--primary-color);
}

.task-provider span {
  color: var(--primary-dark);
  font-weight: 500;
}

/* ========================================
   ESTADOS VACÍOS Y CARGA
   ======================================== */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: #6c757d;
}

.empty-state i {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: 1rem;
  display: block;
}

.empty-state h5 {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #495057;
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #6c757d;
}

.loading-state .spinner-border {
  margin-right: 1rem;
}

/* ========================================
   NOTIFICACIONES
   ======================================== */
.notification-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  min-width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ========================================
   RESPONSIVE COMÚN
   ======================================== */
@media (max-width: 768px) {
  .tareas-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .vista-selector .btn-group {
    display: flex;
    justify-content: center;
  }
  .vista-selector .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
  .acciones-principales {
    justify-content: stretch;
  }
  .acciones-principales .btn {
    flex: 1;
  }
  .intelligent-filters {
    padding: 1rem;
  }
  .filter-toggle {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    margin: 0.2rem;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .stat-item {
    padding: 0.5rem;
  }
  .stat-number {
    font-size: 1.25rem;
  }
  .stat-label {
    font-size: 0.7rem;
  }
}
@media (max-width: 576px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .filter-toggle {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }
  .relevance-info {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
}
/* ========================================
   UTILIDADES
   ======================================== */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fade-in-up {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ========================================
   ACCESIBILIDAD
   ======================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus para navegación con teclado */
.filter-toggle:focus,
.btn:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Gantt task view */
/* Contenedor principal */
#gantt_here {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 !important;
  min-height: 400px;
}

/* SVG principal del Gantt */
.gantt {
  background-color: #ffffff !important;
  width: 100% !important;
}

/* Grid y líneas de fondo */
.gantt .grid-background {
  fill: #ffffff !important;
}

.gantt .grid-header {
  fill: #f8f9fa !important;
}

.gantt .grid-row {
  fill: #ffffff !important;
  stroke: #e9ecef !important;
  stroke-width: 1px;
}

/* Texto de cabeceras (fechas/períodos) */
.gantt .upper-text,
.gantt .lower-text {
  fill: #495057 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Barras de tareas */
.gantt .bar {
  fill: #007bff !important;
  stroke: #0056b3 !important;
  stroke-width: 1px !important;
  rx: 3 !important;
  ry: 3 !important;
}

.gantt .bar-progress {
  fill: #28a745 !important;
  stroke: none !important;
}

/* Estados de barras por prioridad */
.gantt .bar.priority-alta {
  fill: #dc3545 !important;
  stroke: #c82333 !important;
}

.gantt .bar.priority-media {
  fill: #ffc107 !important;
  stroke: #e0a800 !important;
}

.gantt .bar.priority-baja {
  fill: #6c757d !important;
  stroke: #5a6268 !important;
}

/* Estados por status */
.gantt .bar.status-completada {
  fill: #28a745 !important;
  stroke: #1e7e34 !important;
}

.gantt .bar.status-en_proceso {
  fill: #17a2b8 !important;
  stroke: #138496 !important;
}

/* Texto de las barras */
.gantt .bar-label {
  fill: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-anchor: start !important;
}

/* FLECHAS - MUY IMPORTANTE */
.gantt .arrow {
  stroke: #6c757d !important;
  stroke-width: 2px !important;
  fill: none !important;
  marker-end: url(#arrowhead) !important;
}

/* Marcadores de flecha */
.gantt marker {
  fill: #6c757d !important;
  stroke: #6c757d !important;
}

.gantt marker path {
  fill: #6c757d !important;
  stroke: #6c757d !important;
}

/* Handle para cambiar fechas */
.gantt .handle {
  fill: #007bff !important;
  stroke: #0056b3 !important;
  stroke-width: 1px !important;
  cursor: ew-resize !important;
}

/* Línea de hoy */
.gantt .today-highlight {
  stroke: #dc3545 !important;
  stroke-width: 2px !important;
  stroke-dasharray: 5, 5 !important;
}

/* Hover effects - DESHABILITADO BOLD */
.gantt .bar:hover {
  /* Remover efectos de hover que causan bold/negrita */
  /* fill-opacity: 0.8 !important; */
  /* stroke-width: 2px !important; */
}

/* Popup personalizado */
.gantt-popup {
  background: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  color: #495057 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  padding: 15px !important;
  max-width: 350px !important;
  z-index: 1000 !important;
}

.gantt-popup .popup-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #dee2e6 !important;
  padding-bottom: 8px !important;
}

.gantt-popup .popup-header h6 {
  color: #212529 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.gantt-popup .popup-body {
  margin-bottom: 10px !important;
}

.gantt-popup .popup-info p {
  margin: 5px 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.gantt-popup .popup-actions {
  text-align: center !important;
  border-top: 1px solid #dee2e6 !important;
  padding-top: 10px !important;
}

.gantt-popup .badge {
  color: #ffffff !important;
  font-size: 10px !important;
  padding: 3px 6px !important;
  border-radius: 3px !important;
}

.gantt-popup .badge.priority-alta {
  background-color: #dc3545 !important;
}

.gantt-popup .badge.priority-media {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

.gantt-popup .badge.priority-baja {
  background-color: #6c757d !important;
}

.gantt-popup .badge.status-pendiente {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

.gantt-popup .badge.status-en_proceso {
  background-color: #17a2b8 !important;
}

.gantt-popup .badge.status-completada {
  background-color: #28a745 !important;
}

/* Cabecera trimestral personalizada */
.quarter-header {
  background: linear-gradient(180deg, rgba(248, 249, 250, 0.9), rgba(255, 255, 255, 0)) !important;
  color: #495057 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #dee2e6 !important;
}

/* Forzar colores para elementos específicos */
#gantt_here svg * {
  color: inherit !important;
}

#gantt_here svg text {
  fill: #495057 !important;
}

#gantt_here svg rect:not(.bar):not(.bar-progress) {
  stroke: #e9ecef !important;
}

/* Card container si está en una card de Bootstrap */
.card #gantt_here {
  background: #ffffff !important;
}

.card-body #gantt_here {
  background: #ffffff !important;
}

/* Estados de carga, vacío y error */
#ganttLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: #495057;
}

#ganttEmpty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  color: #6c757d;
}

#ganttError {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: rgba(248, 215, 218, 0.9);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Botones de control */
.gantt-controls {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.gantt-controls .btn {
  font-size: 12px;
  padding: 5px 10px;
}

.gantt-controls .btn.active {
  background-color: #007bff;
  color: #ffffff;
  border-color: #007bff;
}

/* Responsive */
@media (max-width: 768px) {
  #gantt_here {
    border-radius: 4px;
    border: none;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 400px;
  }
  .gantt-controls {
    justify-content: center;
  }
  .gantt-popup {
    max-width: 280px !important;
    font-size: 12px !important;
  }
}
/* Asegurar que el contenedor padre también permita scroll */
.card-body {
  overflow: visible !important;
}

/* Si hay un wrapper adicional */
.gantt-wrapper,
.timeline-container {
  overflow: visible !important;
  position: relative !important;
}

/* Dark mode support (opcional) */
@media (prefers-color-scheme: dark) {
  #gantt_here {
    background-color: #ffffff !important; /* Mantener blanco */
    border-color: #e0e0e0 !important;
  }
  .gantt {
    background-color: #ffffff !important; /* Mantener blanco */
  }
}
/* Animaciones suaves - DESHABILITADAS */
.gantt .bar {
  /* transition: fill-opacity 0.2s ease !important; */
}

.gantt .bar:hover {
  /* transition: fill-opacity 0.2s ease !important; */
}

/* Desactivar todos los efectos hover que causan bold */
.gantt .bar:hover,
.gantt .bar-progress:hover,
.gantt .handle:hover {
  opacity: 1 !important;
  fill-opacity: 1 !important;
  stroke-opacity: 1 !important;
  stroke-width: 1px !important;
  font-weight: normal !important;
  transform: none !important;
}

/* Desactivar hover en textos */
.gantt .bar-label:hover {
  font-weight: normal !important;
  text-shadow: none !important;
}

/* Fix para scroll horizontal y vertical */
#gantt_here {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 600px; /* Añadir altura máxima para habilitar scroll vertical */
  position: relative !important;
}

/* Contenedor del SVG debe permitir scroll */
#gantt_here .gantt {
  overflow: visible !important;
  min-width: 100% !important;
}

/* Scrollbar personalizada (webkit) */
#gantt_here::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

#gantt_here::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

#gantt_here::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
  border: 2px solid #f1f1f1;
}

#gantt_here::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

#gantt_here::-webkit-scrollbar-corner {
  background: #f1f1f1;
}

/* Asegurar que no hay elementos con z-index negativo */
#gantt_here * {
  z-index: auto !important;
}

#gantt_here svg {
  z-index: 1 !important;
}

/* Kanban task view */
/* =========================================================
   KANBAN BOARD - DISEÑO MODERNO SEGÚN IMAGEN DE REFERENCIA
   Versión: 2026-02-01 - Estilo Premium + FIX RESPONSIVE
   ========================================================= */
/* ---------- Variables CSS ---------- */
:root {
  /* Colores Padre/Hijo */
  --parent-color: #6366f1;
  --parent-color-light: #818cf8;
  --parent-bg: #eef2ff;
  --child-indicator: #a5b4fc;
  --connection-line: #c7d2fe;
  /* Colores Base */
  --kanban-bg-board: #f5f7fa;
  --kanban-bg-column: #ffffff;
  --kanban-text-primary: #2c3e50;
  --kanban-text-secondary: #6c757d;
  --kanban-border: #e0e7ff;
  /* Sombras */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(99, 102, 241, 0.1);
  --shadow-lg: 0 8px 24px rgba(99, 102, 241, 0.15);
  /* Transiciones */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   BOARD LAYOUT - 3 COLUMNAS
   ========================================================= */
#kanbanBoard, .kanban-board {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: var(--kanban-bg-board);
  border-radius: 16px;
  min-height: 600px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

/* =========================================================
   COLUMNAS
   ========================================================= */
.kanban-column {
  flex: 1;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  background: var(--kanban-bg-column);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
}

.kanban-column:hover {
  box-shadow: var(--shadow-md);
}

/* =========================================================
   HEADER DE COLUMNA
   ========================================================= */
.kanban-header {
  padding: 16px 18px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.kanban-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--kanban-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.kanban-header h3 i {
  font-size: 1.1em;
  opacity: 0.8;
}

.task-count {
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--parent-color-light) 0%, var(--parent-color) 100%);
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 8px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.task-count:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

/* =========================================================
   CONTENEDOR DE TAREAS
   ========================================================= */
.kanban-tasks {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kanban-tasks::-webkit-scrollbar {
  width: 6px;
}

.kanban-tasks::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-tasks::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.kanban-tasks::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

/* =========================================================
   GRUPOS PADRE/HIJO - DISEÑO PRINCIPAL
   ========================================================= */
.kanban-group {
  border: 2px solid var(--kanban-border);
  border-radius: 12px;
  background: linear-gradient(135deg, #fefeff 0%, #f9fafb 100%);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

/* Borde lateral azul GRUESO */
.kanban-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--parent-color) 0%, var(--parent-color-light) 100%);
  transition: width 0.3s ease;
  z-index: 10;
}

.kanban-group:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--parent-color-light);
}

.kanban-group:hover::before {
  width: 8px;
}

/* =========================================================
   HEADER DEL GRUPO
   ========================================================= */
.kanban-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--parent-bg) 0%, #f0f4ff 100%);
  border-bottom: 2px solid var(--kanban-border);
  cursor: pointer;
  user-select: none;
  transition: var(--transition);
  position: relative;
}

.kanban-group-header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--parent-color) 0%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.kanban-group-header:hover {
  background: linear-gradient(135deg, #e0e7ff 0%, #dbeafe 100%);
  padding-left: 20px;
}

.kanban-group-header:hover::after {
  transform: scaleX(1);
}

/* =========================================================
   CHEVRON (Botón expandir/colapsar)
   ========================================================= */
.group-toggle {
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, var(--parent-color) 0%, var(--parent-color-light) 100%);
  color: white;
  border-radius: 8px;
  font-size: 0.85em;
  border: none;
  padding: 0;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  flex-shrink: 0;
}

.kanban-group-header:hover .group-toggle {
  transform: scale(1.15) rotate(180deg);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.kanban-group-header[aria-expanded=false] .group-toggle {
  transform: rotate(-90deg);
}

.kanban-group-header[aria-expanded=false]:hover .group-toggle {
  transform: rotate(-90deg) scale(1.15);
}

/* =========================================================
   TÍTULO DEL GRUPO
   ========================================================= */
.group-title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--kanban-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-title::before {
  content: "📁";
  font-size: 1.2em;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.kanban-group-header:hover .group-title::before {
  transform: scale(1.2);
}

/* =========================================================
   BARRA DE PROGRESO
   ========================================================= */
.group-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--parent-color);
  font-weight: 600;
  margin-left: auto;
  margin-right: 8px;
  flex-shrink: 0;
}

.group-progress-bar {
  width: 60px;
  height: 6px;
  background: #e0e7ff;
  border-radius: 999px;
  overflow: hidden;
}

.group-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--parent-color) 0%, var(--parent-color-light) 100%);
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

/* =========================================================
   CONTADOR
   ========================================================= */
.group-count {
  min-width: 32px;
  padding: 4px 10px;
  background: white;
  color: var(--parent-color);
  border: 2px solid var(--parent-color-light);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.2);
  transition: var(--transition);
  flex-shrink: 0;
  opacity: 1 !important;
}

.kanban-group-header:hover .group-count {
  background: var(--parent-color);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
}

/* =========================================================
   BODY DEL GRUPO (Tareas hijas)
   ========================================================= */
.kanban-group-body {
  padding: 16px;
  background: white;
  position: relative;
}

/* Línea vertical de conexión */
.kanban-group-body::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--connection-line) 0%, transparent 100%);
  z-index: 1;
}

/* =========================================================
   TAREAS HIJAS - CON CONECTORES
   ========================================================= */
.kanban-group-body .kanban-task,
.kanban-group-body .kanban-task-card {
  background: white;
  border: 2px solid var(--kanban-border);
  border-left: 4px solid var(--child-indicator);
  border-radius: 8px;
  padding: 12px;
  padding-left: 16px;
  margin-left: 22px;
  margin-bottom: 10px;
  position: relative;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.06);
  transition: var(--transition);
  cursor: pointer;
  z-index: 2;
}

/* Conector horizontal */
.kanban-group-body .kanban-task::before,
.kanban-group-body .kanban-task-card::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--connection-line);
  z-index: 1;
}

/* Punto de conexión */
.kanban-group-body .kanban-task::after,
.kanban-group-body .kanban-task-card::after {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--child-indicator);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--connection-line);
  transition: all 0.3s ease;
  z-index: 3;
}

.kanban-group-body .kanban-task:hover,
.kanban-group-body .kanban-task-card:hover {
  background: #fafbff;
  border-left-color: var(--parent-color);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.kanban-group-body .kanban-task:hover::after,
.kanban-group-body .kanban-task-card:hover::after {
  background: var(--parent-color);
  transform: translateY(-50%) scale(1.3);
  box-shadow: 0 0 0 3px var(--parent-color-light);
}

/* Última tarea sin margen inferior */
.kanban-group-body .kanban-task:last-child,
.kanban-group-body .kanban-task-card:last-child {
  margin-bottom: 0;
}

/* Símbolo de hijo */
.kanban-group-body .kanban-task .task-badges::before,
.kanban-group-body .kanban-task-card .task-badges::before {
  content: "└─";
  font-size: 0.65em;
  color: var(--child-indicator);
  font-weight: 700;
  margin-right: 6px;
  opacity: 0.6;
}

/* =========================================================
   TAREAS NORMALES (no agrupadas)
   ========================================================= */
.kanban-task,
.kanban-task-card {
  background: white;
  border: 2px solid #e6e6e6;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.kanban-task:hover,
.kanban-task-card:hover {
  background: #f7f3ee;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--parent-color-light);
}

/* =========================================================
   CONTENIDO DE TAREAS
   ========================================================= */
.task-title {
  margin: 0 0 10px 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kanban-text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.task-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================
   BADGES DE FECHA
   ========================================================= */
.task-date {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
}

.task-date {
  background: #f0f0f0;
  color: #666;
}

.task-date.overdue {
  background: #fee;
  color: #c00;
  border: 1px solid #fcc;
}

.task-date.today {
  background: #fef3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.task-date.soon {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* =========================================================
   BADGES DE ASIGNACIÓN Y PRIORIDAD
   ========================================================= */
.kanban-task-asignadoa {
  font-size: 0.7rem;
  padding: 4px 10px;
  font-weight: 700;
  color: white;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}

.kanban-task-asignadoa:hover {
  transform: scale(1.05);
}

.kanban-task-priority {
  font-size: 0.7rem;
  padding: 4px 10px;
  font-weight: 700;
  color: white;
  border-radius: 999px;
  text-transform: capitalize;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}

.kanban-task-priority:hover {
  transform: scale(1.05);
}

.kanban-task-priority.alta {
  background: linear-gradient(135deg, #ff5252 0%, #ff1744 100%);
}

.kanban-task-priority.media {
  background: linear-gradient(135deg, #ffc652 0%, #ffb300 100%);
}

.kanban-task-priority.baja {
  background: linear-gradient(135deg, #65d3b3 0%, #4db6ac 100%);
}

/* =========================================================
   TAREAS PADRE STANDALONE
   ========================================================= */
.kanban-task.is-parent,
.kanban-task-card.is-parent {
  border: 2px solid var(--parent-color-light);
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.3) 0%, white 100%);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  position: relative;
}

.kanban-task.is-parent::before,
.kanban-task-card.is-parent::before {
  content: "📁";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 1.1em;
  background: var(--parent-color);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  z-index: 10;
}

.kanban-task.is-parent:hover,
.kanban-task-card.is-parent:hover {
  border-color: var(--parent-color);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
}

.kanban-task.is-parent .task-title,
.kanban-task-card.is-parent .task-title {
  color: var(--parent-color);
  font-weight: 700;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 0.85rem;
  background: #fafafa;
  border-radius: 8px;
  border: 2px dashed #e0e0e0;
}

.empty-state::before {
  content: "📋";
  display: block;
  font-size: 2.5em;
  margin-bottom: 8px;
  opacity: 0.5;
}

/* =========================================================
   ESTADO COLAPSADO
   ========================================================= */
.kanban-group-body[style*="display: none"] {
  animation: none;
}

.kanban-group-header[aria-expanded=false] {
  border-bottom: none;
}

.kanban-group-header[aria-expanded=false]::after {
  display: none;
}

/* =========================================================
   RESPONSIVE - CRÍTICO PARA MÓVILES
   ========================================================= */
@media (max-width: 992px) {
  #kanbanBoard, .kanban-board {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    overflow-x: visible;
  }
  .kanban-column {
    max-width: 100%;
    min-width: 100%;
  }
}
@media (max-width: 768px) {
  #kanbanBoard, .kanban-board {
    padding: 12px;
    gap: 12px;
    border-radius: 12px;
  }
  .kanban-column {
    border-radius: 10px;
  }
  .kanban-header {
    padding: 12px 14px;
  }
  .kanban-header h3 {
    font-size: 0.9rem;
  }
  .task-count {
    min-width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
  .kanban-tasks {
    padding: 10px;
    gap: 10px;
  }
  /* Reducir espacios en grupos */
  .kanban-group {
    margin-bottom: 10px;
  }
  .kanban-group-header {
    padding: 10px 12px;
    gap: 8px;
  }
  .group-toggle {
    width: 26px;
    height: 26px;
    font-size: 0.75em;
  }
  .group-title {
    font-size: 0.85rem;
    gap: 6px;
  }
  .group-count {
    min-width: 28px;
    padding: 3px 8px;
    font-size: 0.7rem;
  }
  /* Ajustar líneas de conexión */
  .kanban-group-body {
    padding: 12px;
  }
  .kanban-group-body::before {
    left: 20px;
    width: 2px;
  }
  .kanban-group-body .kanban-task,
  .kanban-group-body .kanban-task-card {
    margin-left: 16px;
    padding: 10px;
    padding-left: 12px;
  }
  .kanban-group-body .kanban-task::before,
  .kanban-group-body .kanban-task-card::before {
    width: 14px;
    left: -16px;
  }
  .kanban-group-body .kanban-task::after,
  .kanban-group-body .kanban-task-card::after {
    left: -22px;
    width: 6px;
    height: 6px;
  }
  /* Ocultar barra de progreso en móviles */
  .group-progress {
    display: none;
  }
  /* Ajustar tareas normales */
  .kanban-task,
  .kanban-task-card {
    padding: 10px;
    margin-bottom: 8px;
  }
  .task-title {
    font-size: 0.85rem;
    margin-bottom: 8px;
  }
  .task-badges {
    gap: 5px;
  }
  .task-date,
  .kanban-task-asignadoa,
  .kanban-task-priority {
    font-size: 0.65rem;
    padding: 3px 7px;
  }
}
@media (max-width: 480px) {
  #kanbanBoard, .kanban-board {
    padding: 8px;
    gap: 10px;
    border-radius: 8px;
    min-height: 400px;
  }
  .kanban-column {
    border-radius: 8px;
  }
  .kanban-header {
    padding: 10px 12px;
  }
  .kanban-header h3 {
    font-size: 0.85rem;
    gap: 6px;
  }
  .kanban-tasks {
    padding: 8px;
    gap: 8px;
  }
  .kanban-group-header {
    padding: 8px 10px;
    gap: 6px;
  }
  .kanban-group-header:hover {
    padding-left: 12px;
  }
  .group-toggle {
    width: 24px;
    height: 24px;
    font-size: 0.7em;
  }
  .group-title {
    font-size: 0.8rem;
  }
  .group-title::before {
    font-size: 1em;
  }
  .group-count {
    min-width: 24px;
    padding: 2px 6px;
    font-size: 0.65rem;
  }
  .kanban-group-body {
    padding: 10px;
  }
  .kanban-group-body::before {
    left: 16px;
  }
  .kanban-group-body .kanban-task,
  .kanban-group-body .kanban-task-card {
    margin-left: 12px;
    padding: 8px;
    padding-left: 10px;
    margin-bottom: 8px;
  }
  .kanban-group-body .kanban-task::before,
  .kanban-group-body .kanban-task-card::before {
    width: 10px;
    left: -12px;
  }
  .kanban-group-body .kanban-task::after,
  .kanban-group-body .kanban-task-card::after {
    left: -18px;
    width: 5px;
    height: 5px;
  }
  .kanban-task,
  .kanban-task-card {
    padding: 8px;
    margin-bottom: 6px;
    border-radius: 6px;
  }
  .task-title {
    font-size: 0.8rem;
    margin-bottom: 6px;
  }
  .task-badges {
    gap: 4px;
  }
  .task-date,
  .kanban-task-asignadoa,
  .kanban-task-priority {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
  /* Reducir iconos de tareas padre */
  .kanban-task.is-parent::before,
  .kanban-task-card.is-parent::before {
    width: 24px;
    height: 24px;
    font-size: 0.9em;
    top: -6px;
    right: -6px;
  }
  /* Ajustar hover en móviles */
  .kanban-group:hover {
    transform: none;
  }
  .kanban-task:hover,
  .kanban-task-card:hover {
    transform: none;
  }
  .kanban-group-body .kanban-task:hover,
  .kanban-group-body .kanban-task-card:hover {
    transform: none;
  }
}
/* =========================================================
   ANIMACIONES
   ========================================================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   ACCESIBILIDAD
   ========================================================= */
.kanban-group-header:focus-visible {
  outline: 3px solid var(--parent-color);
  outline-offset: 2px;
}

.kanban-task:focus-visible,
.kanban-task-card:focus-visible {
  outline: 3px solid var(--parent-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* =========================================================
   DISTINCIÓN CITAS VS TAREAS
   ========================================================= */
/* =========================================================
   TAREAS TIPO CITA - ESTILO DISTINTIVO
   ========================================================= */
.kanban-task[data-tipo=cita],
.kanban-task-card[data-tipo=cita],
.kanban-task.is-cita,
.kanban-task-card.is-cita {
  border: 2px solid #d4edda !important;
  background: linear-gradient(135deg, rgba(212, 237, 218, 0.15) 0%, white 100%) !important;
  border-left: 4px solid #28a745 !important;
  position: relative;
}

/* Indicador de cita en la esquina */
.kanban-task[data-tipo=cita]::before,
.kanban-task-card[data-tipo=cita]::before,
.kanban-task.is-cita::before,
.kanban-task-card.is-cita::before {
  content: "📅";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 1.1em;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
  z-index: 10;
  filter: grayscale(0);
}

.kanban-task[data-tipo=cita]:hover,
.kanban-task-card[data-tipo=cita]:hover,
.kanban-task.is-cita:hover,
.kanban-task-card.is-cita:hover {
  border-color: #28a745 !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2) !important;
  background: linear-gradient(135deg, rgba(212, 237, 218, 0.25) 0%, white 100%) !important;
}

/* Borde superior verde para citas */
.kanban-task[data-tipo=cita]::after,
.kanban-task-card[data-tipo=cita]::after,
.kanban-task.is-cita::after,
.kanban-task-card.is-cita::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #28a745, #20c997);
  border-radius: 8px 8px 0 0;
  z-index: 1;
}

/* =========================================================
   CITAS DENTRO DE GRUPOS - AJUSTE DE PSEUDO-ELEMENTOS
   ========================================================= */
.kanban-group-body .kanban-task[data-tipo=cita]::before,
.kanban-group-body .kanban-task-card[data-tipo=cita]::before,
.kanban-group-body .kanban-task.is-cita::before,
.kanban-group-body .kanban-task-card.is-cita::before {
  /* El conector horizontal de hijo */
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--connection-line);
  z-index: 1;
  border-radius: 0;
  box-shadow: none;
  font-size: inherit;
  display: block;
}

.kanban-group-body .kanban-task[data-tipo=cita]::after,
.kanban-group-body .kanban-task-card[data-tipo=cita]::after,
.kanban-group-body .kanban-task.is-cita::after,
.kanban-group-body .kanban-task-card.is-cita::after {
  /* El punto de conexión */
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #28a745;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #28a745;
  transition: all 0.3s ease;
  z-index: 3;
}

.kanban-group-body .kanban-task[data-tipo=cita]:hover::after,
.kanban-group-body .kanban-task-card[data-tipo=cita]:hover::after,
.kanban-group-body .kanban-task.is-cita:hover::after,
.kanban-group-body .kanban-task-card.is-cita:hover::after {
  background: #28a745;
  transform: translateY(-50%) scale(1.3);
  box-shadow: 0 0 0 3px #20c997;
}

/* Icono de calendario en el título de citas */
.kanban-task[data-tipo=cita] .task-title::before,
.kanban-task-card[data-tipo=cita] .task-title::before,
.kanban-task.is-cita .task-title::before,
.kanban-task-card.is-cita .task-title::before {
  content: "📅 ";
  font-size: 1.1em;
  margin-right: 4px;
}

/* Badge especial para citas */
.task-badge-cita {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-badge-cita::before {
  content: "📅";
  font-size: 1em;
}

/* =========================================================
   TAREAS NORMALES - ESTILO POR DEFECTO (para contraste)
   ========================================================= */
.kanban-task:not([data-tipo=cita]):not(.is-cita),
.kanban-task-card:not([data-tipo=cita]):not(.is-cita) {
  /* Ya tienen el estilo por defecto, pero podemos añadir sutilezas */
}

/* Badge especial para tareas normales */
.task-badge-tarea {
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
  color: white;
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-badge-tarea::before {
  content: "✓";
  font-size: 1em;
  font-weight: 900;
}

/* =========================================================
   GRUPOS PADRE DE CITAS - ESTILO ESPECIAL
   ========================================================= */
.kanban-group[data-tipo=cita],
.kanban-group.is-cita-group {
  border-color: #d4edda !important;
}

.kanban-group[data-tipo=cita]::before,
.kanban-group.is-cita-group::before {
  background: linear-gradient(180deg, #28a745 0%, #20c997 100%) !important;
}

.kanban-group[data-tipo=cita] .kanban-group-header,
.kanban-group.is-cita-group .kanban-group-header {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
  color: #155724 !important;
}

.kanban-group[data-tipo=cita] .kanban-group-header .group-title::before,
.kanban-group.is-cita-group .kanban-group-header .group-title::before {
  content: "📅";
}

.kanban-group[data-tipo=cita] .kanban-group-header .group-toggle,
.kanban-group.is-cita-group .kanban-group-header .group-toggle {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.kanban-group[data-tipo=cita] .kanban-group-header .group-count,
.kanban-group.is-cita-group .kanban-group-header .group-count {
  border-color: #28a745 !important;
  color: #28a745 !important;
}

.kanban-group[data-tipo=cita] .kanban-group-header:hover .group-count,
.kanban-group.is-cita-group .kanban-group-header:hover .group-count {
  background: #28a745 !important;
  color: white !important;
}

/* =========================================================
   REFINAMIENTOS FINALES - BASADO EN CAPTURA
   ========================================================= */
/* Mejorar el borde izquierdo de citas (más visible) */
.kanban-group-body .kanban-task.is-cita,
.kanban-group-body .kanban-task[data-tipo=cita] {
  border-left-width: 5px !important;
  border-left-color: #28a745 !important;
}

/* Hacer el badge CITA más prominente */
.task-badge-cita {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.25);
}

/* Punto de conexión más grande y visible para citas */
.kanban-group-body .kanban-task.is-cita::after,
.kanban-group-body .kanban-task[data-tipo=cita]::after {
  width: 10px !important;
  height: 10px !important;
  background: #28a745 !important;
  border: 3px solid white !important;
  box-shadow: 0 0 0 2px #28a745 !important;
}

.kanban-group-body .kanban-task.is-cita:hover::after,
.kanban-group-body .kanban-task[data-tipo=cita]:hover::after {
  width: 12px !important;
  height: 12px !important;
  background: #20c997 !important;
  box-shadow: 0 0 0 3px #20c997, 0 2px 8px rgba(32, 201, 151, 0.4) !important;
}

/* Línea vertical más visible para grupos con citas */
.kanban-group:has(.kanban-task.is-cita) .kanban-group-body::before {
  background: linear-gradient(180deg, #a8d5ba 0%, rgba(168, 213, 186, 0.3) 100%) !important;
  width: 3px !important;
}

/* Header del grupo más distintivo si tiene citas */
.kanban-group:has(.kanban-task.is-cita) .kanban-group-header {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
}

/* Icono de carpeta verde para grupos con citas */
.kanban-group:has(.kanban-task.is-cita) .group-title::before {
  content: "📅" !important;
}

/* Toggle verde para grupos con citas */
.kanban-group:has(.kanban-task.is-cita) .group-toggle {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

/* Contador verde para grupos con citas */
.kanban-group:has(.kanban-task.is-cita) .group-count {
  border-color: #28a745 !important;
  color: #28a745 !important;
}

.kanban-group:has(.kanban-task.is-cita) .kanban-group-header:hover .group-count {
  background: #28a745 !important;
  color: white !important;
}

/* Barra de progreso verde para grupos con citas */
.kanban-group:has(.kanban-task.is-cita) .group-progress {
  color: #28a745 !important;
}

.kanban-group:has(.kanban-task.is-cita) .group-progress-fill {
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%) !important;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.4) !important;
}

/* Título de citas en verde oscuro */
.kanban-task.is-cita .task-title,
.kanban-task[data-tipo=cita] .task-title {
  color: #155724;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* El icono ya lo maneja el JavaScript */
.kanban-task.is-cita .task-title span[title=Cita],
.kanban-task[data-tipo=cita] .task-title span[title=Cita] {
  filter: drop-shadow(0 1px 2px rgba(40, 167, 69, 0.3));
  font-size: 1.1em;
}

/* Badge de fecha en citas con estilo especial */
.kanban-task.is-cita .task-date,
.kanban-task[data-tipo=cita] .task-date {
  border: 1px solid #28a745 !important;
  background: #e8f5e9 !important;
  color: #155724 !important;
}

/* Hover más pronunciado en citas */
.kanban-task.is-cita:hover,
.kanban-task[data-tipo=cita]:hover {
  border-left-width: 6px !important;
  box-shadow: inset 0 3px 0 0 #28a745, -2px 0 12px rgba(40, 167, 69, 0.15), 0 4px 12px rgba(40, 167, 69, 0.2) !important;
}

/* Pulso sutil en citas próximas */
.kanban-task.is-cita.today,
.kanban-task[data-tipo=cita].today {
  animation: citaPulse 2s ease-in-out infinite;
}

@keyframes citaPulse {
  0%, 100% {
    box-shadow: inset 0 3px 0 0 #28a745, 0 2px 6px rgba(40, 167, 69, 0.1);
  }
  50% {
    box-shadow: inset 0 3px 0 0 #28a745, 0 4px 12px rgba(40, 167, 69, 0.3), 0 0 0 4px rgba(40, 167, 69, 0.1);
  }
}
/* Separador visual entre badges */
.task-badge-cita + .task-date::before,
.task-badge-cita + .kanban-task-asignadoa::before,
.task-badge-cita + .kanban-task-priority::before {
  content: "•";
  margin-right: 6px;
  opacity: 0.3;
  color: #28a745;
}

/* Mejorar espaciado de badges en citas */
.kanban-task.is-cita .task-badges,
.kanban-task[data-tipo=cita] .task-badges {
  gap: 8px;
}

/* =========================================================
   AJUSTES RESPONSIVE PARA CITAS
   ========================================================= */
@media (max-width: 768px) {
  .kanban-group-body .kanban-task[data-tipo=cita]::before,
  .kanban-group-body .kanban-task.is-cita::before {
    left: -16px;
    width: 14px;
  }
  .kanban-group-body .kanban-task[data-tipo=cita]::after,
  .kanban-group-body .kanban-task.is-cita::after {
    left: -22px;
    width: 6px;
    height: 6px;
  }
}
@media (max-width: 480px) {
  .kanban-task[data-tipo=cita]::before,
  .kanban-task.is-cita::before {
    width: 24px;
    height: 24px;
    font-size: 0.9em;
    top: -6px;
    right: -6px;
  }
  .kanban-group-body .kanban-task[data-tipo=cita]::before,
  .kanban-group-body .kanban-task.is-cita::before {
    left: -12px;
    width: 10px;
  }
  .kanban-group-body .kanban-task[data-tipo=cita]::after,
  .kanban-group-body .kanban-task.is-cita::after {
    left: -18px;
    width: 5px;
    height: 5px;
  }
  .task-badge-cita {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
}
/* List task view */
/**
 * Estilos específicos para la vista Listado
 */
/* ========================================
   CONTENEDOR LISTADO
   ======================================== */
.listado-container {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* ========================================
   FILTROS DE LISTADO
   ======================================== */
.listado-filters {
  background: var(--light-bg);
  padding: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.listado-filters .form-label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 0.5rem;
}

.listado-filters .input-group-text {
  background: white;
  border-right: none;
  color: var(--primary-color);
}

.listado-filters .form-control,
.listado-filters .form-select {
  border-left: none;
  transition: var(--transition);
}

.listado-filters .form-control:focus,
.listado-filters .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 180, 166, 0.25);
}

/* ========================================
   ACCIONES MASIVAS
   ======================================== */
.acciones-masivas {
  animation: slideDown 0.3s ease;
  margin-bottom: 1rem;
}

.acciones-masivas .bg-light {
  background: linear-gradient(135deg, rgba(0, 180, 166, 0.1) 0%, rgb(248, 249, 250) 100%) !important;
  border: 1px solid rgba(0, 180, 166, 0.2);
}

.acciones-masivas .btn-sm {
  font-size: 0.8rem;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-weight: 500;
  transition: var(--transition);
}

.acciones-masivas .btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ========================================
   TABLA DE TAREAS
   ======================================== */
.tabla-tareas {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.tabla-tareas th {
  border-top: none;
  font-weight: 600;
  color: #495057;
  background: #f8f9fa !important;
  border-bottom: 2px solid #dee2e6;
  padding: 1rem 0.75rem;
  white-space: nowrap;
}

.tabla-tareas td {
  padding: 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tabla-tareas tbody tr {
  transition: var(--transition);
}

.tabla-tareas tbody tr:hover {
  background: rgba(0, 180, 166, 0.05);
  transform: translateX(2px);
}

/* Columnas sortables */
.tabla-tareas .sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: var(--transition);
}

.tabla-tareas .sortable:hover {
  background: #e9ecef !important;
  color: var(--primary-color);
}

.tabla-tareas .sortable i {
  margin-left: 0.5rem;
  transition: var(--transition);
}

.tabla-tareas .sortable:hover i {
  color: var(--primary-color);
}

/* Estados de filas */
.tabla-tareas .table-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border-left: 4px solid var(--danger-color);
}

.tabla-tareas .table-warning {
  background: rgba(255, 193, 7, 0.1) !important;
  border-left: 4px solid var(--warning-color);
}

.tabla-tareas .table-success {
  background: rgba(40, 167, 69, 0.1) !important;
  border-left: 4px solid var(--success-color);
}

/* ========================================
   CONTENIDO DE CELDAS
   ======================================== */
.task-info {
  display: flex;
  flex-direction: column;
}

.task-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.task-title {
  color: #2c3e50;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.fecha-info {
  min-width: 90px;
}

.fecha-info .fecha {
  font-weight: 500;
  color: #495057;
}

.fecha-info small {
  color: #6c757d;
  font-size: 0.8rem;
}

.provider-info {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.provider-info i {
  color: var(--primary-color);
}

/* ========================================
   PAGINACIÓN
   ======================================== */
.pagination {
  margin: 0;
}

.pagination .page-link {
  color: var(--primary-color);
  border: 1px solid #dee2e6;
  padding: 0.5rem 0.75rem;
  transition: var(--transition);
}

.pagination .page-link:hover {
  color: white;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 2px 8px rgba(0, 180, 166, 0.3);
}

.pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #fff;
  border-color: #dee2e6;
}

/* ========================================
   CONTROLES DE TABLA
   ======================================== */
.table-controls {
  display: flex;
  justify-content: between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--light-bg);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.showing-info {
  color: #6c757d;
  font-size: 0.9rem;
}

/* ========================================
   CHECKBOXES Y SELECCIÓN
   ======================================== */
.form-check-input {
  transition: var(--transition);
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 180, 166, 0.25);
}

/* Checkbox en header */
#selectAll {
  transform: scale(1.1);
}

/* ========================================
   BOTONES DE ACCIÓN EN TABLA
   ======================================== */
.tabla-tareas .btn-group .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 4px;
  transition: var(--transition);
}

.tabla-tareas .btn-outline-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  transform: scale(1.05);
}

.tabla-tareas .btn-outline-success:hover {
  background-color: var(--success-color);
  border-color: var(--success-color);
  transform: scale(1.05);
}

/* ========================================
   RESPONSIVE LISTADO
   ======================================== */
@media (max-width: 768px) {
  .listado-filters {
    padding: 1rem;
  }
  .listado-filters .row {
    --bs-gutter-x: 0.75rem;
  }
  .tabla-tareas {
    font-size: 0.8rem;
  }
  .tabla-tareas th,
  .tabla-tareas td {
    padding: 0.5rem 0.4rem;
  }
  .task-title {
    font-size: 0.85rem;
  }
  .acciones-masivas {
    margin: 0 -0.5rem 1rem;
  }
  .acciones-masivas > div {
    padding: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .acciones-masivas .btn-sm {
    flex: 1;
    min-width: 120px;
  }
}
@media (max-width: 576px) {
  .table-responsive {
    border-radius: 0;
  }
  .tabla-tareas th:not(:first-child):not(:nth-child(3)):not(:nth-child(6)),
  .tabla-tareas td:not(:first-child):not(:nth-child(3)):not(:nth-child(6)) {
    display: none;
  }
  .task-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .pagination .page-link {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
  .table-controls {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
}
/* ========================================
   ESTADOS ESPECÍFICOS DEL LISTADO
   ======================================== */
.listado-loading {
  padding: 3rem;
  text-align: center;
  color: #6c757d;
}

.listado-empty {
  text-align: center;
  padding: 3rem 2rem;
}

.listado-empty i {
  font-size: 4rem;
  opacity: 0.3;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

/* ========================================
   FILTROS AVANZADOS (OPCIONAL)
   ======================================== */
.filtros-avanzados {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  display: none;
}

.filtros-avanzados.show {
  display: block;
  animation: slideDown 0.3s ease;
}

.btn-filtros-avanzados {
  color: var(--primary-color);
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  text-decoration: none;
}

.btn-filtros-avanzados:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Seating plan editor */
/**
 * Plano de Mesas Profesional
 * Estilo inspirado en AllSeated y Social Tables
 * Version 3.0
 */
/* ==================== VARIABLES ==================== */
:root {
  /* Colores principales */
  --primary: #4F46E5;
  --primary-light: #6366F1;
  --primary-dark: #4338CA;
  --secondary: #06B6D4;
  --accent: #F59E0B;
  /* Estados */
  --success: #10B981;
  --success-light: #34D399;
  --warning: #F59E0B;
  --warning-light: #FBBF24;
  --danger: #EF4444;
  --danger-light: #F87171;
  --info: #3B82F6;
  /* Grises modernos */
  --gray-50: #FAFAF9;
  --gray-100: #F5F5F4;
  --gray-200: #E7E5E4;
  --gray-300: #D6D3D1;
  --gray-400: #A8A29E;
  --gray-500: #78716C;
  --gray-600: #57534E;
  --gray-700: #44403C;
  --gray-800: #292524;
  --gray-900: #1C1917;
  /* Sombras profesionales */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 12px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 16px 24px -4px rgba(0, 0, 0, 0.12), 0 8px 12px -4px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.16), 0 12px 24px -8px rgba(0, 0, 0, 0.1);
  /* Bordes */
  --border-color: var(--gray-200);
  --border-radius: 10px;
  --border-radius-sm: 6px;
  --border-radius-lg: 16px;
  /* Espaciado */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  /* Tipografía */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Transiciones */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== RESET Y BASE ==================== */
* {
  box-sizing: border-box;
}

.event-content .card {
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==================== LAYOUT PRINCIPAL ==================== */
.plano-container {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  height: calc(100vh - 180px);
  min-height: 600px;
  background: var(--gray-50);
  overflow: hidden;
  font-family: var(--font-sans);
}

.plano-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ==================== TOOLBAR SUPERIOR ==================== */
.toolbar-superior {
  background: white;
  border-bottom: 1px solid var(--border-color);
  padding: var(--spacing) var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  z-index: 100;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.toolbar-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: var(--spacing-xs);
  white-space: nowrap;
}

.btn-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-toolbar:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-toolbar.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.btn-toolbar.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.btn-toolbar.primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* ==================== PANEL INVITADOS ==================== */
.panel-invitados {
  background: white;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-invitados-search {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.search-wrapper {
  position: relative;
}

.search-input {
  width: 100%;
  padding: 10px 40px 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 14px;
  font-family: var(--font-sans);
  transition: var(--transition-fast);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.btn-clear-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gray-200);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: 14px;
  color: var(--gray-600);
}

.btn-clear-search:hover {
  background: var(--gray-300);
}

/* Lista de invitados */
.lista-invitados {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.lista-invitados::-webkit-scrollbar {
  width: 8px;
}

.lista-invitados::-webkit-scrollbar-track {
  background: var(--gray-100);
}

.lista-invitados::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 10px;
}

.lista-invitados::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* ==================== GRUPOS ==================== */
.grupo-container {
  margin-bottom: 12px;
}

.grupo-header {
  background: var(--gray-50);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.grupo-header:hover {
  background: white;
  border-color: var(--primary);
}

.grupo-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.grupo-icono {
  font-size: 16px;
  flex-shrink: 0;
}

.grupo-titulo {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grupo-count {
  font-size: 11px;
  color: var(--gray-600);
  flex-shrink: 0;
}

.btn-grupo-drag {
  padding: 6px 10px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  cursor: grab;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.btn-grupo-drag:hover {
  background: var(--primary-dark);
}

.btn-grupo-drag:active {
  cursor: grabbing;
}

.btn-grupo-toggle {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  color: var(--gray-600);
  font-size: 12px;
}

.btn-grupo-toggle:hover {
  background: var(--gray-200);
  border-radius: 4px;
}

.grupo-container.collapsed .btn-grupo-toggle {
  transform: rotate(-90deg);
}

.grupo-invitados {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.3s ease-out, margin-top 0.3s ease-out;
}

.grupo-container.collapsed .grupo-invitados {
  max-height: 0;
  margin-top: 0;
}

/* ==================== TARJETAS COMPACTAS ==================== */
.invitado-card-compact {
  background: white;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 8px;
  cursor: move;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 10px;
}

.invitado-card-compact:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.invitado-card-compact.dragging {
  opacity: 0.5;
}

.avatar-mini {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.info-mini {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nombre-mini {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badges-mini {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.badge-mini {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: var(--font-weight-semibold);
}

.badge-grupo {
  background: var(--gray-100);
  color: var(--gray-700);
}

.badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.badge-vip {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: white;
}

.badge-menu {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.acciones-mini {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-mini {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-mini:hover {
  transform: scale(1.1);
}

.btn-mesa {
  background: var(--primary);
  color: white;
}

.btn-mesa:hover {
  background: var(--primary-dark);
}

.btn-remove {
  background: var(--danger);
  color: white;
}

.btn-remove:hover {
  background: var(--danger-light);
}

.btn-asignar {
  background: var(--success);
  color: white;
}

.btn-asignar:hover {
  background: var(--success-light);
}

/* Footer del panel */
.panel-invitados-footer {
  padding: var(--spacing);
  border-top: 1px solid var(--border-color);
  background: var(--gray-50);
  flex-shrink: 0;
}

.btn-footer {
  width: 100%;
  padding: 10px;
  background: white;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-footer:hover {
  border-color: var(--gray-300);
  background: var(--gray-100);
  transform: translateY(-1px);
}

/* ==================== ÁREA DE PLANO ==================== */
#plano-wrapper {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #F8F9FA;
  background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

#plano {
  position: relative;
  width: 3000px;
  height: 2500px;
  transform-origin: 0 0;
}

/* ==================== MESAS ==================== */
.mesa {
  position: absolute !important;
  background: white;
  border: 3px solid var(--gray-700);
  padding: 16px;
  cursor: move;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
  z-index: 5;
}

.mesa:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-xl);
  z-index: 10;
}

.mesa-redonda {
  width: 260px;
  height: 260px;
  border-radius: 50%;
}

.mesa-rectangular_ambos,
.mesa-rectangular_frente,
.mesa-rectangular_abajo {
  width: 420px;
  height: 140px;
  border-radius: var(--border-radius-lg);
}

.mesa-presidencial_ambos,
.mesa-presidencial_frente,
.mesa-presidencial_abajo {
  width: 520px;
  height: 160px;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(145deg, #FFF9E6, #FFFFFF);
  border-color: #D4AF37;
}

.mesa-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mesa-nombre {
  font-weight: var(--font-weight-bold);
  color: var(--gray-800);
  margin-bottom: 8px;
  font-size: 16px;
}

.mesa-capacidad-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  margin-bottom: 8px;
}

.mesa-direccion {
  font-size: 10px;
  color: var(--primary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 8px;
}

.asientos-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.asiento {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--gray-600);
  background: white;
  cursor: pointer;
  transition: var(--transition);
}

.asiento:hover {
  border-color: var(--primary);
  transform: scale(1.15);
  z-index: 10;
}

.asiento.ocupado {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.asiento.con-alergia {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
  animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    opacity: 0.9;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}
.mesa-acciones {
  position: absolute;
  top: -40px;
  right: 0;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: var(--transition);
}

.mesa:hover .mesa-acciones {
  opacity: 1;
}

.btn-rotar-mesa,
.btn-duplicar-mesa,
.btn-eliminar-mesa {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.btn-rotar-mesa {
  background: var(--primary);
  color: white;
}

.btn-rotar-mesa:hover {
  background: var(--primary-dark);
  transform: scale(1.1);
}

.btn-duplicar-mesa {
  background: var(--secondary);
  color: white;
}

.btn-duplicar-mesa:hover {
  background: #0891b2;
  transform: scale(1.1);
}

.btn-eliminar-mesa {
  background: var(--danger);
  color: white;
}

.btn-eliminar-mesa:hover {
  background: #dc2626;
  transform: scale(1.1);
}

/* ==================== COORDENADAS ==================== */
.coordenadas-indicador {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  display: flex;
  gap: 16px;
  z-index: 100;
  backdrop-filter: blur(4px);
}

/* ==================== MODAL ==================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.modal-overlay .modal-content {
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-overlay .modal-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-overlay .modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--gray-900);
}

.modal-overlay .modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
}

/* Bootstrap: lg/xl salen desde la derecha; el resto al centro de la ventana */
body > .modal:not(#modalNuevaCita) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body > .modal:not(#modalNuevaCita) .modal-dialog:not(.modal-fullscreen):not(.modal-cita-dialog):not(.modal-lg):not(.modal-xl) {
  margin-left: auto;
  margin-right: auto;
}
body > .modal:not(#modalNuevaCita) .modal-dialog.modal-lg,
body > .modal:not(#modalNuevaCita) .modal-dialog.modal-xl {
  margin: 0 0 0 auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 100%;
}
body > .modal.fade:not(#modalNuevaCita) .modal-dialog.modal-lg,
body > .modal.fade:not(#modalNuevaCita) .modal-dialog.modal-xl {
  transform: translateX(110%) !important;
  transition: transform 0.32s ease-out;
}
body > .modal.show:not(#modalNuevaCita) .modal-dialog.modal-lg,
body > .modal.show:not(#modalNuevaCita) .modal-dialog.modal-xl {
  transform: translateX(0) !important;
}
body > .modal:not(#modalNuevaCita) .modal-dialog.modal-lg .modal-content,
body > .modal:not(#modalNuevaCita) .modal-dialog.modal-xl .modal-content {
  max-width: none;
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 16px 0 0 16px;
}

/* ==================== LOADING ==================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.loading-content {
  background: white;
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-lg);
  text-align: center;
  box-shadow: var(--shadow-xl);
  min-width: 200px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ==================== UTILIDADES ==================== */
.drop-target {
  outline: 3px solid var(--primary) !important;
  outline-offset: 3px;
}

.dragging {
  opacity: 0.6 !important;
}

.plano-vacio {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--gray-500);
  font-size: 18px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1400px) {
  .plano-container {
    grid-template-columns: 320px 1fr;
  }
}
@media (max-width: 768px) {
  .plano-container {
    grid-template-columns: 1fr;
  }
  .panel-invitados {
    display: none;
  }
}
/* Scoped styles for home pages
   Palette: sand · nude · gold · sage (eventlink.es)
*/
html {
  scroll-behavior: smooth;
}

body.el-home {
  --el-taupe: #C4A882;
  --el-taupe-dark: #A88B68;
  --el-sage: #7A9B8A;
  --el-sage-dark: #5D8B72;
  --el-deep-brown: #2D2118;
  --el-muted: #7A6B5D;
  --el-cream: #F5F0EB;
  --el-warm-white: #FAF7F4;
  --el-sand: #E8DDD4;
  --el-border: #DDD3C8;
  --el-coral: #E07A5F;
  --shadow-sm: 0 1px 2px rgba(45, 33, 24, 0.05);
  --shadow-taupe: 0 2px 12px rgba(196, 168, 130, 0.30);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--el-deep-brown);
  background: var(--el-warm-white);
}
body.el-home .el-dev-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 10px 16px;
  background: var(--el-deep-brown);
  color: #E8DDD4;
  font-size: 0.875rem;
  text-align: center;
}
body.el-home .el-dev-bar span {
  font-weight: 700;
}
body.el-home .el-dev-bar em {
  font-style: normal;
  color: #C4B5A5;
}
body.el-home .el-dev-bar a {
  color: #fff !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
body.el-home .el-dev-bar a:hover {
  opacity: 0.88;
}
body.el-home .text-primary {
  color: var(--el-taupe-dark);
}
body.el-home .text-sage {
  color: var(--el-sage-dark);
}
body.el-home .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--el-taupe);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
}
body.el-home .btn-primary:hover:not(:disabled) {
  background-color: var(--el-taupe-dark);
  color: #ffffff;
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: var(--shadow-taupe);
}
body.el-home .btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
body.el-home .btn-outline-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: var(--el-taupe-dark);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  border: 1px solid rgba(196, 168, 130, 0.45);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}
body.el-home .btn-outline-primary:hover {
  background-color: rgba(196, 168, 130, 0.08);
  color: var(--el-deep-brown);
  text-decoration: none;
  transform: translateY(-1px);
}
body.el-home .footer-link {
  color: #E8DDD4 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
body.el-home .footer-link:hover,
body.el-home .footer-link:focus {
  color: #ffffff !important;
}
body.el-home footer a.text-white {
  color: #ffffff !important;
}
body.el-home footer a.text-white:hover,
body.el-home footer a.text-white:focus {
  color: #E8DDD4 !important;
}
body.el-home {
  /* Legal / contacto pages */
}
body.el-home .el-legal-hero {
  padding: clamp(56px, 10vw, 96px) 0 40px;
  background: radial-gradient(circle at top left, rgba(196, 168, 130, 0.12), transparent 40%), linear-gradient(180deg, #FFFFFF 0%, var(--el-cream) 100%);
}
body.el-home .el-legal-card {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 18px 40px rgba(45, 33, 24, 0.06);
}
body.el-home .legal-content h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 600;
  color: var(--el-deep-brown);
  letter-spacing: -0.02em;
  margin: 2rem 0 0.85rem;
}
body.el-home .legal-content h2:first-child {
  margin-top: 0;
}
body.el-home .legal-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--el-deep-brown);
  margin: 1.4rem 0 0.55rem;
}
body.el-home .legal-content p,
body.el-home .legal-content li {
  color: var(--el-muted);
  line-height: 1.75;
  font-size: 1rem;
}
body.el-home .legal-content p {
  margin: 0 0 1rem;
}
body.el-home .legal-content ul {
  margin: 0.75rem 0 1.25rem;
  padding-left: 1.25rem;
  list-style: disc;
}
body.el-home .legal-content strong {
  color: var(--el-deep-brown);
  font-weight: 700;
}
body.el-home .legal-content a {
  color: var(--el-taupe-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
body.el-home .legal-content a:hover,
body.el-home .legal-content a:focus {
  color: var(--el-deep-brown) !important;
}
body.el-home {
  /* Lead / solicitar acceso */
}
body.el-home .el-lead-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--el-deep-brown);
}
body.el-home .el-lead-form label span {
  font-weight: 500;
  color: var(--el-muted);
}
body.el-home .el-lead-form input,
body.el-home .el-lead-form select,
body.el-home .el-lead-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  background: #fff;
  color: var(--el-deep-brown);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.el-home .el-lead-form input:focus,
body.el-home .el-lead-form select:focus,
body.el-home .el-lead-form textarea:focus {
  outline: none;
  border-color: rgba(196, 168, 130, 0.55);
  box-shadow: 0 0 0 3px rgba(196, 168, 130, 0.12);
}
body.el-home .el-lead-form textarea {
  resize: vertical;
  min-height: 110px;
}
body.el-home .el-lead-error {
  padding: 12px 14px;
  border-radius: 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
  font-size: 0.9rem;
}
body.el-home .el-lead-ok {
  text-align: center;
  padding: 12px 0;
}
body.el-home .link-eventlink {
  color: var(--el-taupe-dark) !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
body.el-home .link-eventlink:hover {
  color: var(--el-deep-brown) !important;
}
body.el-home .card-hover {
  transition: all 0.25s ease;
}
body.el-home .card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 35px rgba(45, 33, 24, 0.1);
}
body.el-home .hero-gradient {
  background: radial-gradient(circle at top left, rgba(196, 168, 130, 0.24), transparent 35%), radial-gradient(circle at bottom right, rgba(122, 155, 138, 0.20), transparent 34%), linear-gradient(135deg, #FAF7F4 0%, #F5F0EB 100%);
}
body.el-home .glass-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(221, 211, 200, 0.85);
  box-shadow: 0 24px 60px rgba(45, 33, 24, 0.1);
}
body.el-home .feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(196, 168, 130, 0.12);
  color: var(--el-taupe-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.el-home .feature-icon-sage {
  background: rgba(122, 155, 138, 0.14);
  color: var(--el-sage-dark);
}
body.el-home .badge-soft {
  background: rgba(196, 168, 130, 0.1);
  border: 1px solid rgba(196, 168, 130, 0.28);
  color: var(--el-taupe-dark);
}
body.el-home .badge-sage-soft {
  background: rgba(122, 155, 138, 0.12);
  border: 1px solid rgba(122, 155, 138, 0.3);
  color: var(--el-sage-dark);
}
body.el-home h1, body.el-home h2, body.el-home h3 {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
}
body.el-home #comunicaciones h2 {
  color: #F7F1EA !important;
  border-bottom: none;
  display: block;
  padding-bottom: 0;
}
body.el-home .el-audience {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.el-home .el-audience:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(45, 33, 24, 0.1);
}
body.el-home .el-audience-media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--el-sand);
}
body.el-home .el-audience-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
body.el-home .el-audience:hover .el-audience-media img {
  transform: scale(1.04);
}
body.el-home {
  /* Positioning phrase */
}
body.el-home .el-positioning {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--el-deep-brown);
  letter-spacing: -0.02em;
}
body.el-home {
  /* Emotional benefit cards */
}
body.el-home .el-emotion {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
body.el-home .el-emotion-num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--el-taupe);
  margin-bottom: 12px;
}
body.el-home .el-emotion h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--el-deep-brown);
  margin-bottom: 10px;
  line-height: 1.25;
}
body.el-home .el-emotion p {
  color: var(--el-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
body.el-home {
  /* Product mockup */
}
body.el-home .el-product-mock {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(45, 33, 24, 0.12);
  overflow: hidden;
}
body.el-home .el-product-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  background: #F7F9FA;
  border-bottom: 1px solid var(--el-border);
}
body.el-home .el-product-chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D5DCE3;
}
body.el-home .el-product-chrome span:nth-child(1) {
  background: #F2A3A3;
}
body.el-home .el-product-chrome span:nth-child(2) {
  background: #E6C97A;
}
body.el-home .el-product-chrome span:nth-child(3) {
  background: #8FCBB0;
}
body.el-home .el-product-chrome p {
  margin: 0 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--el-muted);
}
body.el-home .el-product-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 10px 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--el-border);
  background: #fff;
}
body.el-home .el-product-tabs button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--el-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
body.el-home .el-product-tabs button.is-active {
  color: var(--el-taupe-dark);
  border-bottom-color: var(--el-taupe);
}
body.el-home .el-product-panels {
  padding: 16px;
  min-height: 280px;
  background: #fff;
}
body.el-home .el-product-panel {
  display: none;
}
body.el-home .el-product-panel.is-active {
  display: block;
  animation: elFade 0.28s ease;
}
body.el-home .el-product-shots {
  background: #E8DDD4;
  min-height: 220px;
}
body.el-home .el-product-shot {
  display: none;
  margin: 0;
}
body.el-home .el-product-shot.is-active {
  display: block;
  animation: elFade 0.28s ease;
}
body.el-home .el-product-shot img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
body.el-home {
  /* DNA / why different */
}
body.el-home .el-dna {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
body.el-home .el-dna strong {
  display: block;
  font-size: 1.15rem;
  color: var(--el-deep-brown);
  margin-bottom: 8px;
  font-family: "Inter", system-ui, sans-serif;
}
body.el-home .el-dna p {
  margin: 0;
  color: var(--el-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
body.el-home .el-related {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 20px;
  padding: 28px 24px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
body.el-home .el-related-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--el-taupe-dark);
  margin: 0 0 10px;
}
body.el-home .el-related-copy {
  max-width: 42rem;
  margin: 0 auto 22px;
  color: var(--el-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}
body.el-home .el-related-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
body.el-home .el-related-pieces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
body.el-home .el-related-pieces span,
body.el-home .el-related-event {
  min-width: 118px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--el-border);
  background: var(--el-cream);
  font-weight: 700;
  color: var(--el-deep-brown);
  font-size: 0.92rem;
}
body.el-home .el-related-event {
  min-width: 160px;
  background: var(--el-taupe);
  border-color: var(--el-taupe);
  color: #fff;
  font-size: 1rem;
}
body.el-home .el-related-link {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--el-taupe-dark);
}
body.el-home .el-related-chain {
  display: none;
}
@keyframes elFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
body.el-home .el-mock-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
body.el-home .el-mock-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--el-taupe);
  margin: 0 0 4px;
}
body.el-home .el-product-panel h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--el-deep-brown);
  font-family: "Inter", system-ui, sans-serif;
}
body.el-home .el-mock-meta {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--el-muted);
}
body.el-home .el-mock-pill {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  color: #9A3412;
  background: #FFEDD5;
  border-radius: 999px;
  padding: 5px 10px;
}
body.el-home .el-mock-checklist {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
body.el-home .el-mock-checklist > div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--el-border);
  font-size: 0.86rem;
  color: var(--el-deep-brown);
  background: #FAF7F4;
}
body.el-home .el-mock-checklist > div.is-done {
  color: var(--el-taupe-dark);
  background: rgba(196, 168, 130, 0.06);
  border-color: rgba(196, 168, 130, 0.2);
}
body.el-home .el-mock-note {
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--el-cream);
  border: 1px solid var(--el-border);
  font-size: 0.84rem;
  color: var(--el-muted);
  line-height: 1.45;
}
body.el-home .el-mock-note strong {
  display: block;
  color: var(--el-deep-brown);
  margin-bottom: 4px;
  font-size: 0.78rem;
}
body.el-home .el-mock-chat {
  display: grid;
  gap: 10px;
}
body.el-home .el-mock-bubble {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--el-deep-brown);
}
body.el-home .el-mock-bubble span {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  margin-bottom: 3px;
  color: var(--el-muted);
}
body.el-home .el-mock-bubble.them {
  background: #F5F0EB;
  border: 1px solid var(--el-border);
  justify-self: start;
}
body.el-home .el-mock-bubble.me {
  background: rgba(196, 168, 130, 0.1);
  border: 1px solid rgba(196, 168, 130, 0.22);
  justify-self: end;
}
body.el-home .el-mock-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  margin-bottom: 8px;
  background: #FAF7F4;
}
body.el-home .el-mock-doc i {
  color: var(--el-taupe);
  font-size: 1.1rem;
}
body.el-home .el-mock-doc strong {
  display: block;
  font-size: 0.88rem;
  color: var(--el-deep-brown);
}
body.el-home .el-mock-doc span {
  font-size: 0.75rem;
  color: var(--el-muted);
}
body.el-home .el-mock-doc em {
  margin-left: auto;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--el-taupe-dark);
  background: rgba(196, 168, 130, 0.1);
  padding: 4px 8px;
  border-radius: 999px;
}
body.el-home .el-mock-budget-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
body.el-home .el-mock-budget-head strong {
  font-size: 1.35rem;
  color: var(--el-taupe-dark);
}
body.el-home .el-mock-budget-line {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--el-border);
  font-size: 0.88rem;
  color: var(--el-deep-brown);
}
body.el-home .el-mock-budget-line.is-soft {
  color: var(--el-muted);
  border-bottom: 0;
}
body.el-home .el-mock-provider {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
body.el-home .el-mock-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: var(--el-taupe);
}
body.el-home {
  /* Collaboration diagram */
}
body.el-home .el-collab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
body.el-home .el-collab-node {
  min-width: 140px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--el-border);
  background: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--el-deep-brown);
  box-shadow: var(--shadow-sm);
}
body.el-home .el-collab-hub {
  min-width: 160px;
  padding: 16px 22px;
  border-radius: 14px;
  background: var(--el-taupe);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: var(--shadow-taupe);
}
body.el-home .el-collab-arrow {
  color: var(--el-taupe);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
body.el-home .el-collab-branches {
  display: none;
}
body.el-home .el-collab-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 560px;
}
body.el-home .el-collab-row .el-collab-node {
  text-align: center;
  min-width: 0;
}
body.el-home {
  /* Journey — editorial how-it-works */
}
body.el-home .el-journey {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
body.el-home .el-journey-label {
  margin: 0 0 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--el-taupe-dark);
}
body.el-home .el-journey-copy h2 {
  margin: 0 0 40px;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.08;
  color: var(--el-deep-brown);
}
body.el-home .el-journey-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
body.el-home .el-journey-steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--el-border);
}
body.el-home .el-journey-steps li:last-child {
  border-bottom: 1px solid var(--el-border);
}
body.el-home .el-journey-steps span {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--el-taupe);
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding-top: 2px;
}
body.el-home .el-journey-steps strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--el-deep-brown);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
body.el-home .el-journey-steps p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--el-muted);
}
body.el-home .el-journey-visual {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--el-border);
  box-shadow: 0 24px 60px rgba(45, 33, 24, 0.1);
  background: #fff;
}
body.el-home .el-journey-visual img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  body.el-home .el-journey {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  body.el-home .el-journey-copy h2 {
    margin-bottom: 28px;
  }
  body.el-home .el-journey-visual {
    order: -1;
  }
}
body.el-home {
  /* Bullet list */
}
body.el-home .el-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
body.el-home .el-bullet-list li {
  position: relative;
  padding-left: 28px;
  color: var(--el-deep-brown);
  font-size: 0.95rem;
  line-height: 1.45;
}
body.el-home .el-bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--el-taupe);
}
body.el-home {
  /* Formatted budget */
}
body.el-home .el-budget {
  padding: 18px;
  background: #fff;
}
body.el-home .el-budget-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
body.el-home .el-budget-head strong {
  display: block;
  font-size: 1.05rem;
  color: var(--el-deep-brown);
}
body.el-home .el-budget-total {
  text-align: right;
}
body.el-home .el-budget-total span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--el-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.el-home .el-budget-total b {
  font-size: 1.45rem;
  color: var(--el-taupe-dark);
}
body.el-home .el-budget-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
body.el-home .el-budget-table th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--el-muted);
  padding: 8px 6px;
  border-bottom: 1px solid var(--el-border);
}
body.el-home .el-budget-table td {
  padding: 11px 6px;
  border-bottom: 1px solid var(--el-border);
  color: var(--el-deep-brown);
  vertical-align: middle;
}
body.el-home .el-budget-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
body.el-home .el-budget-table tr.is-sum td {
  border-bottom: 0;
  color: var(--el-muted);
  font-weight: 600;
}
body.el-home .el-budget-table em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
body.el-home .el-budget-table em.ok {
  background: rgba(196, 168, 130, 0.12);
  color: var(--el-taupe-dark);
}
body.el-home .el-budget-table em.warn {
  background: #FFEDD5;
  color: #9A3412;
}
body.el-home .el-budget-table em.soft {
  background: #F5F0EB;
  color: var(--el-muted);
}
body.el-home .el-budget-foot {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--el-muted);
}
body.el-home {
  /* Provider section */
}
body.el-home .el-provider-card {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(45, 33, 24, 0.08);
}
body.el-home .el-provider-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
body.el-home .el-provider-card-top strong {
  display: block;
  color: var(--el-deep-brown);
  font-size: 0.98rem;
}
body.el-home .el-provider-card-top p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--el-muted);
}
body.el-home .el-provider-card-top em.ok {
  margin-left: auto;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--el-taupe-dark);
  background: rgba(196, 168, 130, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
}
body.el-home .el-provider-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
body.el-home .el-provider-stats div {
  background: var(--el-cream);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}
body.el-home .el-provider-stats b {
  display: block;
  font-size: 1.2rem;
  color: var(--el-deep-brown);
}
body.el-home .el-provider-stats span {
  font-size: 0.72rem;
  color: var(--el-muted);
  font-weight: 600;
}
body.el-home .el-provider-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
body.el-home .el-provider-list > div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--el-border);
  font-size: 0.86rem;
  color: var(--el-deep-brown);
  background: #FAF7F4;
}
body.el-home .el-provider-list > div.is-done {
  color: var(--el-taupe-dark);
  background: rgba(196, 168, 130, 0.06);
  border-color: rgba(196, 168, 130, 0.2);
}
body.el-home .el-provider-shot {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--el-border);
  display: block;
}
body.el-home {
  /* June-style catalog extraction demo */
}
body.el-home .el-june {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(45, 33, 24, 0.08);
}
body.el-home .el-june-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--el-border);
}
body.el-home .el-june-file {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.el-home .el-june-file i {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(196, 168, 130, 0.1);
  color: var(--el-taupe-dark);
}
body.el-home .el-june-file strong {
  display: block;
  color: var(--el-deep-brown);
  font-size: 0.92rem;
}
body.el-home .el-june-file span {
  font-size: 0.78rem;
  color: var(--el-muted);
}
body.el-home .el-june-grid {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr;
  gap: 14px;
  align-items: stretch;
}
body.el-home .el-june-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--el-muted);
  margin: 0 0 10px;
}
body.el-home .el-june-source,
body.el-home .el-june-result {
  background: var(--el-cream);
  border: 1px solid var(--el-border);
  border-radius: 16px;
  padding: 14px;
}
body.el-home .el-june-pdf {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  padding: 16px;
  min-height: 260px;
}
body.el-home .el-june-pdf-line {
  height: 8px;
  border-radius: 999px;
  background: #DDD3C8;
  margin-bottom: 10px;
}
body.el-home .el-june-pdf-line.is-short {
  width: 42%;
}
body.el-home .el-june-pdf-line.is-mid {
  width: 68%;
}
body.el-home .el-june-pdf-block {
  font-weight: 800;
  color: var(--el-deep-brown);
  margin: 12px 0 14px;
  font-size: 0.95rem;
}
body.el-home .el-june-pdf-chip {
  display: inline-block;
  margin: 0 6px 8px 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(196, 168, 130, 0.08);
  color: var(--el-taupe-dark);
  font-size: 0.75rem;
  font-weight: 700;
}
body.el-home .el-june-status {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 110px;
  text-align: center;
  color: var(--el-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
body.el-home .el-june-status i {
  color: var(--el-taupe);
  font-size: 1.1rem;
}
body.el-home .el-june-pulse {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #E8DDD4;
}
body.el-home .el-june-pulse.is-live {
  background: var(--el-taupe);
  box-shadow: 0 0 0 0 rgba(196, 168, 130, 0.45);
  animation: elPulse 1.1s infinite;
}
@keyframes elPulse {
  70% {
    box-shadow: 0 0 0 12px rgba(196, 168, 130, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(196, 168, 130, 0);
  }
}
body.el-home .el-june-cards {
  display: grid;
  gap: 10px;
}
body.el-home .el-june-card {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 14px;
  padding: 12px 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
body.el-home .el-june-card.is-visible {
  opacity: 1;
  transform: none;
}
body.el-home .el-june-card span {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--el-taupe);
  margin-bottom: 4px;
}
body.el-home .el-june-card strong {
  display: block;
  color: var(--el-deep-brown);
  font-size: 0.95rem;
}
body.el-home .el-june-card p {
  margin: 4px 0 6px;
  font-size: 0.8rem;
  color: var(--el-muted);
}
body.el-home .el-june-card b {
  font-size: 0.88rem;
  color: var(--el-taupe-dark);
}
body.el-home .el-june-card.is-link {
  background: rgba(196, 168, 130, 0.08);
  border-color: rgba(196, 168, 130, 0.28);
}
body.el-home .el-june.is-running .el-june-source {
  box-shadow: inset 0 0 0 2px rgba(196, 168, 130, 0.18);
}
@media (max-width: 900px) {
  body.el-home .el-june-grid {
    grid-template-columns: 1fr;
  }
  body.el-home .el-june-status {
    flex-direction: row;
    justify-content: center;
    min-width: 0;
  }
}
@media (max-width: 640px) {
  body.el-home .el-collab-row {
    grid-template-columns: 1fr;
  }
  body.el-home .el-product-tabs button {
    padding: 10px 10px;
    font-size: 0.72rem;
  }
  body.el-home .el-budget-table th:nth-child(2),
  body.el-home .el-budget-table td:nth-child(2) {
    display: none;
  }
}
body.el-home a:focus-visible {
  outline: 2px solid rgba(196, 168, 130, 0.5) !important;
}
body.el-home *:focus,
body.el-home *:focus-visible {
  outline-color: rgba(196, 168, 130, 0.6) !important;
}
body.el-home .form-control:focus,
body.el-home .form-select:focus,
body.el-home .form-check-input:focus,
body.el-home input:focus,
body.el-home select:focus,
body.el-home textarea:focus,
body.el-home .input-field:focus,
body.el-home .form-input:focus,
body.el-home .el-lead-form input:focus,
body.el-home .el-lead-form select:focus,
body.el-home .el-lead-form textarea:focus {
  border-color: var(--el-taupe) !important;
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.22) !important;
  outline: none !important;
}
body.el-home .btn:focus,
body.el-home .btn:focus-visible,
body.el-home .btn:active:focus,
body.el-home .btn-primary:focus,
body.el-home .btn-primary:focus-visible,
body.el-home .btn-primary:active,
body.el-home .login-submit:focus,
body.el-home .login-submit:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.28) !important;
  outline: none !important;
}
body.el-home .btn-primary,
body.el-home .login-submit,
body.el-home .register-submit {
  background-color: var(--el-taupe) !important;
  border-color: var(--el-taupe) !important;
  color: #fff !important;
}
body.el-home .btn-primary:hover:not(:disabled),
body.el-home .login-submit:hover:not(:disabled),
body.el-home .register-submit:hover:not(:disabled) {
  background-color: var(--el-taupe-dark) !important;
  border-color: var(--el-taupe-dark) !important;
  color: #fff !important;
}
body.el-home .btn-outline-primary {
  color: var(--el-taupe-dark) !important;
  border-color: rgba(196, 168, 130, 0.55) !important;
  background-color: #fff !important;
}
body.el-home .btn-outline-primary:hover {
  background-color: rgba(196, 168, 130, 0.12) !important;
  color: var(--el-deep-brown) !important;
}
body.el-home .login-page {
  background: radial-gradient(circle at top left, rgba(196, 168, 130, 0.22), transparent 35%), radial-gradient(circle at bottom right, rgba(122, 155, 138, 0.18), transparent 34%), linear-gradient(135deg, var(--el-warm-white) 0%, var(--el-cream) 100%);
}
body.el-home .login-badge {
  background: rgba(196, 168, 130, 0.14) !important;
  border-color: rgba(196, 168, 130, 0.35) !important;
  color: var(--el-taupe-dark) !important;
}
body.el-home .login-submit {
  border-radius: 999px !important;
}
body.el-home input[type=checkbox],
body.el-home input[type=radio] {
  accent-color: var(--el-taupe);
}

/* Scoped styles for private access public pages */
body.el-public-access {
  --el-taupe: #C4A882;
  --el-taupe-dark: #A88B68;
  --el-sage: #7A9B8A;
  --el-sage-dark: #5D8B72;
  --el-deep-brown: #1A1F26;
  --el-muted: #5C6570;
  --el-warm-white: #FFFFFF;
  --el-cream: #F5F0EB;
  --el-border: #E2E6EB;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--el-deep-brown);
  background: radial-gradient(circle at top left, rgba(196, 168, 130, 0.14), transparent 32%), linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%);
  min-height: 100%;
}
body.el-public-access .el-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 230, 235, 0.95);
  box-shadow: 0 18px 45px rgba(26, 31, 38, 0.08);
  border-radius: 20px;
}
body.el-public-access .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--el-taupe);
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
body.el-public-access .btn-primary:hover:not(:disabled) {
  background-color: var(--el-taupe-dark);
  transform: translateY(-1px);
}
body.el-public-access .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
body.el-public-access .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #fff;
  color: var(--el-deep-brown);
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  border: 1px solid var(--el-border);
  cursor: pointer;
  transition: all 0.2s ease;
}
body.el-public-access .btn-outline:hover {
  background-color: #F4F6F8;
}

body.el-erp {
  --teal-primary: #00B4A6;
  --teal-dark: #008B7F;
  --teal-light: #E6F7F5;
  --gold-accent: #FFB800;
  --ink: #172131;
  --text-dark: #2C3E50;
  --text-gray: #64748B;
  --muted: #94A3B8;
  --bg: #F8FAFC;
  --panel: #FFFFFF;
  --border: #E5E7EB;
  --shadow: 0 8px 22px rgba(15, 23, 42, .06);
  --radius: 16px;
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 42%, var(--teal-light) 100%) !important;
  color: var(--ink) !important;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
body.el-erp *,
body.el-erp *::before,
body.el-erp *::after {
  box-sizing: border-box;
}
body.el-erp h1,
body.el-erp h2,
body.el-erp h3,
body.el-erp h4,
body.el-erp h5,
body.el-erp h6 {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
  color: var(--ink);
  font-weight: 700;
}
body.el-erp a {
  color: inherit;
}
body.el-erp .erp-shell {
  min-height: 100vh;
  display: flex;
}
body.el-erp .erp-sidebar {
  width: 260px;
  min-height: 100vh;
  position: fixed;
  inset: 0 auto 0 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
}
body.el-erp .erp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 8px;
  flex-shrink: 0;
}
body.el-erp .erp-brand-mark {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: 0 12px 22px rgba(23, 33, 49, 0.18);
}
body.el-erp .erp-brand strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.1;
}
body.el-erp .erp-brand span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body.el-erp .erp-brand span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold-accent);
}
body.el-erp .erp-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 180, 166, 0.28) transparent;
}
body.el-erp .erp-nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
body.el-erp .erp-nav-label {
  display: block;
  padding: 4px 10px 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.el-erp .erp-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 10px;
  color: #475569;
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
  transition: background 0.16s ease, color 0.16s ease;
}
body.el-erp .erp-nav a:hover {
  background: var(--teal-light);
  color: var(--teal-dark);
}
body.el-erp .erp-nav a.is-active {
  background: var(--teal-light);
  color: var(--teal-dark);
  box-shadow: inset 0 0 0 1px rgba(0, 180, 166, 0.16);
}
body.el-erp .erp-nav a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 2px solid rgba(0, 180, 166, 0.28);
  flex-shrink: 0;
}
body.el-erp .erp-nav a.is-active::before {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}
body.el-erp .erp-sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}
body.el-erp .erp-user-mini {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 12px;
}
body.el-erp .erp-user-mini strong,
body.el-erp .erp-user-mini span {
  display: block;
}
body.el-erp .erp-user-mini strong {
  font-size: 13px;
  color: var(--ink);
}
body.el-erp .erp-user-mini span {
  font-size: 12px;
  color: var(--text-gray);
  margin-top: 3px;
}
body.el-erp .erp-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  text-decoration: none;
  font-weight: 700;
  transition: background 0.16s ease, color 0.16s ease;
}
body.el-erp .erp-logout:hover {
  background: var(--teal-light);
  color: var(--teal-dark);
  border-color: rgba(0, 180, 166, 0.22);
}
body.el-erp .erp-main {
  flex: 1;
  min-width: 0;
  margin-left: 260px;
  padding: 22px 26px 32px;
}
body.el-erp .erp-page-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 58%, var(--teal-light) 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
body.el-erp .erp-page-header > * {
  position: relative;
  z-index: 1;
}
body.el-erp .erp-page-header::after {
  content: "";
  position: absolute;
  right: -36px;
  top: -40px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 166, 0.22), rgba(255, 184, 0, 0.12) 58%, transparent 72%);
  pointer-events: none;
}
body.el-erp .erp-page-header.compact {
  padding: 12px 14px;
  margin-bottom: 12px;
}
body.el-erp .erp-page-header h1 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.04em;
}
body.el-erp .erp-page-header p {
  margin: 0;
  color: var(--text-gray);
  font-size: 13px;
  line-height: 1.45;
  max-width: 62ch;
}
body.el-erp .erp-page-header .erp-actions {
  margin-top: 0;
  flex-shrink: 0;
}
body.el-erp .erp-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: -0.02em;
}
body.el-erp .erp-section-title h2 {
  margin: 0;
  font-size: 15px;
}
body.el-erp .erp-grid-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 10px;
}
body.el-erp .erp-kpi-card,
body.el-erp .erp-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.045);
}
body.el-erp .erp-kpi-card {
  padding: 14px;
  transition: 0.18s ease;
}
body.el-erp a.erp-kpi-card {
  text-decoration: none;
  color: inherit;
  display: block;
}
body.el-erp .erp-kpi-card:hover {
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}
body.el-erp .erp-kpi-card.is-highlight,
body.el-erp .erp-kpi-card.is-active {
  border-color: rgba(0, 180, 166, 0.35);
  background: #F0FDFA;
}
body.el-erp .erp-table tr.is-registrado td {
  background: #F0FDFA;
}
body.el-erp .erp-table tr.is-registrado:hover td {
  background: #CCFBF1;
}
body.el-erp .erp-table tr.is-sin-cuenta td {
  background: #FFFDF8;
}
body.el-erp .erp-table tr.is-sin-cuenta:hover td {
  background: #FFF7DD;
}
body.el-erp .erp-actions form {
  display: inline;
  margin: 0;
}
body.el-erp .erp-kpi-label,
body.el-erp .erp-kpi-card span {
  display: block;
  color: var(--text-gray);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.el-erp .erp-kpi-value,
body.el-erp .erp-kpi-card strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.04em;
}
body.el-erp .erp-kpi-card small {
  color: var(--text-gray);
}
body.el-erp .erp-card {
  padding: 16px;
}
body.el-erp .erp-card h2,
body.el-erp .erp-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.025em;
}
body.el-erp .erp-card p {
  color: var(--text-gray);
  line-height: 1.45;
}
body.el-erp .erp-actions,
body.el-erp .erp-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
body.el-erp .erp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  border-radius: 10px;
  padding: 8px 14px;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  transition: 0.16s ease;
}
body.el-erp .erp-btn:hover {
  transform: translateY(-1px);
}
body.el-erp .erp-btn-primary {
  background: var(--teal-primary);
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 180, 166, 0.22);
}
body.el-erp .erp-btn-primary:hover {
  background: var(--teal-dark);
}
body.el-erp .erp-btn-dark {
  background: var(--ink);
  color: #fff;
}
body.el-erp .erp-btn-danger {
  background: #BE123C;
  color: #fff;
}
body.el-erp .erp-btn-light {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
}
body.el-erp .erp-btn-gold {
  background: var(--gold-accent);
  color: #1F2937;
}
body.el-erp .erp-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
body.el-erp .erp-list-clean {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.el-erp .erp-list-clean li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-gray);
}
body.el-erp .erp-list-clean li:last-child {
  border-bottom: 0;
}
body.el-erp .erp-list-clean strong {
  color: var(--ink);
}
body.el-erp .erp-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
}
body.el-erp .erp-filters .erp-btn {
  width: auto;
  justify-self: start;
}
body.el-erp .erp-alta-filter {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.el-erp .erp-alta-filter button,
body.el-erp .erp-alta-filter a {
  min-height: 32px;
  border: 1px solid var(--border);
  background: #fff;
  color: #475569;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
body.el-erp .erp-alta-filter button:hover,
body.el-erp .erp-alta-filter button.is-active,
body.el-erp .erp-alta-filter a:hover,
body.el-erp .erp-alta-filter a.is-active {
  background: var(--teal-light);
  color: var(--teal-dark);
  border-color: rgba(0, 180, 166, 0.22);
}
body.el-erp input, body.el-erp select, body.el-erp textarea,
body.el-erp .erp-login-card input,
body.el-erp .erp-form input,
body.el-erp .erp-form select,
body.el-erp .erp-form textarea,
body.el-erp .erp-filters input,
body.el-erp .erp-filters select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  outline: none;
}
body.el-erp input[type=checkbox] {
  width: auto;
  margin-right: 8px;
  accent-color: var(--teal-primary);
}
body.el-erp input:focus, body.el-erp select:focus, body.el-erp textarea:focus {
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 4px rgba(0, 180, 166, 0.12);
}
body.el-erp .erp-table-wrap {
  overflow-x: auto;
}
body.el-erp .erp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
body.el-erp .erp-table th {
  text-align: left;
  color: var(--text-gray);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  padding: 9px 10px;
}
body.el-erp .erp-table td {
  border-bottom: 1px solid var(--border);
  padding: 10px 10px;
  vertical-align: top;
}
body.el-erp .erp-table tr:hover td {
  background: #FAFCFC;
}
body.el-erp .erp-table small {
  color: var(--text-gray);
}
body.el-erp .erp-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: #F8FAFC;
  border: 1px solid var(--border);
  color: var(--text-gray);
  font-size: 12px;
  font-weight: 800;
}
body.el-erp .erp-badge-ok {
  background: var(--teal-light);
  color: var(--teal-dark);
  border-color: rgba(0, 180, 166, 0.18);
}
body.el-erp .erp-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
body.el-erp .erp-subnav a {
  text-decoration: none;
  border: 1px solid var(--border);
  background: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: #475569;
}
body.el-erp .erp-subnav a:hover,
body.el-erp .erp-subnav a.is-active {
  background: var(--teal-light);
  color: var(--teal-dark);
  border-color: rgba(0, 180, 166, 0.22);
}
body.el-erp .erp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
body.el-erp .erp-card > .erp-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.el-erp .erp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body.el-erp .erp-card-head p {
  margin: 4px 0 0;
}
body.el-erp .erp-card:has(> .erp-table:first-child) {
  overflow-x: auto;
  padding: 8px 0 0;
}
body.el-erp .erp-card:has(> .erp-table:first-child) .erp-table th:first-child,
body.el-erp .erp-card:has(> .erp-table:first-child) .erp-table td:first-child {
  padding-left: 16px;
}
body.el-erp .erp-card:has(> .erp-table:first-child) .erp-table th:last-child,
body.el-erp .erp-card:has(> .erp-table:first-child) .erp-table td:last-child {
  padding-right: 16px;
}
body.el-erp .erp-table .erp-btn {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
}
body.el-erp code {
  font-size: 0.92em;
  background: #F1F5F9;
  padding: 1px 5px;
  border-radius: 6px;
}
body.el-erp .erp-table-compact th, body.el-erp .erp-table-compact td {
  padding: 8px 10px;
  font-size: 12px;
}
body.el-erp .erp-wa-template-body {
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 6px;
  color: #334155;
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 42rem;
}
body.el-erp .erp-muted {
  color: var(--text-gray);
}
body.el-erp .erp-pill {
  display: inline-flex;
  align-items: center;
  margin: 0 0.2rem 0.2rem 0;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}
body.el-erp .erp-wa-preview {
  white-space: pre-wrap;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
  padding: 0.55rem 0 0;
  max-width: 42rem;
}
body.el-erp .erp-wa-details summary {
  cursor: pointer;
  font-weight: 700;
  color: #0f172a;
}
body.el-erp .erp-wa-details[open] summary {
  margin-bottom: 0.2rem;
}
body.el-erp .erp-ok {
  color: var(--teal-dark);
  font-weight: 800;
}
body.el-erp .erp-no {
  color: #BE123C;
  font-weight: 800;
}
body.el-erp .erp-badge-gold {
  background: #FFF7DD;
  color: #9A6500;
  border-color: rgba(255, 184, 0, 0.25);
}
body.el-erp .erp-badge-danger {
  background: #FFF1F2;
  color: #BE123C;
  border-color: #FECDD3;
}
body.el-erp .erp-badge-muted {
  background: #F8FAFC;
  color: #64748B;
  border-color: rgba(15, 23, 42, 0.08);
}
body.el-erp .erp-form {
  max-width: 620px;
}
body.el-erp .erp-form-wide {
  max-width: 860px;
}
body.el-erp .erp-inline-fields {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(200px, 1.3fr);
  gap: 0.5rem;
}
body.el-erp.erp-modal-open {
  overflow: hidden;
}
body.el-erp .erp-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
body.el-erp .erp-modal[hidden] {
  display: none !important;
}
body.el-erp .erp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
body.el-erp .erp-modal-dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: min(90vh, 760px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}
body.el-erp .erp-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body.el-erp .erp-modal-header h2 {
  margin: 0 0 4px;
  font-size: 17px;
}
body.el-erp .erp-modal-header p {
  margin: 0;
}
body.el-erp .erp-wa-phone {
  background: #ECE5DD;
  background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 16px;
  padding: 18px 14px 22px;
  min-height: 280px;
}
body.el-erp .erp-wa-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: #54656F;
  font-size: 11px;
  font-weight: 700;
}
body.el-erp .erp-wa-bubble {
  max-width: 92%;
  margin-left: auto;
  background: #D9FDD3;
  color: #111B21;
  border-radius: 8px 8px 2px 8px;
  padding: 8px 10px 6px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 1px 0.5px rgba(11,20,26,.13);
}
body.el-erp .erp-wa-bubble .wa-var {
  background: #FFF7DD;
  color: #9A6500;
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 800;
}
body.el-erp .erp-wa-time {
  display: block;
  text-align: right;
  color: #667781;
  font-size: 11px;
  margin-top: 4px;
}
body.el-erp .erp-wa-samples label {
  font-size: 12px;
  margin-top: 8px;
}
body.el-erp .erp-wa-empty {
  color: #667781;
  font-size: 13px;
  text-align: center;
  padding: 40px 12px;
}
body.el-erp .erp-form label {
  display: block;
  margin: 10px 0 6px;
  font-weight: 800;
  font-size: 13px;
}
body.el-erp .erp-alert {
  padding: 9px 11px;
  border-radius: 14px;
  margin: 14px 0;
}
body.el-erp .erp-alert-danger {
  background: #FFF1F2;
  color: #BE123C;
  border: 1px solid #FECDD3;
}
body.el-erp .erp-alert-info {
  background: var(--teal-light);
  color: var(--teal-dark);
  border: 1px solid rgba(0, 180, 166, 0.18);
}
body.el-erp .erp-pager {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
body.el-erp .mt-3 {
  margin-top: 12px;
}
body.el-erp .mt-4 {
  margin-top: 16px;
}
body.el-erp .mb-0 {
  margin-bottom: 0;
}
body.el-erp .erp-login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--teal-light) 0%, #fff 55%, #FFF7DD 100%);
}
body.el-erp .erp-login-card {
  width: min(430px, 100%);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  padding: 38px;
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
body.el-erp .erp-login-card h1 {
  margin: 18px 0 8px;
  font-size: 32px;
  letter-spacing: -0.045em;
}
body.el-erp .erp-login-card p {
  color: var(--text-gray);
  margin: 0 0 24px;
}
body.el-erp .erp-login-card .erp-btn {
  width: 100%;
  margin-top: 18px;
}
@media (max-width: 1020px) {
  body.el-erp .erp-grid-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.el-erp .erp-filters {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  body.el-erp .erp-shell {
    display: block;
  }
  body.el-erp .erp-sidebar {
    position: relative;
    width: auto;
    min-height: auto;
    inset: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }
  body.el-erp .erp-main {
    margin-left: 0;
    padding: 20px;
  }
  body.el-erp .erp-page-header {
    display: block;
    padding: 16px;
  }
  body.el-erp .erp-grid-kpis, body.el-erp .erp-grid-2, body.el-erp .erp-filters {
    grid-template-columns: 1fr;
  }
}

/* ===== extracted from templates/cliente/base.twig ===== */
iconify-icon {
  font-size: 21px;
  vertical-align: middle;
}

.profile-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #007bff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}

.swal2-title {
  font-size: 1.2em !important;
}

.swal2-html-container {
  font-size: initial !important;
}

.btn-link {
  text-decoration: none !important;
}

/* ===== extracted from templates/cliente/dashboard.twig ===== */
/* ===== EVENTO CARD (ANCHO COMPLETO) ===== */
.eventos-container {
  padding: 2rem;
}

.seccion-eventos {
  margin-bottom: 2.5rem;
}

.seccion-titulo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2a3547;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.seccion-titulo iconify-icon {
  font-size: 1.75rem;
}

/* ⭐ GRID CON ANCHO COMPLETO - 1 COLUMNA */
.eventos-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.evento-principal-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  color: #2a3547;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
  position: relative;
  width: 100%; /* ⭐ ANCHO COMPLETO */
}

.evento-principal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border-color: #5d87ff;
}

/* Logo del organizador */
.organizador-logo {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 8px;
  padding: 0.35rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 10;
}

.organizador-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.organizador-logo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.2rem;
}

.evento-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1.5rem;
}

.evento-info {
  flex: 1;
  padding-left: 60px; /* Espacio para el logo */
}

.evento-tipo {
  display: inline-block;
  background: #5d87ff;
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.evento-tipo.finalizado {
  background: #9e9e9e;
}

.evento-tipo.proximo {
  background: #4caf50;
}

.evento-nombre {
  font-size: 1.4rem;
  margin: 0.25rem 0 0.75rem;
  font-weight: 700;
  color: #2a3547;
}

.evento-detalles {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.detalle-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #5a6a85;
}

.detalle-item iconify-icon {
  color: #5d87ff;
}

.evento-countdown {
  text-align: center;
  background: linear-gradient(135deg, #5d87ff 0%, #4570ea 100%);
  padding: 1rem;
  border-radius: 12px;
  min-width: 110px;
  color: white;
  box-shadow: 0 4px 12px rgba(93, 135, 255, 0.3);
  flex-shrink: 0;
}

.evento-countdown.finalizado {
  background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
}

.evento-countdown.proximo {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
}

.countdown-numero {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.4rem;
  color: white;
}

.countdown-texto {
  font-size: 0.7rem;
  opacity: 0.95;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
}

.progreso-planificacion {
  background: #f8f9ff;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #e8edff;
}

.progreso-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #2a3547;
}

.progreso-barra-custom {
  height: 8px;
  background: #e8edff;
  border-radius: 4px;
  overflow: hidden;
}

.progreso-fill {
  height: 100%;
  background: linear-gradient(90deg, #5d87ff 0%, #4570ea 100%);
  border-radius: 4px;
  transition: width 0.8s ease;
  box-shadow: 0 0 10px rgba(93, 135, 255, 0.4);
}

/* Estado vacío */
.sin-eventos {
  text-align: center;
  padding: 3rem;
  color: #5a6a85;
}

.sin-eventos iconify-icon {
  font-size: 4rem;
  color: #e0e0e0;
  margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .eventos-container {
    padding: 1rem;
  }
  .evento-header {
    flex-direction: column;
    gap: 1rem;
  }
  .evento-countdown {
    align-self: center;
  }
  .evento-info {
    padding-left: 0;
    padding-top: 60px; /* Logo arriba en mobile */
  }
  .organizador-logo {
    left: 50%;
    transform: translateX(-50%);
  }
}
/* ===== extracted from templates/cliente/ficha_evento.twig ===== */
/* ===== FICHA DEL EVENTO - VISTA DETALLADA ===== */
:root {
  --evento-gradient-start: #4a5568;
  --evento-gradient-end: #2d3748;
}

/* ===== EVENTO PRINCIPAL (COMPACTO) ===== */
.evento-principal-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  color: #2a3547;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
  border: 1px solid #e8e8e8;
}

.evento-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1.5rem;
}

.evento-tipo {
  display: inline-block;
  background: #5d87ff;
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.evento-nombre {
  font-size: 1.4rem;
  margin: 0.25rem 0 0.75rem;
  font-weight: 700;
}

.evento-detalles {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.detalle-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.detalle-item iconify-icon {
  color: #5d87ff;
}

.evento-countdown {
  text-align: center;
  background: linear-gradient(135deg, #5d87ff 0%, #4570ea 100%);
  padding: 1rem;
  border-radius: 12px;
  min-width: 110px;
  color: white;
  box-shadow: 0 4px 12px rgba(93, 135, 255, 0.3);
}

.countdown-numero {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.4rem;
  color: white;
}

.countdown-texto {
  font-size: 0.7rem;
  opacity: 0.95;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
}

.progreso-planificacion {
  background: #f8f9ff;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid #e8edff;
}

.progreso-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-weight: 600;
  font-size: 0.875rem;
}

.progreso-barra-custom {
  height: 8px;
  background: #e8edff;
  border-radius: 4px;
  overflow: hidden;
}

.progreso-fill {
  height: 100%;
  background: linear-gradient(90deg, #5d87ff 0%, #4570ea 100%);
  border-radius: 4px;
  transition: width 0.8s ease;
  box-shadow: 0 0 10px rgba(93, 135, 255, 0.4);
}

/* ===== CITAS (CON HORA Y UBICACIÓN) ===== */
.cita-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  transition: all 0.3s ease;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  background: white;
  text-decoration: none;
  color: inherit;
}

.cita-item:hover {
  border-color: #5d87ff;
  background: #f8f9ff;
  transform: translateX(3px);
}

.cita-fecha {
  background: linear-gradient(135deg, #5d87ff 0%, #4570ea 100%);
  color: white;
  padding: 0.5rem;
  border-radius: 8px;
  text-align: center;
  min-width: 55px;
  flex-shrink: 0;
}

.fecha-dia {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.fecha-mes {
  font-size: 0.7rem;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.cita-info {
  flex: 1;
}

.cita-info h6 {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: #2a3547;
  font-size: 0.95rem;
}

.cita-detalles {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cita-detalle-linea {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #5a6a85;
}

.cita-detalle-linea iconify-icon {
  flex-shrink: 0;
}

/* Tareas - SIN CHECKBOX */
.tarea-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.tarea-item:hover {
  background: #f8f9ff;
}

.tarea-icono {
  font-size: 1.2rem;
  margin-top: 0.1rem;
}

.tarea-icono.completada {
  color: #4caf50;
}

.tarea-icono.pendiente {
  color: #9e9e9e;
}

.tarea-titulo {
  font-size: 0.9rem;
  color: #2a3547;
  font-weight: 500;
}

.prioridad-alta {
  color: #fa896b;
}

.prioridad-media {
  color: #ffae1f;
}

/* ===== TIMELINE LIGERO ===== */
.timeline-ligero {
  position: relative;
  padding-left: 1.5rem;
}

.timeline-ligero::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, #5d87ff 0%, #e8edff 100%);
}

.timeline-item-ligero {
  position: relative;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.timeline-item-ligero:last-child {
  margin-bottom: 0;
}

.timeline-dot-ligero {
  position: absolute;
  left: -1.25rem;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 2px solid #5d87ff;
  box-shadow: 0 0 0 3px rgba(93, 135, 255, 0.1);
  flex-shrink: 0;
  z-index: 1;
}

.timeline-dot-ligero.completada {
  background: #4caf50;
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.timeline-content-ligero {
  flex: 1;
  min-width: 0;
}

.timeline-titulo-ligero {
  font-weight: 600;
  font-size: 0.875rem;
  color: #2a3547;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.timeline-meta-ligero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: #5a6a85;
  margin-bottom: 0.4rem;
}

.timeline-fecha-ligero {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.timeline-subtareas-ligero {
  background: #e8edff;
  color: #5d87ff;
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.65rem;
}

.timeline-barra-ligero {
  height: 4px;
  background: #e8edff;
  border-radius: 2px;
  overflow: hidden;
}

.timeline-fill-ligero {
  height: 100%;
  background: linear-gradient(90deg, #5d87ff 0%, #4570ea 100%);
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* ===== PROVEEDORES ===== */
/* ===== PROVEEDORES - IMAGEN COMPLETA ===== */
.proveedores-grid-fullimage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.proveedor-card-fullimage {
  position: relative;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  display: block;
}

.proveedor-card-fullimage:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(93, 135, 255, 0.25);
}

/* Imagen de fondo */
.proveedor-imagen-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Placeholder con gradiente */
.proveedor-placeholder-fondo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #5d87ff 0%, #4570ea 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.proveedor-placeholder-inicial {
  font-size: 4rem;
  font-weight: 700;
  color: white;
  opacity: 0.9;
}

/* Overlay oscuro para legibilidad del texto */
.proveedor-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 2;
}

/* Badge del tipo (esquina superior derecha) */
.proveedor-badge-tipo {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: white;
  color: #5d87ff;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.5px;
}

/* Contenido del proveedor (nombre en la parte inferior) */
.proveedor-contenido {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  z-index: 3;
}

.proveedor-nombre-fullimage {
  color: white;
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  margin: 0;
  line-height: 1.3;
}

/* Responsive */
@media (max-width: 991px) {
  .proveedores-grid-fullimage {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .proveedor-card-fullimage {
    height: 180px;
  }
  .proveedor-placeholder-inicial {
    font-size: 3rem;
  }
}
@media (max-width: 576px) {
  .proveedores-grid-fullimage {
    grid-template-columns: repeat(2, 1fr);
  }
  .proveedor-card-fullimage {
    height: 160px;
  }
}
/* Mensajes */
.mensaje-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  border: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}

.mensaje-item:hover {
  background: #f8f9ff;
  border-color: #e8edff;
}

.profile-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5d87ff 0%, #4570ea 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Notas post-it */
.notas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.nota-postit {
  padding: 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-height: 90px;
  transition: transform 0.2s;
}

.nota-postit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Documentos */
.documento-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.documento-item:hover {
  background: #f8f9ff;
}

.documento-item:last-child {
  border-bottom: none;
}

/* Responsivo */
@media (max-width: 991px) {
  .evento-header {
    flex-direction: column;
    gap: 1rem;
  }
  .evento-countdown {
    align-self: center;
  }
  .notas-grid {
    grid-template-columns: 1fr;
  }
  .timeline-ligero {
    padding-left: 1.25rem;
  }
  .timeline-meta-ligero {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .proveedores-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
/* Estados del countdown según el tipo de evento */
.evento-countdown.futuro {
  background: linear-gradient(135deg, #5d87ff 0%, #4570ea 100%);
}

.evento-countdown.hoy {
  background: linear-gradient(135deg, #F39C12, #E67E22);
  animation: pulse 2s ease-in-out infinite;
}

.evento-countdown.pasado {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
/* ===== extracted from templates/cliente/partials/head.twig ===== */
.tagify {
  font-size: 14px;
}

/* ===== extracted from templates/cliente/proveedores/buscador.twig ===== */
.transition-rotate {
  transition: transform 0.3s ease;
}

.rotate-180 {
  transform: rotate(180deg);
}

#activeFacetsBadges .badge {
  font-size: 0.75em;
  max-width: 200px;
}

#activeFacetsBadges .badge small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mobileFacets {
  transition: all 0.35s ease;
}

@media (max-width: 991.98px) {
  #facetsToggle {
    border: 2px solid #dee2e6;
    font-weight: 500;
  }
  #facetsToggle[aria-expanded=true] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
  }
}
/* ===== extracted from templates/cliente/proveedores/fichaProveedor.twig ===== */
.hero-section {
  background: linear-gradient(135deg, #e8f4fd 0%, #f1e8ff 50%, #fff0e8 100%);
  color: #2c3e50;
  padding: 2.5rem 0;
  margin-bottom: 2rem;
  position: relative;
  border-radius: 0 0 20px 20px;
}

.hero-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
  pointer-events: none;
}

.hero-section .container {
  position: relative;
  z-index: 1;
}

.proveedor-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.proveedor-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.hero-section h1 {
  color: #2c3e50;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

.hero-section .opacity-75 {
  opacity: 0.8 !important;
  color: #495057;
}

.hero-section .btn-light,
.hero-section .btn-outline-light {
  border-radius: 25px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.hero-section .btn-light {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: #495057;
  backdrop-filter: blur(10px);
}

.hero-section .btn-light:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.hero-section .btn-outline-light {
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #495057;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.hero-section .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: #495057;
  transform: translateY(-2px);
}

.hero-section .badge.bg-success {
  background: linear-gradient(135deg, #d1f2d1, #a8e6a8) !important;
  color: #0f5132;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 25px;
  font-size: 0.95rem;
}

.valoracion-estrellas {
  color: #f39c12;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.3));
}

.galeria-principal {
  height: 350px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.galeria-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniatura-galeria {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.miniatura-galeria:hover {
  transform: scale(1.05);
  border-color: #0d6efd;
}

.miniatura-galeria.active {
  border-color: #0d6efd;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.info-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.sticky-sidebar {
  position: sticky;
  top: 2rem;
}

.contacto-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f8f9fa;
  transition: all 0.3s ease;
}

.contacto-item:last-child {
  border-bottom: none;
}

.contacto-item:hover {
  background: #f8f9fa;
  margin: 0 -1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.contacto-icono {
  width: 40px;
  height: 40px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: #6c757d;
  font-size: 1.1rem;
}

.galeria-eventos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.foto-evento {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.foto-evento:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.foto-evento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-evento-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 0.5rem;
  font-size: 0.75rem;
}

.servicio-categoria {
  margin-bottom: 1.5rem;
}

.servicio-categoria h6 {
  color: #495057;
  border-bottom: 2px solid #f8f9fa;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
  align-items: start;
}

.servicio-item {
  display: flex;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: #495057;
}

.servicio-check {
  color: #28a745;
  font-size: 0.8rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.servicio-icono {
  width: 35px;
  height: 35px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: #6c757d;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 1.5rem 0;
  }
  .galeria-principal {
    height: 230px;
  }
  .sticky-sidebar {
    position: static;
    margin-top: 1rem;
  }
}
/* ===== extracted from templates/formularios/base.twig ===== */
.tagify {
  font-size: 14px;
}

.btn-link {
  text-decoration: none !important;
}

/* ===== extracted from templates/home/login.twig ===== */
.login-page {
  min-height: calc(100vh - 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  background: radial-gradient(circle at top left, rgba(196, 168, 130, 0.22), transparent 35%), radial-gradient(circle at bottom right, rgba(122, 155, 138, 0.18), transparent 34%), linear-gradient(135deg, var(--el-warm-white) 0%, var(--el-cream) 100%);
}

.login-form {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--el-border);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(45, 33, 24, 0.14);
  padding: 3rem;
  width: 100%;
  max-width: 440px;
  backdrop-filter: blur(16px);
}

.login-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(196, 168, 130, 0.14);
  border: 1px solid rgba(196, 168, 130, 0.35);
  color: var(--el-taupe-dark);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.input-group {
  position: relative;
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease;
}

.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--el-border);
  border-radius: 14px;
  font-size: 16px;
  transition: all 0.25s ease;
  background: #ffffff;
  color: var(--el-deep-brown);
}

.input-field:focus {
  outline: none !important;
  border-color: var(--el-taupe) !important;
  box-shadow: 0 0 0 4px rgba(196, 168, 130, 0.18) !important;
}

.input-field::placeholder {
  color: #B8AA9E;
}

.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--el-taupe) !important;
  color: #ffffff !important;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  width: 100%;
  font-size: 16px;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.login-submit:hover:not(:disabled) {
  background-color: var(--el-taupe-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-taupe);
}

.login-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.link-eventlink {
  color: var(--el-taupe-dark);
  text-decoration: none;
  font-weight: 600;
}

.link-eventlink:hover {
  color: var(--el-deep-brown);
  text-decoration: underline;
}

.login-mini-card {
  background: var(--el-warm-white);
  border: 1px solid var(--el-border);
  border-radius: 18px;
  padding: 1rem;
}

@media (max-width: 640px) {
  .login-form {
    padding: 2rem;
    border-radius: 24px;
  }
}
/* ===== extracted from templates/home/register.twig ===== */
.register-page {
  min-height: calc(100vh - 320px);
  padding: 4rem 1rem;
  background: radial-gradient(circle at top left, rgba(196, 168, 130, 0.22), transparent 35%), radial-gradient(circle at bottom right, rgba(122, 155, 138, 0.18), transparent 34%), linear-gradient(135deg, var(--el-warm-white) 0%, var(--el-cream) 100%);
}

.form-container {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--el-border);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(45, 33, 24, 0.14);
  padding: 3rem;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  backdrop-filter: blur(16px);
}

.register-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: rgba(196, 168, 130, 0.14);
  border: 1px solid rgba(196, 168, 130, 0.35);
  color: var(--el-taupe-dark);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--el-border);
  border-radius: 14px;
  font-size: 16px;
  transition: all 0.25s ease;
  background: #ffffff;
  color: var(--el-deep-brown);
}

.form-input:focus {
  outline: none !important;
  border-color: var(--el-taupe) !important;
  box-shadow: 0 0 0 4px rgba(196, 168, 130, 0.18) !important;
}

.form-input::placeholder {
  color: #B8AA9E;
}

.user-type-card {
  border: 1px solid var(--el-border);
  border-radius: 18px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  background: #ffffff;
}

.user-type-card:hover {
  border-color: var(--el-taupe);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(45, 33, 24, 0.08);
}

.user-type-card.selected {
  border-color: var(--el-taupe);
  background: rgba(196, 168, 130, 0.14);
  box-shadow: 0 0 0 4px rgba(196, 168, 130, 0.13);
}

.register-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--el-taupe);
  color: #ffffff;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  width: 100%;
  font-size: 16px;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.register-submit:hover:not(:disabled) {
  background-color: var(--el-taupe-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-taupe);
}

.register-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.link-eventlink {
  color: var(--el-taupe-dark);
  text-decoration: none;
  font-weight: 600;
}

.link-eventlink:hover {
  color: var(--el-deep-brown);
  text-decoration: underline;
}

.alert-box {
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.alert-error {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

.alert-success {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
}

@media (max-width: 768px) {
  .form-container {
    padding: 2rem;
    border-radius: 24px;
  }
}
/* ===== extracted from templates/organizador/calidad/index.twig ===== */
.q-page {
  padding: 1rem 0;
}

.q-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.q-card {
  border: 1px solid #eee3d4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.q-kpi {
  border: 1px solid #eadfce;
  border-radius: 16px;
  background: #faf7f2;
  padding: 1rem;
}

.q-kpi-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #2f2a25;
}

.q-kpi-label {
  color: #8a7a67;
  font-size: 0.88rem;
}

.q-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  font-size: 0.85rem;
  white-space: nowrap;
}

.q-status-pending {
  background: #f3b02f;
  color: #fff;
}

.q-status-progress {
  background: #ead7b6;
  color: #6d542f;
  border-color: #dcc29d;
}

.q-status-done {
  background: #25d4b5;
  color: #fff;
}

.q-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: #f7f1e8;
  border: 1px solid #eadfce;
  color: #6d542f;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.q-empty {
  border: 1px dashed #ddd;
  border-radius: 14px;
  background: #fcfcfc;
  color: #7a736b;
  padding: 1rem;
}

.q-table th {
  color: #8a7a67;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #eee3d4;
  background: #faf7f2;
  white-space: nowrap;
}

.q-table td {
  vertical-align: middle;
  border-color: #f1e8dc;
}

.q-event-title {
  font-weight: 800;
  color: #2f2a25;
}

.q-subtle {
  color: #8a7a67;
  font-size: 0.88rem;
}

.q-plazo-box {
  display: grid;
  gap: 0.25rem;
  white-space: nowrap;
}

.q-plazo-main {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #2f2a25;
}

.q-plazo-open {
  color: #1f7a5a;
}

.q-plazo-closed {
  color: #8a2f2f;
}

.q-date-stack {
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 0.65rem;
  row-gap: 0.08rem;
  align-items: center;
  font-size: 0.78rem;
  color: #8a7a67;
  white-space: nowrap;
}

.q-date-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #9a8b78;
  font-weight: 400;
}

.q-date-value {
  font-weight: 400;
  color: #8a7a67;
  text-align: right;
}

.q-date-empty {
  color: #b0a391;
  font-size: 0.88rem;
}

.btn-quality {
  background: #8a6f4d;
  border-color: #8a6f4d;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
}

.btn-quality:hover {
  background: #745c3f;
  border-color: #745c3f;
  color: #fff;
}

.btn-quality-light {
  background: #faf7f2;
  border-color: #eadfce;
  color: #6d542f;
  border-radius: 999px;
  font-weight: 700;
}

.btn-quality-light:hover {
  background: #f3ebdf;
  border-color: #dcc29d;
  color: #5c4527;
}

.q-modal-note {
  border: 1px solid #eadfce;
  background: #faf7f2;
  color: #6d542f;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
}

.q-alert {
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  font-weight: 600;
}

.q-alert-success {
  background: #edf8ef;
  border-color: #cfe8d3;
  color: #1f5130;
}

.q-alert-error {
  background: #fff3f3;
  border-color: #f0caca;
  color: #8a2f2f;
}

.q-alert-warning {
  background: #fff8e8;
  border-color: #eedfb0;
  color: #6c5620;
}

.q-alert-info {
  background: #eef6ff;
  border-color: #cfe0f4;
  color: #274c77;
}

.q-users-box {
  border: 1px solid #eadfce;
  border-radius: 14px;
  background: #faf7f2;
  padding: 0.5rem;
  min-height: 90px;
  max-height: 300px;
  overflow-y: auto;
}

.q-user-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid #eadfce;
  border-radius: 13px;
  background: #fff;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.q-user-option:last-child {
  margin-bottom: 0;
}

.q-user-option:hover {
  background: #fffaf3;
  border-color: #dcc29d;
}

.q-user-option .form-check-input {
  margin-top: 0.2rem;
}

.q-user-name {
  display: block;
  font-weight: 800;
  color: #2f2a25;
  line-height: 1.2;
}

.q-user-email {
  display: block;
  color: #8a7a67;
  font-size: 0.84rem;
  margin-top: 0.15rem;
}

.q-event-row {
  background: #fffaf3;
}

.q-event-row td {
  border-top: 2px solid #eadfce;
  border-bottom: 1px solid #eadfce;
}

.q-event-group-title {
  font-weight: 900;
  color: #2f2a25;
  font-size: 1rem;
}

.q-event-head-wrap {
  display: grid;
  gap: 0.65rem;
  min-width: 280px;
}

.q-event-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  max-width: 860px;
  border: 1px solid #eadfce;
  background: #fff;
  border-radius: 14px;
  padding: 0.7rem 0.85rem;
  margin-top: 0.45rem;
}

.q-event-summary-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #faf7f2;
  color: #8a6f4d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.q-event-summary-body {
  min-width: 0;
}

.q-event-summary-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9a8b78;
  font-weight: 800;
  margin-bottom: 0.12rem;
}

.q-event-summary-text {
  color: #5f554b;
  font-size: 0.88rem;
  line-height: 1.35;
}

.q-event-summary-empty {
  color: #9a8b78;
  font-size: 0.88rem;
  line-height: 1.35;
}

.q-event-summary-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.q-event-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.26rem 0.6rem;
  background: #faf7f2;
  border: 1px solid #eadfce;
  color: #6d542f;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.q-event-summary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  border: 1px solid #dca94d;
  color: #b67b12;
  background: #fffaf3;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.q-event-summary-link:hover {
  background: #fff4df;
  color: #9b670c;
  border-color: #c99432;
}

.q-template-row td:first-child {
  padding-left: 2rem;
}

.q-template-indent {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.q-template-indent:before {
  content: "";
  width: 18px;
  height: 1px;
  background: #dcc29d;
  display: inline-block;
}

.q-mobile-event-group {
  border: 1px solid #eee3d4;
  border-radius: 18px;
  background: #fffaf3;
  overflow: hidden;
}

.q-mobile-event-head {
  padding: 1rem;
  border-bottom: 1px solid #eadfce;
}

.q-mobile-template-item {
  background: #fff;
  padding: 1rem;
  border-bottom: 1px solid #f1e8dc;
}

.q-mobile-template-item:last-child {
  border-bottom: 0;
}

@media (max-width: 767.98px) {
  .q-table-desktop {
    display: none;
  }
  .q-mobile-list {
    display: grid;
    gap: 0.75rem;
  }
  .q-event-summary {
    max-width: 100%;
    padding: 0.7rem;
  }
  .q-event-summary-actions {
    justify-content: flex-start;
    margin-top: 0.5rem;
  }
  .q-event-summary-link {
    width: 100%;
    justify-content: center;
  }
}
@media (min-width: 768px) {
  .q-mobile-list {
    display: none;
  }
}
/* ===== extracted from templates/organizador/calidad/plantillas/editar.twig ===== */
.q-card {
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.campo-item {
  border: 1px solid #ece8e2;
  border-radius: 14px;
  background: #fcfbfa;
  padding: 1rem;
}

/* ===== extracted from templates/organizador/calidad/plantillas/index.twig ===== */
.q-card {
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.q-badge-soft {
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  border: 1px solid #e8e8e8;
  background: #fafafa;
  color: #555;
}

/* ===== extracted from templates/organizador/calidad/resumen.twig ===== */
.q-card {
  border: 1px solid #eee3d4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.q-title {
  color: #2f2a25;
  font-weight: 700;
}

/* ===== extracted from templates/organizador/calidad/resumen_ia_evento.twig ===== */
.ia-page {
  padding: 1rem 0;
}

.ia-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.ia-title {
  font-weight: 900;
  color: #2f2a25;
  margin: 0;
}

.ia-subtitle {
  color: #8a7a67;
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

.ia-card {
  border: 1px solid #eee3d4;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.ia-hero {
  background: radial-gradient(circle at top left, rgba(220, 169, 77, 0.16), transparent 36%), linear-gradient(135deg, #fffaf3 0%, #ffffff 72%);
  border: 1px solid #eadfce;
  border-radius: 22px;
  padding: 1.35rem;
  margin-bottom: 1rem;
}

.ia-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.ia-event-name {
  font-size: 1.35rem;
  font-weight: 950;
  color: #2f2a25;
  margin-bottom: 0.15rem;
}

.ia-event-meta {
  color: #8a7a67;
  font-size: 0.92rem;
}

.ia-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.34rem 0.72rem;
  background: #faf7f2;
  border: 1px solid #eadfce;
  color: #6d542f;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.ia-pill-gold {
  background: #fff4df;
  border-color: #e6c27d;
  color: #9b670c;
}

.ia-pill-green {
  background: #eef9f3;
  border-color: #cfeedd;
  color: #1f7a5a;
}

.ia-pill-red {
  background: #fff1f1;
  border-color: #efcccc;
  color: #8a2f2f;
}

.ia-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.ia-kpi {
  border: 1px solid #eadfce;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 17px;
  padding: 0.95rem;
}

.ia-kpi-label {
  color: #9a8b78;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.ia-kpi-value {
  color: #2f2a25;
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1.15;
}

.ia-kpi-help {
  color: #8a7a67;
  font-size: 0.82rem;
  margin-top: 0.18rem;
}

.ia-section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #2f2a25;
  font-size: 1rem;
  font-weight: 900;
  margin-bottom: 0.75rem;
}

.ia-summary-text {
  color: #514940;
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
}

.ia-muted {
  color: #8a7a67;
}

.ia-empty {
  border: 1px dashed #dcc29d;
  border-radius: 16px;
  background: #fffaf3;
  color: #7a6b58;
  padding: 1rem;
  font-size: 0.95rem;
}

.ia-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ia-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.78rem;
  border: 1px solid #f0e4d4;
  background: #fffaf6;
  border-radius: 14px;
  color: #514940;
  font-size: 0.91rem;
  line-height: 1.35;
}

.ia-list-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #faf0de;
  color: #a66f13;
  flex: 0 0 auto;
  margin-top: -0.05rem;
}

.ia-tags {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.ia-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  background: #faf7f2;
  border: 1px solid #eadfce;
  color: #6d542f;
  font-size: 0.82rem;
  font-weight: 700;
}

.ia-table-wrap {
  overflow-x: auto;
}

.ia-table {
  width: 100%;
  margin: 0;
}

.ia-table th {
  color: #8a7a67;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #faf7f2;
  border-bottom: 1px solid #eee3d4;
  white-space: nowrap;
  padding: 0.8rem;
}

.ia-table td {
  border-bottom: 1px solid #f1e8dc;
  vertical-align: top;
  padding: 0.9rem 0.8rem;
}

.ia-table tr:last-child td {
  border-bottom: 0;
}

.ia-row-title {
  font-weight: 900;
  color: #2f2a25;
}

.ia-row-subtitle {
  color: #8a7a67;
  font-size: 0.84rem;
  margin-top: 0.12rem;
}

.ia-mini-summary {
  color: #5f554b;
  font-size: 0.9rem;
  line-height: 1.38;
  max-width: 520px;
}

.ia-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-ia {
  background: #8a6f4d;
  border-color: #8a6f4d;
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
}

.btn-ia:hover {
  background: #745c3f;
  border-color: #745c3f;
  color: #fff;
}

.btn-ia-light {
  background: #faf7f2;
  border-color: #eadfce;
  color: #6d542f;
  border-radius: 999px;
  font-weight: 800;
}

.btn-ia-light:hover {
  background: #f3ebdf;
  border-color: #dcc29d;
  color: #5c4527;
}

.ia-mobile-card {
  display: none;
}

@media (max-width: 991.98px) {
  .ia-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .ia-page {
    padding: 0.75rem 0;
  }
  .ia-hero {
    padding: 1rem;
  }
  .ia-kpi-grid {
    grid-template-columns: 1fr;
  }
  .ia-table-desktop {
    display: none;
  }
  .ia-mobile-card {
    display: grid;
    gap: 0.75rem;
  }
  .ia-actions {
    justify-content: flex-start;
  }
  .ia-actions .btn {
    width: 100%;
  }
}
/* ===== extracted from templates/organizador/calidad/ver.twig ===== */
.quality-page {
  --q-bg: #fbf8f3;
  --q-border: #eadfce;
  --q-text: #2f2a25;
  --q-muted: #817263;
  --q-main: #2f4f46;
  --q-gold: #c6a57b;
  --q-soft: #faf7f2;
}

.quality-card {
  border: 1px solid var(--q-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.quality-header-compact {
  border: 1px solid var(--q-border);
  border-radius: 18px;
  background: #fff;
  padding: 1rem 1.15rem;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.04);
}

.quality-title {
  font-weight: 800;
  color: var(--q-text);
}

.quality-muted {
  color: var(--q-muted);
}

.quality-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--q-border);
  background: var(--q-soft);
  color: #6e6256;
  font-weight: 700;
  font-size: 0.82rem;
}

.quality-kpi {
  border: 1px solid var(--q-border);
  border-radius: 16px;
  padding: 0.8rem 0.9rem;
  background: #fff;
  height: 100%;
}

.quality-kpi-number {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--q-text);
  line-height: 1;
}

.quality-kpi-label {
  font-size: 0.8rem;
  color: var(--q-muted);
  margin-top: 0.25rem;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.preview-box {
  border: 1px solid var(--q-border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.preview-head {
  background: var(--q-soft);
  border-bottom: 1px solid var(--q-border);
  padding: 1rem 1.1rem;
}

.preview-body {
  padding: 1rem 1.1rem;
}

.preview-field {
  border: none;
  border-radius: 14px;
  padding: 0.9rem;
  background: #fff;
  margin-bottom: 0.75rem;
}

.preview-field:last-child {
  margin-bottom: 0;
}

.preview-label {
  font-weight: 800;
  color: var(--q-text);
  margin-bottom: 0.35rem;
}

.preview-help {
  color: var(--q-muted);
  font-size: 0.86rem;
  margin-bottom: 0.5rem;
}

.preview-heading {
  margin: 0.95rem 0 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: var(--q-soft);
  border: 1px solid var(--q-border);
  color: #6d542f;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.preview-provider-type {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--q-border);
  background: var(--q-soft);
  color: #6d542f;
  font-weight: 900;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

.preview-provider-card {
  border: 1px solid var(--q-border);
  border-radius: 16px;
  background: #fff;
  margin-bottom: 1rem;
  overflow: hidden;
}

.preview-provider-card:last-child {
  margin-bottom: 0;
}

.preview-provider-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: #fffaf3;
  border-bottom: 1px solid var(--q-border);
}

.preview-provider-name {
  font-weight: 900;
  color: var(--q-text);
  line-height: 1.2;
}

.preview-provider-fields {
  padding: 0.9rem;
  background: #fff;
}

.fake-input,
.fake-textarea,
.fake-select {
  border: 1px solid #ded6cc;
  border-radius: 12px;
  background: #fcfbf9;
  color: #a19a91;
  padding: 0.62rem 0.75rem;
  font-size: 0.92rem;
}

.fake-textarea {
  min-height: 74px;
}

.fake-rating {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.fake-rating span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #ded6cc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a7a67;
  background: #fcfbf9;
  font-weight: 700;
}

.dest-table th {
  color: #6d5d4b;
  font-weight: 800;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--q-border);
  background: var(--q-soft);
  font-size: 0.78rem;
}

.dest-table td {
  vertical-align: middle;
  border-bottom: 1px solid #f0e8de;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-pendiente {
  background: #fff8e8;
  border-color: #eedfb0;
  color: #73591c;
}

.status-enviado {
  background: #eef6ff;
  border-color: #cfe0f4;
  color: #274c77;
}

.status-abierto {
  background: #f1edf8;
  border-color: #d8cdec;
  color: #594279;
}

.status-guardado {
  background: #fff3e8;
  border-color: #efd0b4;
  color: #83522b;
}

.status-respondido {
  background: #edf8ef;
  border-color: #cfe8d3;
  color: #1f5130;
}

.status-error {
  background: #fff3f3;
  border-color: #f0caca;
  color: #8a2f2f;
}

.status-caducado,
.status-cancelado {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #4b5563;
}

.quality-btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8c5a9;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  background: #fffaf3;
  color: #8b6a42;
  font-weight: 800;
  text-decoration: none;
  transition: 0.18s ease;
  white-space: nowrap;
}

.quality-btn-soft:hover {
  background: #f9f2e8;
  color: #7b5c36;
  text-decoration: none;
}

.empty-box {
  border: 1px dashed #ddd1c2;
  border-radius: 16px;
  background: #fcfbf9;
  color: var(--q-muted);
  padding: 1rem;
}

.ia-quick-card {
  border: 1px solid #e6dac9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.ia-alert-box {
  border: 1px solid #f0caca;
  border-radius: 14px;
  background: #fff8f8;
  padding: 0.85rem;
}

.ia-soft-box {
  border: 1px solid var(--q-border);
  border-radius: 14px;
  background: #fff;
  padding: 0.85rem;
}

.ia-list {
  margin: 0;
  padding-left: 1.1rem;
}

.ia-list li {
  margin-bottom: 0.35rem;
}

@media (max-width: 991.98px) {
  .dest-table th,
  .dest-table td {
    white-space: nowrap;
  }
}
/* ===== extracted from templates/organizador/calidad/ver_respuesta_destinatario.twig ===== */
.quality-read-page {
  --q-bg: #fbf8f3;
  --q-border: #eadfce;
  --q-text: #2f2a25;
  --q-muted: #817263;
  --q-main: #2f4f46;
  --q-main-2: #415f55;
  --q-gold: #c6a57b;
  --q-soft: #faf7f2;
}

.quality-read-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.quality-read-header {
  background: #fff;
  color: var(--q-text);
  border: 1px solid var(--q-border);
  border-radius: 24px;
  padding: 1.4rem;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.quality-read-header h3 {
  color: var(--q-text);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0;
}

.quality-read-muted-light {
  color: var(--q-muted);
}

.quality-card {
  border: 1px solid var(--q-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
  overflow: hidden;
}

.quality-card-head {
  padding: 1rem 1.15rem;
  background: var(--q-soft);
  border-bottom: 1px solid var(--q-border);
}

.quality-card-body {
  padding: 1rem 1.15rem;
}

.quality-title {
  color: var(--q-text);
  font-weight: 900;
}

.quality-muted {
  color: var(--q-muted);
}

.quality-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--q-border);
  background: var(--q-soft);
  color: #6e6256;
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
}

.quality-chip-light {
  border-color: var(--q-border);
  background: var(--q-soft);
  color: #6e6256;
}

.quality-btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8c5a9;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  background: #fffaf3;
  color: #8b6a42;
  font-weight: 800;
  text-decoration: none;
  transition: 0.18s ease;
  white-space: nowrap;
}

.quality-btn-soft:hover {
  background: #f9f2e8;
  color: #7b5c36;
  text-decoration: none;
}

.item-card {
  border: 1px solid var(--q-border);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 1rem;
}

.item-card:last-child {
  margin-bottom: 0;
}

.item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: #fffaf3;
  border-bottom: 1px solid var(--q-border);
}

.item-title {
  color: var(--q-text);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.25;
}

.item-subtitle {
  color: var(--q-muted);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.item-body {
  padding: 1rem;
}

.field-heading {
  margin: 0.95rem 0 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: var(--q-soft);
  border: 1px solid var(--q-border);
  color: #6d542f;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.field-heading:first-child {
  margin-top: 0;
}

.answer-field {
  border: 1px solid #eee7dd;
  border-radius: 16px;
  background: #fcfbf9;
  padding: 0.9rem;
  margin-bottom: 0.75rem;
}

.answer-field:last-child {
  margin-bottom: 0;
}

.answer-label {
  color: var(--q-text);
  font-weight: 900;
  margin-bottom: 0.35rem;
}

.answer-help {
  color: var(--q-muted);
  font-size: 0.86rem;
  margin-bottom: 0.45rem;
}

.answer-value {
  border: 1px solid #ded6cc;
  background: #fff;
  border-radius: 14px;
  padding: 0.72rem 0.8rem;
  color: #51483f;
  min-height: 44px;
}

.answer-empty {
  color: #a19a91;
  font-style: italic;
}

.rating-read {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.rating-read span {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid #ded6cc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a7a67;
  background: #fff;
  font-weight: 900;
}

.rating-read span.active {
  background: var(--q-main);
  border-color: var(--q-main);
  color: #fff;
}

.boolean-read {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.boolean-read span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid #ded6cc;
  background: #fff;
  color: #6e6256;
  font-weight: 800;
}

.boolean-read span.active {
  background: var(--q-main);
  color: #fff;
  border-color: var(--q-main);
}

.ia-box {
  border: 1px solid #d7e5de;
  background: #f4fbf7;
  border-radius: 16px;
  padding: 1rem;
  margin-top: 1rem;
}

.ia-title {
  font-weight: 900;
  color: #24483f;
  margin-bottom: 0.65rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-respondido {
  background: #edf8ef;
  border-color: #cfe8d3;
  color: #1f5130;
}

.status-guardado {
  background: #fff3e8;
  border-color: #efd0b4;
  color: #83522b;
}

.status-pendiente {
  background: #fff8e8;
  border-color: #eedfb0;
  color: #73591c;
}

.status-error {
  background: #fff3f3;
  border-color: #f0caca;
  color: #8a2f2f;
}

.empty-box {
  border: 1px dashed #ddd1c2;
  border-radius: 16px;
  background: #fcfbf9;
  color: var(--q-muted);
  padding: 1rem;
}

@media (max-width: 640px) {
  .quality-read-header {
    border-radius: 18px;
    padding: 1rem;
  }
  .quality-card-body,
  .item-body {
    padding: 0.85rem;
  }
}
/* ===== extracted from templates/organizador/catalogos.twig ===== */
.card.hover-img:hover .edit-overlay-icon {
  display: inline-flex !important;
  z-index: 2;
}

.search-header {
  padding: 1.5rem 0;
  margin-bottom: 1.5rem;
}

.search-input-wrapper {
  position: relative;
  flex-grow: 1;
  max-width: 400px;
}

.search-input-custom {
  border: 1px solid #dee2e6;
  border-radius: 25px;
  padding: 12px 45px 12px 15px;
  font-size: 14px;
  width: 100%;
  transition: all 0.3s ease;
}

.search-input-custom:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.search-btn {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: #667eea;
  border: none;
  border-radius: 25px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: #5a6fd8;
}

.tipo-dropdown {
  position: relative;
  min-width: 200px;
}

.tipo-dropdown-btn {
  background: white;
  border: 1px solid #dee2e6;
  color: #495057;
  border-radius: 25px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tipo-dropdown-btn:hover {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.tipo-dropdown-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.tipo-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  margin-top: 5px;
  display: none;
}

.tipo-dropdown-menu.show {
  display: block;
}

.tipo-dropdown-item {
  padding: 12px 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f1f3f4;
}

.tipo-dropdown-item:hover {
  background: rgba(102, 126, 234, 0.1);
}

.tipo-dropdown-item.selected {
  background: rgba(102, 126, 234, 0.15);
  color: #667eea;
  font-weight: 600;
}

.tipo-dropdown-item:last-child {
  border-bottom: none;
}

.tipo-icon {
  font-size: 1.2rem;
  margin-right: 10px;
  color: #667eea;
  min-width: 20px;
}

.search-results-badge {
  display: inline-block;
  margin-top: 1rem;
}

.shop-filters {
  background: white;
  border-radius: 15px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

.facet-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.facet-title {
  color: #495057;
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 2px solid #667eea;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.facet-item {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.facet-item:hover {
  background-color: rgba(102, 126, 234, 0.1);
}

.facet-item input[type=checkbox] {
  margin-right: 0.5rem;
}

.facet-item label {
  font-size: 0.9rem;
  margin-bottom: 0;
  cursor: pointer;
}

.badge-count {
  background: #667eea;
  color: white;
  border-radius: 12px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.reset-filters-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.reset-filters-btn:hover {
  background: #c82333;
}

.results-section {
  background: white;
  border-radius: 15px;
}

.results-header {
  padding: 1.5rem;
}

/* ESTILOS PARA EL COMPARADOR MEJORADO */
/* Barra de comparación mejorada */
.compare-bar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  z-index: 1050;
  min-width: 280px;
  max-width: 350px;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: none;
}

.compare-bar.show {
  transform: translateY(0);
  opacity: 1;
  display: block;
}

.compare-bar .title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compare-bar .close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.compare-bar .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.compare-list {
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 12px;
  list-style: none;
  padding: 0;
}

.compare-list::-webkit-scrollbar {
  width: 4px;
}

.compare-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.compare-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.compare-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.compare-item:last-child {
  border-bottom: none;
}

.compare-item .remove-btn {
  background: rgba(220, 53, 69, 0.8);
  border: none;
  color: white;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.compare-item .remove-btn:hover {
  background: rgb(220, 53, 69);
}

.compare-btn-main {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.compare-btn-main:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.compare-btn-main:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Botones de comparar en las tarjetas */
.btn-compare.selected {
  background: linear-gradient(135deg, #28a745, #20c997);
  border-color: #28a745;
  color: white;
}

.btn-compare:not(.selected):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Modal de comparación */
.comparison-modal .modal-dialog {
  max-width: 95vw;
}

.comparison-modal .modal-content {
  border-radius: 15px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.comparison-modal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 15px 15px 0 0;
  border-bottom: none;
  padding: 20px 25px;
}

.comparison-modal .modal-title {
  font-weight: 600;
  font-size: 1.25rem;
}

.comparison-modal .btn-close {
  filter: brightness(0) invert(1);
}

.comparison-table-container {
  max-height: 70vh;
  overflow: auto;
  padding: 0;
}

.comparison-table {
  margin-bottom: 0;
}

.comparison-table th {
  background: #f8f9fa;
  border-color: #dee2e6;
  font-weight: 600;
  color: #495057;
  position: sticky;
  top: 0;
  z-index: 10;
}

.comparison-table td {
  vertical-align: middle;
  border-color: #dee2e6;
}

.comparison-table tbody tr:hover {
  background-color: rgba(102, 126, 234, 0.05);
}

/* Diferenciar claramente las filas */
.comparison-table .attribute-cell {
  background: #ffffff;
  font-weight: 600;
  color: #495057;
  min-width: 150px;
}

/* Estilo para los servicios */
.comparison-table .service-item {
  background: #f9f9f9;
  padding-left: 25px;
  font-weight: 400;
  color: #333;
  font-size: 0.9rem;
}

/* Iconos ✔ y ✖ más visibles */
.comparison-table .bi-check-circle-fill {
  color: #28a745;
  font-size: 1.2em;
}

.comparison-table .bi-x-circle {
  color: #dc3545;
  font-size: 1.2em;
}

.provider-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #e9ecef;
}

.rating-stars {
  color: #ffc107;
  font-size: 0.9rem;
}

.price-badge {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.85rem;
}

.location-text {
  color: #6c757d;
  font-size: 0.9rem;
}

.services-list {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Sistema de compartir */
.share-dropdown {
  position: relative;
  display: inline-block;
}

.share-btn-main {
  background: linear-gradient(135deg, #25D366, #128C7E);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.share-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  color: white;
}

.share-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid #e9ecef;
  min-width: 280px;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-top: 8px;
}

.share-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.share-dropdown-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 15px 15px 0 0;
}

.share-dropdown-header h6 {
  margin: 0;
  color: #495057;
  font-weight: 600;
}

.share-dropdown-body {
  padding: 15px;
}

.share-section {
  margin-bottom: 20px;
}

.share-section:last-child {
  margin-bottom: 0;
}

.share-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.share-options {
  display: grid;
  gap: 8px;
}

.share-option {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  text-decoration: none;
  color: #495057;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.share-option:hover {
  background: #e9ecef;
  transform: translateX(3px);
  color: #495057;
  text-decoration: none;
}

.share-option i {
  width: 20px;
  margin-right: 10px;
  text-align: center;
}

.share-option.whatsapp:hover {
  background: rgba(37, 211, 102, 0.1);
  border-color: #25D366;
  color: #25D366;
}

.share-option.telegram:hover {
  background: rgba(0, 136, 204, 0.1);
  border-color: #0088cc;
  color: #0088cc;
}

.share-option.facebook:hover {
  background: rgba(66, 103, 178, 0.1);
  border-color: #4267B2;
  color: #4267B2;
}

.share-option.twitter:hover {
  background: rgba(29, 161, 242, 0.1);
  border-color: #1DA1F2;
  color: #1DA1F2;
}

.share-option.linkedin:hover {
  background: rgba(0, 119, 181, 0.1);
  border-color: #0077B5;
  color: #0077B5;
}

.share-option.email:hover {
  background: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
  color: #dc3545;
}

.share-option.copy:hover {
  background: rgba(108, 117, 125, 0.1);
  border-color: #6c757d;
  color: #6c757d;
}

.share-option.download:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: #667eea;
  color: #667eea;
}

/* Modal de email */
.email-modal .modal-content {
  border-radius: 15px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.email-modal .modal-header {
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: white;
  border-radius: 15px 15px 0 0;
  border-bottom: none;
  padding: 20px 25px;
}

.email-form-group {
  margin-bottom: 20px;
}

.email-form-group label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
}

.email-form-control {
  border: 2px solid #e9ecef;
  border-radius: 10px;
  padding: 12px 15px;
  transition: all 0.3s ease;
}

.email-form-control:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
  outline: none;
}

.email-preview {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 15px;
  font-size: 0.9rem;
  color: #6c757d;
}

/* Notificaciones toast */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

/* Animaciones */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.success-animation {
  display: inline-block;
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(-5px);
  }
}
/* Responsive */
@media (max-width: 991px) {
  .search-header {
    padding: 1rem 0;
  }
  .search-header .d-flex {
    flex-direction: column;
    gap: 1rem;
  }
  .search-input-wrapper {
    max-width: 100%;
  }
  .tipo-dropdown {
    min-width: 100%;
  }
  .shop-filters {
    position: static;
  }
  .compare-bar {
    right: 10px;
    left: 10px;
    min-width: auto;
    max-width: none;
  }
  .comparison-modal .modal-dialog {
    max-width: 98vw;
    margin: 10px;
  }
  .comparison-table-container {
    max-height: 60vh;
  }
  .share-dropdown-menu {
    right: -10px;
    left: -10px;
  }
}
@media (max-width: 576px) {
  .compare-bar {
    bottom: 10px;
    padding: 12px 16px;
  }
  .comparison-table th,
  .comparison-table td {
    font-size: 0.8rem;
    padding: 8px 6px;
  }
  .provider-image {
    width: 40px;
    height: 40px;
  }
  .share-dropdown-menu {
    position: fixed;
    top: auto !important;
    bottom: 20px;
    left: 10px;
    right: 10px;
    transform: translateY(100px);
  }
  .share-dropdown-menu.show {
    transform: translateY(0);
  }
}
/* ===== extracted from templates/organizador/citas/_modal_cita.twig ===== */
#modalNuevaCita.modal {
  --bs-modal-width: min(1440px, calc(100vw - 2rem));
  overflow: hidden;
}

#modalNuevaCita .modal-cita-dialog {
  --bs-modal-width: 100vw;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
}

#modalNuevaCita .modal-cita-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 1.5rem);
  overflow: hidden;
  border-radius: 16px;
}

#modalNuevaCita .modal-cita-content > form,
#modalNuevaCita .modal-cita-form,
#modalNuevaCita #formNuevaCita {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#modalNuevaCita .modal-body {
  container-type: inline-size;
  container-name: cita-form;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: auto;
  background: #f4efe9;
  padding: 1.15rem 1.35rem;
}

#modalNuevaCita.cita-form-page {
  display: block;
  width: 100%;
  max-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

#modalNuevaCita.cita-form-page .cita-form-page-body {
  max-height: none;
  overflow: visible;
}

#modalNuevaCita.cita-form-page .cita-form-page-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border-top: 1px solid #e5ddd4;
}

#modalNuevaCita .modal-header,
#modalNuevaCita .modal-footer {
  flex-shrink: 0;
}

#modalNuevaCita .modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  border-top: 1px solid #e5ddd4;
}

#modalNuevaCita .form-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #332b25;
  margin-bottom: 0.25rem;
}

#modalNuevaCita .form-control,
#modalNuevaCita .form-select {
  border-radius: 10px;
  min-height: 42px;
  font-size: 0.92rem;
}

#modalNuevaCita .cita-section,
#modalNuevaCita .cita-google-card {
  overflow: visible;
}

#modalNuevaCita .cita-section {
  border: 1px solid #e4d8ca;
  background: #fffaf4;
  border-radius: 16px;
  padding: 0.85rem;
}

#modalNuevaCita .cita-section + .cita-section {
  margin-top: 0.8rem;
}

#modalNuevaCita .cita-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

#modalNuevaCita .cita-section-title {
  font-weight: 800;
  color: #2f2a25;
  line-height: 1.15;
}

#modalNuevaCita .cita-section-subtitle {
  font-size: 0.82rem;
  color: #7a736b;
  line-height: 1.25;
}

#modalNuevaCita .cita-compact-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) minmax(9rem, 0.9fr) repeat(3, minmax(7.5rem, 0.7fr)) minmax(12rem, 1.3fr);
  gap: 0.75rem 0.85rem;
  align-items: end;
}

#modalNuevaCita .cita-compact-grid > * {
  min-width: 0;
}

#modalNuevaCita .cita-field-evento {
  margin-top: 0.85rem;
}

#modalNuevaCita .cita-evento-control {
  position: relative;
}

#modalNuevaCita .cita-evento-control #cita_evento_nombre {
  padding-right: 2.4rem;
}

#modalNuevaCita .cita-evento-clear {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #7a736b;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#modalNuevaCita .cita-evento-clear:hover {
  background: #f3eee8;
  color: #2f2a25;
}

#cita_evento_sugerencias {
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  border-radius: 12px;
  overflow: hidden;
}

#modalNuevaCita .cita-evento-contactos {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#modalNuevaCita .cita-evento-contactos-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #5e5247;
  letter-spacing: 0.02em;
}

#modalNuevaCita .cita-evento-contactos-empty {
  font-size: 0.82rem;
  color: #7a736b;
  background: #f8f3ed;
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
}

#modalNuevaCita .cita-evento-contacto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid #e0d4c6;
  background: #fff;
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
}

#modalNuevaCita .cita-evento-contacto-name {
  font-weight: 800;
  color: #2f2a25;
  line-height: 1.2;
}

#modalNuevaCita .cita-evento-contacto-name span {
  font-weight: 600;
  color: #7a736b;
  font-size: 0.8rem;
}

#modalNuevaCita .cita-evento-contacto-meta {
  font-size: 0.82rem;
  color: #7a736b;
  margin-top: 0.15rem;
}

#modalNuevaCita .cita-evento-contacto-added {
  font-size: 0.78rem;
  font-weight: 800;
  color: #5d8a5a;
  white-space: nowrap;
}

#modalNuevaCita .cita-asistentes-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(12rem, 1.5fr) minmax(9rem, 0.9fr) minmax(14rem, 1.3fr) auto;
  gap: 0.7rem;
  align-items: end;
}

#modalNuevaCita .cita-asistentes-row > * {
  min-width: 0;
}

#modalNuevaCita .cita-asistente-help {
  margin-top: 0.4rem;
  margin-bottom: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #7a736b;
}

#modalNuevaCita .cita-field-canales {
  min-width: 0;
}

#modalNuevaCita .cita-canal-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 42px;
  align-items: center;
}

#modalNuevaCita .cita-canal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.35rem 0.75rem;
  border: 1px solid #d9cbbb;
  border-radius: 999px;
  background: #fff;
  color: #5e5247;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

#modalNuevaCita .cita-canal-toggle i {
  font-size: 0.95rem;
}

#modalNuevaCita .cita-canal-toggle.is-on {
  background: #2f2a25;
  border-color: #2f2a25;
  color: #fff;
}

#modalNuevaCita .cita-canales-status {
  margin-top: 0.75rem;
  font-size: 0.86rem;
  color: #5e5247;
  line-height: 1.4;
  white-space: normal;
}

#modalNuevaCita .cita-canales-status-link {
  border: 0;
  background: none;
  padding: 0;
  margin-left: 0.35rem;
  color: #2f2a25;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

#modalNuevaCita .cita-asistente-canales-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(220px, 1fr);
  gap: 0.75rem;
  align-items: end;
  margin-top: 0.75rem;
}

#modalNuevaCita .cita-reagendar-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.85rem 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  border-radius: 14px;
}

#modalNuevaCita .cita-reagendar-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

#modalNuevaCita .cita-reagendar-banner-text span {
  color: #9a3412;
  font-size: 0.84rem;
}

#modalNuevaCita .cita-reagendar-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#modalNuevaCita .cita-whatsapp-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

#modalNuevaCita .cita-whatsapp-preview-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #d9cbbb;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.fc-evt-badge-reagendar,
.fc-cita-reagendar .fc-evt-badge-reagendar {
  background: #9a3412;
  color: #fff;
}

#modalNuevaCita .cita-asistentes-table-wrap {
  overflow-x: auto;
  border: 1px solid #eadfce;
  border-radius: 14px;
  background: #fff;
}

#modalNuevaCita .cita-asistentes-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.86rem;
}

#modalNuevaCita .cita-asistentes-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #8a7a67;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #eadfce;
  white-space: nowrap;
}

#modalNuevaCita .cita-asistentes-table td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid #f3eee8;
  vertical-align: middle;
  color: #2f2a25;
}

#modalNuevaCita .cita-asistentes-table tr:last-child td {
  border-bottom: 0;
}

#modalNuevaCita .cita-asistente-tipo-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  background: #f3eee8;
  color: #5e5247;
}

#modalNuevaCita .cita-asistente-tipo-pill.is-proveedor {
  background: #f3e8ff;
  color: #6b21a8;
}

#modalNuevaCita .cita-asistente-tipo-pill.is-cliente {
  background: #ecfdf5;
  color: #047857;
}

#modalNuevaCita .cita-asistente-tipo-pill.is-contacto {
  background: #eef2ff;
  color: #3730a3;
}

#modalNuevaCita .cita-asistente-canales {
  display: inline-flex;
  gap: 0.35rem;
  color: #7a736b;
}

#modalNuevaCita .cita-asistente-canales .is-on {
  color: #2f2a25;
}

#modalNuevaCita .cita-asistentes-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: #f8f3ed;
  color: #5e5247;
  font-size: 0.82rem;
  line-height: 1.4;
}

#modalNuevaCita .cita-asistentes-tip i {
  margin-top: 0.15rem;
  color: #c4a574;
}

#cita_asistente_sugerencias {
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  border-radius: 12px;
  overflow: hidden;
}

#modalNuevaCita .cita-add-asistente-btn {
  min-height: 42px;
  border-radius: 10px;
  font-weight: 800;
  white-space: nowrap;
}

#modalNuevaCita .cita-reminder-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  min-height: 42px;
}

#modalNuevaCita .cita-reminder-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 43px;
  height: 34px;
  border: 1px solid #d9cbbb;
  border-radius: 999px;
  background: #fff;
  color: #5e5247;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

#modalNuevaCita .cita-reminder-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#modalNuevaCita .cita-reminder-pill:has(input:checked) {
  background: #2f2a25;
  border-color: #2f2a25;
  color: #fff;
  box-shadow: 0 4px 12px rgba(47, 42, 37, 0.12);
}

#modalNuevaCita .cita-reminder-pill:hover {
  border-color: #9b8065;
}

#modalNuevaCita .cita-help-inline {
  font-size: 0.78rem;
  color: #8a7a67;
  margin-top: 0.35rem;
}

#modalNuevaCita .cita-whatsapp-preview {
  margin-top: 0.75rem;
}

#modalNuevaCita .cita-whatsapp-preview-kicker {
  font-size: 0.78rem;
  font-weight: 800;
  color: #6b6258;
  margin-bottom: 0.4rem;
}

#modalNuevaCita .cita-whatsapp-preview-bubble {
  max-width: 36rem;
  background: #d9fdd3;
  border: 1px solid #b6e6ad;
  border-radius: 14px 14px 14px 4px;
  padding: 0.7rem 0.85rem;
  color: #1f2a23;
  font-size: 0.88rem;
  line-height: 1.4;
  white-space: pre-wrap;
  box-shadow: 0 6px 16px rgba(47, 42, 37, 0.06);
}

#modalNuevaCita .cita-whatsapp-preview-bubble strong {
  font-weight: 800;
}

#modalNuevaCita .cita-whatsapp-preview.is-off .cita-whatsapp-preview-bubble {
  display: none;
}

#modalNuevaCita .cita-whatsapp-preview.is-off .cita-whatsapp-preview-kicker {
  font-weight: 600;
  color: #8a7a67;
}

#modalNuevaCita .cita-recordatorio-preview {
  display: none;
}

#modalNuevaCita .cita-recordatorio-pasado {
  border: 1px solid #f2c078;
  background: #fff7ed;
  color: #7c4a03;
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  font-size: 0.86rem;
  margin-top: 0.75rem;
}

#modalNuevaCita .cita-recordatorio-pasado .form-check-input {
  cursor: pointer;
}

#modalNuevaCita .cita-asistentes-list-wrap {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #eadfce;
}

#modalNuevaCita .cita-asistentes-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

#modalNuevaCita .cita-panel-title {
  font-weight: 800;
  color: #2f2a25;
  font-size: 0.95rem;
}

#modalNuevaCita .cita-asistentes-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

#modalNuevaCita .cita-asistentes-empty {
  border: 1px dashed #d9cbbb;
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
  color: #8a7a67;
  background: #fffaf4;
  font-size: 0.9rem;
}

#modalNuevaCita .cita-asistente-card {
  border: 1px solid #e0d4c6;
  background: #fff;
  border-radius: 14px;
  padding: 0.7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: start;
}

#modalNuevaCita .cita-asistente-name {
  font-weight: 800;
  color: #2f2a25;
  line-height: 1.2;
}

#modalNuevaCita .cita-asistente-meta {
  font-size: 0.8rem;
  color: #7a736b;
  margin-top: 0.15rem;
}

#modalNuevaCita .cita-asistente-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.55rem;
}

#modalNuevaCita .cita-asistente-whatsapp {
  min-width: 118px;
  max-width: 145px;
  min-height: 34px;
  font-size: 0.84rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

#modalNuevaCita .cita-asistente-card .cita-reminder-pill {
  min-width: 38px;
  height: 32px;
  font-size: 0.76rem;
}

#modalNuevaCita .cita-asistente-aviso-preview {
  margin-top: 0.5rem;
  border-radius: 10px;
  background: #f8f3ed;
  border: 1px solid #eadfce;
  color: #5f5348;
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.35;
}

#modalNuevaCita .cita-asistente-aviso-preview.is-ok {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

#modalNuevaCita .cita-asistente-aviso-preview.is-warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

#modalNuevaCita .cita-asistente-aviso-preview.is-muted {
  background: #f8f3ed;
  border-color: #eadfce;
  color: #8a7a67;
}

#modalNuevaCita .cita-asistente-aviso-preview strong {
  color: inherit;
  font-weight: 800;
}

#modalNuevaCita .cita-asistente-delete {
  border: 0;
  background: transparent;
  color: #8a7a67;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
}

#modalNuevaCita .cita-asistente-delete:hover {
  color: #d9534f;
}

#modalNuevaCita #btnEliminarCita {
  border-radius: 10px;
  font-weight: 700;
}

#modalNuevaCita .cita-google-card {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  border-radius: 16px;
  padding: 0.85rem;
}

#modalNuevaCita .cita-google-card.is-linked {
  border-color: #86efac;
  background: #f0fdf4;
}

#modalNuevaCita .cita-google-card.is-error {
  border-color: #fecaca;
  background: #fef2f2;
}

#modalNuevaCita .cita-google-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#modalNuevaCita .cita-google-linked-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

#modalNuevaCita .cita-google-linked-badge.is-error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

#modalNuevaCita .cita-google-card .form-check-input {
  cursor: pointer;
}

#modalNuevaCita .cita-google-title {
  font-weight: 900;
  color: #1e3a8a;
}

#modalNuevaCita .cita-google-mark {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

#modalNuevaCita .cita-google-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

#modalNuevaCita .cita-google-card.is-linked .cita-google-title {
  color: #14532d;
}

#modalNuevaCita .cita-google-subtitle {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.3;
}

#modalNuevaCita .cita-google-status {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 0.45rem;
}

#modalNuevaCita .cita-google-event-info {
  margin-top: 0.65rem;
  border-radius: 10px;
  padding: 0.45rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 650;
  background: rgba(22, 101, 52, 0.08);
  color: #166534;
}

#modalNuevaCita .cita-google-event-info.is-error {
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
}

#modalNuevaCita .cita-google-event-info a {
  font-weight: 800;
  text-decoration: underline;
}

#modalNuevaCita .cita-google-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
  align-items: start;
}

#modalNuevaCita .cita-google-option {
  min-width: 0;
}

@container cita-form (max-width: 1180px) {
  .cita-compact-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(9rem, 0.8fr) repeat(3, minmax(7rem, 0.7fr));
  }
  .cita-field-place {
    grid-column: 1 / -1;
  }
  .cita-asistentes-row {
    grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.4fr) minmax(9rem, 0.85fr);
  }
  .cita-add-asistente-wrap {
    grid-column: 1 / -1;
  }
}
@media (min-width: 992px) {
  #modalNuevaCita .modal-cita-dialog {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
  }
}
@media (max-width: 1399.98px) {
  #modalNuevaCita .cita-compact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr) minmax(118px, 0.55fr) minmax(118px, 0.55fr);
  }
  #modalNuevaCita .cita-field-place {
    grid-column: 1/-1;
  }
  #modalNuevaCita .cita-asistentes-row {
    grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.4fr) minmax(140px, 0.85fr);
  }
  #modalNuevaCita .cita-add-asistente-wrap {
    grid-column: 1 / -1;
  }
}
@media (max-width: 991.98px) {
  #modalNuevaCita .cita-compact-grid,
  #modalNuevaCita .cita-asistentes-row,
  #modalNuevaCita .cita-google-options {
    grid-template-columns: 1fr;
  }
  #modalNuevaCita .cita-field-title,
  #modalNuevaCita .cita-field-place,
  #modalNuevaCita .cita-add-asistente-wrap {
    grid-column: 1/-1;
  }
  #modalNuevaCita .cita-add-asistente-btn {
    width: 100%;
  }
  #modalNuevaCita .cita-asistentes-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  #modalNuevaCita .modal-dialog {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem) !important;
    height: calc(100% - 1rem);
    max-height: calc(100vh - 1rem);
    margin: 0.5rem auto;
  }
  #modalNuevaCita .modal-cita-content {
    max-height: calc(100vh - 1rem);
  }
  #modalNuevaCita .modal-body {
    max-height: none;
    padding: 0.8rem;
  }
  #modalNuevaCita .cita-section {
    padding: 0.75rem;
  }
  #modalNuevaCita .cita-compact-grid,
  #modalNuevaCita .cita-asistentes-row {
    grid-template-columns: 1fr;
  }
  #modalNuevaCita .cita-asistente-card {
    position: relative;
    grid-template-columns: 1fr;
    padding-right: 2.3rem;
  }
  #modalNuevaCita .cita-asistente-delete {
    position: absolute;
    right: 0.7rem;
    top: 0.7rem;
  }
  #modalNuevaCita .modal-footer {
    align-items: stretch !important;
  }
  #modalNuevaCita .modal-footer .modal-footer-actions {
    width: 100%;
  }
  #modalNuevaCita .modal-footer .modal-footer-actions .btn {
    flex: 1;
  }
  #modalNuevaCita #btnEliminarCita {
    width: 100%;
  }
}
/* ===== extracted from templates/organizador/citas/index.twig ===== */
:root {
  --el-bg: #f8f6f1;
  --el-card: #ffffff;
  --el-border: #ece7dc;
  --el-text: #2f2a24;
  --el-muted: #7a7167;
  --el-primary: #8b6f52;
  --el-primary-dark: #6f563f;
  --el-primary-soft: #f4ede6;
  --el-warning-soft: #fff7ed;
  --el-danger-soft: #fef2f2;
  --el-success-soft: #ecfdf5;
  --el-info-soft: #edf4f8;
  --el-radius: 18px;
  --el-shadow: 0 12px 28px rgba(31, 25, 18, .06);
}

.citas-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  min-height: 0;
}

.citas-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.citas-title h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--el-text);
}

.citas-title p {
  margin: 0.25rem 0 0;
  color: var(--el-muted);
}

.citas-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.citas-kpi {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  padding: 1rem;
  box-shadow: var(--el-shadow);
}

.citas-kpi-label {
  font-size: 0.78rem;
  color: var(--el-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.citas-kpi-number {
  margin-top: 0.25rem;
  font-size: 1.65rem;
  font-weight: 850;
  color: var(--el-text);
  line-height: 1;
}

.citas-filters {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  padding: 1rem;
  box-shadow: var(--el-shadow);
  margin-bottom: 1rem;
}

.citas-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.cita-card {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  box-shadow: var(--el-shadow);
  padding: 1rem;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

.cita-date {
  border-radius: 16px;
  background: var(--el-primary-soft);
  color: var(--el-primary);
  padding: 0.75rem 0.5rem;
  text-align: center;
  min-width: 78px;
}

.cita-date-day {
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.cita-date-month {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.cita-time {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6f563f;
}

.cita-title {
  font-size: 1.02rem;
  font-weight: 850;
  color: var(--el-text);
  margin-bottom: 0.25rem;
}

.cita-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  color: var(--el-muted);
  font-size: 0.86rem;
  margin-bottom: 0.35rem;
}

.cita-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.cita-meta a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.cita-meta a:hover {
  text-decoration: underline;
}

.cita-propietario {
  margin-top: 0.4rem;
  color: #7a736b;
  font-size: 0.85rem;
}

.cita-description {
  margin-top: 0.35rem;
  color: var(--el-muted);
  font-size: 0.86rem;
}

.cita-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.cita-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 750;
  border: 1px solid transparent;
}

.cita-badge.neutral {
  background: var(--el-primary-soft);
  color: var(--el-primary);
  border-color: rgba(139, 111, 82, 0.14);
}

.cita-badge.warning {
  background: var(--el-warning-soft);
  color: #9a3412;
  border-color: #fed7aa;
}

.cita-badge.success {
  background: var(--el-success-soft);
  color: #047857;
  border-color: #bbf7d0;
}

.cita-badge.danger {
  background: var(--el-danger-soft);
  color: #b42318;
  border-color: #fecaca;
}

.cita-badge.info {
  background: var(--el-info-soft);
  color: #376174;
  border-color: rgba(55, 97, 116, 0.12);
}

.cita-badge.google {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.cita-whatsapp {
  margin-top: 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--el-border);
  background: #fbfaf7;
  padding: 0.75rem;
}

.cita-whatsapp-title {
  font-size: 0.82rem;
  font-weight: 850;
  color: var(--el-text);
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.cita-whatsapp-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cita-whatsapp-item {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.35;
  border: 1px solid var(--el-border);
  background: #fff;
  color: var(--el-muted);
}

.cita-whatsapp-item strong {
  color: var(--el-text);
}

.cita-whatsapp-item.pendiente,
.cita-whatsapp-item.programado,
.cita-whatsapp-item.procesando {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.cita-whatsapp-item.enviado {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

.cita-whatsapp-item.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b42318;
}

.cita-whatsapp-item.cancelado {
  background: #f8f3ed;
  border-color: #eadfce;
  color: #8a7a67;
}

.cita-whatsapp-error {
  margin-left: 1.35rem;
  color: #b42318;
  font-size: 0.76rem;
  background: #fffafa;
  border-left: 3px solid #fecaca;
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
}

.cita-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
  min-width: 128px;
}

.cita-actions .btn {
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

.citas-empty {
  background: var(--el-card);
  border: 1px dashed var(--el-border);
  border-radius: var(--el-radius);
  padding: 2rem;
  text-align: center;
  color: var(--el-muted);
}

@media (max-width: 991.98px) {
  .citas-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cita-card {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  .cita-actions {
    grid-column: 1/-1;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
}
@media (max-width: 767.98px) {
  .citas-page {
    margin: 0;
    padding: 0;
  }
  .citas-header {
    flex-direction: column;
  }
  .citas-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cita-card {
    grid-template-columns: 1fr;
  }
  .cita-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
  }
  .cita-date-main {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
  }
  .cita-time {
    margin-top: 0;
  }
}
@media (max-width: 420px) {
  .citas-kpis {
    grid-template-columns: 1fr;
  }
}
/* ===== extracted from templates/organizador/configuracion/google-calendar.twig ===== */
.integration-page {
  padding: 1.5rem;
}

.integration-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.integration-header {
  padding: 1.25rem 1.35rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.integration-title {
  margin: 0;
  color: #111827;
  font-size: 1.45rem;
  font-weight: 900;
}

.integration-subtitle {
  margin: 0.35rem 0 0;
  color: #64748b;
}

.integration-body {
  padding: 1.35rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-weight: 800;
  font-size: 0.83rem;
}

.status-ok {
  background: #ecfdf5;
  color: #047857;
}

.status-error {
  background: #fef2f2;
  color: #b91c1c;
}

.status-off {
  background: #f3f4f6;
  color: #4b5563;
}

.integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.google-box {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1rem;
  background: #f8fafc;
}

.google-box dl {
  margin: 0;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 0.5rem 1rem;
}

.google-box dt {
  color: #64748b;
  font-weight: 700;
}

.google-box dd {
  margin: 0;
  color: #111827;
  word-break: break-word;
}

.google-help {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
  color: #92400e;
  font-size: 0.92rem;
  line-height: 1.45;
}

@media (max-width: 768px) {
  .integration-page {
    padding: 1rem;
  }
  .integration-header {
    flex-direction: column;
  }
  .google-box dl {
    grid-template-columns: 1fr;
  }
}
/* ===== extracted from templates/organizador/configuracion/roles.twig ===== */
.el-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
  overflow: hidden;
}

.el-card-header {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.el-card-title {
  font-weight: 900;
  margin: 0;
}

.el-card-subtitle {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: rgba(0, 0, 0, 0.58);
  font-weight: 700;
}

.el-card-body {
  padding: 18px;
}

.mini-muted {
  color: rgba(0, 0, 0, 0.58);
  font-size: 0.82rem;
  font-weight: 700;
}

.btn-pill {
  border-radius: 999px;
  font-weight: 800;
}

.el-role-table th,
.el-role-table td {
  vertical-align: middle;
}

.el-role-name {
  font-weight: 900;
  color: #212529;
}

.el-role-code {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.el-badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.72);
}

.el-badge-soft.system {
  background: #f2f5ff;
  border-color: rgba(30, 79, 167, 0.22);
  color: #1e4fa7;
}

.el-badge-soft.org {
  background: #fff8ef;
  border-color: rgba(196, 154, 60, 0.22);
  color: #a07b24;
}

.el-badge-soft.success {
  background: #eefbf8;
  border-color: rgba(15, 111, 102, 0.22);
  color: #0f6f66;
}

.el-badge-soft.muted {
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.55);
}

.perm-matrix-table th,
.perm-matrix-table td {
  vertical-align: middle;
  text-align: center;
}

.perm-matrix-table th.modulo-col,
.perm-matrix-table td.modulo-col {
  text-align: left;
  min-width: 180px;
  font-weight: 800;
}

.perm-special-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px;
  margin-top: 14px;
  background: #fff;
}

.perm-special-title {
  font-weight: 900;
  margin-bottom: 10px;
}

.perm-special-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.32rem 0;
}

.users-role-box {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px;
  margin-top: 14px;
  background: #fff;
}

.users-role-title {
  font-weight: 900;
  margin-bottom: 10px;
}

.permisos-scroll-box {
  max-height: 45vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
}

.sticky-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 3;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ===== extracted from templates/organizador/dashboard.twig ===== */
:root {
  --el-bg: #f8f6f1;
  --el-card: #ffffff;
  --el-border: #ece7dc;
  --el-text: #2f2a24;
  --el-muted: #7a7167;
  --el-primary: #8b6f52;
  --el-primary-dark: #6f563f;
  --el-primary-soft: #f4ede6;
  --el-taupe: #b79b7b;
  --el-taupe-soft: #f5eee6;
  --el-warning-soft: #fff3cd;
  --el-danger-soft: #fdecec;
  --el-success-soft: #eaf5ee;
  --el-info-soft: #edf4f8;
  --el-radius: 18px;
  --el-shadow: 0 12px 28px rgba(31, 25, 18, .06);
}

.dashboard-page {
  background: var(--el-bg);
  margin: -1.5rem;
  padding: 1.5rem;
  min-height: calc(100vh - 80px);
}

.dashboard-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.dashboard-title h1 {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 750;
  color: var(--el-text);
}

.dashboard-title .subtitle {
  color: var(--el-muted);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

.dashboard-top-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.dashboard-action-btn {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--el-border);
  background: #fff;
  color: var(--el-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(31, 25, 18, 0.04);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.dashboard-action-btn:hover {
  transform: translateY(-1px);
  background: #fbfaf7;
  color: var(--el-text);
  border-color: rgba(139, 111, 82, 0.25);
}

.dashboard-action-btn.primary {
  background: var(--el-primary);
  color: #fff;
  border-color: var(--el-primary);
}

.dashboard-action-btn.primary:hover {
  background: var(--el-primary-dark);
  color: #fff;
  border-color: var(--el-primary-dark);
}

.dashboard-action-btn.icon-only {
  width: 40px;
  height: 40px;
  padding: 0;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-kpi {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  padding: 1rem;
  box-shadow: var(--el-shadow);
  display: flex;
  gap: 0.85rem;
  align-items: center;
  min-height: 104px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.dashboard-kpi:hover {
  color: inherit;
  transform: translateY(-1px);
  transition: transform 0.15s ease;
}

.dashboard-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--el-primary-soft);
  color: var(--el-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.dashboard-kpi-icon.taupe {
  background: var(--el-taupe-soft);
  color: #7b5f42;
}

.dashboard-kpi-icon.warning {
  background: var(--el-warning-soft);
  color: #9a6900;
}

.dashboard-kpi-icon.danger {
  background: var(--el-danger-soft);
  color: #b42318;
}

.dashboard-kpi-icon.success {
  background: var(--el-success-soft);
  color: #207348;
}

.dashboard-kpi-label {
  font-size: 0.82rem;
  color: var(--el-muted);
  margin-bottom: 0.2rem;
  line-height: 1.15;
}

.dashboard-kpi-number {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  color: var(--el-text);
}

.dashboard-kpi-note {
  font-size: 0.78rem;
  color: var(--el-muted);
  margin-top: 0.35rem;
  line-height: 1.2;
}

.dashboard-masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  align-items: start;
}

.dashboard-masonry-item {
  grid-row-end: span 1;
  min-width: 0;
}

.dashboard-masonry-card {
  width: 100%;
}

.dash-card {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  box-shadow: var(--el-shadow);
  overflow: hidden;
}

.dash-card-header {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--el-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dash-card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 750;
  color: var(--el-text);
  min-width: 0;
}

.dash-card-title i {
  color: var(--el-primary);
  flex-shrink: 0;
}

.dash-card-body {
  padding: 1rem;
}

.dash-empty {
  color: var(--el-muted);
  padding: 1rem;
  background: #fbfaf7;
  border-radius: 14px;
  border: 1px dashed var(--el-border);
}

.dash-info-box {
  color: var(--el-text);
  padding: 0.8rem 0.9rem;
  background: #fbfaf7;
  border-radius: 14px;
  border: 1px solid var(--el-border);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.dash-info-box a {
  color: var(--el-primary);
  font-weight: 700;
  text-decoration: none;
}

.dash-info-box a:hover {
  text-decoration: underline;
}

.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 650;
  background: var(--el-primary-soft);
  color: var(--el-primary);
  border: 1px solid rgba(139, 111, 82, 0.12);
  white-space: nowrap;
}

.dash-chip.taupe {
  background: var(--el-taupe-soft);
  color: #7b5f42;
  border-color: rgba(183, 155, 123, 0.18);
}

.dash-chip.warning {
  background: var(--el-warning-soft);
  color: #9a6900;
  border-color: rgba(217, 119, 6, 0.15);
}

.dash-chip.danger {
  background: var(--el-danger-soft);
  color: #b42318;
  border-color: rgba(180, 35, 24, 0.12);
}

.dash-chip.success {
  background: var(--el-success-soft);
  color: #207348;
  border-color: rgba(32, 115, 72, 0.12);
}

.dash-chip.info {
  background: var(--el-info-soft);
  color: #376174;
  border-color: rgba(55, 97, 116, 0.12);
}

.dashboard-google-sync {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.dashboard-google-sync .dash-chip {
  font-size: 0.74rem;
  padding: 0.28rem 0.55rem;
}

.dashboard-google-sync-error {
  margin-top: 0.35rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #b42318;
  background: #fffafa;
  border-left: 3px solid #fecaca;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
}

.filters-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.filters-row .btn {
  border-radius: 999px;
}

.agenda-day {
  margin-bottom: 1rem;
}

.agenda-day:last-child {
  margin-bottom: 0;
}

.agenda-date {
  font-size: 0.82rem;
  color: var(--el-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.65rem;
}

.agenda-item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.8rem;
  border-radius: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.agenda-item:hover {
  background: #fbfaf7;
  border-color: var(--el-border);
  transform: translateY(-1px);
}

.agenda-time {
  font-size: 0.85rem;
  color: var(--el-muted);
  font-weight: 700;
  white-space: nowrap;
}

.agenda-title {
  font-weight: 750;
  color: var(--el-text);
  margin-bottom: 0.15rem;
}

.agenda-meta {
  font-size: 0.84rem;
  color: var(--el-muted);
}

.agenda-extra {
  font-size: 0.82rem;
  color: var(--el-muted);
  margin-top: 0.3rem;
}

.agenda-extra a {
  color: var(--el-primary);
  text-decoration: none;
}

.agenda-extra a:hover {
  text-decoration: underline;
}

.dashboard-whatsapp-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.dashboard-whatsapp-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: #fbfaf7;
  border: 1px solid var(--el-border);
  color: var(--el-muted);
}

.dashboard-whatsapp-item strong {
  color: var(--el-text);
  font-weight: 800;
}

.dashboard-whatsapp-icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.65);
}

.dashboard-whatsapp-text {
  min-width: 0;
  width: 100%;
}

.dashboard-whatsapp-main {
  font-size: 0.83rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
  color: inherit;
}

.dashboard-whatsapp-phone {
  color: inherit;
  font-weight: 500;
}

.dashboard-whatsapp-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem 0.65rem;
  font-size: 0.74rem;
  line-height: 1.3;
}

.dashboard-whatsapp-details span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.dashboard-whatsapp-preview {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(139, 111, 82, 0.25);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  color: #5f5348;
}

.dashboard-whatsapp-preview strong {
  color: var(--el-text);
}

.dashboard-whatsapp-error {
  font-size: 0.75rem;
  color: #b42318;
  background: #fffafa;
  border-left: 3px solid #fecaca;
  padding: 0.35rem 0.5rem;
  margin-top: 0.4rem;
  border-radius: 8px;
  line-height: 1.35;
}

.dashboard-whatsapp-tag-warning {
  color: #9a3412;
  font-weight: 700;
}

.dashboard-whatsapp-tag-muted {
  color: #8a7a67;
  font-weight: 700;
}

.dashboard-whatsapp-provider-id {
  color: #8a7a67;
  font-size: 0.72rem;
  word-break: break-all;
}

.dashboard-whatsapp-item.pendiente,
.dashboard-whatsapp-item.programado,
.dashboard-whatsapp-item.procesando {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.dashboard-whatsapp-item.enviado {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

.dashboard-whatsapp-item.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b42318;
}

.dashboard-whatsapp-item.cancelado {
  background: #f8f3ed;
  border-color: #eadfce;
  color: #8a7a67;
}

.agenda-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
}

.agenda-delete-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(180, 35, 24, 0.18);
  background: #fff;
  color: #b42318;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.agenda-delete-btn:hover {
  background: var(--el-danger-soft);
  border-color: rgba(180, 35, 24, 0.3);
  transform: translateY(-1px);
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 0.85rem;
  border-radius: 16px;
  border: 1px solid var(--el-border);
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.event-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(31, 25, 18, 0.06);
  border-color: rgba(139, 111, 82, 0.25);
  color: inherit;
}

.event-date {
  width: 62px;
  min-height: 68px;
  border-radius: 16px;
  background: var(--el-primary-soft);
  color: var(--el-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.event-date .day {
  font-size: 1.5rem;
  font-weight: 850;
}

.event-date .month {
  font-size: 0.78rem;
  font-weight: 750;
  margin-top: 0.35rem;
  text-transform: uppercase;
}

.event-name {
  font-weight: 800;
  color: var(--el-text);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  font-size: 0.82rem;
  color: var(--el-muted);
}

.event-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.alert-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.alert-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.75rem;
  border-radius: 14px;
  background: #fbfaf7;
  border: 1px solid var(--el-border);
}

.alert-item i {
  margin-top: 0.15rem;
}

.alert-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--el-text);
}

.alert-meta {
  font-size: 0.78rem;
  color: var(--el-muted);
  margin-top: 0.15rem;
}

.alert-meta a {
  color: var(--el-primary);
  text-decoration: none;
}

.alert-meta a:hover {
  text-decoration: underline;
}

.attention-mini-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.attention-mini-item {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.attention-mini-item:hover {
  background: #fffafa;
  transform: translateY(-1px);
  border-color: rgba(180, 35, 24, 0.18);
  color: inherit;
}

.attention-mini-title {
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--el-text);
  line-height: 1.25;
}

.attention-mini-meta {
  font-size: 0.76rem;
  color: var(--el-muted);
  margin-top: 0.2rem;
}

@media (min-width: 1200px) {
  .dashboard-masonry {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  }
}
@media (min-width: 1600px) {
  .dashboard-masonry {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1399.98px) {
  .dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .dashboard-page {
    margin: -1rem;
    padding: 1rem;
  }
  .dashboard-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-title h1 {
    font-size: 1.45rem;
  }
  .dashboard-top-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .dashboard-action-btn {
    flex-shrink: 0;
  }
  .dashboard-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .dashboard-kpi {
    padding: 0.7rem;
    min-height: 86px;
    gap: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border-radius: 16px;
  }
  .dashboard-kpi-icon {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    border-radius: 12px;
  }
  .dashboard-kpi-label {
    font-size: 0.72rem;
    margin-bottom: 0.15rem;
  }
  .dashboard-kpi-number {
    font-size: 1.25rem;
  }
  .dashboard-kpi-note {
    display: none;
  }
  .dash-card-header {
    padding: 0.9rem;
    align-items: flex-start;
  }
  .dash-card-body {
    padding: 0.9rem;
  }
  .filters-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .filters-row .btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .agenda-item {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.75rem 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--el-border);
  }
  .agenda-item:last-child {
    border-bottom: 0;
  }
  .agenda-actions {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.25rem;
  }
  .agenda-delete-btn {
    width: 32px;
    height: 32px;
  }
  .dashboard-whatsapp-item {
    font-size: 0.76rem;
    padding: 0.45rem 0.5rem;
  }
  .dashboard-whatsapp-list {
    margin-top: 0.35rem;
  }
  .dashboard-whatsapp-details {
    flex-direction: column;
    gap: 0.25rem;
  }
  .event-card {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 0.75rem;
  }
  .event-date {
    width: 54px;
    min-height: 60px;
    border-radius: 14px;
  }
  .event-date .day {
    font-size: 1.3rem;
  }
  .event-card > .dash-chip {
    grid-column: 2;
    justify-self: flex-start;
    margin-top: 0.25rem;
  }
  .event-name {
    white-space: normal;
  }
  .event-meta {
    flex-direction: column;
    gap: 0.25rem;
  }
}
@media (max-width: 575.98px) {
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .dashboard-kpi {
    min-height: 82px;
  }
}
@media (max-width: 420px) {
  .dashboard-action-btn {
    padding-inline: 0.7rem;
    font-size: 0.82rem;
  }
  .dashboard-action-btn.icon-only {
    width: 38px;
    height: 38px;
  }
}
@media (max-width: 360px) {
  .dashboard-kpis {
    grid-template-columns: 1fr;
  }
  .dashboard-kpi {
    flex-direction: row;
    align-items: center;
    min-height: 82px;
  }
}
/* ===== extracted from templates/organizador/evento/calidad/evaluar.twig ===== */
.q-card {
  border: 1px solid #eee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}

.q-field {
  border: 1px solid #f0ece7;
  border-radius: 14px;
  padding: 1rem;
  background: #fcfbfa;
  height: 100%;
}

.q-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.q-rating {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.q-rating input {
  display: none;
}

.q-rating span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #d9d1c7;
  background: #fff;
  cursor: pointer;
}

.q-rating input:checked + span {
  background: #243149;
  color: #fff;
  border-color: #243149;
}

.ws-prov-table-wrap {
  width: 100%;
}

.ws-prov-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.ws-prov-table thead th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6f665d;
  border-bottom: 1px solid #eadfce;
  border-top: 1px solid #eadfce;
  background: #faf7f2;
  vertical-align: middle;
  padding: 0.85rem 0.75rem;
}

.ws-prov-table thead th:first-child {
  border-left: 1px solid #eadfce;
  border-top-left-radius: 14px;
}

.ws-prov-table thead th:last-child {
  border-right: 1px solid #eadfce;
  border-top-right-radius: 14px;
}

.ws-prov-table tbody td {
  vertical-align: top;
  border-bottom: 1px solid #f1ebe3;
  border-left: 1px solid #f6f1ea;
  padding: 0.9rem 0.75rem;
  background: #fff;
}

.ws-prov-table tbody td:last-child {
  border-right: 1px solid #f6f1ea;
}

.ws-prov-table tbody tr:hover td {
  background: #fcfaf7;
}

.ws-prov-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px;
}

.ws-prov-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px;
}

.ws-prov-col-prov {
  min-width: 240px;
  background: #fcfbfa !important;
}

.ws-prov-name {
  font-weight: 700;
  color: #2f2a25;
  margin-bottom: 0.15rem;
}

.ws-prov-cat {
  font-size: 0.84rem;
  color: #8a7a67;
}

.ws-rating-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ws-rating-chip input {
  display: none;
}

.ws-rating-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #d9d1c7;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

.ws-rating-chip input:checked + span {
  background: #243149;
  color: #fff;
  border-color: #243149;
}

.ws-prov-table .form-control,
.ws-prov-table .form-select {
  border-radius: 10px;
  border-color: #ddd3c7;
  background: #fff;
  min-height: 36px;
}

.ws-prov-table textarea.form-control {
  min-width: 220px;
  resize: vertical;
}

.ws-cell-label {
  display: none;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a7a67;
  margin-bottom: 0.35rem;
}

@media (max-width: 991.98px) {
  .ws-prov-table,
  .ws-prov-table thead,
  .ws-prov-table tbody,
  .ws-prov-table th,
  .ws-prov-table td,
  .ws-prov-table tr {
    display: block;
    width: 100%;
  }
  .ws-prov-table thead {
    display: none;
  }
  .ws-prov-table tbody tr {
    border: 1px solid #eadfce;
    border-radius: 16px;
    background: #fcfbfa;
    padding: 0.9rem;
    margin-bottom: 1rem;
  }
  .ws-prov-table tbody td {
    border: 0;
    padding: 0.45rem 0;
    background: transparent !important;
  }
  .ws-cell-label {
    display: block;
  }
  .ws-prov-col-prov {
    min-width: auto;
  }
}
/* ===== extracted from templates/organizador/evento/calidad/evaluar_bloque.twig ===== */
.q-card {
  border: 1px solid #eee3d4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.q-entity {
  border: 1px solid #eadfce;
  border-radius: 16px;
  background: #fffdf9;
}

.q-entity-head {
  border-bottom: 1px solid #f0e6d9;
  padding: 1rem 1.25rem;
  background: #faf7f2;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.q-entity-body {
  padding: 1.25rem;
}

.q-meta {
  color: #8a7a67;
  font-size: 0.9rem;
}

/* ===== extracted from templates/organizador/evento/calidad/index.twig ===== */
.qc-card {
  border: 1px solid #eadfce;
  border-radius: 18px;
  background: #fff;
}

.qc-mini {
  border: 1px solid #eee3d4;
  border-radius: 14px;
  background: #fcfaf7;
  padding: 0.85rem 1rem;
}

.qc-mini-label {
  font-size: 0.78rem;
  color: #8a755e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.qc-mini-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2f2a25;
}

.qc-muted {
  color: #8a755e;
}

.qc-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.qc-pending {
  background: #f3b02f;
  color: #fff;
}

.qc-progress {
  background: #efe2c8;
  color: #7b5c36;
  border-color: #dcc29d;
}

.qc-done {
  background: #e8f5ea;
  color: #1f6b38;
  border-color: #cfe8d3;
}

.qc-period {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #edf8ef;
  color: #1f6b38;
  border: 1px solid #cfe8d3;
}

.qc-table thead th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6d5d4b;
  background: #faf7f2;
  border-bottom: 1px solid #eadfce;
}

.qc-table td {
  vertical-align: middle;
  border-bottom: 1px solid #f0e8de;
}

.qc-title {
  font-weight: 700;
  color: #2f2a25;
}

.qc-desc {
  font-size: 0.88rem;
  color: #8a755e;
  margin-top: 0.15rem;
}

.qc-actions {
  display: inline-flex;
  gap: 0.45rem;
  justify-content: flex-end;
}

.qc-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid #dcc6a5;
  background: #fffaf3;
  color: #8b6a42;
}

.qc-icon-btn:hover {
  background: #f9f2e8;
  color: #7b5c36;
  text-decoration: none;
}

.qc-period-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: #8b6a42;
  text-decoration: none;
  font-weight: 600;
}

.qc-period-link:hover {
  color: #7b5c36;
  text-decoration: underline;
}

.qc-modal-sub {
  color: #85725d;
}

/* ===== extracted from templates/organizador/evento/calidad/index_empleado.twig ===== */
.q-card {
  border: 1px solid #eee3d4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.q-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
}

.q-status-pending {
  background: #f3b02f;
  color: #fff;
}

.q-status-progress {
  background: #ead7b6;
  color: #6d542f;
  border-color: #dcc29d;
}

.q-status-done {
  background: #25d4b5;
  color: #fff;
}

.q-empty {
  border: 1px dashed #ddd;
  border-radius: 14px;
  background: #fcfcfc;
  color: #7a736b;
  padding: 1rem;
}

.q-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  background: #f3b02f;
  color: #fff;
  font-weight: 700;
  min-width: 64px;
}

/* ===== extracted from templates/organizador/evento/calidad/index_supervisor.twig ===== */
.q-card {
  border: 1px solid #eee3d4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.q-kpi {
  border: 1px solid #eadfce;
  border-radius: 16px;
  background: #faf7f2;
  padding: 1rem;
  height: 100%;
}

.q-kpi-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2f2a25;
}

.q-kpi-label {
  color: #8a7a67;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.q-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  border: 1px solid transparent;
}

.q-chip-positive {
  background: #e7f7ee;
  color: #20744a;
  border-color: #cdebd9;
}

.q-chip-neutral {
  background: #f3efe7;
  color: #7a6a56;
  border-color: #e4d9ca;
}

.q-chip-negative {
  background: #fdecec;
  color: #b54747;
  border-color: #f4caca;
}

.q-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  font-size: 0.85rem;
}

.q-status-pending {
  background: #f3b02f;
  color: #fff;
}

.q-status-progress {
  background: #ead7b6;
  color: #6d542f;
  border-color: #dcc29d;
}

.q-status-done {
  background: #25d4b5;
  color: #fff;
}

.q-mini-card {
  border: 1px solid #eadfce;
  border-radius: 16px;
  background: #fffdf9;
  padding: 1rem;
  height: 100%;
}

.q-mini-title {
  font-weight: 700;
  color: #2f2a25;
  margin-bottom: 0.25rem;
  text-transform: capitalize;
}

.q-mini-meta {
  color: #8a7a67;
  font-size: 0.88rem;
}

.q-table thead th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6f665d;
  border-bottom: 1px solid #eadfce;
  background: #faf7f2;
}

/* ===== extracted from templates/organizador/evento/calidad/resumen.twig ===== */
.q-card {
  border: 1px solid #eee3d4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.q-kpi {
  border: 1px solid #eadfce;
  border-radius: 16px;
  background: #faf7f2;
  padding: 1rem;
}

.q-kpi-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2f2a25;
}

.q-kpi-label {
  color: #8a7a67;
  font-size: 0.9rem;
}

/* ===== extracted from templates/organizador/evento/calidad/revisar_bloque.twig ===== */
.q-card {
  border: 1px solid #eee3d4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.q-kpi {
  border: 1px solid #eadfce;
  border-radius: 16px;
  background: #faf7f2;
  padding: 1rem;
}

.q-kpi-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2f2a25;
}

.q-kpi-label {
  color: #8a7a67;
  font-size: 0.9rem;
}

.q-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  font-size: 0.85rem;
}

.q-status-pending {
  background: #f3b02f;
  color: #fff;
}

.q-status-progress {
  background: #ead7b6;
  color: #6d542f;
  border-color: #dcc29d;
}

.q-status-done {
  background: #25d4b5;
  color: #fff;
}

.q-btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8c5a9;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  background: #fffaf3;
  color: #8b6a42;
  font-weight: 700;
  text-decoration: none;
  transition: 0.18s ease;
}

.q-btn-soft:hover {
  background: #f9f2e8;
  color: #7b5c36;
  text-decoration: none;
}

.q-meta {
  color: #8a7a67;
  font-size: 0.88rem;
}

/* ===== extracted from templates/organizador/evento/calidad/ver_evaluacion.twig ===== */
.q-card {
  border: 1px solid #eee3d4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(110, 84, 52, 0.05);
}

.q-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  font-size: 0.85rem;
}

.q-chip-positive {
  background: #e8f7ef;
  color: #1f7a43;
  border-color: #ccebd9;
}

.q-chip-neutral {
  background: #f2f2f2;
  color: #666;
  border-color: #e1e1e1;
}

.q-chip-negative {
  background: #fff0f0;
  color: #a33;
  border-color: #f3d0d0;
}

.q-list-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: #faf7f2;
  border: 1px solid #eadfce;
  color: #6d5d4b;
  font-weight: 600;
  margin: 0.2rem 0.3rem 0.2rem 0;
}

/* ===== extracted from templates/organizador/evento/catering/index.twig ===== */
.cat-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.cat-subtitle {
  color: #7b7b7b;
  font-size: 0.92rem;
}

.cat-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.cat-kpi {
  background: #fff;
  border: 1px solid #ebe3da;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cat-kpi-label {
  font-size: 0.78rem;
  color: #7a7a7a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.cat-kpi-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  color: #2e2e2e;
}

.cat-kpi-help {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #8b8b8b;
}

.cat-card {
  border: 1px solid #ebe3da;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cat-card-header {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #efe7dd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cat-card-title {
  font-weight: 800;
  font-size: 1rem;
  color: #2f2f2f;
}

.cat-filter-card {
  border: 1px solid #ebe3da;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-bottom: 1rem;
}

.cat-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #787878;
  border-bottom: 1px solid #eee4d8;
}

.cat-table td,
.cat-table th {
  vertical-align: middle;
  border-color: #f1e7dc;
}

.cat-name {
  font-weight: 700;
  color: #2d2d2d;
}

.cat-subline {
  font-size: 0.82rem;
  color: #7d7d7d;
}

.cat-meta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cat-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid #ececec;
  background: #fafafa;
}

.cat-status-pill.ok {
  background: #edf8ef;
  border-color: #cfe8d3;
  color: #1f6b38;
}

.cat-status-pill.off {
  background: #f7f7f7;
  border-color: #e8e8e8;
  color: #777;
}

.cat-empty {
  text-align: center;
  color: #8b8b8b;
  padding: 2rem 1rem;
}

.cat-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  .cat-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .cat-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .cat-kpi {
    padding: 0.75rem;
    border-radius: 12px;
  }
  .cat-kpi-label {
    font-size: 0.65rem;
  }
  .cat-kpi-value {
    font-size: 1.15rem;
  }
  .cat-card,
  .cat-filter-card {
    border-radius: 12px;
  }
  .cat-card-header {
    padding: 0.8rem 0.85rem;
  }
  .cat-table thead {
    display: none;
  }
  .cat-table,
  .cat-table tbody,
  .cat-table tr,
  .cat-table td {
    display: block;
    width: 100%;
  }
  .cat-table tbody {
    padding: 0.5rem;
  }
  .cat-table tr {
    border: 1px solid #ebe3da;
    border-radius: 14px;
    margin-bottom: 0.65rem;
    padding: 0.7rem 0.75rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }
  .cat-table td {
    border: 0 !important;
    padding: 0.24rem 0 !important;
  }
  .cat-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 0.12rem;
    letter-spacing: 0.03em;
  }
  .cat-actions {
    justify-content: flex-start;
    padding-top: 0.2rem;
  }
}
/* ===== extracted from templates/organizador/evento/catering/servicio.twig ===== */
.cat-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.cat-subtitle {
  color: #7b7b7b;
  font-size: 0.92rem;
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #faf7f2;
  border: 1px solid #eadfce;
  font-size: 0.8rem;
  color: #6a5948;
  margin: 0.15rem 0.25rem 0.15rem 0;
}

.cat-chip.is-active {
  background: #edf8ef;
  border-color: #cfe8d3;
  color: #1f6b38;
}

.cat-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.cat-kpi {
  background: #fff;
  border: 1px solid #ebe3da;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cat-kpi-label {
  font-size: 0.78rem;
  color: #7a7a7a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.cat-kpi-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  color: #2e2e2e;
}

.cat-kpi-help {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #8b8b8b;
}

.cat-card {
  border: 1px solid #ebe3da;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cat-card-header {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #efe7dd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cat-card-title {
  font-weight: 800;
  font-size: 1rem;
  color: #2f2f2f;
}

.cat-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.cat-meta-item {
  background: #fcfaf7;
  border: 1px solid #efe6da;
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
}

.cat-meta-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a8a8a;
  margin-bottom: 0.2rem;
}

.cat-meta-value {
  font-size: 0.96rem;
  font-weight: 700;
  color: #2f2f2f;
}

.cat-panels {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cat-panel-body {
  padding: 1rem 1.1rem;
}

.cat-list-clean {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cat-list-clean li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f2ece5;
}

.cat-list-clean li:last-child {
  border-bottom: 0;
}

.cat-badge-soft {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  font-size: 0.72rem;
  border: 1px solid #ececec;
  background: #fafafa;
}

.cat-filter-card {
  border: 1px solid #ebe3da;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-bottom: 1rem;
}

.cat-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #787878;
  border-bottom: 1px solid #eee4d8;
}

.cat-table td,
.cat-table th {
  vertical-align: middle;
  border-color: #f1e7dc;
}

.cat-name {
  font-weight: 700;
  color: #2d2d2d;
}

.cat-subline {
  font-size: 0.82rem;
  color: #7d7d7d;
}

.cat-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #d0d0d0;
}

.cat-status-dot.is-ok {
  background: #27ae60;
}

.cat-status-dot.is-warn {
  background: #d4a017;
}

.cat-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.cat-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cat-empty {
  text-align: center;
  color: #8b8b8b;
  padding: 2rem 1rem;
}

.cat-print-note {
  font-size: 0.8rem;
  color: #8a8a8a;
}

@media (max-width: 1199.98px) {
  .cat-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cat-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cat-panels {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767.98px) {
  .cat-toolbar {
    gap: 0.7rem;
  }
  .cat-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .cat-kpi {
    padding: 0.75rem;
    border-radius: 12px;
  }
  .cat-kpi-label {
    font-size: 0.65rem;
  }
  .cat-kpi-value {
    font-size: 1.15rem;
  }
  .cat-meta-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .cat-card,
  .cat-filter-card {
    border-radius: 12px;
  }
  .cat-card-header,
  .cat-panel-body {
    padding: 0.8rem 0.85rem;
  }
  .cat-table thead {
    display: none;
  }
  .cat-table,
  .cat-table tbody,
  .cat-table tr,
  .cat-table td {
    display: block;
    width: 100%;
  }
  .cat-table tbody {
    padding: 0.5rem;
  }
  .cat-table tr {
    border: 1px solid #ebe3da;
    border-radius: 14px;
    margin-bottom: 0.65rem;
    padding: 0.7rem 0.75rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }
  .cat-table td {
    border: 0 !important;
    padding: 0.24rem 0 !important;
  }
  .cat-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 0.12rem;
    letter-spacing: 0.03em;
  }
  .cat-actions {
    justify-content: flex-start;
    padding-top: 0.2rem;
  }
}
/* ===== extracted from templates/organizador/evento/dashboard.twig ===== */
.el-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
  background: #fff;
}

.el-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.el-card-title {
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

.el-subtle {
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.92rem;
}

.el-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1600px) {
  .el-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1200px) {
  .el-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .el-kpi-grid {
    grid-template-columns: 1fr;
  }
}
.el-kpi {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  box-shadow: 0 10px 26px rgba(20, 30, 60, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
}

.el-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
  flex: 0 0 auto;
}

.el-kpi-icon i {
  font-size: 16px;
  line-height: 1;
  display: block;
  width: 1em;
  height: 1em;
}

.el-kpi-main {
  min-width: 0;
  flex: 1 1 auto;
}

.el-kpi-num {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}

.el-kpi-label {
  margin: 2px 0 0;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-kpi .el-subtle.mb-0 {
  margin: 3px 0 0;
  font-size: 0.82rem;
  line-height: 1.15;
  white-space: normal;
}

.el-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.el-list li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.el-list li:first-child {
  border-top: none;
}

.el-thumb {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.el-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.el-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.03);
}

.el-item-main {
  flex: 1 1 auto;
  min-width: 0;
}

.el-item-title {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.95rem;
}

.el-item-meta {
  margin: 2px 0 0;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-badge {
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  white-space: nowrap;
  flex: 0 0 auto;
}

.el-badge-green {
  background: rgba(25, 135, 84, 0.1);
  border-color: rgba(25, 135, 84, 0.18);
  color: #146c43;
}

.el-badge-yellow {
  background: rgba(255, 193, 7, 0.16);
  border-color: rgba(255, 193, 7, 0.25);
  color: #8a6d00;
}

.el-badge-red {
  background: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.22);
  color: #b02a37;
}

.el-empty {
  padding: 14px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.55);
}

.el-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.el-mini-row:first-child {
  border-top: none;
}

.el-mini-left {
  min-width: 0;
}

.el-mini-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-mini-sub {
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-card--citas .el-card-header {
  padding: 10px 12px;
}

.el-card--citas .el-list li {
  padding: 8px 12px;
  gap: 10px;
}

.el-card--citas .el-thumb {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.el-card--citas .el-item-title {
  font-size: 0.9rem;
  line-height: 1.15;
}

.el-card--citas .el-item-meta {
  font-size: 0.8rem;
  line-height: 1.15;
  margin-top: 1px;
}

.el-card--citas .el-list {
  max-height: 160px;
  overflow: auto;
}

.el-fin-grid {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}

.el-fin-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  font-size: 0.95rem;
}

.el-fin-line:last-child {
  border-bottom: none;
}

.el-fin-strong {
  font-weight: 700;
}

.el-donut {
  width: 130px;
  height: 130px;
  border-radius: 999px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}

.el-donut .center {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.15rem;
}

.el-proveedores-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

@media (max-width: 992px) {
  .el-proveedores-grid {
    grid-template-columns: 1fr;
  }
}
.el-proveedor-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #fff;
  transition: all 0.15s ease;
  color: inherit;
  text-decoration: none;
  width: 100%;
  min-width: 0;
  min-height: 86px;
}

.el-proveedor-card:hover {
  background: rgba(0, 0, 0, 0.03);
}

.el-proveedor-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.04);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.55);
}

.el-proveedor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.el-proveedor-info {
  min-width: 0;
}

.el-proveedor-nombre,
.el-proveedor-tipo {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-proveedor-nombre {
  font-weight: 600;
}

.el-proveedor-tipo {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.55);
}

.el-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  align-items: start;
}

.el-top-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (max-width: 1200px) {
  .el-top-grid {
    grid-template-columns: 1fr;
  }
}
.el-masonry {
  column-count: 2;
  column-gap: 16px;
}

@media (max-width: 1200px) {
  .el-masonry {
    column-count: 1;
  }
}
.el-masonry-item {
  break-inside: avoid;
  margin: 0 0 16px;
  display: inline-block;
  width: 100%;
}

.el-mini-row,
.el-list li a {
  transition: all 0.15s ease;
}

.el-list li a {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

a.el-mini-row {
  color: inherit;
  text-decoration: none;
}

.el-masonry .el-mini-row:hover,
.el-masonry .el-proveedor-card:hover,
.el-masonry .el-list li a:hover {
  transform: none !important;
}

.el-state-banner {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.02);
  box-shadow: 0 10px 26px rgba(20, 30, 60, 0.04);
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.el-state-banner .title {
  font-weight: 800;
}

.el-state-banner .sub {
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}

/* ===== extracted from templates/organizador/evento/documentos/base-detalle.twig ===== */
/* ============================================ */
/* DOCUMENTO - ESTILOS BASE */
/* ============================================ */
.documento-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgb(248, 249, 250) 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  border: 2px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.badge-tipo {
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 8px;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.documento-numero {
  font-size: 2rem;
  font-weight: 700;
  color: #212529;
  margin: 8px 0;
}

.badge-fuente {
  font-size: 12px;
  padding: 4px 10px;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============================================ */
/* SECCIONES */
/* ============================================ */
.seccion-documento {
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  margin-bottom: 20px;
  overflow: hidden;
}

.seccion-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 2px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.seccion-header h5 {
  margin: 0;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seccion-body {
  padding: 20px;
}

/* ============================================ */
/* TABLA DE PAGOS */
/* ============================================ */
.tabla-pagos {
  margin-bottom: 0;
}

.tabla-pagos thead {
  background: #f8f9fa;
}

.tabla-pagos tr.pago-pendiente {
  background-color: #fff8e1;
}

.tabla-pagos tr.pago-pagado {
  background-color: #e8f5e9;
}

.tabla-pagos tr.pago-vencido {
  background-color: #ffebee;
}

.progreso-pagos {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.progreso-pagos .progress {
  height: 32px;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progreso-pagos .progress-bar {
  font-weight: 600;
  font-size: 14px;
  line-height: 32px;
}

/* ============================================ */
/* LÍNEAS DE DETALLE */
/* ============================================ */
.tabla-lineas tbody tr:hover {
  background-color: #f8f9fa;
}

.linea-edit-row .edit-form {
  background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #00b4a6;
}

/* ============================================ */
/* TOTALES */
/* ============================================ */
.tabla-totales {
  margin-bottom: 0;
}

.tabla-totales tbody tr {
  border-top: 1px solid #dee2e6;
}

.tabla-totales .total-row {
  background: linear-gradient(135deg, #fff3cd 0%, #fff8dc 100%);
  font-size: 1.2rem;
  font-weight: 700;
  border-top: 3px solid #ffc107 !important;
}

/* ============================================ */
/* VISTA PREVIA PDF */
/* ============================================ */
.preview-container {
  position: sticky;
  top: 20px;
}

.preview-frame {
  height: 700px;
  overflow: hidden;
  background: #525659;
  border-radius: 8px;
}

.preview-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.preview-image-container {
  height: 700px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.preview-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
}

/* ============================================ */
/* UTILIDADES */
/* ============================================ */
.saving-overlay {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #00b4a6;
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  display: none;
}

.estado-select {
  font-weight: 700;
  min-width: 150px;
  border-radius: 999px;
  padding-left: 12px;
}

.estado-pendiente {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.estado-aceptado {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.estado-descartado {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ===== extracted from templates/organizador/evento/documentos/componentes/calendario-pagos.twig ===== */
.pago-row-pagado {
  background-color: #f0fdf4;
}

.pago-row-vencido {
  background-color: #fef2f2;
}

.pago-row-pendiente:hover {
  background-color: #fffbeb;
}

.btn-marcar-pagado:hover {
  transform: scale(1.06);
}

.pago-editor-row td {
  vertical-align: middle;
}

.pago-editor-row .form-control,
.pago-editor-row .form-select {
  min-height: 32px;
}

/* ===== extracted from templates/organizador/evento/documentos/componentes/header.twig ===== */
.documento-header-v2 {
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.documento-titulo {
  font-weight: 800;
  font-size: 1.4rem;
  color: #212529;
}

.pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}

.pill-muted {
  background: #f5f5f5;
  color: #555;
}

.pill-warning {
  background: #fff3cd;
  color: #856404;
}

.pill-danger {
  background: #f8d7da;
  color: #721c24;
}

/* ===== extracted from templates/organizador/evento/documentos/componentes/notas.twig ===== */
.whitespace-pre-line {
  white-space: pre-line;
}

.timeline-item {
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50px;
  width: 2px;
  height: calc(100% - 30px);
  background-color: #dee2e6;
}

.timeline-badge {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== extracted from templates/organizador/evento/documentos/componentes/preview-pdf.twig ===== */
.preview-container {
  position: sticky;
  top: 20px;
}

.card.sticky-top iframe {
  background: #fff;
}

/* Responsive */
@media (max-width: 991px) {
  .card.sticky-top {
    position: relative;
    top: 0 !important;
    margin-top: 20px;
  }
}
/* ===== extracted from templates/organizador/evento/documentos/componentes/totales.twig ===== */
.list-group-item {
  transition: background-color 0.2s;
}

.list-group-item:hover {
  background-color: #f8f9fa;
}

.display-4 {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* ===== extracted from templates/organizador/evento/documentos/detalle-factura.twig ===== */
.info-card {
  border-left-width: 4px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.info-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.info-card .card-header {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  font-size: 0.9rem;
  gap: 8px;
}

.info-row span {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.info-row strong,
.info-row a {
  text-align: right;
  word-break: break-word;
}

.info-row-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
}

.progress {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
  font-weight: 600;
  font-size: 0.9rem;
  transition: width 0.6s ease;
}

@media (max-width: 991px) {
  /* En tablets: 2 columnas */
  .info-card {
    margin-bottom: 1rem;
  }
}
@media (max-width: 767px) {
  /* En móviles: 1 columna */
  .info-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .info-row strong,
  .info-row a {
    text-align: left;
    margin-top: 4px;
  }
}
/* ===== extracted from templates/organizador/evento/documentos.twig ===== */
/* Estilos para el selector de estado */
.ws-estado-select {
  min-width: 140px;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.ws-estado-select.estado-pendiente {
  border-color: #ffc107;
  background-color: #fff3cd;
}

.ws-estado-select.estado-aceptado {
  border-color: #198754;
  background-color: #d1e7dd;
}

.ws-estado-select.estado-descartado {
  border-color: #dc3545;
  background-color: #f8d7da;
}

/* Estilos para la barra de comparación */
.compare-bar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 360px;
  max-width: calc(100vw - 36px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  padding: 12px;
  display: none;
  z-index: 1050;
}

.compare-bar.show {
  display: block;
}

.compare-bar .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 10px;
}

.compare-bar .close-btn {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #666;
}

.compare-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.compare-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
  gap: 10px;
}

.compare-item span {
  font-size: 13px;
  color: #222;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-item .remove-btn {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #777;
  flex-shrink: 0;
}

.compare-btn-main {
  width: 100%;
  border-radius: 999px;
}

/* Modal de comparación */
.comparison-table-container {
  padding: 18px;
  max-height: 70vh;
  overflow-y: auto;
}

.btn-compare-doc {
  font-size: 0.875rem;
}

/* ===== extracted from templates/organizador/evento/equipo/index.twig ===== */
.team-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.team-card {
  border: 1px solid #eadfce;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 23, 19, 0.04);
}

.team-card .card-body {
  padding: 1.1rem;
}

.team-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #5c4b3b;
  margin-bottom: 0.2rem;
}

.team-subtitle {
  font-size: 0.92rem;
  color: #857261;
}

.team-empty {
  border: 1px dashed #d9c9b4;
  background: #fffaf4;
  color: #7f6b58;
  border-radius: 14px;
  padding: 1rem;
}

.team-person {
  border: 1px solid #eee3d5;
  border-radius: 14px;
  padding: 1rem;
  background: #fff;
  height: 100%;
}

.team-person-name {
  font-weight: 700;
  color: #4f4032;
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.team-person-email {
  color: #857261;
  font-size: 0.92rem;
}

.team-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.team-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.team-modal-note {
  color: #857261;
  font-size: 0.92rem;
}

.team-person-role {
  color: #6f5c4b;
  font-size: 0.88rem;
  margin-left: 0.4rem;
  font-weight: 500;
}

/* ===== extracted from templates/organizador/evento/factura_detalle.twig ===== */
/* Estilos básicos para cajas de información */
.info-box {
  padding: 10px 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.proveedor-box-custom {
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, white 100%);
  transition: all 0.2s ease;
}

.proveedor-box-custom:hover {
  border-color: var(--teal);
  box-shadow: 0 2px 8px rgba(0, 180, 166, 0.1);
}

/* ============================================ */
/* SELECT2 - ESTILOS GENERALES */
/* ============================================ */
.select2-container {
  width: 100% !important;
  font-size: 1rem;
}

/* Contenedor de selección */
.select2-container--bootstrap-5 .select2-selection--single {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.375rem 0.75rem !important;
  height: auto !important;
  min-height: calc(1.5em + 0.75rem + 2px);
}

/* Texto renderizado con espacio para botón X y flecha */
.select2-container--bootstrap-5 .select2-selection__rendered {
  flex: 1 !important;
  padding-right: 4rem !important;
  padding-left: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  max-width: calc(100% - 4rem) !important;
  order: 1 !important;
  line-height: 1.5 !important;
}

/* Botón X (clear) */
.select2-container--bootstrap-5 .select2-selection__clear {
  position: absolute !important;
  right: 2.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 100 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  line-height: 1.25rem !important;
  text-align: center !important;
  order: 3 !important;
  color: #6c757d;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}

.select2-container--bootstrap-5 .select2-selection__clear:hover {
  color: #dc3545;
}

/* Flecha dropdown */
.select2-container--bootstrap-5 .select2-selection__arrow {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  order: 2 !important;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select2-container--bootstrap-5 .select2-selection__arrow b {
  border-color: #6c757d transparent transparent transparent;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  height: 0;
  width: 0;
  margin: 0;
}

.select2-container--bootstrap-5.select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent #6c757d transparent;
  border-width: 0 6px 6px 6px;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: #6c757d;
}

/* Dropdown */
.select2-container--bootstrap-5 .select2-dropdown {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 1056;
}

/* Búsqueda en dropdown */
.select2-container--bootstrap-5 .select2-search--dropdown {
  padding: 0.5rem;
  background-color: #f8f9fa;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  outline: 0;
}

/* Resultados */
.select2-container--bootstrap-5 .select2-results__option {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  color: #212529;
  background-color: #fff;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: #0d6efd;
  color: #fff;
}

.select2-container--bootstrap-5 .select2-results__option--selected {
  background-color: #e7f3ff;
  color: #212529;
}

.select2-container--bootstrap-5 .select2-results__message {
  color: #6c757d;
  padding: 0.5rem 0.75rem;
}

/* ============================================ */
/* SELECT2 EN FORMULARIO DE EDICIÓN */
/* ============================================ */
#infoGeneralEdit .select2-container--bootstrap-5 .select2-selection {
  background-color: #fff;
  border: 1px solid #00b4a6;
  box-shadow: none;
}

#infoGeneralEdit .select2-container--bootstrap-5 .select2-selection:hover {
  border-color: #008c7f;
}

#infoGeneralEdit .select2-container--bootstrap-5.select2-container--focus .select2-selection,
#infoGeneralEdit .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: #00b4a6;
  box-shadow: 0 0 0 0.25rem rgba(0, 180, 166, 0.25);
}

#infoGeneralEdit .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: #6c757d;
  font-style: italic;
}

#infoGeneralEdit .select2-container--bootstrap-5 .select2-selection__clear {
  color: #dc3545;
}

#infoGeneralEdit .select2-container--bootstrap-5 .select2-selection__clear:hover {
  color: #b02a37;
}

/* Dropdown específico para el formulario */
.select2-container--bootstrap-5 .select2-dropdown {
  border-color: #00b4a6;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: #00b4a6;
  color: #fff;
}

.select2-container--bootstrap-5 .select2-results__option--selected {
  background-color: #d4f1ee;
  color: #212529;
  font-weight: 500;
}

/* ============================================ */
/* FORMULARIO DE EDICIÓN */
/* ============================================ */
.edit-form {
  background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #00b4a6;
  animation: slideDown 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 180, 166, 0.1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.edit-form .form-label {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.375rem;
}

.edit-form input:not(.select2-search__field),
.edit-form textarea,
.edit-form select:not(.select2-hidden-accessible) {
  background-color: #fff;
  border: 1px solid #ced4da;
  transition: all 0.15s ease-in-out;
}

.edit-form input:focus:not(.select2-search__field),
.edit-form textarea:focus,
.edit-form select:focus:not(.select2-hidden-accessible) {
  background-color: #fff;
  border-color: #00b4a6;
  box-shadow: 0 0 0 0.25rem rgba(0, 180, 166, 0.25);
  outline: 0;
}

.edit-form .form-text {
  color: #6c757d;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ============================================ */
/* TABLA DE LÍNEAS */
/* ============================================ */
.table-hover tbody tr:hover {
  background-color: #f8f9fa;
}

.btn-group {
  white-space: nowrap;
}

.btn-editar-linea,
.btn-eliminar-linea {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* ============================================ */
/* TOTALES Y OTROS */
/* ============================================ */
.total-row {
  background-color: #fff3cd;
  font-weight: 600;
}

.saving-overlay {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--teal);
  color: white;
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  display: none;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ===== extracted from templates/organizador/evento/formularios.twig ===== */
.tabla-formularios-evento {
  width: 100%;
  table-layout: fixed;
}

.tabla-formularios-evento th,
.tabla-formularios-evento td {
  white-space: normal !important;
  word-break: break-word;
  vertical-align: top;
}

.tabla-formularios-evento th:nth-child(1),
.tabla-formularios-evento td:nth-child(1) {
  width: 26%;
}

.tabla-formularios-evento th:nth-child(2),
.tabla-formularios-evento td:nth-child(2) {
  width: 30%;
}

.tabla-formularios-evento th:nth-child(3),
.tabla-formularios-evento td:nth-child(3) {
  width: 18%;
}

.tabla-formularios-evento th:nth-child(4),
.tabla-formularios-evento td:nth-child(4) {
  width: 10%;
  text-align: center;
}

.tabla-formularios-evento th:nth-child(5),
.tabla-formularios-evento td:nth-child(5) {
  width: 16%;
}

.bloque-cabecera-formularios {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bloque-cabecera-formularios .texto-ayuda {
  color: #6c757d;
  font-size: 0.92rem;
  margin: 0;
}

.formulario-bloque-titulo {
  line-height: 1.35;
}

.formulario-meta {
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.35rem;
}

.formulario-modulo {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 500;
  background: #f8f3eb;
  color: #8a6d3b;
  border: 1px solid #eadfcf;
  max-width: 100%;
}

.formulario-resumen-badges {
  margin-bottom: 0.5rem;
}

.formulario-resumen-badges .badge {
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
  white-space: normal;
}

.formulario-dato {
  font-size: 0.87rem;
  line-height: 1.45;
  margin-bottom: 0.35rem;
}

.formulario-dato strong {
  color: #495057;
}

.formulario-fechas {
  font-size: 0.87rem;
  line-height: 1.45;
}

.formulario-fechas .fecha-row {
  margin-bottom: 0.6rem;
}

.formulario-fechas .fecha-label {
  display: block;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 0.15rem;
}

.formulario-vacio {
  color: #9aa1a9;
  font-style: italic;
}

.formulario-resumen {
  font-size: 0.9rem;
  text-align: center;
}

.formulario-resumen .dato-secundario {
  display: block;
  margin-top: 0.45rem;
  color: #6c757d;
  font-size: 0.82rem;
  line-height: 1.35;
}

.formulario-acciones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.formulario-acciones .btn {
  width: 100%;
}

.formulario-acciones .dropdown-menu {
  width: 100%;
  min-width: 220px;
}

.formulario-acciones .dropdown-item {
  white-space: normal;
}

@media (max-width: 991.98px) {
  .bloque-cabecera-formularios {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ===== extracted from templates/organizador/evento/inventario/index.twig ===== */
.inv-kpi-card {
  border: 1px solid #e9ecef;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  height: 100%;
}

.inv-kpi-num {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}

.inv-kpi-label {
  font-size: 0.9rem;
  color: #6c757d;
}

.inv-card {
  border: 1px solid #e9ecef;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.inv-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid #eef0f2;
  font-weight: 700;
}

.inv-card-body {
  padding: 16px 18px;
}

.inv-lista-item {
  border: 1px solid #edf0f2;
  border-radius: 14px;
  padding: 12px 14px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: 0.15s ease;
}

.inv-lista-item:hover {
  border-color: #d8dee4;
  background: #fcfcfd;
}

.inv-lista-title {
  font-weight: 700;
  line-height: 1.2;
}

.inv-lista-meta {
  font-size: 0.86rem;
  color: #6c757d;
  margin-top: 4px;
}

.inv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #f5f6f7;
  color: #495057;
}

.inv-empty {
  border: 1px dashed #d9dee3;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  background: #fcfcfd;
}

.inv-empty-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.inv-empty-text {
  color: #6c757d;
  margin-bottom: 14px;
}

.inv-table td,
.inv-table th {
  vertical-align: middle;
}

.inv-cat-badge {
  display: inline-block;
  padding: 0.24rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #f3f4f6;
  color: #495057;
}

.inv-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.inv-sugerencia-btn {
  border: 1px solid #dde2e6;
  background: #fff;
  color: #212529;
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1;
  transition: 0.15s ease;
}

.inv-sugerencia-btn:hover {
  background: #f8f9fa;
  border-color: #cfd6dd;
}

.inv-subtle-box {
  border: 1px solid #edf0f2;
  border-radius: 14px;
  background: #fcfcfd;
  padding: 14px;
}

.inv-subtle-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.inv-subtle-text {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

/* ===== extracted from templates/organizador/evento/inventario/lista-detalle.twig ===== */
.inv-kpi-card {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.inv-kpi-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.inv-kpi-label {
  font-size: 0.85rem;
  color: #6c757d;
}

.inv-row-actions .btn {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

.inv-sticky-tools {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  padding-bottom: 10px;
}

.inv-table td, .inv-table th {
  vertical-align: middle;
}

.inv-col-small {
  width: 120px;
}

.inv-col-actions {
  min-width: 280px;
}

.estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.estado-pendiente {
  background: #f1f3f5;
  color: #495057;
}

.estado-parcial {
  background: #fff3cd;
  color: #8a6d3b;
}

.estado-completo, .estado-cerrado {
  background: #d1e7dd;
  color: #0f5132;
}

.estado-incidencia {
  background: #f8d7da;
  color: #842029;
}

/* ===== extracted from templates/organizador/evento/inventario/lista-form.twig ===== */
.inv-sugerencia {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  transition: 0.15s ease;
  height: 100%;
}

.inv-sugerencia:hover {
  border-color: #cfd6dd;
  background: #fcfcfd;
}

.inv-sugerencia.active {
  border-color: #0d6efd;
  background: #eef5ff;
}

.inv-sugerencia-titulo {
  font-weight: 700;
  margin-bottom: 4px;
}

.inv-sugerencia-desc {
  font-size: 0.88rem;
  color: #6c757d;
  line-height: 1.25;
}

.inv-selector-box {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.inv-listado-materiales {
  max-height: 320px;
  overflow: auto;
  border: 1px solid #edf0f2;
  border-radius: 12px;
}

.inv-material-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f3f5;
}

.inv-material-item:last-child {
  border-bottom: 0;
}

.inv-material-main {
  flex: 1;
  min-width: 0;
}

.inv-material-title {
  font-weight: 600;
  line-height: 1.2;
}

.inv-material-meta {
  font-size: 0.82rem;
  color: #6c757d;
  margin-top: 3px;
}

.inv-chip {
  display: inline-block;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #495057;
  font-size: 0.72rem;
  font-weight: 600;
  margin-right: 6px;
  margin-bottom: 4px;
}

/* ===== extracted from templates/organizador/evento/inventario/partials/_modal_nueva_lista.twig ===== */
.inv-sugerencia {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  transition: 0.15s ease;
  height: 100%;
}

.inv-sugerencia:hover {
  border-color: #cfd6dd;
  background: #fcfcfd;
}

.inv-sugerencia.active {
  border-color: #0d6efd;
  background: #eef5ff;
}

.inv-sugerencia-titulo {
  font-weight: 700;
  margin-bottom: 4px;
}

.inv-sugerencia-desc {
  font-size: 0.88rem;
  color: #6c757d;
  line-height: 1.25;
}

.inv-selector-box {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.inv-listado-materiales {
  max-height: 320px;
  overflow: auto;
  border: 1px solid #edf0f2;
  border-radius: 12px;
}

.inv-material-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f3f5;
}

.inv-material-item:last-child {
  border-bottom: 0;
}

.inv-material-main {
  flex: 1;
  min-width: 0;
}

.inv-material-title {
  font-weight: 600;
  line-height: 1.2;
}

.inv-material-meta {
  font-size: 0.82rem;
  color: #6c757d;
  margin-top: 3px;
}

.inv-chip {
  display: inline-block;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #495057;
  font-size: 0.72rem;
  font-weight: 600;
  margin-right: 6px;
  margin-bottom: 4px;
}

/* ===== extracted from templates/organizador/evento/invitados.twig ===== */
.inv-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.inv-kpis-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.inv-kpi {
  border: 1px solid #ebe3da;
  border-radius: 14px;
  padding: 0.9rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.inv-kpi-filter {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}

.inv-kpi-filter:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  border-color: #d7c4b0;
}

.inv-kpi-filter.is-active {
  border-color: #a67c52;
  background: linear-gradient(180deg, #fffaf4 0%, #fff 100%);
  box-shadow: 0 8px 18px rgba(166, 124, 82, 0.12);
}

.inv-kpi .label {
  color: #6c757d;
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
}

.inv-kpi .value {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
}

.kpi-hint {
  font-size: 0.76rem;
  color: #8c8c8c;
  margin-top: 0.28rem;
}

.filtros-card {
  border: 1px solid #ebe3da;
  overflow: hidden;
}

.mobile-filters-toggle {
  white-space: nowrap;
}

#bloqueFiltrosInvitados {
  transition: all 0.2s ease;
}

.filters-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.active-filters-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #f4efe9;
  border: 1px solid #e8dbcd;
  color: #5f5347;
  border-radius: 999px;
  padding: 0.32rem 0.65rem;
  font-size: 0.8rem;
}

.filter-chip button {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  line-height: 1;
}

.inv-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.inv-table,
.inv-table td,
.inv-table th {
  border-color: #f1e7dc;
}

.card .table-responsive {
  border-radius: inherit;
}

.inv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7efe6;
  color: #8a6747;
  font-weight: 700;
  flex: 0 0 40px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.24rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.status-confirmado {
  background: #e9f8ef;
  color: #146c43;
}

.status-pendiente {
  background: #fff4db;
  color: #a06a00;
}

.status-rechazado {
  background: #fdecec;
  color: #b42318;
}

.status-sin-respuesta {
  background: #f1f3f5;
  color: #495057;
}

.pill-soft {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ececec;
  background: #fafafa;
  border-radius: 999px;
  padding: 0.18rem 0.52rem;
  font-size: 0.72rem;
  margin: 0.12rem 0.18rem 0.12rem 0;
}

.inv-name-line {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 260px;
}

.inv-main-tags {
  margin-top: 0.3rem;
}

.inv-side-list .list-group-item,
.diet-side-list .list-group-item {
  border-left: 0;
  border-right: 0;
  padding: 0.75rem 1rem;
}

.inv-empty {
  color: #8b8b8b;
  text-align: center;
  padding: 2rem 1rem;
}

.resumen-kv {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
}

.table-row-muted {
  opacity: 0.58;
}

.inv-top-mobile {
  display: contents;
}

.inv-actions-mobile {
  display: none;
}

.inv-mobile-section-title {
  display: none;
}

.inv-mesa-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .inv-actions-mobile {
    display: none !important;
  }
  .inv-table td[data-label=Acciones] {
    display: table-cell !important;
  }
}
@media (max-width: 1399.98px) {
  .inv-kpis-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .inv-kpis-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .inv-kpis-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }
  .inv-kpi {
    padding: 0.42rem 0.45rem;
    border-radius: 10px;
  }
  .inv-kpi .label {
    font-size: 0.6rem;
    margin-bottom: 0.08rem;
    line-height: 1.05;
  }
  .inv-kpi .value {
    font-size: 0.86rem;
    line-height: 1;
  }
  .kpi-hint {
    display: none;
  }
  .filters-meta-row {
    flex-direction: column;
  }
  #bloqueFiltrosInvitados.is-collapsed-mobile {
    display: none;
  }
  .card {
    border-radius: 12px;
  }
  .card-body.p-0 {
    padding: 0 !important;
  }
  .table-responsive {
    border: 0 !important;
    overflow: visible;
  }
  .inv-table {
    margin-bottom: 0;
  }
  .inv-top-mobile {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.45rem;
  }
  .inv-actions-mobile {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: flex-start;
  }
  .inv-name-line {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.45rem;
    align-items: center;
  }
  .inv-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    font-size: 0.68rem;
  }
  .inv-name-line .fw-semibold {
    font-size: 0.92rem;
    line-height: 1.1;
  }
  .inv-name-line .small.text-muted {
    display: none !important;
  }
  .inv-main-tags {
    margin-top: 0.12rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
  }
  .status-badge,
  .pill-soft {
    font-size: 0.6rem;
    padding: 0.1rem 0.36rem;
    margin: 0.02rem;
    line-height: 1.1;
  }
  .inv-info-col {
    padding-top: 0;
    font-size: 0.78rem;
    line-height: 1.18;
  }
  .inv-info-col div {
    margin-bottom: 0.16rem;
  }
  .btn-group .btn {
    padding: 0.2rem 0.35rem;
    font-size: 0.74rem;
  }
  .resumen-kv {
    font-size: 0.84rem;
  }
  .inv-mobile-section-title {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #8a8a8a;
    margin-bottom: 0;
  }
  .inv-mesa-inline .inv-mobile-section-title {
    margin-right: 0.2rem;
  }
}
@media (max-width: 575.98px) {
  .card {
    border: none !important;
  }
  .inv-kpis-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem;
  }
  .inv-kpi {
    padding: 0.36rem 0.36rem;
  }
  .inv-kpi .label {
    font-size: 0.56rem;
  }
  .inv-kpi .value {
    font-size: 0.8rem;
  }
  .inv-table tbody {
    padding: 0.15rem;
  }
  .inv-table tr {
    padding: 0.48rem 0.5rem;
    border-radius: 9px;
    gap: 0.22rem;
  }
  .inv-name-line .fw-semibold {
    font-size: 0.88rem;
  }
  .status-badge,
  .pill-soft {
    font-size: 0.58rem;
    padding: 0.08rem 0.32rem;
  }
  .inv-info-col {
    font-size: 0.74rem;
  }
  .btn-group .btn {
    padding: 0.18rem 0.3rem;
    font-size: 0.7rem;
  }
}
/* ===== extracted from templates/organizador/evento/pagos/index.twig ===== */
.el-card {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.el-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-pendiente {
  background: #fff3cd;
  color: #856404;
}

.badge-parcial {
  background: #cfe2ff;
  color: #084298;
}

.badge-pagado {
  background: #d1e7dd;
  color: #0f5132;
}

.badge-vencido {
  background: #f8d7da;
  color: #842029;
}

.progress {
  height: 6px;
  border-radius: 10px;
}

.table td {
  vertical-align: middle;
}

.td-acciones {
  white-space: nowrap;
  width: 1%;
}

.acciones-pago {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.btn-icono {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: #fff;
  transition: all 0.15s ease-in-out;
}

.btn-icono:hover {
  transform: translateY(-1px);
}

.btn-ver {
  border: 1px solid #3da5ff;
  color: #3da5ff;
}

.btn-ver:hover {
  background: #3da5ff;
  color: #fff;
}

.btn-pagar {
  border: 1px solid #19d3b4;
  color: #19d3b4;
}

.btn-pagar:hover {
  background: #19d3b4;
  color: #fff;
}

.btn-doc {
  border: 1px solid #d2a56d;
  color: #c28b47;
}

.btn-doc:hover {
  background: #d2a56d;
  color: #fff;
}

/* ===== extracted from templates/organizador/evento/presupuestador.twig ===== */
.resumen-presupuesto .card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

.resumen-card-main {
  background: linear-gradient(135deg, #1f2937 0%, #334155 100%);
  color: #fff;
  overflow: hidden;
}

.resumen-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

.resumen-card-main .resumen-label {
  color: rgba(255, 255, 255, 0.72);
}

.resumen-main-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.resumen-subvalue {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.resumen-value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}

.resumen-help {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-top: 0.35rem;
}

.resumen-card-main .resumen-help {
  color: rgba(255, 255, 255, 0.65);
}

.resumen-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
}

.resumen-icon-main {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.resumen-icon-primary {
  background: #e8f1ff;
  color: #0d6efd;
}

.resumen-icon-warning {
  background: #fff3cd;
  color: #b58105;
}

.resumen-icon-success {
  background: #d1e7dd;
  color: #146c43;
}

.resumen-icon-danger {
  background: #f8d7da;
  color: #b02a37;
}

.resumen-icon-secondary {
  background: #e2e3e5;
  color: #495057;
}

.resumen-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 1rem;
  padding-top: 1rem;
}

.presupuestador input.form-control {
  min-width: 90px;
}

.fila-real-documento {
  background: #fcfcfc;
}

.fila-real-documento td:first-child {
  padding-left: 2rem;
}

.fila-real-documento .doc-titulo {
  font-weight: 600;
}

.fila-real-documento .doc-meta {
  display: block;
  font-size: 0.85rem;
  color: #6c757d;
  margin-top: 0.15rem;
}

.separador-seccion td {
  border: 0;
  height: 10px;
  background: transparent;
}

.desviacion-negativa {
  color: #198754;
}

.desviacion-positiva {
  color: #dc3545;
}

.desviacion-neutra {
  color: #6c757d;
}

@media (max-width: 768px) {
  .resumen-main-value {
    font-size: 1.65rem;
  }
  .resumen-subvalue,
  .resumen-value {
    font-size: 1.2rem;
  }
}
.resumen-card-main {
  background: linear-gradient(135deg, #CFC3B6 0%, #DDD3C8 100%);
  color: #4A4038;
  overflow: hidden;
}

.resumen-card-main .resumen-label {
  color: #7A6F66;
}

.resumen-card-main .resumen-help {
  color: #8A7F75;
}

.resumen-divider {
  border-top: 1px solid rgba(74, 64, 56, 0.12);
}

.resumen-icon-main {
  background: rgba(74, 64, 56, 0.08);
  color: #4A4038;
}

/* ===== extracted from templates/organizador/evento/programa-cues.twig ===== */
.pm-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.pm-filters-wrap {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 30, 60, 0.05);
  padding: 1rem;
  margin-bottom: 1rem;
}

.pm-table-wrap {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 30, 60, 0.05);
}

.pm-table {
  margin-bottom: 0;
  vertical-align: top;
}

.pm-table thead th {
  background: #faf8f6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.58);
  font-weight: 800;
  padding: 0.8rem 0.85rem;
  white-space: nowrap;
}

.pm-table tbody td {
  padding: 0.85rem;
  border-color: rgba(0, 0, 0, 0.06);
  vertical-align: top;
}

.pm-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.015);
}

.pm-main-title {
  font-weight: 850;
  color: #1e2430;
  line-height: 1.25;
  margin-bottom: 0.24rem;
}

.pm-main-subtitle {
  font-size: 0.84rem;
  color: rgba(0, 0, 0, 0.58);
  line-height: 1.3;
}

.pm-main-time {
  display: inline-flex;
  align-items: center;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 750;
  color: rgba(0, 0, 0, 0.62);
}

.pm-music-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(111, 66, 193, 0.07), rgba(255, 255, 255, 0.94));
  box-shadow: 0 6px 18px rgba(20, 30, 60, 0.04);
  min-width: 300px;
}

.pm-music-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(111, 66, 193, 0.11);
  color: #6f42c1;
  font-size: 1.25rem;
  flex: 0 0 auto;
}

.pm-music-body {
  min-width: 0;
  flex: 1;
}

.pm-music-title {
  font-weight: 850;
  color: #1f2430;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.pm-music-meta {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.58);
  line-height: 1.35;
}

.pm-music-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.pm-music-actions .btn {
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.32rem 0.7rem;
}

.pm-notes {
  white-space: pre-line;
  line-height: 1.35;
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.68);
  min-width: 320px;
  max-width: 520px;
}

.pm-notes-empty {
  color: rgba(0, 0, 0, 0.45);
}

.pm-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  white-space: nowrap;
}

.pm-empty {
  padding: 1.2rem;
  color: rgba(0, 0, 0, 0.58);
}

.pm-modal-hint {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.55);
}

.pm-suggest-panel {
  border: 1px solid rgba(196, 145, 45, 0.18);
  background: linear-gradient(135deg, rgba(255, 248, 224, 0.9), rgba(255, 255, 255, 0.95));
  border-radius: 16px;
  padding: 0.85rem;
}

.pm-suggest-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.pm-suggest-title {
  font-weight: 850;
  color: rgba(75, 55, 15, 0.86);
  line-height: 1.25;
}

.pm-suggest-subtitle {
  font-size: 0.8rem;
  color: rgba(75, 55, 15, 0.66);
  margin-top: 0.15rem;
}

.pm-suggest-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.pm-suggest-controls .form-select {
  width: auto;
  min-width: 170px;
  border-radius: 999px;
  font-size: 0.82rem;
}

.pm-suggest-results {
  display: none;
  margin-top: 0.75rem;
}

.pm-suggest-loading {
  display: none;
  font-size: 0.82rem;
  color: rgba(75, 55, 15, 0.72);
  margin-top: 0.65rem;
}

.pm-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-suggest-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.65rem 0.7rem;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.pm-suggest-song {
  font-weight: 800;
  color: #1f2430;
  line-height: 1.25;
}

.pm-suggest-artist {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.58);
  margin-top: 0.12rem;
}

.pm-suggest-reason {
  font-size: 0.76rem;
  color: rgba(75, 55, 15, 0.7);
  margin-top: 0.25rem;
}

.pm-suggest-item .btn {
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .pm-table {
    min-width: 1080px;
  }
}
/* ===== extracted from templates/organizador/evento/programa-momentos.twig ===== */
.mom-page {
  padding-bottom: 2rem;
  max-width: 720px;
}

.mom-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
}

.mom-h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 650;
  color: #2f2a24;
}

.mom-sub {
  margin: 0.2rem 0 0;
  color: #8a8278;
  font-size: 0.88rem;
}

.mom-add {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 110px minmax(140px, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px dashed rgba(80, 60, 40, 0.22);
  border-radius: 12px;
  background: #fffdf9;
}

.mom-add label {
  display: grid;
  gap: 0.22rem;
  margin: 0;
}

.mom-add label span {
  font-size: 0.72rem;
  font-weight: 500;
  color: #8a8278;
}

.mom-add input,
.mom-add select {
  width: 100%;
  border: 1px solid rgba(80, 60, 40, 0.16);
  border-radius: 8px;
  padding: 0.38rem 0.5rem;
  font-size: 0.86rem;
  color: #2f2a24;
  background: #fff;
}

.mom-card {
  border: 1px solid rgba(80, 60, 40, 0.12);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 0.85rem;
  overflow: hidden;
}

.mom-card.is-off {
  background: #f5f3f0;
}

.mom-card-head {
  padding: 0.85rem 1rem 0.65rem;
}

.mom-card-titlewrap {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.mom-title {
  font-weight: 650;
  font-size: 1rem;
  color: #2f2a24;
  margin: 0;
}

.mom-delete {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.76rem;
  font-weight: 500;
  color: #a07068;
  cursor: pointer;
}

.mom-delete:hover {
  color: #c84b40;
  text-decoration: underline;
}

.mom-time,
.mom-count {
  font-size: 0.78rem;
  color: #8a8278;
  font-weight: 500;
}

.mom-desc {
  margin: 0.3rem 0 0;
  color: #8a8278;
  font-size: 0.82rem;
}

.mom-card-body {
  padding: 0 1rem 1rem;
}

.mom-step-form {
  display: grid;
  grid-template-columns: 140px 110px minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 0.85rem;
}

.mom-step-form label {
  display: grid;
  gap: 0.22rem;
  margin: 0;
}

.mom-step-form label span,
.mom-section-title {
  font-size: 0.72rem;
  font-weight: 500;
  color: #8a8278;
  letter-spacing: 0.01em;
}

.mom-step-form select,
.mom-step-form input,
.mom-q-form input,
.mom-q-form select,
.mom-q-form textarea {
  width: 100%;
  border: 1px solid rgba(80, 60, 40, 0.16);
  border-radius: 8px;
  padding: 0.38rem 0.5rem;
  font-size: 0.86rem;
  color: #2f2a24;
  background: #fff;
}

.mom-save,
.mom-q-form button {
  border: 1px solid rgba(80, 60, 40, 0.18);
  background: #fff;
  color: #6b5340;
  border-radius: 8px;
  padding: 0.38rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.mom-section {
  margin-top: 0.85rem;
}

.mom-section-title {
  margin-bottom: 0.4rem;
}

.mom-q-list {
  display: grid;
  gap: 0.55rem;
}

.mom-q {
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(80, 60, 40, 0.1);
  border-radius: 10px;
  background: #fffdf9;
}

.mom-q.is-ok {
  background: rgba(15, 138, 106, 0.04);
  border-color: rgba(15, 138, 106, 0.12);
}

.mom-q.is-off {
  background: #f3f1ee;
  border-color: rgba(80, 60, 40, 0.08);
}

.mom-q-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: #8a8278;
  margin-bottom: 0.28rem;
}

.mom-q-empty {
  font-size: 0.8rem;
  color: #9a9288;
  padding: 0.2rem 0 0.15rem;
}

.mom-q-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.55rem;
}

.mom-q-add input,
.mom-q-add select {
  width: 100%;
  border: 1px solid rgba(80, 60, 40, 0.16);
  border-radius: 8px;
  padding: 0.38rem 0.5rem;
  font-size: 0.86rem;
  color: #2f2a24;
  background: #fff;
}

.mom-q-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px auto;
  gap: 0.4rem;
  align-items: start;
}

.mom-q-form input,
.mom-q-form textarea,
.mom-q-form select[name="respuesta_texto"] {
  font-weight: 600;
  color: #2f2a24;
}

.mom-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mom-chips li {
  border: 1px solid rgba(80, 60, 40, 0.12);
  background: #fff;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.78rem;
  color: #2f2a24;
}

@media (max-width: 991.98px) {
  .mom-step-form,
  .mom-q-form,
  .mom-q-form--custom,
  .mom-q-add,
  .mom-add {
    grid-template-columns: 1fr;
  }
}
/* ===== extracted from templates/organizador/evento/programa.twig ===== */
:root {
  --prog-text: #2f2923;
  --prog-muted: rgba(47, 41, 35, .62);
  --prog-border: rgba(80, 60, 40, .14);
  --prog-border-soft: rgba(80, 60, 40, .09);
  --prog-card: #ffffff;
  --prog-soft: #fffaf4;
  --prog-soft-2: #f7f1ea;
  --prog-primary: #9a6a43;
  --prog-primary-dark: #805633;
  --prog-primary-soft: #f5eadc;
  --prog-green: #0f8a6a;
  --prog-green-soft: #e8f7f1;
  --prog-orange: #b56a1e;
  --prog-orange-soft: #fff4e6;
  --prog-red: #c84b40;
  --prog-red-soft: #fff0ee;
  --prog-blue: #3f6fa4;
  --prog-blue-soft: #edf5ff;
  --prog-purple: #7d58b7;
  --prog-purple-soft: #f4edff;
}

.programa-wrap {
  color: var(--prog-text);
}

.programa-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.programa-header h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.programa-header p {
  margin: 0.25rem 0 0;
  color: var(--prog-muted);
  font-size: 0.88rem;
}

.programa-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.el-btn {
  border: 1px solid var(--prog-border);
  background: #fff;
  color: var(--prog-text);
  border-radius: 0.7rem;
  padding: 0.52rem 0.78rem;
  font-size: 0.82rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.1;
  transition: all 0.18s ease;
}

.el-btn:hover {
  background: var(--prog-soft);
  color: var(--prog-primary);
  text-decoration: none;
  border-color: rgba(154, 106, 67, 0.28);
}

.el-btn-primary {
  background: var(--prog-primary);
  border-color: var(--prog-primary);
  color: #fff;
}

.el-btn-primary:hover {
  background: var(--prog-primary-dark);
  color: #fff;
}

.el-btn-soft {
  background: var(--prog-primary-soft);
  color: var(--prog-primary);
  border-color: rgba(154, 106, 67, 0.22);
}

.el-btn-danger {
  background: var(--prog-red-soft);
  color: var(--prog-red);
  border-color: rgba(200, 75, 64, 0.18);
}

.el-btn-danger:hover {
  background: #ffe2de;
  color: var(--prog-red);
  border-color: rgba(200, 75, 64, 0.28);
}

.programa-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.programa-tab {
  border: 1px solid var(--prog-border);
  background: #fff;
  border-radius: 999px;
  padding: 0.38rem 0.68rem;
  color: var(--prog-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.18s ease;
}

.programa-tab:hover {
  background: var(--prog-soft);
  color: var(--prog-primary);
  text-decoration: none;
}

.programa-tab.active {
  background: var(--prog-primary-soft);
  color: var(--prog-primary);
  border-color: rgba(154, 106, 67, 0.25);
}

.programa-card {
  background: #fff;
  border: 1px solid var(--prog-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 12px 36px rgba(25, 18, 10, 0.035);
}

.programa-toolbar {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--prog-border);
  background: linear-gradient(180deg, #fff, #fffaf5);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.programa-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.day-list {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.day-chip {
  border: 1px solid var(--prog-border);
  background: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  color: var(--prog-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.18s ease;
}

.day-chip:hover {
  background: var(--prog-soft);
  color: var(--prog-primary);
  text-decoration: none;
}

.day-chip.active {
  background: var(--prog-primary-soft);
  color: var(--prog-primary);
  border-color: rgba(154, 106, 67, 0.25);
}

.programa-info-line {
  color: var(--prog-muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.bloque {
  display: grid;
  grid-template-columns: 90px 1fr;
  border-bottom: 1px solid var(--prog-border);
  background: #fff;
}

.bloque:last-child {
  border-bottom: 0;
}

.bloque-hora {
  padding: 1rem;
  background: var(--prog-soft);
  border-right: 1px solid var(--prog-border);
}

.bloque-hora-sin-reloj {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.bloque-icon-pill {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(80, 60, 40, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--prog-primary);
  font-size: 0.95rem;
}

.hora-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(80, 60, 40, 0.16);
  font-weight: 850;
  font-size: 0.88rem;
}

.fin {
  display: block;
  margin-top: 0.35rem;
  color: var(--prog-muted);
  font-size: 0.74rem;
  text-align: center;
  font-weight: 650;
}

.bloque-body {
  padding: 1rem;
}

.bloque-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}

.bloque-main {
  min-width: 0;
}

.bloque-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 850;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.badge-tipo {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.25rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 850;
  background: #f2eadf;
  color: #8a633f;
}

.muted {
  color: var(--prog-muted);
  font-size: 0.84rem;
}

.bloque-location {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--prog-muted);
  font-size: 0.8rem;
}

.bloque-description {
  margin-top: 0.25rem;
  color: var(--prog-muted);
  font-size: 0.83rem;
  line-height: 1.4;
}

.bloque-summary {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bloque-move {
  display: inline-flex;
  gap: 0.2rem;
}

.bloque-move .el-btn {
  padding: 0.32rem 0.5rem;
}

.mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 850;
  border: 1px solid var(--prog-border);
  background: #fff;
  color: var(--prog-muted);
  white-space: nowrap;
}

.mini-badge.ok {
  background: var(--prog-green-soft);
  color: var(--prog-green);
  border-color: rgba(15, 138, 106, 0.16);
}

.mini-badge.warn {
  background: var(--prog-orange-soft);
  color: var(--prog-orange);
  border-color: rgba(181, 106, 30, 0.16);
}

.mini-badge.no {
  background: #ece9e4;
  color: #7a736b;
  border-color: rgba(80, 60, 40, 0.12);
}

.bloque-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 0.9rem;
}

.momentos {
  border: 1px solid var(--prog-border);
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
}

.momentos-head {
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--prog-border);
  background: #fffdf9;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.momentos-head strong {
  font-size: 0.82rem;
  font-weight: 850;
}

.momento {
  display: grid;
  grid-template-columns: 68px 30px minmax(0, 1fr) auto auto;
  gap: 0.5rem;
  align-items: start;
  padding: 0.78rem 0.78rem;
  border-bottom: 1px solid var(--prog-border-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}

.momento:last-child {
  border-bottom: 0;
}

.momento:hover {
  background: var(--prog-soft);
}

.momento-hora {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--prog-text);
  padding-top: 0.18rem;
}

.momento-hora.empty {
  color: var(--prog-muted);
  font-weight: 700;
}

.momento-orden {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(80, 60, 40, 0.14);
  background: #fbf6ef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--prog-muted);
  font-weight: 600;
  margin-top: 0.12rem;
}

.momento-orden.is-done {
  background: var(--prog-green-soft);
  color: var(--prog-green);
  border-color: rgba(15, 138, 106, 0.22);
  font-size: 0.62rem;
}

.momento-completo {
  background: rgba(15, 138, 106, 0.045);
}

.momento-no {
  background: #f3f1ee;
}

.momento-no .momento-hora,
.momento-no .momento-title,
.momento-no .momento-meta,
.momento-no .momento-orden {
  color: #8d867e;
}

.momento-orden.is-off {
  background: #e8e4de;
  color: #8d867e;
  border-color: rgba(80, 60, 40, 0.08);
}

.momento[hidden],
.pasos-filter-empty[hidden] {
  display: none !important;
}

.momento-title {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.momento-title .momento-datos {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.08rem 0.42rem;
  background: #f3eee7;
  color: var(--prog-muted);
}

.momento-title .momento-datos.ok {
  background: var(--prog-green-soft);
  color: var(--prog-green);
}

.momento-title .momento-datos.warn {
  background: var(--prog-orange-soft);
  color: var(--prog-orange);
}

.momento-facts {
  display: grid;
  gap: 0.18rem;
  margin-top: 0.38rem;
}

.momento-fact {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--prog-text);
}

.momento-fact b {
  font-weight: 500;
  color: #9a9288;
  margin-right: 0.35rem;
}

.momento-fact-valor {
  color: #2f2a24;
  font-weight: 650;
}

.momento-fact.is-missing {
  color: var(--prog-orange);
}

.momento-fact.is-missing b {
  color: #b57a3c;
  font-weight: 500;
}

.momento-fact.is-missing .momento-fact-valor {
  color: #8a5a22;
}

.momento-no .momento-fact,
.momento-no .momento-fact b,
.momento-no .momento-fact-valor {
  color: #8d867e;
}

.aplica {
  margin-top: 0.12rem;
}

.momento-edit {
  display: inline-flex;
  align-items: center;
  margin-top: 0.12rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--prog-primary, #9a5b2a);
  white-space: nowrap;
}

.pasos-hint {
  margin-top: 0.12rem;
  font-size: 0.72rem;
  color: var(--prog-muted);
  font-weight: 650;
}

.paso-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--prog-border);
  background: #fffdf9;
}

.paso-add input[type="text"] {
  flex: 1 1 180px;
  min-width: 0;
  border: 1px solid var(--prog-border);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font-size: 0.86rem;
  color: var(--prog-text);
  background: #fff;
}

.paso-add input[type="time"],
.paso-add select {
  width: 150px;
  max-width: 100%;
  border: 1px solid var(--prog-border);
  border-radius: 8px;
  padding: 0.4rem 0.45rem;
  font-size: 0.86rem;
  color: var(--prog-text);
  background: #fff;
}

.paso-add select {
  width: auto;
  flex: 1 1 160px;
}

.momento-meta {
  color: var(--prog-muted);
  font-size: 0.72rem;
  margin-top: 0.12rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.momento-datos.ok {
  color: var(--prog-green);
  font-weight: 850;
}

.momento-datos.warn {
  color: var(--prog-orange);
  font-weight: 850;
}

.aplica {
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.aplica-si {
  background: var(--prog-green-soft);
  color: var(--prog-green);
}

.aplica-no {
  background: #e8e4de;
  color: #7a736b;
}

.aplica-pendiente {
  background: var(--prog-orange-soft);
  color: var(--prog-orange);
}

.aplica-completo {
  background: var(--prog-green-soft);
  color: var(--prog-green);
}

.pasos-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.38rem;
}

.pasos-filter {
  border: 1px solid var(--prog-border);
  background: #fff;
  border-radius: 999px;
  padding: 0.16rem 0.52rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--prog-muted);
  cursor: pointer;
  line-height: 1.2;
}

.pasos-filter:hover {
  border-color: rgba(80, 60, 40, 0.28);
  color: var(--prog-text);
}

.pasos-filter.is-active {
  background: #3a3229;
  border-color: #3a3229;
  color: #fff;
}

.side-box {
  border: 1px solid var(--prog-border);
  border-radius: 13px;
  background: #fffdf9;
  overflow: hidden;
}

.side-section {
  padding: 0.82rem;
  border-bottom: 1px solid var(--prog-border);
}

.side-section:last-child {
  border-bottom: 0;
}

.side-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--prog-muted);
  font-weight: 850;
  margin-bottom: 0.48rem;
}

.side-list {
  display: grid;
  gap: 0.55rem;
}

.side-item strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 850;
  color: var(--prog-text);
  line-height: 1.3;
}

.side-item small {
  display: block;
  margin-top: 0.08rem;
  color: var(--prog-muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.side-notes {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--prog-text);
}

.chip-list {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--prog-border);
  border-radius: 999px;
  background: #fff;
  padding: 0.28rem 0.52rem;
  font-size: 0.73rem;
  font-weight: 800;
  color: var(--prog-text);
}

.chip-green {
  background: var(--prog-green-soft);
  color: var(--prog-green);
  border-color: rgba(15, 138, 106, 0.16);
}

.empty {
  padding: 1rem;
  color: var(--prog-muted);
  font-size: 0.9rem;
}

.sin-hora-title {
  margin: 1.2rem 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 850;
  color: var(--prog-text);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.32);
  z-index: 1050;
  display: none;
}

.drawer-backdrop.show {
  display: block;
}

.plantilla-drawer,
.momento-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(780px, 96vw);
  background: #fff;
  z-index: 1051;
  transform: translateX(105%);
  transition: transform 0.22s ease;
  box-shadow: -20px 0 60px rgba(25, 18, 10, 0.18);
  display: flex;
  flex-direction: column;
}

.momento-drawer {
  width: min(860px, 96vw);
}

.plantilla-drawer.show,
.momento-drawer.show {
  transform: translateX(0);
}

.drawer-head {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--prog-border);
  background: var(--prog-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.drawer-head h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 850;
  color: var(--prog-text);
}

.drawer-head p {
  margin: 0.25rem 0 0;
  color: var(--prog-muted);
  font-size: 0.84rem;
}

.drawer-body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.15rem;
}

.drawer-footer {
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--prog-border);
  background: var(--prog-soft);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 0.7rem;
  border: 1px solid var(--prog-border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--prog-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
}

.icon-btn:hover {
  background: var(--prog-soft);
  color: var(--prog-primary);
  text-decoration: none;
}

.plantilla-selector {
  display: grid;
  gap: 0.75rem;
}

.plantilla-option {
  display: block;
  margin: 0;
  cursor: pointer;
}

.plantilla-option input {
  display: none;
}

.plantilla-option-card {
  border: 1px solid var(--prog-border);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  background: #fff;
  transition: all 0.18s ease;
}

.plantilla-option input:checked + .plantilla-option-card {
  background: var(--prog-primary-soft);
  border-color: var(--prog-primary);
  box-shadow: 0 0 0 3px rgba(154, 106, 67, 0.12);
}

.plantilla-option-title {
  font-weight: 850;
  color: var(--prog-text);
  font-size: 0.95rem;
}

.plantilla-option-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.plantilla-option-meta span {
  display: inline-flex;
  border-radius: 999px;
  background: #f2eadf;
  color: #8a633f;
  padding: 0.22rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 850;
}

.plantilla-option-desc {
  margin-top: 0.55rem;
  color: #666;
  font-size: 0.82rem;
  line-height: 1.4;
}

.form-section {
  border: 1px solid var(--prog-border);
  border-radius: 14px;
  padding: 1rem;
  background: #fff;
  margin-bottom: 1rem;
}

.form-section h4 {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  font-weight: 850;
}

.momento-drawer .form-section {
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.65rem;
}

.momento-drawer .form-section h4 {
  margin: 0 0 0.4rem;
}

.momento-drawer .form-section--preguntas {
  background: #fffdf9;
}

.momento-drawer .form-section--top {
  padding: 0.5rem 0.7rem;
}

.drawer-top-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.drawer-top-line .segmented {
  flex: 0 0 auto;
}

.momento-drawer .drawer-top-line .segmented span {
  padding: 0.32rem 0.5rem;
  font-size: 0.74rem;
}

.drawer-top-line input[type="time"] {
  width: 7.2rem;
  flex: 0 0 auto;
}

.drawer-top-line input[type="text"] {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 767.98px) {
  .drawer-top-line {
    flex-wrap: wrap;
  }

  .drawer-top-line input[type="time"],
  .drawer-top-line input[type="text"] {
    width: auto;
    flex: 1 1 120px;
  }
}

.form-details > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--prog-text);
  list-style: none;
}

.form-details > summary::-webkit-details-marker {
  display: none;
}

.form-details > summary::after {
  content: "▾";
  float: right;
  color: var(--prog-muted);
  font-weight: 500;
}

.form-details:not([open]) > summary::after {
  content: "▸";
}

.drawer-q {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--prog-border);
  border-radius: 10px;
  background: #fff;
}

.drawer-q.is-ok {
  background: rgba(15, 138, 106, 0.05);
  border-color: rgba(15, 138, 106, 0.14);
}

.drawer-q.is-off {
  background: #f3f1ee;
  border-color: rgba(80, 60, 40, 0.08);
}

.drawer-q-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
}

.drawer-q-head .drawer-q-label {
  margin-bottom: 0.28rem;
}

.drawer-q-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px auto;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.drawer-q-edit .js-pregunta-titulo {
  font-size: 0.84rem;
  font-weight: 600;
  color: #2f2a24;
}

@media (max-width: 720px) {
  .drawer-q-edit {
    grid-template-columns: 1fr auto;
  }
  .drawer-q-edit .js-pregunta-tipo {
    grid-column: 1 / -1;
  }
}

.drawer-q-del,
.mom-q-del {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #c84b40;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.drawer-q-del:hover,
.mom-q-del:hover {
  text-decoration: underline;
}

.mom-q-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.mom-q-head .mom-q-label {
  margin-bottom: 0;
}

.mom-q-titulo {
  width: 100%;
  border: 1px solid rgba(80, 60, 40, 0.16);
  border-radius: 8px;
  padding: 0.32rem 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #2f2a24;
  background: #fff;
}

.mom-q-form--custom {
  grid-template-columns: 132px minmax(0, 1fr) 128px auto;
}

.drawer-q-help {
  font-size: 0.72rem;
  color: #9a9288;
  margin: -0.1rem 0 0.28rem;
}

.drawer-q-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 0.4rem;
  align-items: start;
}

.drawer-q-fields .js-pregunta-input {
  font-weight: 600;
  color: #2f2a24;
}

.drawer-item-fields {
  grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr) auto auto;
}

.drawer-item-fields .el-btn {
  padding: 0.32rem 0.55rem;
  font-size: 0.76rem;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--prog-border);
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
}

.segmented label {
  margin: 0;
}

.segmented input {
  display: none;
}

.segmented span {
  display: inline-flex;
  padding: 0.52rem 0.7rem;
  border-right: 1px solid var(--prog-border);
  color: var(--prog-muted);
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
}

.segmented label:last-child span {
  border-right: 0;
}

.segmented input:checked + span {
  background: var(--prog-primary-soft);
  color: var(--prog-primary);
}

.drawer-list {
  display: grid;
  gap: 0.5rem;
}

.drawer-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--prog-border);
  border-radius: 0.75rem;
  background: #fffdf9;
}

.drawer-list-row strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 850;
}

.drawer-list-row small {
  display: block;
  color: var(--prog-muted);
  font-size: 0.72rem;
  margin-top: 0.1rem;
}

.drawer-list-row--ok {
  background: rgba(15, 138, 106, 0.06);
  border-color: rgba(15, 138, 106, 0.16);
}

.js-pregunta-estado {
  min-width: 8.5rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.autocomplete-box {
  position: relative;
  z-index: 1060;
  margin-top: 0.35rem;
  border: 1px solid var(--prog-border);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(25, 18, 10, 0.12);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}

.autocomplete-item {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--prog-border-soft);
  cursor: pointer;
}

.autocomplete-item:last-child {
  border-bottom: 0;
}

.autocomplete-item:hover {
  background: var(--prog-soft);
}

.autocomplete-item strong {
  display: block;
  font-size: 0.82rem;
  color: var(--prog-text);
}

.autocomplete-item small {
  display: block;
  font-size: 0.72rem;
  color: var(--prog-muted);
  margin-top: 0.12rem;
}

.autocomplete-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.12rem 0.38rem;
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--prog-primary-soft);
  color: var(--prog-primary);
  margin-left: 0.25rem;
}

@media (max-width: 992px) {
  .programa-header {
    flex-direction: column;
  }
  .programa-actions {
    justify-content: flex-start;
  }
  .bloque {
    grid-template-columns: 1fr;
  }
  .bloque-hora {
    border-right: 0;
    border-bottom: 1px solid var(--prog-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  .fin {
    display: inline;
    margin: 0;
    text-align: left;
  }
  .bloque-top {
    flex-direction: column;
  }
  .bloque-summary {
    justify-content: flex-start;
  }
  .bloque-grid {
    grid-template-columns: 1fr;
  }
  .momento {
    grid-template-columns: 55px 28px minmax(0, 1fr) auto;
  }
  .momento .aplica {
    display: none;
  }
}
/* ===== extracted from templates/organizador/evento/proveedores.twig ===== */
.el-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
  background: #fff;
}

.el-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.el-card-body {
  padding: 14px 16px;
}

.el-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  color: rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

.el-badge.green {
  background: rgba(15, 111, 102, 0.08);
  border-color: rgba(15, 111, 102, 0.18);
  color: #0f6f66;
}

.el-badge.gray {
  background: rgba(108, 117, 125, 0.08);
  border-color: rgba(108, 117, 125, 0.18);
  color: rgba(108, 117, 125, 0.95);
}

.el-badge.orange {
  background: rgba(214, 132, 25, 0.09);
  border-color: rgba(214, 132, 25, 0.18);
  color: #9a5a10;
}

.el-table-wrap {
  overflow-x: auto;
  position: relative;
}

.el-table {
  min-width: 980px;
}

.el-table td,
.el-table th {
  vertical-align: middle;
}

.el-table th:nth-child(2),
.el-table td:nth-child(2) {
  min-width: 280px;
}

.el-table th:nth-child(3),
.el-table td:nth-child(3) {
  min-width: 180px;
}

.el-table th.el-actions-col,
.el-table td.el-actions-col {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 3;
  box-shadow: -8px 0 14px rgba(20, 30, 60, 0.04);
}

.el-table th.el-actions-col {
  z-index: 4;
  background: #fff;
}

.el-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.el-muted {
  color: rgba(0, 0, 0, 0.55);
}

.el-notes {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-round {
  border-radius: 999px;
  font-weight: 800;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.el-modal-title {
  font-weight: 900;
  font-size: 1.05rem;
}

.el-softbox {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 14px;
}

.el-help {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.55);
}

.el-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 12px 0;
}

.el-suggest {
  position: relative;
}

.el-suggest-list {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 30, 60, 0.08);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
  display: none;
  margin-top: 6px;
}

.el-suggest-item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.el-suggest-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.el-suggest-item .name {
  font-weight: 800;
}

.el-suggest-item .meta {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.55);
}

.el-suggest-empty {
  padding: 12px 14px;
  font-size: 0.88rem;
  color: rgba(0, 0, 0, 0.68);
  line-height: 1.4;
}

.el-origin-state {
  min-height: 28px;
}

.el-origin-state .el-badge {
  margin-top: 4px;
  white-space: normal;
  line-height: 1.35;
}

.el-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.el-provider-lock {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}

.el-provider-lock .title {
  font-weight: 800;
}

.el-provider-lock .meta {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.55);
}

.el-provider-name {
  font-weight: 800;
}

.el-provider-sub {
  font-size: 0.83rem;
  color: rgba(0, 0, 0, 0.55);
}

.el-contact-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.el-contact-line a {
  text-decoration: none;
}

/* Tarjetas móviles */
.el-mobile-list {
  display: none;
}

.el-provider-mobile-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20, 30, 60, 0.05);
}

.el-provider-mobile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.el-provider-mobile-title {
  font-weight: 900;
  line-height: 1.2;
}

.el-provider-mobile-meta {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 3px;
}

.el-provider-mobile-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.el-provider-mobile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 12px;
}

.el-mobile-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 800;
  margin-bottom: 2px;
}

.el-mobile-value {
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.8);
}

@media (max-width: 991.98px) {
  .el-desktop-table {
    display: none;
  }
  .el-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .el-card-body {
    padding: 12px;
  }
  .el-provider-lock {
    flex-direction: column;
  }
  .el-provider-lock .btn {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .el-modal-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575.98px) {
  .el-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .btn-round {
    width: 100%;
    justify-content: center;
  }
  .d-flex.gap-2 {
    width: 100%;
    flex-direction: column;
  }
  .el-provider-mobile-head {
    gap: 8px;
  }
  .el-provider-mobile-actions .btn-icon {
    width: 34px;
    height: 34px;
  }
}
/* ===== extracted from templates/organizador/evento/tarea.twig ===== */
.estado-tarea {
  font-weight: bold;
  color: white;
  border: none;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
}

.estado-tarea.bg-warning {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

.estado-tarea.bg-info {
  background-color: #0dcaf0 !important;
  color: #212529 !important;
}

.estado-tarea.bg-success {
  background-color: #198754 !important;
  color: white !important;
}

/* ===== extracted from templates/organizador/evento/tareas copy.twig ===== */
/* Variables CSS mejoradas */
:root {
  --task-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --task-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
  --task-border-radius: 12px;
  --task-padding: 1.5rem;
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Task Items con mejor rendimiento */
.task-item {
  background: white;
  border-radius: var(--task-border-radius);
  padding: var(--task-padding);
  margin-bottom: 1rem;
  border: 1px solid var(--gray-100);
  box-shadow: var(--task-shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  will-change: transform, box-shadow;
  contain: layout style paint;
}

.task-item:hover {
  box-shadow: var(--task-shadow-hover);
  transform: translateY(-2px);
}

/* Estados con mejor contraste visual */
.task-item.overdue {
  border-left: 4px solid #dc3545;
}

.task-item.today {
  border-left: 4px solid #ffc107;
}

.task-item.upcoming {
  border-left: 4px solid var(--teal);
}

.task-item.completed {
  opacity: 0.85;
  background: rgba(248, 249, 250, 0.8);
}

/* Mejorado sistema de badges */
.task-meta .badge {
  font-size: 0.75rem;
  padding: 0.35em 0.65em;
  border-radius: 6px;
  font-weight: 500;
}

/* ===========================================
	   SISTEMA DE BÚSQUEDA MEJORADO
	   =========================================== */
.search-container {
  background: rgba(248, 249, 250, 0.8);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
}

/* Input de búsqueda principal */
.search-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  border-radius: 12px !important;
  border: 2px solid #e9ecef !important;
  font-size: 0.95rem;
  height: 44px;
  transition: all var(--transition-smooth);
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.search-input:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 180, 166, 0.15) !important;
  outline: none;
  transform: translateY(-1px);
}

.search-input::placeholder {
  color: #6c757d;
  font-style: italic;
}

/* Iconos del buscador */
.search-icon {
  position: absolute;
  left: 0.85rem;
  color: #6c757d;
  z-index: 3;
  font-size: 1rem;
  transition: color var(--transition-fast);
}

.search-input:focus + .search-icon,
.search-input:not(:placeholder-shown) + .search-icon {
  color: var(--teal);
}

/* Botón limpiar búsqueda */
.btn-clear {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  color: #6c757d;
  padding: 0.375rem;
  border-radius: 6px;
  transition: all var(--transition-fast);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.btn-clear:hover {
  background: rgba(108, 117, 125, 0.1);
  color: #495057;
  transform: scale(1.1);
}

.btn-clear:active {
  transform: scale(0.95);
}

/* Filtros rápidos mejorados */
.btn-filter {
  border-radius: 20px !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border: 2px solid #e9ecef !important;
  background: white !important;
  color: #6c757d !important;
  transition: all var(--transition-fast) !important;
  position: relative;
  overflow: hidden;
}

.btn-filter:hover {
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 180, 166, 0.15);
}

.btn-filter.active,
.btn-check:checked + .btn-filter {
  background: linear-gradient(135deg, var(--teal), #00a693) !important;
  border-color: var(--teal) !important;
  color: white !important;
  box-shadow: 0 3px 12px rgba(0, 180, 166, 0.3);
  transform: translateY(-1px);
}

.btn-filter i {
  transition: transform var(--transition-fast);
}

.btn-filter:hover i,
.btn-filter.active i {
  transform: scale(1.1);
}

/* Radio buttons ocultos */
.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* Filtros avanzados */
.form-select {
  border-radius: 10px !important;
  border: 2px solid #e9ecef !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  background-color: white !important;
  transition: all var(--transition-fast);
}

.form-select:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 0.15rem rgba(0, 180, 166, 0.15) !important;
}

.form-select option {
  padding: 0.5rem;
}

/* Botón limpiar filtros */
#clearAllFilters {
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast);
}

#clearAllFilters:hover {
  background-color: #f8f9fa !important;
  border-color: #adb5bd !important;
  transform: translateY(-1px);
}

/* Resultados de búsqueda */
.search-results-header {
  background: white;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.search-results-info {
  color: #6c757d;
  font-size: 0.9rem;
}

.search-results-info strong {
  color: var(--teal);
  font-weight: 600;
}

/* ===========================================
	   SISTEMA DE PRIORIDADES MEJORADO
	   =========================================== */
/* Prioridades con mejor jerarquía visual */
.priority-alta .task-title::before {
  content: "🔥";
  margin-right: 0.5rem;
  font-size: 1.1em;
  animation: pulse 2s infinite;
}

.priority-media .task-title::before {
  content: "⚡";
  margin-right: 0.5rem;
  font-size: 1.1em;
}

.priority-baja .task-title::before {
  content: "📝";
  margin-right: 0.5rem;
  font-size: 1.1em;
  opacity: 0.7;
}

/* Bordes laterales por prioridad */
.priority-alta {
  border-left: 4px solid #dc3545 !important;
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.08) 0%, white 12%) !important;
}

.priority-alta:hover {
  border-left-color: #bb2d3b !important;
  box-shadow: 0 4px 16px rgba(220, 53, 69, 0.15);
}

.priority-media {
  border-left: 4px solid #ffc107 !important;
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.08) 0%, white 12%) !important;
}

.priority-media:hover {
  border-left-color: #ffca2c !important;
  box-shadow: 0 4px 16px rgba(255, 193, 7, 0.15);
}

.priority-baja {
  border-left: 4px solid #198754 !important;
  background: linear-gradient(90deg, rgba(25, 135, 84, 0.08) 0%, white 12%) !important;
}

.priority-baja:hover {
  border-left-color: #146c43 !important;
  box-shadow: 0 4px 16px rgba(25, 135, 84, 0.15);
}

/* Badges de prioridad mejorados */
.priority-badge-alta {
  background: linear-gradient(135deg, #dc3545, #bb2d3b) !important;
  color: white !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.priority-badge-media {
  background: linear-gradient(135deg, #ffc107, #ffb300) !important;
  color: #212529 !important;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

.priority-badge-baja {
  background: linear-gradient(135deg, #198754, #146c43) !important;
  color: white !important;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(25, 135, 84, 0.3);
}

/* Efectos especiales para prioridad alta */
.priority-alta.overdue {
  animation: urgentPulse 3s infinite;
  border-left-width: 5px !important;
}

.priority-alta.today {
  border-left-width: 5px !important;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2);
}

.task-item.in-view {
  transform: translateX(0);
  opacity: 1;
}

.task-item {
  transform: translateX(-10px);
  opacity: 0;
  transition: all 0.3s ease-out;
}

/* ===========================================
  SUBTAREAS COMO BADGE EN METADATOS
  =========================================== */
/* Eliminar el container de subtareas separado */
.subtasks-container {
  display: none !important;
}

/* Badge de subtareas para incluir en los metadatos */
.subtasks-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(0, 180, 166, 0.1);
  color: var(--teal);
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
}

.subtasks-badge:hover {
  background: rgba(0, 180, 166, 0.15);
  color: var(--teal);
  transform: scale(1.05);
  text-decoration: none;
}

.subtasks-badge:focus {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Estados de progreso en el badge */
.subtasks-badge.progress-complete {
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
}

.subtasks-badge.progress-warning {
  background: rgba(255, 193, 7, 0.1);
  color: #e0a800;
}

.subtasks-badge.progress-danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

/* Chevron en el badge */
.subtasks-badge i {
  font-size: 0.6rem;
  transition: transform 0.3s ease;
}

.subtasks-badge[aria-expanded=true] i {
  transform: rotate(180deg);
}

/* Lista de subtareas simplificada */
.subtasks-detail-simple {
  background: rgba(248, 249, 250, 0.5);
  border-radius: 6px;
  padding: 0.5rem;
  margin-top: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.subtask-item-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.subtask-item-simple:last-child {
  border-bottom: none;
}

.subtask-item-simple.completed span {
  text-decoration: line-through;
  color: #6c757d;
  opacity: 0.7;
}

.subtask-item-simple i {
  font-size: 0.65rem;
  margin-right: 0.3rem;
  width: 10px;
}

.subtask-item-simple small {
  font-size: 0.65rem;
  color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
  .subtasks-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
  }
  .subtasks-badge i {
    font-size: 0.55rem;
  }
}
/* ===========================================
	   RESPONSIVE DESIGN
	   =========================================== */
@media (max-width: 768px) {
  .search-container {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  .search-input {
    font-size: 16px;
    height: 48px;
  }
  .btn-filter {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  .btn-filter span {
    display: none;
  }
  .search-results-header {
    padding: 0.75rem 1rem;
  }
  .subtasks-container {
    padding: 1rem;
  }
  .subtasks-counter::after {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
  .priority-alta .task-title::before,
  .priority-media .task-title::before,
  .priority-baja .task-title::before {
    font-size: 1em;
  }
  .priority-alta,
  .priority-media,
  .priority-baja {
    border-left-width: 3px !important;
  }
  .task-item {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }
  .task-meta {
    flex-direction: column;
    gap: 0.5rem;
  }
  .task-meta .badge {
    align-self: flex-start;
  }
}
/* Estados de progreso con colores */
.progress-complete {
  border-left-color: #28a745 !important;
}

.progress-warning {
  border-left-color: #ffc107 !important;
}

.progress-danger {
  border-left-color: #dc3545 !important;
}

/* Loading states */
.task-item.loading {
  opacity: 0.6;
  pointer-events: none;
}

.task-item.loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Botón expandir/colapsar corregido */
/* Bootstrap 5 - Botón collapse */
.btn-link.text-teal {
  --bs-btn-color: var(--teal);
  --bs-btn-hover-color: var(--teal);
  --bs-btn-active-color: var(--teal);
  --bs-btn-disabled-color: var(--teal);
  background: none !important;
  border: none !important;
  padding: 0.25rem !important;
  border-radius: 6px !important;
  transition: all var(--transition-fast);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-shadow: none !important;
}

.btn-link.text-teal:hover,
.btn-link.text-teal:focus {
  background: rgba(0, 180, 166, 0.1) !important;
  color: var(--teal) !important;
  text-decoration: none !important;
  transform: scale(1.1);
  box-shadow: none !important;
}

.btn-link.text-teal:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Animación del chevron para Bootstrap 5 */
.btn-link.text-teal i {
  transition: transform 0.35s ease;
  transform-origin: center;
}

.btn-link.text-teal[aria-expanded=true] i {
  transform: rotate(180deg);
}

.subtasks-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(0, 180, 166, 0.1);
  color: var(--teal);
  padding: 0.2rem 0.4rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.subtasks-badge:hover {
  background: rgba(0, 180, 166, 0.15);
  transform: scale(1.05);
}

/* ===== extracted from templates/organizador/evento/tareaslistado.twig ===== */
/* CSS específico para vista listado */
.tabla-tareas {
  font-size: 0.9rem;
}

.tabla-tareas th {
  border-top: none;
  font-weight: 600;
  color: #495057;
  background: #f8f9fa !important;
}

.tabla-tareas .sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.tabla-tareas .sortable:hover {
  background: #e9ecef !important;
}

.priority-indicator {
  width: 4px;
  height: 30px;
  border-radius: 2px;
}

.priority-indicator.priority-alta {
  background: linear-gradient(to bottom, #dc3545, #ff4757);
}

.priority-indicator.priority-media {
  background: linear-gradient(to bottom, #ffc107, #ffb142);
}

.priority-indicator.priority-baja {
  background: linear-gradient(to bottom, #28a745, #2ed573);
}

.task-info .task-title {
  color: #2c3e50;
  font-size: 0.95rem;
}

.priority-badge.priority-alta {
  background: linear-gradient(135deg, #dc3545, #ff4757) !important;
  color: white;
}

.priority-badge.priority-media {
  background: linear-gradient(135deg, #ffc107, #ffb142) !important;
  color: #2c3e50;
}

.priority-badge.priority-baja {
  background: linear-gradient(135deg, #28a745, #2ed573) !important;
  color: white;
}

.status-badge.status-pendiente {
  background: #6c757d !important;
}

.status-badge.status-en_proceso {
  background: #007bff !important;
}

.status-badge.status-completada {
  background: #28a745 !important;
}

/* Filas con estados */
.table-danger {
  background: rgba(220, 53, 69, 0.1) !important;
}

.table-warning {
  background: rgba(255, 193, 7, 0.1) !important;
}

/* Acciones masivas */
.acciones-masivas {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .tabla-tareas {
    font-size: 0.8rem;
  }
  .tabla-tareas .d-none.d-md-table-cell {
    display: none !important;
  }
}
/* ===== extracted from templates/organizador/evento/verrespuestasformulario.twig ===== */
.el-list {
  margin: 0;
  padding-left: 1.05rem;
}

.el-list li {
  margin-bottom: 0.25rem;
}

/* ===== extracted from templates/organizador/eventos/evento.twig ===== */
:root {
  --event-radius: 12px;
  /* Arena + sombras suaves */
  --arena-50: #fbf8f3;
  --arena-100: #faf7f4;
  --gray-900: #212529;
  --gray-700: #495057;
  --gray-600: #6c757d;
  --gray-300: #dee2e6;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 28px rgba(20, 30, 60, 0.10);
  --trans: all 0.22s cubic-bezier(0.4,0,0.2,1);
  /* Fallback si no existe en base */
  --teal: #00b4a6;
}

.event-header-compact {
  padding: 0.5rem 0;
}

.metric-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  padding: 0.28rem 0.55rem;
  background: rgba(33, 37, 41, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  font-weight: 700;
  color: var(--gray-700);
  white-space: nowrap;
}

.event-content .card {
  border-radius: var(--event-radius);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.el-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.el-panel {
  background: linear-gradient(135deg, rgba(251, 248, 243, 0.92) 0%, #ffffff 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 1rem;
  transition: var(--trans);
}

.el-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.el-panel--left {
  border-left: 4px solid var(--teal);
}

.el-kv {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.el-kv:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.el-k {
  color: var(--gray-600);
  font-weight: 800;
  min-width: 140px;
}

.el-v {
  color: var(--gray-900);
  font-weight: 800;
  text-align: right;
  flex: 1;
}

.notes-container {
  background: var(--arena-100);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 1rem;
  min-height: 110px;
  box-shadow: var(--shadow-sm);
  transition: var(--trans);
}

.notes-container:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.notes-text {
  color: var(--gray-700);
  line-height: 1.6;
  font-weight: 700;
  margin: 0;
}

.notes-editor textarea {
  resize: vertical;
  min-height: 110px;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  transition: var(--trans);
}

.notes-editor textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 0.2rem rgba(0, 180, 166, 0.15);
  outline: none;
}

.badge-taupe {
  background: rgba(234, 223, 206, 0.85);
  color: #5a4b3b;
  border: 1px solid rgba(90, 75, 59, 0.12);
  font-weight: 800;
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
}

.servicio-highlight {
  padding: 0.35rem 0.8rem;
  border-left: 3px solid #c8b6a6;
  background: #faf7f4;
  font-weight: 600;
  color: #5e5246;
}

@media (max-width: 767px) {
  .el-kv {
    flex-direction: column;
  }
  .el-v {
    text-align: left;
  }
  .el-k {
    min-width: auto;
  }
}
@media (max-width: 767px) {
  .event-header-compact {
    display: none !important;
  }
}
/* ===== extracted from templates/organizador/eventos/plano_medidas_reales.twig ===== */
:root {
  --primary: #3b82f6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
}

.event-content .card {
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.plantillas-bar {
  background: white;
  border: 1px solid var(--gray-200) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.plantillas-bar .plantillas-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto auto auto;
  gap: 10px;
  align-items: end;
}

.plantillas-bar label,
.modal-pl-card label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray-600);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.plantillas-bar select,
.modal-pl-card input,
.modal-pl-card select,
.modal-pl-card textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 13px;
  background: white;
}

.modal-pl {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-pl-card {
  background: white;
  border-radius: 10px;
  padding: 18px 20px;
  width: 560px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal-pl-card h5 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-800);
}

.modal-pl-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.modal-pl-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.btn-accion {
  padding: 6px 12px;
  border: 2px solid var(--gray-300);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.btn-accion:hover {
  background: var(--gray-50);
  border-color: var(--primary);
}

.btn-accion.primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.autocomplete-wrap {
  position: relative;
}

.autocomplete-list {
  position: absolute;
  inset: auto 0 auto 0;
  top: 100%;
  background: white;
  border: 1px solid var(--gray-200);
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.autocomplete-list .ac-item {
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
}

.autocomplete-list .ac-item:hover {
  background: #eff6ff;
  color: var(--primary);
}

.autocomplete-list .ac-empty {
  padding: 10px;
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
}

.autocomplete-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.autocomplete-hint a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
}

.fondo-upload {
  border: 2px dashed var(--gray-300);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  background: var(--gray-50);
  cursor: pointer;
  margin-top: 4px;
  display: block;
}

.fondo-upload.has-file {
  border-style: solid;
  border-color: var(--success);
  background: #f0fdf4;
}

.fondo-upload input[type=file] {
  display: none;
}

.fondo-upload .upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-600);
  font-weight: 600;
}

.fondo-preview-wrap {
  position: relative;
  margin-top: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  display: none;
}

.fondo-preview-wrap.active {
  display: block;
}

.fondo-preview-canvas {
  display: block;
  max-width: 100%;
  cursor: crosshair;
  user-select: none;
}

.fondo-preview-canvas.no-calib {
  cursor: default;
}

.calib-info {
  background: white;
  padding: 8px 10px;
  border-top: 1px solid var(--gray-200);
  font-size: 11px;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.calib-status.ok {
  color: var(--success);
  font-weight: 700;
}

.calib-status.pending {
  color: var(--warning);
  font-weight: 700;
}

.calib-actions,
.poligono-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.calib-mini-btn {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  background: white;
  cursor: pointer;
  font-weight: 600;
}

.calib-mini-btn.primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.calib-paso,
.poligono-paso {
  background: #eff6ff;
  border-left: 3px solid var(--primary);
  padding: 8px 10px;
  font-size: 11px;
  color: var(--gray-800);
  margin-top: 8px;
  border-radius: 4px;
  display: none;
}

.calib-paso.active,
.poligono-paso.active {
  display: block;
}

.calib-distancia-real {
  display: none;
  margin-top: 8px;
  background: #eff6ff;
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 10px;
}

.calib-distancia-real.active {
  display: block;
}

.poligono-section {
  margin-top: 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px;
  background: #fafafa;
}

.poligono-tramos {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  margin-top: 8px;
}

.poligono-tramos.active {
  display: block;
}

.poligono-tramo-row {
  display: grid;
  grid-template-columns: 28px 1fr 90px 28px;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 12px;
}

.poligono-tramo-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.poligono-resumen {
  margin-top: 8px;
  font-size: 11px;
  color: var(--gray-600);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.plano-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  height: calc(100vh - 180px);
  min-height: 500px;
  background: var(--gray-50);
  overflow: hidden;
}

.panel-invitados {
  background: #fafafa;
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-invitados-header {
  padding: 16px;
  background: white;
  border-bottom: 1px solid var(--gray-200);
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.mini-stat {
  background: white;
  padding: 12px 8px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid var(--gray-200);
}

.mini-stat-numero {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1;
}

.mini-stat-label {
  display: block;
  font-size: 10px;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-top: 4px;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.search-box {
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 13px;
}

.search-box i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
}

.lista-invitados {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: #fafafa;
}

.grupo-container {
  margin-bottom: 16px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.grupo-header {
  background: white;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--gray-100);
}

.grupo-titulo {
  font-weight: 700;
  color: var(--gray-800);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.grupo-count {
  background: var(--primary);
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.grupo-drag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--primary);
  border: none;
  font-size: 10px;
  font-weight: 700;
  color: white;
  cursor: grab;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grupo-invitados {
  max-height: 600px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 8px;
}

.grupo-container.collapsed .grupo-invitados {
  max-height: 0;
  padding: 0;
}

.invitado-item {
  background: #f9fafb;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: move;
  display: flex;
  align-items: center;
  gap: 10px;
}

.invitado-item.con-mesa {
  background: #f0fdf4;
  border-color: #86efac;
}

.invitado-info {
  flex: 1;
  min-width: 0;
}

.invitado-nombre {
  font-weight: 600;
  color: var(--gray-800);
  font-size: 13px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.badge-icon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 600;
}

.badge-confirmado {
  background: #dcfce7;
  color: var(--success);
}

.badge-pendiente {
  background: #fef3c7;
  color: var(--warning);
}

.badge-mesa {
  background: #dbeafe;
  color: var(--primary);
  cursor: pointer;
}

.panel-derecho {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel-acciones {
  background: white;
  border-bottom: 2px solid var(--gray-200);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.zoom-controls {
  display: flex;
  gap: 5px;
  margin-left: auto;
}

.btn-zoom {
  width: 30px;
  height: 30px;
  border: 2px solid var(--gray-300);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plano-wrapper {
  flex: 1;
  overflow: hidden;
  background: linear-gradient(var(--gray-200) 1px, transparent 1px), linear-gradient(90deg, var(--gray-200) 1px, transparent 1px);
  background-size: 50px 50px;
  position: relative;
}

#plano {
  position: relative;
  width: 3000px;
  height: 2500px;
  transform-origin: 0 0;
}

.mesa {
  position: absolute;
  background: white;
  border: 3px solid var(--gray-700);
  border-radius: 12px;
  cursor: move;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 5;
  transform-origin: center center;
}

.mesa-redonda {
  border-radius: 50%;
}

.mesa-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mesa-nombre {
  font-size: 16px;
  font-weight: bold;
  color: var(--gray-800);
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  padding: 5px 10px;
  border-radius: 6px;
}

.capacidad-input {
  width: 40px;
  text-align: center;
  padding: 2px;
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  font-size: 11px;
  margin-top: 5px;
  pointer-events: auto;
}

.asiento {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  z-index: 8;
}

.asiento.ocupado {
  background: linear-gradient(145deg, var(--primary), #2563eb);
  color: white;
  border-color: #1e40af;
  font-weight: bold;
}

.stats-floating {
  position: fixed;
  bottom: 15px;
  right: 15px;
  background: white;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  border: 2px solid var(--gray-200);
  z-index: 1000;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-label {
  font-size: 9px;
  color: var(--gray-600);
  text-transform: uppercase;
}

.stat-numero {
  font-size: 16px;
  font-weight: bold;
  color: var(--gray-800);
}

@media (max-width: 992px) {
  .plantillas-bar .plantillas-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .plantillas-bar .plantillas-row,
  .plano-container {
    grid-template-columns: 1fr;
  }
  .panel-invitados {
    display: none;
  }
}
/* ===== extracted from templates/organizador/index.twig ===== */
.q-card {
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.q-page-subtitle {
  color: #7a7a7a;
  font-size: 0.95rem;
}

.q-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  border: 1px solid #e7e7e7;
  background: #fafafa;
  color: #555;
}

.q-kpi {
  border: 1px solid #eee;
  border-radius: 14px;
  background: #fff;
  padding: 1rem;
  height: 100%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
}

.q-kpi-label {
  color: #7d7d7d;
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}

.q-kpi-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.1;
}

.q-table th {
  font-size: 0.84rem;
  color: #666;
  font-weight: 600;
  white-space: nowrap;
}

.q-table td {
  vertical-align: middle;
}

.q-event-title {
  font-weight: 600;
  color: #2f2a25;
}

.q-event-sub {
  font-size: 0.85rem;
  color: #7a736b;
  margin-top: 0.15rem;
}

.q-empty {
  border: 1px dashed #ddd;
  border-radius: 14px;
  background: #fcfcfc;
  color: #7a736b;
  padding: 1rem;
}

/* ===== extracted from templates/organizador/notificaciones/index.twig ===== */
.notifications-page {
  --el-primary: #00a99d;
  --el-primary-dark: #008f85;
  --el-soft: #ecfeff;
  --el-text: #0f172a;
  --el-muted: #64748b;
  --el-border: #e5e7eb;
  --el-bg: #ffffff;
  --el-card: #ffffff;
  --el-danger: #dc2626;
  --el-warning: #d97706;
  --el-success: #059669;
  padding: 1.5rem;
}

.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.notifications-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--el-text);
  letter-spacing: -0.02em;
}

.notifications-subtitle {
  margin: 0.35rem 0 0;
  color: var(--el-muted);
  font-size: 0.95rem;
}

.notifications-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-el-primary {
  background: var(--el-primary);
  border-color: var(--el-primary);
  color: #fff;
}

.btn-el-primary:hover,
.btn-el-primary:focus {
  background: var(--el-primary-dark);
  border-color: var(--el-primary-dark);
  color: #fff;
}

.notifications-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.notifications-kpi {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.notifications-kpi::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 72px;
  background: var(--el-soft);
  border-bottom-left-radius: 100%;
  opacity: 0.8;
}

.notifications-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--el-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--el-primary-dark);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.notifications-kpi-label {
  color: var(--el-muted);
  font-size: 0.82rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
  line-height: 1.2;
}

.notifications-kpi-value {
  margin-top: 0.2rem;
  color: var(--el-text);
  font-size: 1.75rem;
  font-weight: 850;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.notifications-card {
  background: var(--el-card);
  border: 1px solid var(--el-border);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.notifications-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) auto auto;
  gap: 0.75rem;
  align-items: end;
  padding: 1rem;
  border-bottom: 1px solid var(--el-border);
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.notifications-filters .form-label {
  font-size: 0.78rem;
  color: var(--el-muted);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.notifications-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.notifications-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.notifications-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-weight: 800;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--el-border);
  white-space: nowrap;
}

.notifications-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

.notifications-table tbody tr:hover td {
  background: #fbfdff;
}

.notification-main {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.notification-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--el-soft);
  color: var(--el-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.notification-avatar--whatsapp {
  background: #ecfdf5;
  color: #047857;
}

.notification-avatar--email {
  background: #eff6ff;
  color: #1d4ed8;
}

.notification-canal {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

.notification-canal--whatsapp {
  background: #ecfdf5;
  color: #047857;
}

.notification-canal--email {
  background: #eff6ff;
  color: #1d4ed8;
}

.notification-title {
  color: var(--el-text);
  font-weight: 750;
  line-height: 1.2;
}

.notification-subtitle {
  color: var(--el-muted);
  font-size: 0.82rem;
  margin-top: 0.1rem;
}

.notification-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.32rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.notification-badge--pending,
.notification-badge--scheduled {
  background: #ecfeff;
  color: #A88B68;
}

.notification-badge--sent {
  background: #ecfdf5;
  color: #047857;
}

.notification-badge--delivered {
  background: #e0f2fe;
  color: #0369a1;
}

.notification-badge--read {
  background: #eef2ff;
  color: #4338ca;
}

.notification-badge--failed {
  background: #fef2f2;
  color: #b91c1c;
}

.notification-badge--cancelled {
  background: #f1f5f9;
  color: #475569;
}

.notification-badge--default {
  background: #f8fafc;
  color: #475569;
}

.notification-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.notification-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--el-muted);
}

.notification-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 0.75rem;
  border-radius: 20px;
  background: var(--el-soft);
  color: var(--el-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
}

.notification-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.notification-detail-item {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 14px;
  padding: 0.85rem;
}

.notification-detail-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.notification-detail-value {
  color: #0f172a;
  font-weight: 650;
  word-break: break-word;
}

.notification-error-box {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 14px;
  padding: 0.85rem;
  white-space: pre-wrap;
}

.notification-message-box {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.85rem;
  white-space: pre-wrap;
}

.notification-whatsapp-preview {
  display: inline-block;
  max-width: 560px;
  background: #e0f2fe;
  color: #0f172a;
  border-radius: 22px;
  padding: 1rem 1.15rem;
  line-height: 1.45;
  font-size: 0.95rem;
  white-space: normal;
}

.notification-whatsapp-preview strong {
  font-weight: 800;
}

.notification-whatsapp-preview p {
  margin: 0 0 0.9em;
}

.notification-whatsapp-preview p:last-child {
  margin-bottom: 0;
}

.notification-email-preview {
  max-width: 560px;
  background: #fff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.15rem;
  line-height: 1.5;
  font-size: 0.95rem;
  white-space: pre-wrap;
}

.notification-technical-details {
  border-top: 1px solid #e5e7eb;
  margin-top: 1rem;
  padding-top: 1rem;
}

.notification-technical-summary {
  cursor: pointer;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .notifications-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .notifications-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .notifications-page {
    padding: 0.75rem;
  }
  .notifications-header {
    flex-direction: column;
    margin-bottom: 1rem;
  }
  .notifications-title {
    font-size: 1.45rem;
  }
  .notifications-subtitle {
    font-size: 0.88rem;
    line-height: 1.35;
  }
  .notifications-header-actions {
    width: 100%;
  }
  .notifications-header-actions .btn {
    width: 100%;
  }
  .notifications-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
  }
  .notifications-kpi {
    border-radius: 16px;
    padding: 0.8rem;
    min-height: 112px;
  }
  .notifications-kpi::after {
    width: 52px;
    height: 52px;
  }
  .notifications-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
  }
  .notifications-kpi-label {
    font-size: 0.7rem;
    line-height: 1.15;
  }
  .notifications-kpi-value {
    font-size: 1.35rem;
  }
  .notifications-card {
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .notifications-filters {
    grid-template-columns: 1fr;
    border: 1px solid var(--el-border);
    border-radius: 18px;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  }
  .notifications-table-wrapper {
    overflow-x: visible;
  }
  .notifications-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.85rem;
  }
  .notifications-table thead {
    display: none;
  }
  .notifications-table,
  .notifications-table tbody,
  .notifications-table tr,
  .notifications-table td {
    display: block;
    width: 100%;
  }
  .notifications-table tr {
    background: #fff;
    border: 1px solid var(--el-border);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    padding: 0.25rem 0;
  }
  .notifications-table td {
    border-bottom: 1px solid #f1f5f9;
    padding: 0.78rem 0.95rem;
  }
  .notifications-table td:last-child {
    border-bottom: 0;
  }
  .notifications-table tbody tr:hover td {
    background: transparent;
  }
  .notifications-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--el-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
  }
  .notifications-table td[data-label=Destinatario]::before {
    display: none;
  }
  .notification-main {
    align-items: flex-start;
  }
  .notification-avatar {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }
  .notification-title {
    font-size: 0.95rem;
  }
  .notification-subtitle {
    font-size: 0.8rem;
  }
  .notification-actions {
    justify-content: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .notification-actions .btn {
    width: 100%;
    margin: 0;
  }
  .notification-badge {
    width: fit-content;
  }
  .notification-detail-grid {
    grid-template-columns: 1fr;
  }
  .modal-dialog {
    margin: 0.75rem;
  }
  .modal-content {
    border-radius: 18px !important;
  }
  .notification-whatsapp-preview {
    max-width: 100%;
    font-size: 0.9rem;
    border-radius: 18px;
  }
}
@media (max-width: 380px) {
  .notifications-page {
    padding: 0.65rem;
  }
  .notifications-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
  .notifications-kpi {
    padding: 0.7rem;
    border-radius: 14px;
    min-height: 105px;
  }
  .notifications-kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
  }
  .notifications-kpi-label {
    font-size: 0.68rem;
    line-height: 1.15;
  }
  .notifications-kpi-value {
    font-size: 1.3rem;
  }
  .notifications-kpi::after {
    width: 48px;
    height: 48px;
  }
  .notification-actions {
    grid-template-columns: 1fr;
  }
}
/* ===== extracted from templates/organizador/pagos/index.twig ===== */
.el-card {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.el-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-pendiente {
  background: #fff3cd;
  color: #856404;
}

.badge-parcial {
  background: #cfe2ff;
  color: #084298;
}

.badge-pagado {
  background: #d1e7dd;
  color: #0f5132;
}

.badge-vencido {
  background: #f8d7da;
  color: #842029;
}

.progress {
  height: 6px;
  border-radius: 10px;
}

.table td {
  vertical-align: middle;
}

.td-acciones {
  white-space: nowrap;
  width: 1%;
}

.acciones-pago {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.btn-icono {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: #fff;
  transition: all 0.15s ease-in-out;
}

.btn-icono:hover {
  transform: translateY(-1px);
}

.btn-ver {
  border: 1px solid #3da5ff;
  color: #3da5ff;
}

.btn-ver:hover {
  background: #3da5ff;
  color: #fff;
}

.btn-pagar {
  border: 1px solid #19d3b4;
  color: #19d3b4;
}

.btn-pagar:hover {
  background: #19d3b4;
  color: #fff;
}

.btn-doc {
  border: 1px solid #d2a56d;
  color: #c28b47;
}

.btn-doc:hover {
  background: #d2a56d;
  color: #fff;
}

.filtros-pagos {
  background: #fafbfc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.filtros-pagos .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #495057;
}

.filtros-pagos .form-control,
.filtros-pagos .form-select {
  border-radius: 10px;
}

.contador-resultados {
  font-size: 13px;
  color: #6c757d;
}

/* ===== extracted from templates/organizador/partials/head.twig ===== */
.tagify {
  font-size: 14px;
}

/* ===== extracted from templates/organizador/partials/sidebar-evento.twig ===== */
.el-backlink {
  margin: 4px 10px 8px;
}

.el-backlink a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.1;
}

.el-backlink a:hover {
  background: rgba(0, 0, 0, 0.06);
}

.el-sidehead {
  padding: 0 12px 6px;
  margin-top: 2px;
}

.el-sidehead .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.1;
}

.el-side-sep {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 8px 12px;
}

#sidebarnav .nav-small-cap {
  padding: 6px 12px 4px;
  margin: 0;
}

#sidebarnav .nav-small-cap .nav-small-cap-icon {
  font-size: 18px !important;
}

#sidebarnav .nav-small-cap .hide-menu {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

#sidebarnav .sidebar-link {
  padding: 0.48rem 0.85rem !important;
  min-height: 34px;
}

#sidebarnav .sidebar-link span i {
  font-size: 18px !important;
}

/* ===== extracted from templates/organizador/proveedores/catalogos/nuevo.twig ===== */
.dropzone {
  background: #fafafa;
  border-style: dashed !important;
  border-radius: 12px;
  padding: 22px;
  transition: all 0.15s ease;
  min-height: 180px;
}

.dropzone.dz-drag-hover {
  background: #f3f6ff;
  border-color: #0d6efd !important;
}

.dropzone .dz-message {
  font-size: 1.05rem;
  color: #6c757d;
  margin: 0;
}

.dz-success-mark, .dz-error-mark {
  display: none;
}

/* ✅ previews visibles */
#dropzone-container .previews {
  margin-top: 14px;
}

/* ✅ preview tipo tarjeta */
#dropzone-container .dz-preview {
  width: 100%;
  margin: 10px 0 0 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}

#dropzone-container .dz-preview .dz-image {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  font-size: 20px;
}

#dropzone-container .dz-preview .dz-details {
  display: block !important; /* ✅ pisa tu base.twig */
  opacity: 1 !important;
  position: static !important;
  flex: 1;
  padding: 0;
  text-align: left;
}

#dropzone-container .dz-preview .dz-progress {
  width: 160px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin-left: auto;
}

#dropzone-container .dz-preview .dz-progress .dz-upload {
  border-radius: 999px;
}

#dropzone-container .dz-remove {
  cursor: pointer;
  margin-left: 10px;
}

#msg-error {
  margin-bottom: 1rem;
}

/* ===== extracted from templates/organizador/proveedores/catalogos/ver.twig ===== */
.catalogo-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
}

.catalogo-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 18px;
}

/* Hover preview */
.thumb-wrapper {
  position: relative;
  display: inline-block;
  --preview-url: none;
}

.thumb-wrapper::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 70px;
  width: 220px;
  height: 220px;
  background-image: var(--preview-url);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

.thumb-wrapper:hover::after {
  opacity: 1;
}

/* Evita que la tabla recorte el preview */
.table-responsive,
td {
  overflow: visible;
}

/* ===== extracted from templates/organizador/proveedores/editarProveedor.twig ===== */
.dropzone .dz-preview .dz-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.external-indicator {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  background: rgba(40, 167, 69, 0.9) !important;
  color: white !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  font-weight: bold !important;
  z-index: 10 !important;
}

.existing-external-indicator {
  background: rgba(23, 162, 184, 0.9) !important;
}

.dropzone .dz-preview.dz-image-preview {
  position: relative;
}

.imagen-preview {
  max-height: 200px;
  border-radius: 5px;
}

.imagen-id-indicator {
  position: absolute !important;
  bottom: 5px !important;
  left: 5px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  padding: 1px 4px !important;
  border-radius: 2px !important;
  font-size: 9px !important;
  z-index: 9 !important;
}

/* ===== extracted from templates/organizador/proveedores/fichaProveedor.twig ===== */
/* =============================================
       DETALLE DE PROVEEDOR – estilos locales
       ============================================= */
.proveedor-header-inline {
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin: 1rem 0 1rem;
  box-shadow: 0 2px 10px rgba(45, 33, 24, 0.05);
}

.proveedor-header-inline h1 {
  color: var(--el-deep-brown);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.15;
  margin: 0 0 0.2rem;
}

.proveedor-header-meta {
  color: var(--el-muted);
  font-size: 0.92rem;
  margin: 0;
}

.proveedor-header-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.valoracion-estrellas {
  color: var(--el-warning);
  font-size: 0.9rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.2));
}

.proveedor-header-score {
  color: var(--el-muted);
  font-size: 0.9rem;
}

.proveedor-header-inline .badge.bg-success {
  background: rgba(93, 139, 114, 0.14) !important;
  color: var(--el-success);
  border: 1px solid rgba(93, 139, 114, 0.22);
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.btn-header-inline {
  background: #fff;
  border: 1px solid var(--el-border);
  color: var(--el-deep-brown);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-size: 0.92rem;
  box-shadow: none;
  transition: all 0.25s ease;
}

.btn-header-inline:hover {
  background: var(--el-cream);
  border-color: var(--el-border);
  transform: translateY(-1px);
}

.proveedor-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(45, 33, 24, 0.1);
  transition: all 0.3s ease;
}

.proveedor-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(45, 33, 24, 0.15);
}

.galeria-principal {
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(45, 33, 24, 0.08);
}

.galeria-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniatura-galeria {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.miniatura-galeria:hover {
  transform: scale(1.05);
  border-color: var(--el-taupe);
}

.miniatura-galeria.active {
  border-color: var(--el-taupe);
  box-shadow: 0 0 0 2px rgba(196, 168, 130, 0.3);
}

.info-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm, 0 2px 12px rgba(45, 33, 24, 0.05));
  border: 1px solid var(--el-border);
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(45, 33, 24, 0.09);
}

.sticky-sidebar {
  position: sticky;
  top: 2rem;
}

.servicio-categoria {
  margin-bottom: 2rem;
}

.servicio-categoria h6 {
  color: var(--el-deep-brown);
  border-bottom: 2px solid var(--el-sand);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
  align-items: start;
}

.servicio-item {
  display: flex;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: var(--el-deep-brown);
}

.servicio-check {
  color: var(--el-success);
  font-size: 0.8rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.servicio-icono {
  width: 35px;
  height: 35px;
  background: var(--el-cream);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: var(--el-taupe);
}

.contacto-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--el-cream);
  transition: all 0.3s ease;
}

.contacto-item:last-child {
  border-bottom: none;
}

.contacto-item:hover {
  background: var(--el-cream);
  margin: 0 -1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.contacto-icono {
  width: 40px;
  height: 40px;
  background: var(--el-cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: var(--el-taupe);
  font-size: 1.1rem;
}

.estadistica-box {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid var(--el-border);
  box-shadow: 0 2px 8px rgba(45, 33, 24, 0.04);
  transition: all 0.3s ease;
  height: 100%;
}

.estadistica-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(45, 33, 24, 0.09);
}

.estadistica-numero {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--el-taupe);
}

.estadistica-numero.verde {
  color: var(--el-success);
}

.estadistica-label {
  color: var(--el-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.campo-personal {
  background: var(--el-cream);
  border: 1px solid var(--el-border);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.campo-personal label {
  font-weight: 600;
  color: var(--el-deep-brown);
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.estado-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.estado-activo {
  background: rgba(93, 139, 114, 0.15);
  color: var(--el-success);
}

.estado-pendiente {
  background: rgba(196, 154, 60, 0.15);
  color: var(--el-warning);
}

.estado-pausado {
  background: rgba(192, 123, 107, 0.15);
  color: var(--el-danger);
}

.estado-inactivo {
  background: rgba(122, 107, 93, 0.12);
  color: var(--el-muted);
}

.galeria-eventos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.foto-evento {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.foto-evento:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(45, 33, 24, 0.18);
}

.foto-evento img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-evento-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(45, 33, 24, 0.75));
  color: #fff;
  padding: 0.5rem;
  font-size: 0.75rem;
}

.evento-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(45, 33, 24, 0.07);
  transition: all 0.3s ease;
  margin-bottom: 1rem;
  border: 1px solid var(--el-border);
}

.evento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(45, 33, 24, 0.12);
}

.evento-imagen {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.btn-accion {
  border-radius: 25px;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  margin: 0.25rem;
}

.btn-accion:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 33, 24, 0.12);
}

@media (max-width: 768px) {
  .proveedor-header-inline {
    padding: 0.85rem;
    margin: 0.75rem 0 0.85rem;
  }
  .proveedor-header-inline h1 {
    font-size: 1.2rem;
  }
  .btn-header-inline {
    width: 100%;
    margin-top: 0.5rem;
  }
  .proveedor-avatar {
    width: 80px;
    height: 80px;
  }
  .galeria-principal {
    height: 250px;
  }
  .sticky-sidebar {
    position: static;
  }
}
/* ===== extracted from templates/organizador/proveedores/nuevoProveedor.twig ===== */
#imagenes-dropzone {
  min-height: 180px;
  cursor: pointer;
}

#imagenes-dropzone .dz-preview .dz-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#imagenes-dropzone .dz-preview.dz-image-preview {
  position: relative;
}

.external-indicator {
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  background: rgba(40, 167, 69, 0.9) !important;
  color: white !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  font-weight: bold !important;
  z-index: 10 !important;
}

.imagen-preview {
  max-height: 200px;
  border-radius: 5px;
}

.imagen-id-indicator {
  position: absolute !important;
  bottom: 5px !important;
  left: 5px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  padding: 1px 4px !important;
  border-radius: 2px !important;
  font-size: 9px !important;
  z-index: 9 !important;
}

.filtros {
  display: none;
}

/* ===== extracted from templates/organizador/proveedores/proveedores.twig ===== */
/* =============================================
     PROVEEDORES – estilos locales
     Paleta: var(--el-taupe) / var(--el-sage) / var(--el-deep-brown)
     ============================================= */
/* ── Imagen al hacer hover sobre la tarjeta ── */
.card.hover-img:hover .edit-overlay-icon {
  display: inline-flex !important;
  z-index: 2;
}

/* ── Cabecera de búsqueda ── */
.search-header {
  padding: 1.5rem 0;
  margin-bottom: 1.5rem;
}

.search-input-wrapper {
  position: relative;
  flex-grow: 1;
  max-width: 400px;
}

.search-input-custom {
  border: 1px solid var(--el-border);
  border-radius: 25px;
  padding: 12px 45px 12px 15px;
  font-size: 14px;
  width: 100%;
  transition: all 0.3s ease;
}

.search-input-custom:focus {
  outline: none;
  border-color: var(--el-taupe); /* era #667eea */
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.22); /* era rgba(102,126,234,0.25) */
}

.search-btn {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--el-taupe); /* era #667eea */
  border: none;
  border-radius: 25px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
}

.search-btn:hover {
  background: var(--el-taupe-dark); /* era #5a6fd8 */
}

/* ── Dropdown tipo proveedor ── */
.tipo-dropdown {
  position: relative;
  min-width: 200px;
}

.tipo-dropdown-btn {
  background: var(--el-warm-white);
  border: 1px solid var(--el-border);
  color: var(--el-deep-brown);
  border-radius: 25px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tipo-dropdown-btn:hover {
  border-color: var(--el-taupe); /* era #667eea */
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.18); /* era rgba(102,126,234,0.25) */
}

.tipo-dropdown-btn.active {
  background: var(--el-taupe); /* era #667eea */
  color: #fff;
  border-color: var(--el-taupe);
}

.tipo-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--el-border);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(45, 33, 24, 0.12);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  margin-top: 5px;
  display: none;
}

.tipo-dropdown-menu.show {
  display: block;
}

.tipo-dropdown-item {
  padding: 12px 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--el-sand);
}

.tipo-dropdown-item:hover {
  background: rgba(196, 168, 130, 0.1); /* era rgba(102,126,234,0.1) */
}

.tipo-dropdown-item.selected {
  background: rgba(196, 168, 130, 0.15); /* era rgba(102,126,234,0.15) */
  color: var(--el-taupe-dark); /* era #667eea */
  font-weight: 600;
}

.tipo-dropdown-item:last-child {
  border-bottom: none;
}

.tipo-icon {
  font-size: 1.2rem;
  margin-right: 10px;
  color: var(--el-taupe); /* era #667eea */
  min-width: 20px;
}

/* ── Badge resultados ── */
.search-results-badge {
  display: inline-block;
  margin-top: 1rem;
}

/* ── Filtros laterales ── */
.shop-filters {
  border-radius: 15px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

.facet-section {
  background: white;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.facet-title {
  color: var(--el-deep-brown);
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--el-taupe); /* era #667eea */
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.facet-item {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.facet-item:hover {
  background-color: rgba(196, 168, 130, 0.1); /* era rgba(102,126,234,0.1) */
}

.facet-item input[type=checkbox] {
  margin-right: 0.5rem;
}

.facet-item label {
  font-size: 0.9rem;
  margin-bottom: 0;
  cursor: pointer;
}

.badge-count {
  background: var(--el-taupe); /* era #667eea */
  color: #fff;
  border-radius: 12px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.reset-filters-btn {
  background: var(--el-danger);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.reset-filters-btn:hover {
  background: #a8685a;
}

/* ── Sección resultados ── */
.results-section {
  border-radius: 15px;
}

.results-header {
  padding: 1.5rem;
}

/* ══════════════════════════════════════════
   COMPARADOR
   ══════════════════════════════════════════ */
/* Barra de comparación */
.compare-bar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, var(--el-taupe) 0%, var(--el-sage) 100%); /* era azul-violeta */
  color: #fff;
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(196, 168, 130, 0.35); /* era rgba(102,126,234,0.3) */
  z-index: 1050;
  min-width: 280px;
  max-width: 350px;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: none;
}

.compare-bar.show {
  transform: translateY(0);
  opacity: 1;
  display: block;
}

.compare-bar .title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compare-bar .close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.compare-bar .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.compare-list {
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 12px;
  list-style: none;
  padding: 0;
}

.compare-list::-webkit-scrollbar {
  width: 4px;
}

.compare-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.compare-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.compare-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.compare-item:last-child {
  border-bottom: none;
}

.compare-item .remove-btn {
  background: rgba(192, 123, 107, 0.85);
  border: none;
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.compare-item .remove-btn:hover {
  background: var(--el-danger);
}

.compare-btn-main {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.compare-btn-main:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.compare-btn-main:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Botones comparar en tarjetas */
.btn-compare.selected {
  background: var(--el-success);
  border-color: var(--el-success);
  color: #fff;
}

.btn-compare:not(.selected):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(196, 168, 130, 0.3); /* era rgba(102,126,234,0.3) */
}

/* Modal de comparación */
.comparison-modal .modal-dialog {
  max-width: 95vw;
}

.comparison-modal .modal-content {
  border-radius: 15px;
  border: none;
  box-shadow: 0 10px 40px rgba(45, 33, 24, 0.12);
}

.comparison-modal .modal-header {
  background: linear-gradient(135deg, var(--el-taupe) 0%, var(--el-sage) 100%); /* era azul-violeta */
  color: #fff;
  border-radius: 15px 15px 0 0;
  border-bottom: none;
  padding: 20px 25px;
}

.comparison-modal .modal-title {
  font-weight: 600;
  font-size: 1.25rem;
}

.comparison-modal .btn-close {
  filter: brightness(0) invert(1);
}

.comparison-table-container {
  max-height: 70vh;
  overflow: auto;
  padding: 0;
}

.comparison-table {
  margin-bottom: 0;
}

.comparison-table th {
  background: var(--el-cream);
  border-color: var(--el-border);
  font-weight: 600;
  color: var(--el-deep-brown);
  position: sticky;
  top: 0;
  z-index: 10;
}

.comparison-table td {
  vertical-align: middle;
  border-color: var(--el-border);
}

.comparison-table tbody tr:hover {
  background-color: rgba(196, 168, 130, 0.05); /* era rgba(102,126,234,0.05) */
}

.comparison-table .attribute-cell {
  background: #fff;
  font-weight: 600;
  color: var(--el-deep-brown);
  min-width: 150px;
}

.comparison-table .service-item {
  background: var(--el-cream);
  padding-left: 25px;
  font-weight: 400;
  color: var(--el-deep-brown);
  font-size: 0.9rem;
}

.comparison-table .bi-check-circle-fill {
  color: var(--el-success);
  font-size: 1.2em;
}

.comparison-table .bi-x-circle {
  color: var(--el-danger);
  font-size: 1.2em;
}

.provider-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--el-border);
}

.rating-stars {
  color: var(--el-warning);
  font-size: 0.9rem;
}

.price-badge {
  background: var(--el-success);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.85rem;
}

.location-text {
  color: var(--el-muted);
  font-size: 0.9rem;
}

.services-list {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ══════════════════════════════════════════
   SISTEMA DE COMPARTIR
   ══════════════════════════════════════════ */
.share-dropdown {
  position: relative;
  display: inline-block;
}

.share-btn-main {
  background: linear-gradient(135deg, #25D366, #128C7E); /* WhatsApp – se mantiene */
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.share-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  color: #fff;
}

.share-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(45, 33, 24, 0.12);
  border: 1px solid var(--el-border);
  min-width: 280px;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-top: 8px;
}

.share-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.share-dropdown-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--el-border);
  background: var(--el-cream);
  border-radius: 15px 15px 0 0;
}

.share-dropdown-header h6 {
  margin: 0;
  color: var(--el-deep-brown);
  font-weight: 600;
}

.share-dropdown-body {
  padding: 15px;
}

.share-section {
  margin-bottom: 20px;
}

.share-section:last-child {
  margin-bottom: 0;
}

.share-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--el-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.share-options {
  display: grid;
  gap: 8px;
}

.share-option {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--el-cream);
  border: 1px solid var(--el-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--el-deep-brown);
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.share-option:hover {
  background: var(--el-sand);
  transform: translateX(3px);
  color: var(--el-deep-brown);
  text-decoration: none;
}

.share-option i {
  width: 20px;
  margin-right: 10px;
  text-align: center;
}

/* Colores de marca (se mantienen – son identidad de la plataforma) */
.share-option.whatsapp:hover {
  background: rgba(37, 211, 102, 0.1);
  border-color: #25D366;
  color: #25D366;
}

.share-option.telegram:hover {
  background: rgba(0, 136, 204, 0.1);
  border-color: #0088cc;
  color: #0088cc;
}

.share-option.facebook:hover {
  background: rgba(66, 103, 178, 0.1);
  border-color: #4267B2;
  color: #4267B2;
}

.share-option.twitter:hover {
  background: rgba(29, 161, 242, 0.1);
  border-color: #1DA1F2;
  color: #1DA1F2;
}

.share-option.linkedin:hover {
  background: rgba(0, 119, 181, 0.1);
  border-color: #0077B5;
  color: #0077B5;
}

.share-option.email:hover {
  background: rgba(192, 123, 107, 0.1);
  border-color: var(--el-danger);
  color: var(--el-danger);
}

.share-option.copy:hover {
  background: rgba(122, 107, 93, 0.1);
  border-color: var(--el-muted);
  color: var(--el-muted);
}

.share-option.download:hover {
  background: rgba(196, 168, 130, 0.12);
  border-color: var(--el-taupe);
  color: var(--el-taupe);
} /* era #667eea */
/* Modal de email */
.email-modal .modal-content {
  border-radius: 15px;
  border: none;
  box-shadow: 0 10px 40px rgba(45, 33, 24, 0.12);
}

.email-modal .modal-header {
  background: linear-gradient(135deg, var(--el-danger), #a8685a);
  color: #fff;
  border-radius: 15px 15px 0 0;
  border-bottom: none;
  padding: 20px 25px;
}

.email-form-group {
  margin-bottom: 20px;
}

.email-form-group label {
  font-weight: 600;
  color: var(--el-deep-brown);
  margin-bottom: 8px;
}

.email-form-control {
  border: 2px solid var(--el-border);
  border-radius: 10px;
  padding: 12px 15px;
  transition: all 0.3s ease;
}

.email-form-control:focus {
  border-color: var(--el-taupe);
  box-shadow: 0 0 0 0.2rem rgba(196, 168, 130, 0.22);
  outline: none;
}

.email-preview {
  background: var(--el-cream);
  border: 1px solid var(--el-border);
  border-radius: 10px;
  padding: 15px;
  font-size: 0.9rem;
  color: var(--el-muted);
}

/* Toast */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

/* Spinner */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.success-animation {
  display: inline-block;
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(-5px);
  }
}
/* ── Responsive ── */
@media (max-width: 991px) {
  .search-header .d-flex {
    flex-direction: column;
    gap: 1rem;
  }
  .search-input-wrapper {
    max-width: 100%;
  }
  .tipo-dropdown {
    min-width: 100%;
  }
  .shop-filters {
    position: static;
  }
  .compare-bar {
    right: 10px;
    left: 10px;
    min-width: auto;
    max-width: none;
  }
  .comparison-modal .modal-dialog {
    max-width: 98vw;
    margin: 10px;
  }
  .comparison-table-container {
    max-height: 60vh;
  }
  .share-dropdown-menu {
    right: -10px;
    left: -10px;
  }
}
@media (max-width: 576px) {
  .compare-bar {
    bottom: 10px;
    padding: 12px 16px;
  }
  .comparison-table th, .comparison-table td {
    font-size: 0.8rem;
    padding: 8px 6px;
  }
  .provider-image {
    width: 40px;
    height: 40px;
  }
  .share-dropdown-menu {
    position: fixed;
    top: auto !important;
    bottom: 20px;
    left: 10px;
    right: 10px;
    transform: translateY(100px);
  }
  .share-dropdown-menu.show {
    transform: translateY(0);
  }
}
/* ===== extracted from templates/organizador/solicitudes/solicitud.twig ===== */
:root {
  --event-radius: 10px;
}

.event-header-compact {
  padding: 0.5rem 0;
}

.metric-compact {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  font-weight: 500;
}

.event-content .card {
  border-radius: var(--event-radius);
}

.notes-container {
  background: #faf7f4;
  border-radius: 8px;
  padding: 1rem;
  min-height: 100px;
}

.notes-editor textarea {
  resize: vertical;
  min-height: 100px;
}

/* ===== extracted from templates/organizador/tareas/detalle.twig ===== */
.task-detail-page {
  padding: 1.5rem;
}

.task-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1rem;
}

.task-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.task-panel-body {
  padding: 1rem;
}

.task-detail-header {
  margin-bottom: 1rem;
}

.task-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 900;
  color: #111827;
}

.task-subtitle {
  margin-top: 0.35rem;
  color: #64748b;
}

.task-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.task-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.32rem 0.65rem;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  font-size: 0.85rem;
  color: #475569;
}

.task-badge.done {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #15803d;
}

.task-badge.pending {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.conversation {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.message-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 0.9rem;
  background: #fff;
}

.message-card.system {
  background: #f8fafc;
}

.message-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.message-author {
  font-weight: 800;
  color: #111827;
}

.message-date {
  font-size: 0.8rem;
  color: #94a3b8;
  white-space: nowrap;
}

.message-text {
  color: #334155;
  white-space: pre-wrap;
}

.message-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.message-tag {
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
}

.message-files {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.message-file {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.6rem;
  background: #f8fafc;
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
}

.side-section + .side-section {
  border-top: 1px solid #e5e7eb;
}

.side-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  color: #64748b;
  margin-bottom: 0.75rem;
}

.side-item {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 0.75rem;
  background: #fff;
  margin-bottom: 0.6rem;
}

.side-item-title {
  font-weight: 800;
  color: #111827;
}

.side-item-sub {
  color: #64748b;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.task-empty {
  color: #94a3b8;
  font-size: 0.9rem;
}

.task-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.assign-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.assign-type-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 0.7rem;
  background: #fff;
  color: #334155;
  text-align: left;
}

.assign-type-card:hover {
  border-color: #8b5cf6;
  color: #5b21b6;
  background: #faf5ff;
}

.assign-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.assign-summary-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.55rem;
  background: #f8fafc;
}

.assign-summary-number {
  font-weight: 900;
  color: #111827;
  font-size: 1.05rem;
}

.assign-summary-label {
  font-size: 0.72rem;
  color: #64748b;
}

.task-main-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.solicitudes-panel {
  margin-bottom: 1rem;
}

.solicitudes-empty {
  border: 1px dashed #d6d3d1;
  border-radius: 16px;
  background: #fffaf5;
  padding: 1.35rem;
  text-align: center;
  color: #57534e;
}

.solicitudes-empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: #f5f5f4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.65rem;
  color: #166534;
  font-size: 1.45rem;
}

.autocomplete-results {
  position: absolute;
  z-index: 1060;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.14);
  max-height: 260px;
  overflow-y: auto;
}

.autocomplete-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.autocomplete-item:hover {
  background: #f8fafc;
}

.autocomplete-title {
  font-weight: 800;
  color: #111827;
}

.autocomplete-sub {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.15rem;
}

@media (max-width: 1100px) {
  .task-detail-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 576px) {
  .task-detail-page {
    padding: 1rem;
  }
  .message-head {
    flex-direction: column;
    gap: 0.15rem;
  }
  .message-file {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* ===== extracted from templates/organizador/tareas/index.twig ===== */
.tasks-page {
  padding: 1.5rem;
}

.tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tasks-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  color: #111827;
}

.tasks-subtitle {
  margin-top: 0.25rem;
  color: #64748b;
  font-size: 0.95rem;
}

.tasks-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.tasks-kpi {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.tasks-kpi-value {
  font-size: 1.45rem;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}

.tasks-kpi-label {
  margin-top: 0.4rem;
  color: #64748b;
  font-size: 0.85rem;
}

.tasks-filters {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.tasks-filters .form-label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #111827;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.task-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid transparent;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: center;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.task-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

.task-card.is-completed {
  background: #f8faf9;
  border-color: #d8eadf;
  border-left-color: #16a34a;
  opacity: 0.86;
}

.task-card.is-completed .task-title, .task-card.is-completed .task-title a {
  color: #64748b;
}

.task-card.is-completed .task-title a::after {
  content: " · completada";
  font-size: 0.78rem;
  font-weight: 600;
  color: #16a34a;
}

.task-card.is-completed .task-meta {
  opacity: 0.9;
}

.task-card.is-completed .task-activity {
  color: #94a3b8;
}

.task-check {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: transparent;
  flex-shrink: 0;
}

.task-check:hover {
  border-color: #c5a77a;
  background: #fffaf3;
}

.task-check.is-done {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.task-check.is-done:hover {
  background: #15803d;
  border-color: #15803d;
}

.task-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.01em;
}

.task-title a {
  color: inherit;
  text-decoration: none;
}

.task-title a:hover {
  color: #9b7a4a;
  text-decoration: none;
}

.task-description {
  margin-top: 0.35rem;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.35;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
  color: #64748b;
  font-size: 0.78rem;
}

.task-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  padding: 0.18rem 0.5rem;
  font-size: 0.78rem;
  line-height: 1.25;
  color: #475569;
}

.task-pill.warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.task-pill.done {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #15803d;
}

.task-pill.pending {
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #475569;
}

.task-pill.info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.task-activity {
  margin-top: 0.5rem;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.35;
}

.task-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.empty-tasks {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  padding: 2rem;
  text-align: center;
  color: #64748b;
}

@media (max-width: 992px) {
  .tasks-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-card {
    grid-template-columns: auto 1fr;
    align-items: flex-start;
  }
  .task-actions {
    grid-column: 1/-1;
    justify-content: flex-end;
  }
}
@media (max-width: 576px) {
  .tasks-page {
    padding: 1rem;
  }
  .tasks-header {
    flex-direction: column;
  }
  .tasks-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .tasks-kpi {
    padding: 0.85rem;
  }
  .task-card {
    padding: 0.8rem;
    gap: 0.7rem;
  }
  .task-title {
    font-size: 0.96rem;
  }
}
/* ===== extracted from templates/organizador/usuarios/crear.twig ===== */
.el-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
}

.el-card-header {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.el-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1f2937;
}

.el-card-body {
  padding: 18px;
}

.el-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.col-12 {
  grid-column: span 12;
}

.col-6 {
  grid-column: span 6;
}

@media (max-width: 991.98px) {
  .col-6 {
    grid-column: span 12;
  }
}
.el-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #334155;
}

.el-required {
  color: #b45309;
  margin-left: 4px;
}

.el-input,
.el-select {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 0.72rem 0.9rem;
  font-size: 0.94rem;
  background: #fff;
}

.el-input:focus,
.el-select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.el-help {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 6px;
}

.el-role-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 767.98px) {
  .el-role-list {
    grid-template-columns: 1fr;
  }
}
.el-role {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fcfcfc;
}

.el-role-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.el-role-name {
  font-weight: 800;
  color: #1f2937;
  font-size: 0.94rem;
  line-height: 1.2;
}

.el-role-desc {
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.58);
  line-height: 1.35;
}

.el-alert {
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  font-size: 0.9rem;
}

.el-alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.el-errors {
  margin: 0;
  padding-left: 18px;
}

.el-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.el-btn {
  border: 0;
  border-radius: 12px;
  padding: 0.78rem 1rem;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.el-btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.el-btn-primary {
  background: #C4A882;
  color: #fff;
}
.el-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
}

.el-card-header {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.el-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1f2937;
}

.el-card-body {
  padding: 18px;
}

.el-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.col-12 {
  grid-column: span 12;
}

.col-6 {
  grid-column: span 6;
}

@media (max-width: 991.98px) {
  .col-6 {
    grid-column: span 12;
  }
}
.el-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #334155;
}

.el-required {
  color: #b45309;
  margin-left: 4px;
}

.el-input,
.el-select {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 0.72rem 0.9rem;
  font-size: 0.94rem;
  background: #fff;
}

.el-input:focus,
.el-select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.el-help {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 6px;
}

.el-role-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 767.98px) {
  .el-role-list {
    grid-template-columns: 1fr;
  }
}
.el-role {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fcfcfc;
}

.el-role-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.el-role-name {
  font-weight: 800;
  color: #1f2937;
  font-size: 0.94rem;
  line-height: 1.2;
}

.el-role-desc {
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.58);
  line-height: 1.35;
}

.el-alert {
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  font-size: 0.9rem;
}

.el-alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.el-errors {
  margin: 0;
  padding-left: 18px;
}

.el-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.el-btn {
  border: 0;
  border-radius: 12px;
  padding: 0.78rem 1rem;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.el-btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.el-btn-primary {
  background: #C4A882;
  color: #fff;
}

/* ===== extracted from templates/organizador/usuarios/index.twig ===== */
.el-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 30, 60, 0.06);
}

.el-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.el-card-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0;
}

.el-table {
  width: 100%;
  margin-bottom: 0;
}

.el-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #374151;
  flex: 0 0 34px;
}

.el-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-user-name {
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.el-roles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.el-role {
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.el-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
}

.el-badge.activo {
  background: #dcfce7;
  color: #166534;
}

.el-badge.pendiente {
  background: #fef3c7;
  color: #92400e;
}

.el-badge.inactivo {
  background: #f3f4f6;
  color: #4b5563;
}

.el-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.el-btn-icon {
  border: 0;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.el-btn-icon:hover {
  background: #e5e7eb;
}

.el-btn-primary {
  border: 0;
  background: #C4A882;
  color: #fff;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.el-btn-primary:hover {
  color: #fff;
  background: #A88B68;
}

.el-empty {
  text-align: center;
  padding: 30px;
  color: rgba(0, 0, 0, 0.6);
}

/* ===== extracted from templates/proveedor/catalogo.twig ===== */
.el-ia-review-box {
  border: 1px solid rgba(190, 150, 90, 0.28);
  background: rgba(255, 248, 238, 0.68);
  border-radius: 22px;
  padding: 18px;
}

.el-service-card.is-ia {
  border: 1px dashed rgba(181, 137, 70, 0.45);
  background: rgba(255, 255, 255, 0.82);
}

.el-pill.is-warning {
  background: rgba(255, 193, 7, 0.15);
  color: #8a6500;
}

.el-catalog-quickbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(30, 41, 59, 0.08);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  padding: 16px 18px;
  margin: 14px 0 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.el-catalog-quickbar h2 {
  margin: 4px 0 4px;
  font-size: 1.35rem;
}

.el-catalog-quickbar p {
  margin: 0;
  color: #667085;
}

.el-catalog-quickbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .el-catalog-quickbar {
    align-items: flex-start;
    flex-direction: column;
  }
}
.el-ia-live-panel {
  border: 1px solid rgba(30, 41, 59, 0.08);
  background: linear-gradient(135deg, #fffaf2, #f1fff9);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
  border-radius: 26px;
  padding: 24px;
  margin: 0 0 18px;
}

.el-ia-live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.el-ia-live-head h2 {
  margin: 4px 0 6px;
  font-size: 1.55rem;
}

.el-ia-live-counts {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 12px 16px;
  min-width: 180px;
}

.el-ia-live-counts strong {
  font-size: 1.5rem;
  line-height: 1;
}

.el-ia-live-counts span {
  color: #64748b;
  font-size: 0.85rem;
  align-self: center;
}

.el-ia-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
  gap: 18px;
}

.el-ia-preview-column {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 16px;
}

.el-ia-column-title {
  font-weight: 900;
  margin-bottom: 12px;
  color: #0f172a;
}

.el-ia-mini-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 10px;
}

.el-ia-mini-card h3, .el-ia-visual-card h3 {
  margin: 8px 0 5px;
  font-size: 1rem;
}

.el-ia-mini-card p, .el-ia-visual-card p {
  color: #64748b;
  margin: 0 0 8px;
}

.el-ia-mini-card small, .el-ia-visual-card small {
  color: #64748b;
}

.el-ia-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.el-ia-visual-card {
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  border-radius: 18px;
}

.el-ia-visual-card img, .el-ia-image-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: #f4efe7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.5rem;
}

.el-ia-visual-card > div:last-child {
  padding: 12px;
}

.el-ia-live-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

@media (max-width: 980px) {
  .el-ia-live-head, .el-ia-preview-grid {
    grid-template-columns: 1fr;
    display: grid;
  }
  .el-ia-visual-grid {
    grid-template-columns: 1fr;
  }
}
.el-draft-first {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.el-draft-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.el-draft-head h2 {
  margin: 3px 0 3px;
  font-size: 1.25rem;
}

.el-draft-head p {
  margin: 0;
  color: #667085;
}

.el-draft-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.el-draft-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}

.el-draft-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 10px;
}

.el-draft-section-title h3 {
  margin: 0;
  font-size: 1rem;
}

.el-draft-section-title span {
  background: #f7f0e6;
  border-radius: 999px;
  padding: 3px 9px;
  font-weight: 800;
}

.el-draft-card, .el-draft-product, .el-add-draft, .el-profile-preview {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fbfaf8;
  padding: 10px;
  margin-bottom: 9px;
}

.el-draft-form, .el-draft-product-form {
  display: grid;
  gap: 8px;
}

.el-draft-form input, .el-draft-form textarea, .el-draft-form select,
.el-draft-product-form input, .el-draft-product-form textarea, .el-draft-product-form select {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}

.el-draft-form-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(120px, 0.7fr);
  gap: 8px;
}

.el-draft-form-bottom {
  display: grid;
  grid-template-columns: minmax(90px, 0.6fr) minmax(90px, 0.6fr) minmax(70px, 0.3fr);
  gap: 8px;
}

.el-draft-card-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.el-draft-products-grid {
  display: grid;
  gap: 9px;
}

.el-draft-product {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
}

.el-draft-thumb {
  width: 82px;
  height: 82px;
  border-radius: 12px;
  object-fit: cover;
  background: #f4efe7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.el-profile-preview {
  position: sticky;
  top: 16px;
}

.el-profile-preview h3 {
  margin: 4px 0 10px;
  font-size: 1rem;
}

.el-public-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.el-public-cover {
  height: 120px;
  background: #efe7dc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a7c55;
  font-size: 2rem;
}

.el-public-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el-public-body {
  padding: 12px;
}

.el-public-body h4 {
  margin: 0 0 6px;
}

.el-public-body p {
  color: #667085;
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.el-public-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.el-public-tags span {
  font-size: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 4px 7px;
  background: #fffaf3;
}

.el-public-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.el-public-gallery img {
  width: 100%;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 1050px) {
  .el-draft-main {
    grid-template-columns: 1fr;
  }
  .el-profile-preview {
    position: static;
  }
}
@media (max-width: 650px) {
  .el-draft-head {
    flex-direction: column;
  }
  .el-draft-form-top, .el-draft-form-bottom {
    grid-template-columns: 1fr;
  }
  .el-draft-product {
    grid-template-columns: 64px 1fr;
  }
  .el-draft-thumb {
    width: 64px;
    height: 64px;
  }
}
.el-draft-compact .el-draft-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}

.el-draft-compact .el-draft-kpis article {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fbfaf8;
  border-radius: 16px;
  padding: 12px;
}

.el-draft-compact .el-draft-kpis strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1;
  color: #0f172a;
}

.el-draft-compact .el-draft-kpis span {
  color: #667085;
  font-size: 0.85rem;
}

.el-draft-bulkbar, .el-draft-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fffaf4;
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 10px;
}

.el-draft-bulk-left, .el-draft-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.el-check-mini {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  color: #0f172a;
}

.el-draft-bulkbar select, .el-draft-bulkbar input, .el-draft-toolbar input, .el-draft-toolbar select {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 8px 10px;
  background: #fff;
  min-height: 38px;
}

.el-draft-toolbar input {
  min-width: min(360px, 100%);
  flex: 1;
}

.el-draft-main-compact {
  grid-template-columns: minmax(0, 1fr) 310px;
}

.el-draft-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
}

.el-draft-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.el-draft-table th, .el-draft-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  vertical-align: middle;
}

.el-draft-table th {
  text-align: left;
  color: #667085;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fbfaf8;
}

.el-draft-table tr:last-child td {
  border-bottom: 0;
}

.el-draft-name {
  display: grid;
  gap: 2px;
}

.el-draft-name strong {
  color: #0f172a;
}

.el-draft-name small {
  color: #667085;
  line-height: 1.25;
}

.el-draft-name-with-thumb {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.el-draft-name-with-thumb img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 9px;
}

.el-muted {
  color: #98a2b3;
}

.el-draft-actions-cell details {
  position: relative;
}

.el-draft-actions-cell summary {
  cursor: pointer;
  color: #0f172a;
  font-weight: 800;
  list-style: none;
}

.el-draft-actions-cell summary::-webkit-details-marker {
  display: none;
}

.el-draft-inline-form {
  display: grid;
  gap: 8px;
  min-width: 460px;
  max-width: 560px;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  position: absolute;
  right: 0;
  z-index: 20;
}

.el-draft-inline-form input, .el-draft-inline-form textarea, .el-draft-inline-form select {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}

@media (max-width: 1050px) {
  .el-draft-main-compact {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .el-draft-compact .el-draft-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .el-draft-bulk-actions, .el-draft-bulk-actions select, .el-draft-bulk-actions input, .el-draft-bulk-actions button {
    width: 100%;
  }
  .el-draft-inline-form {
    position: static;
    min-width: 0;
    max-width: none;
    box-shadow: none;
  }
}
/* === Mejora visual borrador catálogo IA === */
.el-draft-first {
  overflow: visible;
}

.el-draft-toolbar {
  background: #fff;
  padding: 12px;
}

.el-draft-toolbar input[type=search] {
  min-height: 48px;
  font-size: 0.98rem;
  border-radius: 14px;
}

.el-draft-toolbar select {
  min-height: 48px;
  border-radius: 14px;
}

.el-draft-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -2px 0 12px;
}

.el-draft-filter-chips button, .el-draft-view-toggle button {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  color: #475467;
  cursor: pointer;
}

.el-draft-filter-chips button.is-active, .el-draft-view-toggle button.is-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

.el-draft-view-toggle {
  display: inline-flex;
  gap: 6px;
  background: #f6f3ef;
  border-radius: 999px;
  padding: 4px;
}

.el-draft-view-toggle button {
  border: 0;
  background: transparent;
  padding: 8px 11px;
}

.el-draft-main-compact {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.el-draft-table {
  min-width: 820px;
}

.el-draft-table th:first-child, .el-draft-table td:first-child {
  width: 38px;
  text-align: center;
}

.el-draft-table th:nth-child(2) {
  width: 42%;
}

.el-draft-table th:nth-child(5), .el-draft-table td:nth-child(5) {
  text-align: right;
  white-space: nowrap;
}

.el-draft-table th:nth-child(7), .el-draft-table td:nth-child(7) {
  text-align: center;
  white-space: nowrap;
}

.el-draft-table th, .el-draft-table td {
  padding: 12px 14px;
}

.el-draft-row {
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.el-draft-row:hover {
  background: #fffaf4;
}

.el-draft-row.is-selected {
  background: #fff7e8;
  box-shadow: inset 3px 0 0 #c99242;
}

.el-draft-name {
  min-width: 250px;
}

.el-draft-name-with-thumb, .el-draft-name-service {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.el-draft-name-with-thumb img, .el-draft-thumb-placeholder {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 14px;
  flex: 0 0 54px;
}

.el-draft-thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3eadc, #fffaf4);
  color: #9a7c55;
  border: 1px solid rgba(154, 124, 85, 0.18);
}

.el-draft-name strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.98rem;
  line-height: 1.18;
}

.el-draft-name small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  max-width: 420px;
}

.el-price-cell strong {
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.el-draft-actions-col {
  min-width: 82px;
}

.el-draft-actions-cell summary {
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 7px 12px;
  background: #fff;
  display: inline-flex;
}

.el-draft-preview-panel {
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.el-preview-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 0;
}

.el-preview-close {
  border: 0;
  background: #f3f4f6;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.el-preview-hero {
  margin: 12px 14px 0;
  min-height: 170px;
  border-radius: 20px;
  background: linear-gradient(135deg, #efe7dc, #fbfaf8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #9a7c55;
  font-size: 2.2rem;
}

.el-preview-hero img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

.el-preview-body {
  padding: 14px;
}

.el-preview-body h3 {
  margin: 10px 0 6px;
  font-size: 1.1rem;
  line-height: 1.2;
}

.el-preview-body p {
  margin: 0 0 12px;
  color: #667085;
  font-size: 0.9rem;
}

.el-preview-meta {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.el-preview-meta div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.el-preview-meta dt {
  color: #667085;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.el-preview-meta dd {
  margin: 0;
  font-weight: 800;
  color: #0f172a;
}

.el-preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.el-public-preview-details {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding: 12px 14px 14px;
}

.el-public-preview-details > summary {
  cursor: pointer;
  font-weight: 900;
  color: #475467;
}

.el-public-preview-details .el-public-card {
  margin-top: 10px;
}

.el-draft-first.is-preview-collapsed .el-draft-main-compact {
  grid-template-columns: 1fr;
}

.el-draft-first.is-preview-collapsed .el-draft-preview-panel {
  display: none;
}

.el-draft-first.is-card-view .el-draft-table-wrap {
  border: 0;
  background: transparent;
  overflow: visible;
}

.el-draft-first.is-card-view .el-draft-table,
.el-draft-first.is-card-view .el-draft-table tbody,
.el-draft-first.is-card-view .el-draft-table tr,
.el-draft-first.is-card-view .el-draft-table td {
  display: block;
}

.el-draft-first.is-card-view .el-draft-table {
  min-width: 0;
}

.el-draft-first.is-card-view .el-draft-table thead {
  display: none;
}

.el-draft-first.is-card-view .el-draft-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.el-draft-first.is-card-view .el-draft-row {
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.el-draft-first.is-card-view .el-draft-row:hover {
  transform: translateY(-1px);
}

.el-draft-first.is-card-view .el-draft-row td {
  border: 0;
  padding: 5px 0;
}

.el-draft-first.is-card-view .el-draft-row td:first-child {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  width: auto;
}

.el-draft-first.is-card-view .el-draft-row td:nth-child(2) {
  padding-top: 4px;
}

.el-draft-first.is-card-view .el-draft-name-with-thumb, .el-draft-first.is-card-view .el-draft-name-service {
  grid-template-columns: 78px minmax(0, 1fr);
}

.el-draft-first.is-card-view .el-draft-name-with-thumb img, .el-draft-first.is-card-view .el-draft-thumb-placeholder {
  width: 78px;
  height: 78px;
  border-radius: 16px;
}

.el-draft-first.is-card-view .el-draft-unit-col {
  display: none;
}

.el-draft-first.is-card-view .el-price-cell {
  text-align: left !important;
  font-size: 1.05rem;
}

.el-draft-first.is-card-view .el-draft-actions-cell summary {
  margin-top: 4px;
}

@media (max-width: 1180px) {
  .el-draft-unit-col {
    display: none;
  }
  .el-draft-table {
    min-width: 760px;
  }
}
@media (max-width: 760px) {
  .el-draft-view-toggle {
    width: 100%;
    justify-content: center;
  }
  .el-draft-toolbar input[type=search], .el-draft-toolbar select {
    width: 100%;
  }
}
/* ===== extracted from templates/proveedor/documentos.twig ===== */
.provider-doc-card {
  border: 1px solid var(--el-border, #e7dfd4);
  border-radius: 22px;
  background: #fff;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 12px 28px rgba(35, 28, 20, 0.045);
}

.provider-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.provider-doc-title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: #111827;
}

.provider-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  color: var(--el-muted, #6b7280);
  font-size: 13px;
}

.provider-doc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #475569;
  white-space: nowrap;
}

.provider-doc-status.is-ok {
  background: #ecfdf5;
  color: #166534;
  border-color: #bbf7d0;
}

.provider-doc-status.is-processing {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}

.provider-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.provider-doc-lines {
  margin-top: 14px;
  border: 1px solid #eee4d7;
  border-radius: 18px;
  overflow: hidden;
  background: #fffdf9;
}

.provider-doc-lines summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 900;
  color: #231b13;
  background: #faf7f2;
}

.provider-doc-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.provider-doc-lines-table th,
.provider-doc-lines-table td {
  padding: 10px 12px;
  border-top: 1px solid #eee4d7;
  vertical-align: top;
}

.provider-doc-lines-table th {
  color: #6b7280;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #fffaf5;
}

.provider-doc-lines-table .num {
  text-align: right;
  white-space: nowrap;
}

.provider-empty-lines {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed #d8c8b5;
  border-radius: 16px;
  color: #6b5a47;
  background: #fffaf5;
  font-size: 13px;
}

@media (max-width: 760px) {
  .provider-doc-head {
    flex-direction: column;
  }
  .provider-doc-lines-table {
    min-width: 760px;
  }
}
/* ===== extracted from templates/proveedor/tareas.twig ===== */
.provider-work-page {
  max-width: 1180px;
  margin: 0 auto;
}

.provider-work-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.provider-work-hero h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--el-text, #111827);
}

.provider-work-hero p {
  margin: 0.45rem 0 0;
  color: var(--el-muted, #6b7280);
  max-width: 680px;
  line-height: 1.45;
}

.provider-work-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.provider-work-kpi {
  background: #fff;
  border: 1px solid var(--el-border, #e7dfd4);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(35, 28, 20, 0.045);
}

.provider-work-kpi span {
  display: block;
  color: var(--el-muted, #6b7280);
  font-size: 13px;
  margin-bottom: 6px;
}

.provider-work-kpi strong {
  display: block;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--el-text, #111827);
}

.provider-work-list {
  display: grid;
  gap: 16px;
}

.provider-work-card {
  background: #fff;
  border: 1px solid var(--el-border, #e7dfd4);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 16px 36px rgba(35, 28, 20, 0.055);
}

.provider-work-card.is-request {
  border-left: 6px solid var(--el-accent, #7b5635);
}

.provider-work-card.is-task {
  border-left: 6px solid #64748b;
}

.provider-work-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.provider-work-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 900;
  color: var(--el-accent, #7b5635);
  margin-bottom: 0.35rem;
}

.provider-work-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--el-text, #111827);
}

.provider-work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: var(--el-muted, #6b7280);
  font-size: 14px;
}

.provider-work-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  background: var(--el-accent-soft, #f3eadc);
  color: var(--el-accent, #7b5635);
  border: 1px solid rgba(109, 81, 54, 0.16);
}

.provider-work-status.is-done {
  background: #ecfdf5;
  color: #166534;
  border-color: #bbf7d0;
}

.provider-work-status.is-muted {
  background: #f8fafc;
  color: #64748b;
  border-color: #e5e7eb;
}

.provider-message-box {
  margin-top: 16px;
  padding: 15px 16px;
  background: #faf7f2;
  border: 1px solid #eee4d7;
  border-radius: 18px;
  color: #3f3a34;
  line-height: 1.55;
}

.provider-message-box strong {
  display: block;
  margin-bottom: 5px;
  color: #231b13;
}

.provider-message-box p {
  margin: 0;
  white-space: pre-wrap;
}

.provider-work-alert {
  margin-top: 14px;
  border: 1px solid rgba(61, 123, 85, 0.22);
  background: #f0fdf4;
  color: #166534;
  border-radius: 16px;
  padding: 11px 13px;
  font-size: 13px;
}

.provider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.provider-btn {
  border-radius: 999px;
  border: 1px solid var(--el-border, #e5e7eb);
  background: #fff;
  color: var(--el-text, #111827);
  padding: 12px 18px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.provider-btn:hover {
  background: #faf7f2;
  border-color: #d8c8b5;
}

.provider-btn.primary {
  background: var(--el-accent, #7b5635);
  color: #fff;
  border-color: var(--el-accent, #7b5635);
}

.provider-btn.primary:hover {
  filter: brightness(0.95);
}

.provider-btn.ghost {
  color: #7b5635;
  background: #fff;
}

.provider-panel {
  display: none;
  margin-top: 18px;
  border: 1px solid var(--el-border, #e7dfd4);
  border-radius: 22px;
  background: #fffdf9;
  padding: 18px;
}

.provider-panel.is-open {
  display: block;
}

.provider-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.provider-panel-title {
  font-size: 18px;
  font-weight: 900;
  color: #231b13;
  margin: 0;
}

.provider-panel-help {
  margin: 5px 0 0;
  color: var(--el-muted, #6b7280);
  line-height: 1.45;
  font-size: 14px;
}

.provider-form {
  display: grid;
  gap: 12px;
}

.provider-form label {
  font-size: 13px;
  font-weight: 900;
  color: #4a453f;
}

.provider-form input[type=text],
.provider-form input[type=file],
.provider-form select,
.provider-form textarea {
  width: 100%;
  border: 1px solid var(--el-border, #e5e7eb);
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
  font: inherit;
  color: var(--el-text, #111827);
  outline: none;
}

.provider-form textarea {
  resize: vertical;
}

.provider-form input:focus,
.provider-form select:focus,
.provider-form textarea:focus {
  border-color: rgba(109, 81, 54, 0.42);
  box-shadow: 0 0 0 4px rgba(109, 81, 54, 0.08);
}

.provider-field-row {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 12px;
}

.provider-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.provider-option {
  display: block;
  border: 1px solid var(--el-border, #e7dfd4);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  cursor: pointer;
}

.provider-option input {
  margin-right: 7px;
}

.provider-option strong {
  color: #231b13;
  font-size: 14px;
}

.provider-option span {
  display: block;
  color: var(--el-muted, #6b7280);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 5px;
}

.provider-option:has(input:checked) {
  border-color: rgba(109, 81, 54, 0.42);
  background: #faf7f2;
  box-shadow: 0 0 0 4px rgba(109, 81, 54, 0.06);
}

.provider-example-box {
  border: 1px dashed #d8c8b5;
  background: #fffaf5;
  border-radius: 18px;
  padding: 14px;
  color: #6b5a47;
  font-size: 13px;
}

.provider-example-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.provider-example-tab {
  border: 1px solid #eadfce;
  background: #fff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  color: #6f4d2e;
}

.provider-ai-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.provider-ai-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #7b5635;
  border: 1px solid #e7dfd4;
}

.provider-preview {
  display: none;
  border: 1px solid #d8c8b5;
  background: #fff;
  border-radius: 20px;
  padding: 16px;
}

.provider-preview.is-open {
  display: block;
}

.provider-preview h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  color: #231b13;
}

.provider-preview p {
  margin: 0 0 10px;
  color: var(--el-muted, #6b7280);
  font-size: 13px;
}

.provider-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.provider-preview-item {
  background: #faf7f2;
  border: 1px solid #eee4d7;
  border-radius: 14px;
  padding: 10px;
  font-size: 13px;
}

.provider-preview-item strong {
  display: block;
  margin-bottom: 4px;
  color: #231b13;
}

.provider-preview-content {
  white-space: pre-wrap;
  color: #3f3a34;
  line-height: 1.5;
}

.is-hidden {
  display: none !important;
}

.provider-thread-box {
  margin-top: 14px;
  border: 1px solid #eee4d7;
  background: #fffdf9;
  border-radius: 18px;
  overflow: hidden;
}

.provider-thread-box summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 900;
  color: #231b13;
  background: #faf7f2;
}

.provider-thread-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.provider-thread-message {
  border: 1px solid #eee4d7;
  border-radius: 15px;
  padding: 10px 12px;
  background: #fff;
}

.provider-thread-message.from-provider {
  background: #f8fafc;
}

.provider-thread-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #6b7280;
  font-size: 12px;
  margin-bottom: 5px;
}

.provider-thread-meta strong {
  color: #231b13;
}

.provider-thread-text {
  white-space: pre-wrap;
  color: #3f3a34;
  line-height: 1.45;
  font-size: 13px;
}

@media (max-width: 980px) {
  .provider-work-kpis,
  .provider-field-row,
  .provider-option-grid,
  .provider-preview-grid {
    grid-template-columns: 1fr;
  }
  .provider-work-hero,
  .provider-work-top,
  .provider-panel-head {
    flex-direction: column;
  }
}
/* ===== extracted from templates/pwa/base.twig ===== */
.pwa-offline-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  margin: 0.5rem 1rem 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #f3eee7;
  color: #5b4636;
  border: 1px solid rgba(198, 165, 123, 0.35);
}

.pwa-offline-status.is-online {
  background: #ecfdf3;
  color: #17603a;
  border-color: rgba(34, 197, 94, 0.25);
}

.pwa-offline-status.is-offline {
  background: #fff7ed;
  color: #9a3412;
  border-color: rgba(251, 146, 60, 0.35);
}

.pwa-offline-status.is-error {
  background: #fef2f2;
  color: #991b1b;
  border-color: rgba(248, 113, 113, 0.35);
}

.pwa-offline-status.is-syncing {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: rgba(96, 165, 250, 0.35);
}

/* ===== extracted from templates/pwa/eventos/partials/_archivos.twig ===== */
.pwa-archivos-section {
  padding-top: 0.75rem;
}

.pwa-archivos-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pwa-archivo-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 0.9rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.pwa-archivo-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.pwa-archivo-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #f3eee7;
  color: #5b4636;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.pwa-archivo-info {
  min-width: 0;
}

.pwa-archivo-name {
  font-weight: 800;
  color: #1f2937;
  font-size: 0.98rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-archivo-meta {
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.pwa-archivo-desc {
  margin-top: 0.25rem;
  color: #4b5563;
  font-size: 0.78rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pwa-archivo-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.72rem;
  font-weight: 800;
}

.pwa-open-file-btn,
.pwa-disabled-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.pwa-open-file-btn {
  background: #1f7a68;
  color: #fff;
  box-shadow: 0 8px 18px rgba(31, 122, 104, 0.22);
}

.pwa-open-file-btn:active {
  transform: scale(0.98);
}

.pwa-disabled-file-btn {
  background: #f3f4f6;
  color: #9ca3af;
  border: 0;
}

.pwa-empty-state {
  text-align: center;
  padding: 1.5rem 1rem;
}

.pwa-empty-icon {
  font-size: 1.8rem;
  margin-bottom: 0.35rem;
}

@media (max-width: 420px) {
  .pwa-archivo-card {
    padding: 0.8rem;
  }
  .pwa-open-file-btn span:last-child,
  .pwa-disabled-file-btn span:last-child {
    display: none;
  }
  .pwa-open-file-btn,
  .pwa-disabled-file-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
  }
  .pwa-archivo-icon {
    width: 40px;
    height: 40px;
  }
}
/* ===== extracted from templates/pwa/eventos/partials/_checklists.twig ===== */
.pwa-checklist-section {
  padding: 0.9rem;
}

.pwa-check-form {
  margin-bottom: 1.1rem;
}

.pwa-check-form:last-child {
  margin-bottom: 0;
}

.pwa-check-form-header {
  margin-bottom: 0.65rem;
}

.pwa-check-form-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 850;
  color: #172033;
  line-height: 1.25;
}

.pwa-check-campo-title {
  margin: 0.85rem 0 0.45rem;
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7c6f64;
}

.pwa-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pwa-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 0.8rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.pwa-check-item:active {
  transform: scale(0.99);
}

.pwa-check-item.is-done {
  opacity: 0.7;
  border-color: rgba(40, 114, 79, 0.28);
}

.pwa-check-main {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  flex: 1;
  margin: 0;
  cursor: pointer;
}

.pwa-check-main input {
  display: none;
}

.pwa-check-box {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  border: 2px solid #c7b8a6;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: transparent;
  font-size: 0.9rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pwa-check-item.is-done .pwa-check-box {
  background: #28724f;
  border-color: #28724f;
  color: #fff;
}

.pwa-check-content {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}

.pwa-check-photo-link {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #f3f0eb;
  display: block;
}

.pwa-check-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pwa-check-text {
  font-size: 0.92rem;
  font-weight: 800;
  color: #172033;
  line-height: 1.25;
  word-break: break-word;
}

.pwa-check-item.is-done .pwa-check-text {
  color: #6b7280;
  text-decoration: line-through;
}

.pwa-check-empty {
  padding: 0.85rem;
  border-radius: 16px;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.35;
}

.pwa-check-loading {
  pointer-events: none;
  opacity: 0.55;
}

/* ===== extracted from templates/pwa/eventos/partials/_contactos.twig ===== */
.pwa-contactos-section {
  padding-top: 0.75rem;
  --el-bg: #fbf8f3;
  --el-card: #fffdf9;
  --el-sand: #eadfce;
  --el-sand-soft: #f3eee7;
  --el-sand-light: #faf7f2;
  --el-taupe: #c6a57b;
  --el-taupe-dark: #9f7f58;
  --el-brown: #5b4636;
  --el-brown-dark: #2f2a25;
  --el-muted: #817263;
  background: var(--el-bg);
  border-color: rgba(198, 165, 123, 0.22);
}

.pwa-contact-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.pwa-add-contact-btn {
  border: 0;
  background: var(--el-brown);
  color: #fff;
  border-radius: 999px;
  padding: 0.62rem 0.95rem;
  font-size: 0.86rem;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(91, 70, 54, 0.18);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.pwa-add-contact-btn:active {
  transform: scale(0.98);
}

.pwa-filter-trigger-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.pwa-active-filter-label {
  min-width: 0;
  color: var(--el-muted);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-contact-filter-btn,
.pwa-int-filter-btn {
  min-height: 38px;
  border-radius: 999px;
  background: #f8f5f1;
  border: 1px solid #ece4dc;
  color: #5b4636;
  padding: 0 13px;
  font-size: 0.86rem;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pwa-contact-filter-btn:active,
.pwa-int-filter-btn:active {
  transform: scale(0.98);
}

.pwa-filter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(47, 42, 37, 0.42);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.pwa-filter-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pwa-filter-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(86vw, 340px);
  height: 100vh;
  background: var(--el-bg);
  z-index: 9999;
  box-shadow: -16px 0 40px rgba(47, 42, 37, 0.2);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.pwa-filter-panel.is-open {
  transform: translateX(0);
}

.pwa-filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pwa-filter-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
  color: var(--el-brown-dark);
}

.pwa-filter-close {
  border: 0;
  background: var(--el-sand);
  color: var(--el-brown);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
}

.pwa-contact-filter-search-wrap {
  margin-bottom: 0.9rem;
}

.pwa-contact-filter-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--el-brown);
  font-size: 0.8rem;
  font-weight: 850;
}

.pwa-contact-filter-label span {
  padding-left: 0.2rem;
}

.pwa-contact-search {
  width: 100%;
  border: 1px solid rgba(91, 70, 54, 0.16);
  background: #fffaf4;
  color: var(--el-brown-dark);
  border-radius: 14px;
  padding: 0.72rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(91, 70, 54, 0.06);
  outline: none;
}

.pwa-contact-search::placeholder {
  color: var(--el-muted);
  font-weight: 650;
}

.pwa-contact-search:focus {
  border-color: rgba(159, 127, 88, 0.55);
  box-shadow: 0 0 0 3px rgba(198, 165, 123, 0.18);
}

.pwa-contact-filter-apply-btn {
  margin-top: 0.65rem;
  width: 100%;
  border: 0;
  background: var(--el-brown);
  color: #fff;
  border-radius: 999px;
  padding: 0.72rem 1rem;
  font-size: 0.88rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(91, 70, 54, 0.16);
}

.pwa-contact-filter-apply-btn:active {
  transform: scale(0.98);
}

.pwa-filter-options-title {
  margin: 0.1rem 0 0.45rem;
  color: var(--el-brown);
  font-size: 0.8rem;
  font-weight: 850;
  padding-left: 0.2rem;
}

.pwa-filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow-y: auto;
  padding-bottom: 1rem;
}

.pwa-filter-option {
  width: 100%;
  border: 1px solid rgba(91, 70, 54, 0.14);
  background: #fffaf4;
  color: var(--el-brown);
  border-radius: 14px;
  padding: 0.8rem 0.85rem;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 800;
}

.pwa-filter-option.is-active {
  background: var(--el-brown);
  color: #fff;
  border-color: var(--el-brown);
}

.pwa-contactos-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pwa-contact-card {
  background: var(--el-card);
  border: 1px solid rgba(198, 165, 123, 0.24);
  border-radius: 18px;
  padding: 0.9rem;
  box-shadow: 0 10px 24px rgba(91, 70, 54, 0.07);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

.pwa-contact-card.is-hidden {
  display: none;
}

.pwa-contact-main {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}

.pwa-contact-info {
  min-width: 0;
  flex: 1;
}

.pwa-contact-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.pwa-contact-name {
  font-weight: 850;
  color: var(--el-brown-dark);
  font-size: 0.98rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-edit-contact-btn {
  border: 0;
  background: transparent;
  color: var(--el-taupe-dark);
  font-size: 0.76rem;
  font-weight: 850;
  padding: 0;
  flex-shrink: 0;
}

.pwa-contact-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.pwa-contact-relation {
  display: inline-flex;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #f7efe3;
  color: var(--el-taupe-dark);
  font-size: 0.75rem;
  font-weight: 750;
}

.pwa-contact-phone {
  display: block;
  margin-top: 0.3rem;
  color: var(--el-muted);
  font-size: 0.88rem;
  text-decoration: none;
}

.pwa-contact-intervention-line {
  margin-top: 0.35rem;
  color: var(--el-brown);
  font-size: 0.82rem;
  line-height: 1.3;
}

.pwa-contact-intervention-line strong {
  font-weight: 850;
  color: var(--el-brown);
}

.pwa-contact-notes-line {
  margin-top: 0.35rem;
  color: var(--el-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.pwa-contact-action-buttons {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.pwa-call-btn,
.pwa-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(91, 70, 54, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
}

.pwa-call-btn {
  background: var(--el-brown);
}

.pwa-whatsapp-btn {
  background: #25D366;
}

.pwa-call-btn:active,
.pwa-whatsapp-btn:active {
  transform: scale(0.98);
}

.pwa-whatsapp-app-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(36, 28, 23, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.pwa-whatsapp-app-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pwa-whatsapp-app-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10041;
  padding: 0.7rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: #fffaf5;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 50px rgba(36, 28, 23, 0.22);
  transform: translateY(105%);
  transition: transform 0.22s ease;
}

.pwa-whatsapp-app-sheet.is-open {
  transform: translateY(0);
}

.pwa-whatsapp-app-handle {
  width: 42px;
  height: 4px;
  margin: 0.15rem auto 0.85rem;
  border-radius: 999px;
  background: rgba(91, 70, 54, 0.18);
}

.pwa-whatsapp-app-title {
  margin: 0;
  color: var(--el-brown-dark, #2d2118);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.25;
}

.pwa-whatsapp-app-copy {
  margin: 0.35rem 0 0.95rem;
  color: var(--el-muted, #7a6b5d);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.pwa-whatsapp-app-choice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.55rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(91, 70, 54, 0.14);
  border-radius: 16px;
  background: #fff;
  color: var(--el-brown-dark, #2d2118);
  text-align: left;
  cursor: pointer;
}

.pwa-whatsapp-app-choice i {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.pwa-whatsapp-app-choice span {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.pwa-whatsapp-app-choice strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.pwa-whatsapp-app-choice small {
  color: var(--el-muted, #7a6b5d);
  font-size: 0.78rem;
  font-weight: 700;
}

.pwa-whatsapp-app-choice.is-selected {
  border-color: rgba(37, 211, 102, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.16);
  background: #f3fff7;
}

.pwa-whatsapp-app-cancel {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.75rem;
  border: 0;
  background: transparent;
  color: var(--el-muted, #7a6b5d);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

body.pwa-whatsapp-app-open {
  overflow: hidden;
}

.pwa-empty-state {
  text-align: center;
  padding: 1.5rem 1rem;
}

.pwa-empty-icon {
  font-size: 1.8rem;
  margin-bottom: 0.35rem;
}

.pwa-no-results {
  display: none;
  text-align: center;
  padding: 1.3rem 1rem;
  color: var(--el-muted);
  font-size: 0.9rem;
}

.pwa-no-results.is-visible {
  display: block;
}

.pwa-contact-guest-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(36, 28, 23, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.pwa-contact-guest-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pwa-contact-guest-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  max-height: 90vh;
  overflow-y: auto;
  background: #fffaf5;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 50px rgba(36, 28, 23, 0.22);
  transform: translateY(105%);
  transition: transform 0.22s ease;
}

.pwa-contact-guest-drawer.is-open {
  transform: translateY(0);
}

.pwa-contact-drawer-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fffaf5;
  padding: 1rem 1rem 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(198, 165, 123, 0.18);
}

.pwa-contact-drawer-title {
  color: var(--el-brown-dark);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
}

.pwa-contact-drawer-subtitle {
  margin-top: 0.15rem;
  color: var(--el-muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
}

.pwa-contact-drawer-close {
  border: 0;
  background: var(--el-sand);
  color: var(--el-brown);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.pwa-contact-drawer-body {
  padding: 1rem;
}

.pwa-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.pwa-contact-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--el-brown);
  font-size: 0.82rem;
  font-weight: 850;
}

.pwa-contact-input,
.pwa-contact-textarea {
  width: 100%;
  border: 1px solid rgba(91, 70, 54, 0.16);
  background: #fff;
  color: var(--el-brown-dark);
  border-radius: 14px;
  padding: 0.72rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 700;
  outline: none;
}

.pwa-contact-input:focus,
.pwa-contact-textarea:focus {
  border-color: rgba(159, 127, 88, 0.55);
  box-shadow: 0 0 0 3px rgba(198, 165, 123, 0.18);
}

.pwa-contact-textarea {
  resize: vertical;
  min-height: 96px;
}

.pwa-contact-help {
  display: block;
  margin-top: 0.25rem;
  color: var(--el-muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.pwa-contact-guest-suggest {
  margin-top: 0.4rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--el-sand);
  background: #fff;
  box-shadow: 0 10px 24px rgba(71, 54, 42, 0.08);
}

.pwa-contact-guest-suggest-item {
  width: 100%;
  display: block;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid #f0e6dc;
  background: #fff;
  text-align: left;
}

.pwa-contact-guest-suggest-item:last-child {
  border-bottom: 0;
}

.pwa-contact-guest-suggest-name {
  color: var(--el-brown-dark);
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.25;
}

.pwa-contact-guest-suggest-meta {
  margin-top: 2px;
  color: var(--el-muted);
  font-size: 0.8rem;
  line-height: 1.25;
}

.pwa-contact-save-btn {
  margin-top: 0.2rem;
  border: 0;
  background: var(--el-brown);
  color: #fff;
  border-radius: 999px;
  padding: 0.78rem 1rem;
  font-size: 0.92rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(91, 70, 54, 0.18);
}

.pwa-contact-remove-btn {
  border: 1px solid rgba(91, 70, 54, 0.18);
  background: #fff;
  color: var(--el-brown);
  border-radius: 999px;
  padding: 0.72rem 1rem;
  font-size: 0.86rem;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}

.pwa-contact-remove-btn[hidden] {
  display: none;
}

@media (max-width: 420px) {
  .pwa-contact-card {
    padding: 0.8rem;
    gap: 0.65rem;
  }
  .pwa-call-btn,
  .pwa-whatsapp-btn {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
  .pwa-contact-action-buttons {
    gap: 0.35rem;
  }
  .pwa-filter-panel {
    width: min(88vw, 340px);
  }
}
/* ===== extracted from templates/pwa/eventos/partials/_intolerancias.twig ===== */
.pwa-int-page {
  padding: 0 12px 12px;
}

.pwa-int-topbar {
  margin-top: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pwa-int-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-int-add-btn {
  min-height: 38px;
  border-radius: 999px;
  background: #2f6f64;
  color: #fff;
  border: 0;
  padding: 0 13px;
  font-size: 0.86rem;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pwa-int-view-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.pwa-int-view-btn {
  min-height: 38px;
  border-radius: 999px;
  background: #f8f5f1;
  border: 1px solid #ece4dc;
  color: #5b4636;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pwa-int-view-btn.active {
  background: #2f6f64;
  border-color: #2f6f64;
  color: #fff;
}

.pwa-int-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.pwa-int-tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3eee8;
  border: 1px solid #eadfd5;
  color: #6a5140;
  font-size: 0.74rem;
  font-weight: 800;
}

.pwa-int-item {
  cursor: pointer;
}

.pwa-int-item-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pwa-int-edit-pill {
  color: #7a5d48;
  font-size: 0.76rem;
  font-weight: 850;
  flex-shrink: 0;
}

.pwa-int-menu-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(47, 111, 100, 0.08);
  border: 1px solid rgba(47, 111, 100, 0.14);
  color: #2f6f64;
  font-size: 0.74rem;
  font-weight: 800;
}

.pwa-int-item-mesa-inline {
  margin-top: 2px;
  color: #7a7067;
  font-size: 0.78rem;
  font-weight: 700;
}

.pwa-int-guest-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(36, 28, 23, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.pwa-int-guest-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pwa-int-guest-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  max-height: 90vh;
  overflow-y: auto;
  background: #fffaf5;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 50px rgba(36, 28, 23, 0.22);
  transform: translateY(105%);
  transition: transform 0.22s ease;
}

.pwa-int-guest-drawer.is-open {
  transform: translateY(0);
}

.pwa-int-guest-suggest {
  margin-top: 7px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eaded2;
  background: #fff;
  box-shadow: 0 10px 24px rgba(71, 54, 42, 0.08);
}

.pwa-int-guest-suggest-item {
  width: 100%;
  display: block;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid #f0e6dc;
  background: #fff;
  text-align: left;
}

.pwa-int-guest-suggest-item:last-child {
  border-bottom: 0;
}

.pwa-int-guest-suggest-name {
  color: #241c17;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.25;
}

.pwa-int-guest-suggest-meta {
  margin-top: 2px;
  color: #7a6d62;
  font-size: 0.8rem;
  line-height: 1.25;
}

.pwa-int-guest-help {
  display: block;
  margin-top: 6px;
  color: #8a7666;
  font-size: 0.78rem;
  line-height: 1.25;
}

@media (max-width: 380px) {
  .pwa-int-page {
    padding: 0 10px 10px;
  }
  .pwa-int-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .pwa-int-top-actions {
    width: 100%;
  }
  .pwa-int-add-btn,
  .pwa-int-filter-btn {
    flex: 1;
    justify-content: center;
  }
}
/* ===== extracted from templates/pwa/eventos/partials/_invitados.twig ===== */
.pwa-inv-page {
  width: 100%;
}

.pwa-inv-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: rgba(250, 247, 242, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #eaded2;
}

.pwa-inv-summary {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  color: #6d5d51;
  font-size: 0.82rem;
}

.pwa-inv-summary strong {
  font-size: 1.2rem;
  color: #2f2924;
  line-height: 1;
}

.pwa-inv-active-mode {
  margin-left: 0.4rem;
  border: 1px solid #eaded2;
  background: #fff;
  color: #7a6554;
  border-radius: 999px;
  padding: 0.16rem 0.48rem;
  font-size: 0.68rem;
  font-weight: 800;
}

.pwa-inv-filter-btn {
  border: 1px solid #d8c7b8;
  background: #fff;
  color: #4d4037;
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.pwa-inv-main-list {
  padding: 0.45rem 0.65rem 1.25rem;
}

.pwa-inv-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pwa-inv-empty {
  padding: 2rem 1rem;
  color: #8a8179;
  text-align: center;
  font-size: 0.9rem;
}

.pwa-inv-table-group {
  background: #fff;
  border: 1px solid #eaded2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(73, 57, 42, 0.045);
}

.pwa-inv-table-group.is-collapsed .pwa-inv-group-body {
  display: none;
}

.pwa-inv-table-group.is-hidden {
  display: none;
}

.pwa-inv-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 0.9rem;
  background: linear-gradient(180deg, #fffaf4 0%, #fff 100%);
  border-bottom: 1px solid #f0e5da;
}

.pwa-inv-group-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pwa-inv-group-title {
  margin: 0;
  color: #342b24;
  font-size: 0.98rem;
  font-weight: 900;
}

.pwa-inv-count {
  border-radius: 999px;
  border: 1px solid #eaded2;
  background: #fff;
  color: #77665a;
  padding: 0.14rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 900;
}

.pwa-inv-group-subtitle {
  margin-top: 0.18rem;
  color: #89796c;
  font-size: 0.74rem;
}

.pwa-inv-collapse-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #eaded2;
  background: #fff;
  color: #6e5c4e;
  border-radius: 50%;
  flex: 0 0 auto;
}

.pwa-inv-table-group.is-collapsed .pwa-inv-collapse-btn i {
  transform: rotate(180deg);
}

.pwa-inv-group-body {
  display: flex;
  flex-direction: column;
}

.pwa-inv-item {
  border: 0;
  background: #fff;
  padding: 0.78rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid #f1e8df;
  cursor: pointer;
  width: 100%;
}

.pwa-inv-item:last-child {
  border-bottom: 0;
}

.pwa-inv-item:active {
  background: #fbf6ef;
}

.pwa-inv-item.is-muted {
  opacity: 0.55;
}

.pwa-inv-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.pwa-inv-item-name-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.pwa-inv-item-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: #2f2924;
  line-height: 1.18;
}

.pwa-inv-item-meta {
  margin-top: 0.22rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.pwa-inv-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  border: 1px solid #eee3d8;
  background: #fbf8f4;
  color: #66584d;
  border-radius: 999px;
  padding: 0.13rem 0.44rem;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
}

.pwa-inv-pill.important {
  background: #fff6d8;
  border-color: #f0d785;
  color: #71540a;
}

.pwa-inv-pill.gift {
  background: #f5efff;
  border-color: #ded0f4;
  color: #5a3d84;
}

.pwa-inv-pill.phone {
  background: #eef8f2;
  border-color: #d6ecdf;
  color: #246043;
}

.pwa-inv-pill.intervention {
  background: #fff1e6;
  border-color: #f0d3bd;
  color: #81512c;
}

.pwa-inv-side {
  flex: 0 0 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  max-width: 7.5rem;
}

.pwa-inv-side .pwa-inv-pill.important {
  background: #fff6d8;
  border-color: #f0d785;
  color: #71540a;
}

.pwa-inv-side .pwa-inv-pill.important i {
  font-size: 0.68rem;
}

.pwa-inv-confirm {
  border-radius: 999px;
  padding: 0.16rem 0.45rem;
  font-size: 0.63rem;
  font-weight: 900;
  white-space: nowrap;
}

.pwa-inv-confirm.confirmado {
  background: #e9f8ef;
  color: #146c43;
}

.pwa-inv-confirm.pendiente {
  background: #fff4db;
  color: #946200;
}

.pwa-inv-confirm.rechazado {
  background: #fdecec;
  color: #b42318;
}

.pwa-inv-confirm.sin-respuesta,
.pwa-inv-confirm.sin_respuesta {
  background: #f0f1f2;
  color: #5a6268;
}

.pwa-inv-info {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  color: #5f554c;
  font-size: 0.78rem;
  line-height: 1.25;
}

.pwa-inv-info-line strong {
  color: #3e332b;
}

.pwa-inv-note {
  margin-top: 0.45rem;
  color: #7b7067;
  background: #fbf8f4;
  border: 1px dashed #e7d9ca;
  border-radius: 12px;
  padding: 0.48rem 0.58rem;
  font-size: 0.76rem;
  line-height: 1.25;
}

.pwa-inv-note.is-empty {
  display: none;
}

.pwa-inv-drawer-backdrop,
.pwa-inv-note-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(32, 26, 22, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.pwa-inv-drawer-backdrop.is-open,
.pwa-inv-note-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pwa-inv-drawer,
.pwa-inv-note-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1001;
  width: min(92vw, 390px);
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  box-shadow: -18px 0 32px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
}

.pwa-inv-drawer.is-open,
.pwa-inv-note-drawer.is-open {
  transform: translateX(0);
}

.pwa-inv-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid #eee3d8;
  background: #faf7f2;
}

.pwa-inv-drawer-title {
  font-size: 1rem;
  font-weight: 900;
  color: #2f2924;
}

.pwa-inv-drawer-subtitle {
  margin-top: 0.12rem;
  font-size: 0.76rem;
  color: #817369;
}

.pwa-inv-drawer-close {
  width: 36px;
  height: 36px;
  border: 1px solid #eaded2;
  background: #fff;
  color: #5f534b;
  border-radius: 50%;
  flex: 0 0 auto;
}

.pwa-inv-drawer-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

.pwa-inv-filter-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #f0e7de;
}

.pwa-inv-filter-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.pwa-inv-filter-title {
  font-size: 0.78rem;
  font-weight: 900;
  color: #514338;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.pwa-inv-mode-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.pwa-inv-mode {
  border: 1px solid #eaded2;
  background: #fff;
  color: #5a4d43;
  border-radius: 14px;
  padding: 0.65rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: left;
}

.pwa-inv-mode.active {
  border-color: #a67c52;
  background: #fff4e7;
  color: #69451f;
}

.pwa-inv-label {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-bottom: 0.7rem;
  color: #514338;
  font-size: 0.78rem;
  font-weight: 900;
}

.pwa-input,
.pwa-textarea {
  width: 100%;
  border: 1px solid #ded2c7;
  border-radius: 14px;
  background: #fff;
  color: #2f2924;
  padding: 0.68rem 0.78rem;
  font-size: 0.9rem;
  outline: none;
}

.pwa-input:focus,
.pwa-textarea:focus {
  border-color: #a67c52;
  box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.14);
}

.pwa-inv-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.pwa-inv-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #eaded2;
  border-radius: 14px;
  padding: 0.62rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: #514338;
  background: #fff;
}

.pwa-inv-check input {
  margin: 0;
}

.pwa-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 900;
}

.pwa-inv-save-btn {
  background: #2f2924;
  color: #fff;
}

.pwa-inv-search-btn {
  background: #a67c52;
  color: #fff;
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.pwa-inv-search-btn i {
  font-size: 0.82rem;
}

@media (min-width: 768px) {
  .pwa-inv-main-list {
    padding-inline: 0;
  }
  .pwa-inv-topbar {
    border-radius: 16px;
    margin-bottom: 0.75rem;
  }
}
/* ===== extracted from templates/pwa/eventos/partials/_musica.twig ===== */
.pwa-musica-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pwa-musica-count {
  color: #6f655d;
  font-size: 0.86rem;
  font-weight: 750;
}

.pwa-music-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: #2f6f64;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 850;
  box-shadow: 0 8px 16px rgba(47, 111, 100, 0.18);
}

.pwa-musica-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-music-card {
  position: relative;
  padding: 18px 14px 13px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ece4dc;
  box-shadow: 0 6px 18px rgba(71, 54, 42, 0.05);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.pwa-music-card:active {
  cursor: grabbing;
}

.pwa-music-card::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: #eaded2;
  opacity: 0.9;
}

.pwa-music-card.is-saving-order {
  opacity: 0.72;
}

.pwa-music-card.sortable-ghost {
  opacity: 0.4;
  background: #f7f1ea;
}

.pwa-music-card.sortable-chosen {
  box-shadow: 0 14px 32px rgba(71, 54, 42, 0.14);
}

.pwa-music-card.sortable-drag {
  transform: rotate(1deg);
}

.pwa-music-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pwa-music-order-feedback {
  margin: 0 0 10px;
  padding: 9px 11px;
  border-radius: 13px;
  font-size: 0.84rem;
  font-weight: 800;
  display: none;
}

.pwa-music-order-feedback.is-visible {
  display: block;
}

.pwa-music-order-feedback.is-ok {
  background: #edf7f4;
  border: 1px solid #cce7df;
  color: #2f6f64;
}

.pwa-music-order-feedback.is-error {
  background: #fff0ed;
  border: 1px solid #ffd0c7;
  color: #b42318;
}

.pwa-music-main {
  min-width: 0;
  flex: 1;
}

.pwa-music-kicker {
  margin-bottom: 3px;
  color: #7a5d48;
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.pwa-music-title {
  color: #241c17;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.25;
}

.pwa-music-artist {
  margin-top: 2px;
  color: #6f655d;
  font-size: 0.88rem;
  line-height: 1.25;
}

.pwa-music-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.pwa-music-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f7f1ea;
  border: 1px solid #eaded2;
  color: #6f5544;
  font-size: 0.78rem;
  font-weight: 800;
}

.pwa-music-action {
  margin-top: 9px;
  color: #5f554d;
  font-size: 0.9rem;
  line-height: 1.35;
}

.pwa-music-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.pwa-music-edit-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: #7a5d48;
  font-size: 0.84rem;
  font-weight: 850;
  text-decoration: none;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: auto;
  -webkit-user-select: auto;
}

.pwa-music-delete-form {
  margin: 0;
  user-select: auto;
  -webkit-user-select: auto;
}

.pwa-music-delete-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: #b42318;
  font-size: 0.84rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.pwa-music-notes {
  margin-top: 9px;
  border-radius: 12px;
  background: #fbf8f4;
  border: 1px solid #efe5dc;
  overflow: hidden;
  user-select: auto;
  -webkit-user-select: auto;
}

.pwa-music-notes summary {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  color: #7a5d48;
  list-style: none;
}

.pwa-music-notes summary::-webkit-details-marker {
  display: none;
}

.pwa-music-notes summary::after {
  content: "＋";
  float: right;
  font-weight: 900;
  color: #9a806c;
}

.pwa-music-notes[open] summary::after {
  content: "−";
}

.pwa-music-notes div {
  padding: 0 10px 10px;
  color: #5f554d;
  font-size: 0.86rem;
  line-height: 1.35;
}

.pwa-music-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(36, 28, 23, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
}

.pwa-music-modal-backdrop[hidden] {
  display: none;
}

.pwa-music-modal {
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 24px 24px 18px 18px;
  background: #fffaf5;
  border: 1px solid #eaded2;
  box-shadow: 0 24px 60px rgba(36, 28, 23, 0.24);
  padding: 16px;
  animation: pwaMusicModalIn 0.18s ease-out;
}

@keyframes pwaMusicModalIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.pwa-music-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pwa-music-modal-kicker {
  color: #7a5d48;
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pwa-music-modal-head h3 {
  margin: 2px 0 0;
  color: #241c17;
  font-size: 1.05rem;
  font-weight: 900;
}

.pwa-music-modal-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f4ece5;
  color: #6f5544;
  font-size: 1.5rem;
  line-height: 1;
}

.pwa-music-form label {
  display: block;
  margin-bottom: 10px;
}

.pwa-music-form label span {
  display: block;
  margin-bottom: 4px;
  color: #7a5d48;
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.pwa-music-form input,
.pwa-music-form textarea,
.pwa-music-form select {
  width: 100%;
  border: 1px solid #e3d6ca;
  border-radius: 13px;
  background: #fff;
  color: #241c17;
  padding: 10px 11px;
  font-size: 0.95rem;
  outline: none;
}

.pwa-music-form textarea {
  resize: vertical;
}

.pwa-music-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.pwa-music-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 12px;
}

.pwa-music-cancel-btn,
.pwa-music-save-btn {
  min-height: 39px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 850;
  text-decoration: none;
  border: 0;
}

.pwa-music-cancel-btn {
  background: #f4ece5;
  color: #6f5544;
}

.pwa-music-save-btn {
  background: #2f6f64;
  color: #fff;
}

@media (max-width: 390px) {
  .pwa-music-card {
    padding: 18px 12px 12px;
  }
  .pwa-music-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pwa-music-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pwa-music-cancel-btn,
  .pwa-music-save-btn {
    width: 100%;
    text-align: center;
  }
}
/* ===== extracted from templates/pwa/eventos/partials/_proveedores.twig ===== */
.pwa-proveedores-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pwa-proveedores-count {
  color: #6f655d;
  font-size: 0.86rem;
  font-weight: 750;
}

.pwa-provider-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: #2f6f64;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 850;
  box-shadow: 0 8px 16px rgba(47, 111, 100, 0.18);
}

.pwa-proveedores-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-proveedor-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ece4dc;
  box-shadow: 0 6px 18px rgba(71, 54, 42, 0.05);
}

.pwa-proveedor-info {
  min-width: 0;
  flex: 1;
}

.pwa-proveedor-tipo {
  margin-bottom: 3px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #7a5d48;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.pwa-proveedor-subtipo {
  color: #9a806c;
  font-weight: 700;
}

.pwa-proveedor-nombre {
  font-size: 1rem;
  font-weight: 850;
  color: #241c17;
  line-height: 1.25;
}

.pwa-proveedor-contacto {
  margin-top: 3px;
  color: #6f655d;
  font-size: 0.86rem;
  line-height: 1.25;
}

.pwa-proveedor-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.pwa-proveedor-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f7f1ea;
  border: 1px solid #eaded2;
  color: #5f4a3b;
  font-size: 0.86rem;
  font-weight: 750;
  text-decoration: none;
  line-height: 1;
}

.pwa-proveedor-wa {
  background: rgba(47, 111, 100, 0.08);
  border-color: rgba(47, 111, 100, 0.18);
  color: #2f6f64;
}

.pwa-proveedor-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pwa-call-btn {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 999px;
  background: #2f6f64;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 8px 16px rgba(47, 111, 100, 0.22);
  -webkit-tap-highlight-color: transparent;
}

.pwa-wa-btn {
  background: #2f6f64;
}

.pwa-call-btn:active {
  transform: scale(0.96);
}

.pwa-proveedor-notas {
  margin-top: 9px;
  border-radius: 12px;
  background: #fbf8f4;
  border: 1px solid #efe5dc;
  overflow: hidden;
}

.pwa-proveedor-notas summary {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  color: #7a5d48;
  list-style: none;
}

.pwa-proveedor-notas summary::-webkit-details-marker {
  display: none;
}

.pwa-proveedor-notas summary::after {
  content: "＋";
  float: right;
  font-weight: 900;
  color: #9a806c;
}

.pwa-proveedor-notas[open] summary::after {
  content: "−";
}

.pwa-proveedor-notas div {
  padding: 0 10px 10px;
  color: #5f554d;
  font-size: 0.86rem;
  line-height: 1.35;
}

.pwa-proveedor-edit-btn {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7a5d48;
  font-size: 0.84rem;
  font-weight: 850;
  text-decoration: none;
}

.pwa-provider-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(36, 28, 23, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
}

.pwa-provider-modal-backdrop[hidden] {
  display: none;
}

.pwa-provider-modal {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 24px 24px 18px 18px;
  background: #fffaf5;
  border: 1px solid #eaded2;
  box-shadow: 0 24px 60px rgba(36, 28, 23, 0.24);
  padding: 16px;
  animation: pwaProviderModalIn 0.18s ease-out;
}

@keyframes pwaProviderModalIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.pwa-provider-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pwa-provider-modal-kicker {
  color: #7a5d48;
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pwa-provider-modal-head h3 {
  margin: 2px 0 0;
  color: #241c17;
  font-size: 1.05rem;
  font-weight: 900;
}

.pwa-provider-modal-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f4ece5;
  color: #6f5544;
  font-size: 1.5rem;
  line-height: 1;
}

.pwa-provider-current-name {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #eaded2;
  color: #241c17;
  font-size: 0.95rem;
  font-weight: 850;
}

.pwa-provider-form label {
  display: block;
  margin-bottom: 10px;
}

.pwa-provider-form label span {
  display: block;
  margin-bottom: 4px;
  color: #7a5d48;
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.pwa-provider-form input,
.pwa-provider-form textarea {
  width: 100%;
  border: 1px solid #e3d6ca;
  border-radius: 13px;
  background: #fff;
  color: #241c17;
  padding: 10px 11px;
  font-size: 0.95rem;
  outline: none;
}

.pwa-provider-form input[readonly] {
  background: #f6f0ea;
  color: #76675b;
}

.pwa-provider-form textarea {
  resize: vertical;
}

.pwa-provider-help {
  display: block;
  margin-top: 6px;
  color: #8a7666;
  font-size: 0.78rem;
  line-height: 1.25;
}

.pwa-provider-suggest {
  margin-top: 7px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eaded2;
  background: #fff;
  box-shadow: 0 10px 24px rgba(71, 54, 42, 0.08);
}

.pwa-provider-suggest-item {
  width: 100%;
  display: block;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid #f0e6dc;
  background: #fff;
  text-align: left;
}

.pwa-provider-suggest-item:last-child {
  border-bottom: 0;
}

.pwa-provider-suggest-name {
  color: #241c17;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.25;
}

.pwa-provider-suggest-meta {
  margin-top: 2px;
  color: #7a6d62;
  font-size: 0.8rem;
  line-height: 1.25;
}

.pwa-provider-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 12px;
}

.pwa-provider-cancel-btn,
.pwa-provider-save-btn {
  min-height: 39px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 850;
  text-decoration: none;
  border: 0;
}

.pwa-provider-cancel-btn {
  background: #f4ece5;
  color: #6f5544;
}

.pwa-provider-save-btn {
  background: #2f6f64;
  color: #fff;
}

@media (max-width: 390px) {
  .pwa-proveedor-row {
    padding: 12px;
    gap: 9px;
  }
  .pwa-call-btn {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 1.1rem;
  }
  .pwa-proveedor-mini-btn {
    font-size: 0.82rem;
    padding-inline: 9px;
  }
  .pwa-provider-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pwa-provider-cancel-btn,
  .pwa-provider-save-btn {
    width: 100%;
    text-align: center;
  }
}
/* ===== extracted from templates/pwa/eventos/partials/_styles.twig ===== */
.pwa-event-page {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pwa-card, .pwa-empty-card, .pwa-section-card {
  background: #fff;
  border: 1px solid #e8e2d8;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 22px rgba(40, 32, 24, 0.06);
}

.pwa-muted {
  color: #7a7067;
}

.pwa-event-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  color: #2f241c;
}

.pwa-event-meta {
  font-size: 0.9rem;
  margin-top: 4px;
  color: #7a7067;
}

.pwa-section-nav {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 2px;
}

.pwa-section-nav a {
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid #e6ddd1;
  border-radius: 999px;
  padding: 8px 12px;
  color: #4b4038;
  background: #fff;
}

.pwa-section-nav a.active {
  background: #7b6655;
  color: #fff;
  border-color: #7b6655;
}

.pwa-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-row {
  border: 1px solid #eee7de;
  border-radius: 14px;
  padding: 12px;
  background: #fffdfb;
}

.pwa-row-title {
  font-weight: 800;
  color: #2f241c;
}

.pwa-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.78rem;
  background: #f3eee8;
  color: #68594d;
}

.pwa-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fbf8f4;
  border: 1px solid #eee4da;
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}

.pwa-input, .pwa-select, .pwa-textarea {
  width: 100%;
  border: 1px solid #ddd2c5;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.pwa-btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #7b6655;
  color: #fff;
  font-weight: 700;
}

.pwa-tabs {
  display: flex;
  gap: 8px;
  overflow: auto;
  margin-bottom: 12px;
}

.pwa-tab {
  border: 1px solid #e5d9cc;
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  color: #55483d;
}

.pwa-tab.active {
  background: #2f241c;
  color: #fff;
}

.pwa-small {
  font-size: 0.85rem;
}

.pwa-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 560px) {
  .pwa-grid-2 {
    grid-template-columns: 1fr;
  }
}
/* ===== extracted from templates/pwa/eventos/partials/_timeline.twig ===== */
.pwa-timeline-card {
  padding: 0.85rem 0.75rem 1rem;
}

.pwa-timeline-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pwa-timeline-count {
  color: #6f655d;
  font-size: 0.86rem;
  font-weight: 750;
}

.pwa-timeline-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: #2f6f64;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 850;
  box-shadow: 0 8px 16px rgba(47, 111, 100, 0.18);
}

.pwa-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pwa-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 16px minmax(0, 1fr);
  column-gap: 0.5rem;
  padding-bottom: 1rem;
}

.pwa-timeline-item:last-child {
  padding-bottom: 0;
}

.pwa-timeline-seccion + .pwa-timeline-seccion {
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(111, 79, 58, 0.18);
}

.pwa-timeline-seccion-head {
  margin: 0 0 0.7rem 63px;
}

.pwa-timeline-seccion-name {
  color: #6f4f3a;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pwa-timeline-seccion-meta {
  margin-top: 0.12rem;
  color: #8a7364;
  font-size: 0.78rem;
}

.pwa-timeline-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.45rem;
}

.pwa-timeline-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #f4ece5;
  color: #5c4638;
  font-size: 0.74rem;
  font-weight: 650;
}

.pwa-timeline-chip small {
  color: #8a7364;
  font-size: 0.68rem;
  font-weight: 550;
}

.pwa-timeline-chip--prov {
  background: #eef4f2;
  color: #2f5c54;
}

.pwa-timeline-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
}

.pwa-timeline-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: #f4ece5;
  color: #5c4638;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
}

.pwa-timeline-nav a b {
  font-variant-numeric: tabular-nums;
  color: #2f6f64;
}

.pwa-timeline-facts {
  display: grid;
  gap: 0.12rem;
  margin-top: 0.45rem;
}

.pwa-timeline-faltan {
  margin: 0.4rem 0 0;
  color: #8a5a22;
  font-size: 0.76rem;
}

.pwa-timeline-mats {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.18rem;
}

.pwa-timeline-mats li {
  font-size: 0.8rem;
  color: #3d342c;
}

.pwa-timeline-mats span {
  display: block;
  color: #8a7364;
  font-size: 0.74rem;
}

.pwa-timeline-notas {
  margin: 0.45rem 0 0;
  padding: 0.42rem 0.5rem;
  border-radius: 10px;
  background: #fffaf0;
  color: #5c4638;
  font-size: 0.8rem;
  white-space: pre-wrap;
}

.pwa-timeline-item.is-now .pwa-timeline-main {
  box-shadow: 0 0 0 2px rgba(47, 111, 100, 0.28);
}

.pwa-timeline-item.is-now .pwa-timeline-marker span {
  background: #2f6f64;
  box-shadow: 0 0 0 4px rgba(47, 111, 100, 0.18);
}

.pwa-timeline-item.is-now .pwa-timeline-time {
  color: #2f6f64;
}

.pwa-timeline-item.is-next .pwa-timeline-marker span {
  background: #c9895c;
}

.pwa-timeline-fact {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.28rem 0;
}

.pwa-timeline-fact + .pwa-timeline-fact {
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.pwa-timeline-fact-label {
  color: #8a7364;
  font-size: 0.72rem;
}

.pwa-timeline-fact-valor {
  color: #241c17;
  font-size: 0.88rem;
  font-weight: 650;
  white-space: pre-wrap;
}

.pwa-timeline-time {
  padding-top: 0.06rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #7a7167;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.pwa-timeline-time span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #9ca3af;
}

.pwa-timeline-marker {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 0.34rem;
}

.pwa-timeline-marker::after {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: -1rem;
  width: 2px;
  background: #eadfd2;
  border-radius: 999px;
}

.pwa-timeline-item:last-child .pwa-timeline-marker::after {
  display: none;
}

.pwa-timeline-marker span {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #c9895c;
  box-shadow: 0 0 0 4px #f7efe8;
}

.pwa-timeline-content {
  min-width: 0;
}

.pwa-timeline-main {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 16px;
  padding: 0.72rem 0.78rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

.pwa-timeline-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.pwa-timeline-title {
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1f2937;
}

.pwa-timeline-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.pwa-timeline-edit-btn,
.pwa-timeline-delete-btn {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
}

.pwa-timeline-edit-btn {
  color: #7a5d48;
}

.pwa-timeline-delete-btn {
  color: #b42318;
}

.pwa-timeline-delete-form {
  margin: 0;
}

.pwa-timeline-location {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: #6f4f3a;
}

.pwa-timeline-location i {
  font-size: 0.75rem;
  color: #d9466b;
}

.pwa-timeline-music {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.pwa-timeline-music-line {
  display: flex;
  align-items: flex-start;
  gap: 0.32rem;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  color: #6b7280;
}

.pwa-timeline-music-line i {
  flex: 0 0 auto;
  margin-top: 0.12rem;
  font-size: 0.72rem;
  color: #c9895c;
}

.pwa-timeline-music-text {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.28;
}

.pwa-timeline-music-moment {
  font-weight: 850;
  color: #9a6b4d;
  margin-right: 0.25rem;
}

.pwa-timeline-music-song {
  font-weight: 650;
  color: #374151;
}

.pwa-timeline-music-song small {
  font-size: 0.72rem;
  font-weight: 500;
  color: #6b7280;
}

.pwa-timeline-music-by {
  font-size: 0.72rem;
  color: #9ca3af;
}

.pwa-contact-quick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
  padding: 0.42rem 0.62rem;
  border-radius: 999px;
  background: #f7efe8;
  color: #6f4f3a;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.pwa-contact-quick i {
  font-size: 0.75rem;
}

.pwa-timeline-details {
  margin-top: 0.65rem;
  background: #fbfaf8;
  border: 1px solid rgba(111, 79, 58, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.pwa-timeline-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.52rem 0.62rem;
  font-size: 0.76rem;
  font-weight: 850;
  color: #7a5c48;
}

.pwa-timeline-details summary::-webkit-details-marker {
  display: none;
}

.pwa-timeline-details summary i {
  font-size: 0.7rem;
  transition: transform 0.18s ease;
}

.pwa-timeline-details[open] summary i {
  transform: rotate(180deg);
}

.pwa-detail-body {
  padding: 0.15rem 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pwa-detail-block {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 13px;
  padding: 0.65rem;
}

.pwa-notes-block {
  background: #fffaf0;
  border-color: rgba(201, 137, 92, 0.18);
}

.pwa-detail-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  font-size: 0.76rem;
  font-weight: 850;
  color: #6f4f3a;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.pwa-detail-title i {
  font-size: 0.75rem;
  opacity: 0.75;
}

.pwa-detail-text {
  font-size: 0.86rem;
  line-height: 1.38;
  color: #4b5563;
}

.pwa-contact-list,
.pwa-file-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pwa-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem;
  border-radius: 12px;
  background: #f9fafb;
}

.pwa-contact-info {
  min-width: 0;
}

.pwa-contact-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-contact-cat {
  margin-top: 0.08rem;
  font-size: 0.74rem;
  color: #6b7280;
}

.pwa-contact-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.pwa-contact-actions a {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #6f4f3a;
  text-decoration: none;
}

.pwa-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.42rem 0.58rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

.pwa-file-chip i {
  font-size: 0.72rem;
  color: #9a6b4d;
}

.pwa-timeline-item.is-done .pwa-timeline-marker span {
  background: #78917a;
  box-shadow: 0 0 0 4px #edf4ef;
}

.pwa-timeline-item.is-done .pwa-timeline-title {
  color: #6b7280;
  text-decoration: line-through;
}

.pwa-timeline-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(36, 28, 23, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
}

.pwa-timeline-modal-backdrop[hidden] {
  display: none;
}

.pwa-timeline-modal {
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 24px 24px 18px 18px;
  background: #fffaf5;
  border: 1px solid #eaded2;
  box-shadow: 0 24px 60px rgba(36, 28, 23, 0.24);
  padding: 16px;
  animation: pwaTimelineModalIn 0.18s ease-out;
}

@keyframes pwaTimelineModalIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.pwa-timeline-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pwa-timeline-modal-kicker {
  color: #7a5d48;
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pwa-timeline-modal-head h3 {
  margin: 2px 0 0;
  color: #241c17;
  font-size: 1.05rem;
  font-weight: 900;
}

.pwa-timeline-modal-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f4ece5;
  color: #6f5544;
  font-size: 1.5rem;
  line-height: 1;
}

.pwa-timeline-form label {
  display: block;
  margin-bottom: 10px;
}

.pwa-timeline-form label span {
  display: block;
  margin-bottom: 4px;
  color: #7a5d48;
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.pwa-timeline-form input,
.pwa-timeline-form textarea {
  width: 100%;
  border: 1px solid #e3d6ca;
  border-radius: 13px;
  background: #fff;
  color: #241c17;
  padding: 10px 11px;
  font-size: 0.95rem;
  outline: none;
}

.pwa-timeline-form textarea {
  resize: vertical;
}

.pwa-timeline-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.pwa-timeline-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 12px;
}

.pwa-timeline-cancel-btn,
.pwa-timeline-save-btn {
  min-height: 39px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 850;
  text-decoration: none;
  border: 0;
}

.pwa-timeline-cancel-btn {
  background: #f4ece5;
  color: #6f5544;
}

.pwa-timeline-save-btn {
  background: #2f6f64;
  color: #fff;
}

@media (max-width: 420px) {
  .pwa-timeline-card {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
  .pwa-timeline-item {
    grid-template-columns: 1.85rem 15px minmax(0, 1fr);
    column-gap: 0.42rem;
  }
  .pwa-timeline-seccion-head {
    margin-left: 0;
  }
  .pwa-timeline-time {
    font-size: 0.82rem;
  }
  .pwa-timeline-title {
    font-size: 0.95rem;
  }
  .pwa-detail-text {
    font-size: 0.84rem;
  }
  .pwa-timeline-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pwa-timeline-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pwa-timeline-cancel-btn,
  .pwa-timeline-save-btn {
    width: 100%;
    text-align: center;
  }
}

.proveedor-contactos-block {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  padding: 14px 16px;
}

.proveedor-contactos-publicos {
  background: #f8f7f4;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  padding: 14px 16px;
}

.proveedor-contacto-publico-item + .proveedor-contacto-publico-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

.proveedor-contacto-fila {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  padding: 12px;
  background: #fafafa;
}

.proveedor-contacto-fila + .proveedor-contacto-fila {
  margin-top: 10px;
}

.proveedor-contacto-fila-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.proveedor-contacto-principal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: #5c564c;
  margin: 0;
}

.proveedor-contactos-ficha {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.proveedor-contacto-ficha-item {
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 12px;
  background: #faf9f6;
}

/* Modal Nuevo Documento — EventLink */
#modalDocumento .doc-modal {
  max-width: none;
  max-height: none;
  width: 100%;
  border: 1px solid var(--el-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(45, 33, 24, 0.16);
}

#modalDocumento .modal-header {
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1rem;
  background: var(--el-warm-white);
  border-bottom: 1px solid var(--el-border);
}

#modalDocumento .doc-modal-heading {
  min-width: 0;
}

#modalDocumento .modal-title {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--el-deep-brown) !important;
  line-height: 1.2;
}

#modalDocumento .doc-modal-subtitle {
  margin: 0.28rem 0 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--el-muted);
  line-height: 1.4;
}

#modalDocumento .modal-body {
  padding: 1.2rem 1.25rem 0.4rem;
  background: var(--el-white);
}

#modalDocumento .doc-modal-section {
  margin-bottom: 1.15rem;
}

#modalDocumento .form-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--el-deep-brown);
}

#modalDocumento .doc-optional {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--el-muted);
}

#modalDocumento .form-control,
#modalDocumento .form-select {
  min-height: 44px;
  border-radius: 10px;
  border-color: var(--el-border);
  color: var(--el-deep-brown);
}

#modalDocumento .select2-container .select2-selection--single {
  min-height: 44px;
  border-radius: 10px !important;
  border-color: var(--el-border) !important;
  display: flex;
  align-items: center;
}

#modalDocumento .doc-help {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--el-muted);
}

#modalDocumento .doc-proveedor-ficha {
  margin-top: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  background: var(--el-warm-white);
}

#modalDocumento .doc-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

#modalDocumento .doc-method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  margin: 0;
  padding: 0.85rem 0.8rem 0.8rem;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  background: var(--el-white);
  color: var(--el-deep-brown);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

#modalDocumento .doc-method-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#modalDocumento .doc-method-card:hover {
  border-color: var(--el-taupe-dark);
  background: var(--el-warm-white);
}

#modalDocumento .doc-method-card:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(196, 168, 130, 0.28);
}

#modalDocumento .doc-method-card:has(input:checked) {
  background: var(--el-deep-brown);
  border-color: var(--el-deep-brown);
  color: var(--el-white);
  box-shadow: 0 8px 18px rgba(45, 33, 24, 0.16);
}

#modalDocumento .doc-method-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 0.35rem;
  border-radius: 8px;
  background: var(--el-cream);
  color: var(--el-taupe-dark);
  font-size: 0.92rem;
}

#modalDocumento .doc-method-card:has(input:checked) .doc-method-card__icon {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

#modalDocumento .doc-method-card__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
}

#modalDocumento .doc-method-card__hint {
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--el-muted);
}

#modalDocumento .doc-method-card:has(input:checked) .doc-method-card__hint {
  color: rgba(255, 255, 255, 0.78);
}

#modalDocumento .doc-method-help {
  margin: 0.7rem 0 0;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: var(--el-cream);
  color: var(--el-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

#modalDocumento .doc-dropzone {
  position: relative;
  border: 1.5px dashed var(--el-border);
  border-radius: 14px;
  background: var(--el-warm-white);
  min-height: 132px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

#modalDocumento .doc-dropzone:hover,
#modalDocumento .doc-dropzone.is-dragover {
  border-color: var(--el-taupe-dark);
  background: rgba(196, 168, 130, 0.1);
}

#modalDocumento .doc-dropzone__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

#modalDocumento .doc-dropzone__empty,
#modalDocumento .doc-dropzone__file {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.15rem 1rem;
  pointer-events: none;
  text-align: center;
}

#modalDocumento .doc-dropzone__empty {
  flex-direction: column;
}

#modalDocumento .doc-dropzone__empty strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--el-deep-brown);
}

#modalDocumento .doc-dropzone__empty span:last-child {
  font-size: 0.78rem;
  color: var(--el-muted);
}

#modalDocumento .doc-dropzone__icon,
#modalDocumento .doc-dropzone__file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(196, 168, 130, 0.16);
  color: var(--el-taupe-dark);
  font-size: 1.15rem;
}

#modalDocumento .doc-dropzone__file {
  display: none;
  justify-content: flex-start;
  text-align: left;
}

#modalDocumento .doc-dropzone.has-file {
  border-style: solid;
  border-color: var(--el-sage);
  background: #fff;
}

#modalDocumento .doc-dropzone.has-file .doc-dropzone__empty {
  display: none;
}

#modalDocumento .doc-dropzone.has-file .doc-dropzone__file {
  display: flex;
}

#modalDocumento .doc-dropzone__file-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

#modalDocumento .doc-dropzone__file-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--el-deep-brown);
  font-size: 0.9rem;
}

#modalDocumento .doc-dropzone__file-meta span {
  font-size: 0.76rem;
  color: var(--el-muted);
}

#modalDocumento .doc-dropzone__remove {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--el-cream);
  color: var(--el-deep-brown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#modalDocumento .doc-dropzone__remove:hover {
  background: rgba(196, 92, 74, 0.12);
  color: var(--el-danger);
}

#modalDocumento .doc-textarea {
  min-height: 180px;
  resize: vertical;
}

#modalDocumento .doc-empty-hint,
#modalDocumento .doc-loading {
  text-align: center;
  padding: 1.4rem 0.75rem;
  color: var(--el-muted);
}

#modalDocumento .doc-loading p,
#modalDocumento .doc-empty-hint {
  margin: 0.65rem 0 0;
  font-size: 0.86rem;
}

#modalDocumento .modal-footer {
  gap: 0.55rem;
  padding: 0.9rem 1.25rem 1.1rem;
  background: var(--el-white);
  border-top: 1px solid var(--el-border);
}

#modalDocumento .doc-btn-cancel,
#modalDocumento .doc-btn-save {
  min-height: 42px;
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  font-weight: 600;
}

#modalDocumento .doc-btn-cancel {
  background: var(--el-sand);
  border: 1px solid transparent;
  color: var(--el-deep-brown);
}

#modalDocumento .doc-btn-cancel:hover {
  background: #d9cbbd;
  color: var(--el-deep-brown);
}

#modalDocumento .doc-btn-save {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--el-deep-brown);
  border: 1px solid var(--el-deep-brown);
  color: #fff;
}

#modalDocumento .doc-btn-save:hover,
#modalDocumento .doc-btn-save:focus {
  background: #1f1712;
  border-color: #1f1712;
  color: #fff;
}

#modalDocumento .doc-btn-save:disabled {
  opacity: 0.65;
}

#modalDocumento .alert {
  border-radius: 10px;
  font-size: 0.86rem;
}

@media (max-width: 767.98px) {
  #modalDocumento .doc-method-grid {
    grid-template-columns: 1fr;
  }

  #modalDocumento .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  #modalDocumento .doc-btn-cancel,
  #modalDocumento .doc-btn-save {
    width: 100%;
    justify-content: center;
  }
}

.docs-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.docs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 2.4rem 1.25rem;
  border: 1px dashed var(--el-border);
  border-radius: 16px;
  background: var(--el-warm-white);
  color: var(--el-muted);
}

.docs-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 0.35rem;
  border-radius: 14px;
  background: rgba(196, 168, 130, 0.16);
  color: var(--el-taupe-dark);
  font-size: 1.25rem;
}

.docs-empty strong {
  color: var(--el-deep-brown);
  font-size: 1.05rem;
  font-weight: 650;
}

.docs-table thead th {
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--el-muted);
  background: var(--el-warm-white);
  border-bottom-color: var(--el-border);
  white-space: nowrap;
}

.docs-table td,
.docs-table tfoot th {
  vertical-align: middle;
}

.docs-table__name {
  color: var(--el-deep-brown);
  font-weight: 600;
}

.docs-table__btns {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.docs-table .ws-estado-select {
  min-width: 132px;
  max-width: 170px;
}

.docs-page-toolbar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  color: var(--el-muted);
  font-size: 0.86rem;
}

.docs-page-toolbar__meta strong {
  color: var(--el-deep-brown);
  font-weight: 650;
}

.docs-exp-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.docs-exp {
  background: var(--el-white);
  border: 1px solid var(--el-border);
  border-radius: 16px;
  padding: 1.05rem 1.15rem 0.9rem;
  box-shadow: 0 1px 2px rgba(45, 33, 24, 0.04);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.docs-exp:hover {
  border-color: var(--el-taupe);
  box-shadow: 0 8px 22px rgba(45, 33, 24, 0.08);
}

.docs-exp.is-alert {
  border-style: dashed;
  border-color: var(--el-coral);
  background: #fffdfb;
}

.docs-exp.is-discarded {
  opacity: 0.72;
}

.docs-exp__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem 1rem;
  align-items: start;
}

.docs-exp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--el-cream);
  color: var(--el-taupe-dark);
  font-size: 1.05rem;
}

.docs-exp.is-alert .docs-exp__icon {
  background: rgba(224, 122, 95, 0.12);
  color: var(--el-coral);
}

.docs-exp__title {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--el-deep-brown);
  line-height: 1.25;
}

.docs-exp__sub {
  margin: 0.22rem 0 0;
  color: var(--el-muted);
  font-size: 0.84rem;
}

.docs-exp__side {
  min-width: 168px;
  text-align: right;
}

.docs-exp__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.docs-exp__badge.is-ok {
  background: rgba(93, 139, 114, 0.12);
  color: var(--el-success);
  border-color: rgba(93, 139, 114, 0.28);
}

.docs-exp__badge.is-alert {
  background: rgba(224, 122, 95, 0.12);
  color: #c45c4a;
  border-color: rgba(224, 122, 95, 0.35);
}

.docs-exp__badge.is-wait {
  background: var(--el-cream);
  color: var(--el-muted);
  border-color: var(--el-border);
}

.docs-exp__badge.is-ko {
  background: rgba(196, 92, 74, 0.1);
  color: var(--el-danger);
  border-color: rgba(196, 92, 74, 0.25);
}

.docs-exp__amount {
  margin-top: 0.45rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--el-deep-brown);
  letter-spacing: -0.02em;
}

.docs-exp__progress {
  margin-top: 0.45rem;
  height: 6px;
  border-radius: 999px;
  background: var(--el-sand);
  overflow: hidden;
}

.docs-exp__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--el-sage);
}

.docs-exp__pay {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--el-muted);
}

.docs-exp__pay.is-muted {
  font-style: italic;
}

.docs-exp__link {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--el-taupe-dark);
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.docs-exp__link:hover {
  color: var(--el-deep-brown);
}

.docs-exp__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--el-border);
}

.docs-exp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.docs-exp__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--el-warm-white);
  border: 1px solid var(--el-border);
  color: var(--el-deep-brown);
  font-size: 0.74rem;
  font-weight: 550;
}

.docs-exp__chip.is-factura {
  color: #b4533a;
  border-color: rgba(196, 92, 74, 0.22);
  background: rgba(196, 92, 74, 0.06);
}

.docs-exp__chip.is-proforma {
  color: #9a6b1a;
  border-color: rgba(212, 160, 23, 0.28);
  background: rgba(212, 160, 23, 0.08);
}

.docs-exp__chip.is-justificante_pago {
  color: var(--el-success);
  border-color: rgba(93, 139, 114, 0.22);
  background: rgba(93, 139, 114, 0.08);
}

.docs-exp__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.docs-exp__ghost,
.docs-exp__more {
  border: 1px solid var(--el-border);
  background: #fff;
  color: var(--el-deep-brown);
  border-radius: 999px;
  min-height: 34px;
  padding: 0.28rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.docs-exp__more {
  width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.docs-exp__ghost:hover,
.docs-exp__more:hover {
  background: var(--el-warm-white);
  border-color: var(--el-taupe);
}

.docs-exp__ghost.is-selected {
  background: var(--el-deep-brown);
  border-color: var(--el-deep-brown);
  color: #fff;
}

.docs-exp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.28rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--el-taupe-dark);
  background: #fff;
  color: var(--el-deep-brown) !important;
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
}

.docs-exp__cta:hover,
.docs-exp__cta:focus,
.docs-exp__cta:focus-visible {
  background: var(--el-cream);
  border-color: var(--el-deep-brown);
  color: var(--el-deep-brown) !important;
}

.docs-exp__cta.is-quiet {
  border-color: var(--el-border);
}

.docs-exp__menu {
  min-width: 220px;
  border-radius: 12px;
  border-color: var(--el-border);
  box-shadow: 0 12px 28px rgba(45, 33, 24, 0.12);
}

@media (max-width: 767.98px) {
  .docs-page-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .docs-page-toolbar .btn {
    width: 100%;
  }

  .docs-exp__main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .docs-exp__side {
    grid-column: 1 / -1;
    min-width: 0;
    text-align: left;
    padding-top: 0.15rem;
  }

  .docs-exp__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .docs-exp__actions {
    justify-content: flex-end;
  }
}

/* ===== citas modal layout (desktop width + visible boxes) ===== */
#modalNuevaCita.modal {
  --bs-modal-width: min(1440px, calc(100vw - 2rem));
  overflow: hidden;
}

#modalNuevaCita .modal-cita-dialog {
  --bs-modal-width: 100vw;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
}

#modalNuevaCita .modal-cita-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 1.5rem);
  overflow: hidden;
  border-radius: 16px;
}

#modalNuevaCita .modal-cita-content > form,
#modalNuevaCita .modal-cita-form,
#modalNuevaCita #formNuevaCita {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#modalNuevaCita .modal-header,
#modalNuevaCita .modal-footer {
  flex: 0 0 auto;
}

#modalNuevaCita .modal-body {
  container-type: inline-size;
  container-name: cita-form;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: auto;
  background: #f4efe9;
  padding: 1.15rem 1.35rem;
}

#modalNuevaCita.cita-form-page {
  overflow: visible;
}

#modalNuevaCita.cita-form-page .cita-form-page-body {
  max-height: none;
  overflow: visible;
}

#modalNuevaCita .cita-section,
#modalNuevaCita .cita-google-card {
  overflow: visible;
}

#modalNuevaCita .cita-compact-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) minmax(9rem, 0.9fr) repeat(3, minmax(7.5rem, 0.7fr)) minmax(12rem, 1.3fr);
  gap: 0.75rem 0.85rem;
  align-items: end;
}

#modalNuevaCita .cita-compact-grid > * {
  min-width: 0;
}

#modalNuevaCita .cita-asistentes-row {
  grid-template-columns: minmax(8rem, 0.7fr) minmax(12rem, 1.5fr) minmax(9rem, 0.9fr) minmax(14rem, 1.3fr) auto;
}

#modalNuevaCita .cita-asistentes-row > * {
  min-width: 0;
}

#modalNuevaCita .cita-asistente-canales-row {
  grid-template-columns: minmax(12rem, 0.8fr) minmax(14rem, 1fr);
}

@container cita-form (max-width: 1180px) {
  .cita-compact-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(9rem, 0.8fr) repeat(3, minmax(7rem, 0.7fr));
  }

  .cita-field-place {
    grid-column: 1 / -1;
  }

  .cita-asistentes-row {
    grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.4fr) minmax(9rem, 0.85fr);
  }

  .cita-add-asistente-wrap {
    grid-column: 1 / -1;
  }
}

@container cita-form (max-width: 760px) {
  .cita-compact-grid,
  .cita-asistentes-row,
  .cita-asistente-canales-row,
  .cita-google-options {
    grid-template-columns: 1fr;
  }

  .cita-field-title,
  .cita-field-place,
  .cita-add-asistente-wrap {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  #modalNuevaCita .modal-cita-dialog {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
  }
}

@media (max-width: 575.98px) {
  #modalNuevaCita .modal-cita-dialog {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem) !important;
    height: calc(100% - 1rem);
    max-height: calc(100vh - 1rem);
    margin: 0.5rem auto;
  }

  #modalNuevaCita .modal-cita-content {
    max-height: calc(100vh - 1rem);
  }

  #modalNuevaCita .modal-body {
    padding: 0.8rem;
  }

  #modalNuevaCita .cita-compact-grid,
  #modalNuevaCita .cita-asistentes-row,
  #modalNuevaCita .cita-asistente-canales-row,
  #modalNuevaCita .cita-google-options {
    grid-template-columns: 1fr;
  }
}

/* ===== citas form layout: mobile-first, single source ===== */
#modalNuevaCita.modal {
  --bs-modal-width: 100vw;
}

#modalNuevaCita .modal-cita-dialog.modal-fullscreen,
#modalNuevaCita .modal-fullscreen {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  margin: 0 !important;
}

#modalNuevaCita .modal-cita-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  border-radius: 0;
}

#modalNuevaCita .modal-cita-content > form,
#modalNuevaCita .modal-cita-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#modalNuevaCita .modal-header,
#modalNuevaCita .modal-footer {
  flex: 0 0 auto;
}

#modalNuevaCita .modal-body,
#modalNuevaCita .cita-form-page-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  background: #f4efe9;
  padding: 1rem;
}

.cita-form-page-wrap,
#modalNuevaCita.cita-form-page,
#modalNuevaCita .cita-form-layout,
.cita-form-layout {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#modalNuevaCita.cita-form-page {
  display: contents;
}

#modalNuevaCita.cita-form-page .cita-form-page-body {
  container-type: normal;
  max-height: none;
  overflow: visible;
  padding: 0;
  background: transparent;
  width: 100%;
}

.page > .cita-form-page-wrap {
  width: 100%;
  max-width: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page .citas-filters,
.page .citas-list,
.page .citas-empty,
.page .cita-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.page.citas-page:has(.cita-form-page) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.page.citas-page:has(.cita-form-page) > .page-header,
.page.citas-page:has(.cita-form-page) > .cita-form-page-wrap {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch;
}

#modalNuevaCita.cita-form-page .cita-form-layout,
#modalNuevaCita.cita-form-page .cita-form-side,
#modalNuevaCita.cita-form-page .cita-section,
#modalNuevaCita.cita-form-page .cita-google-card {
  width: 100% !important;
  max-width: none !important;
}

#modalNuevaCita .cita-section,
#modalNuevaCita .cita-google-card,
#modalNuevaCita .cita-form-side,
.cita-form-side {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

#modalNuevaCita .cita-form-layout,
.cita-form-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

#modalNuevaCita .cita-form-banner,
.cita-form-banner {
  grid-column: 1 / -1;
}

#modalNuevaCita .cita-google-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

#modalNuevaCita .cita-google-banner-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.9rem;
}

#modalNuevaCita .cita-google-options,
#modalNuevaCita .cita-compact-grid,
#modalNuevaCita .cita-asistentes-row,
#modalNuevaCita .cita-asistente-canales-row,
#modalNuevaCita .cita-datos-stack,
#modalNuevaCita .cita-datos-evento,
#modalNuevaCita .cita-datos-when,
#modalNuevaCita .cita-asistentes-who,
#modalNuevaCita .cita-asistentes-meta,
#modalNuevaCita .cita-asistentes-add {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
}

#modalNuevaCita .cita-datos-evento > *,
#modalNuevaCita .cita-datos-when > *,
#modalNuevaCita .cita-asistentes-who > *,
#modalNuevaCita .cita-asistentes-meta > *,
#modalNuevaCita .cita-compact-grid > *,
#modalNuevaCita .cita-asistentes-row > * {
  min-width: 0;
  max-width: 100%;
}

#modalNuevaCita .cita-datos-evento .cita-field-evento {
  margin-top: 0;
}

#modalNuevaCita .cita-field-title,
#modalNuevaCita .cita-field-place,
#modalNuevaCita .cita-datos-stack > .cita-google-card {
  grid-column: 1 / -1;
}

#modalNuevaCita .cita-add-asistente-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#modalNuevaCita .cita-add-asistente-wrap::before {
  content: "";
  display: block;
  height: 1.1rem;
  margin-bottom: 0.25rem;
}

#modalNuevaCita .cita-field-asistente,
#modalNuevaCita .cita-field-reminder {
  grid-column: auto;
}

#modalNuevaCita .cita-form-side,
.cita-form-side {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

#modalNuevaCita .cita-asistentes-add > * {
  min-width: 0;
  max-width: 100%;
}

#modalNuevaCita .cita-asistentes-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

#modalNuevaCita .cita-asistentes-actions .cita-asistente-canales-row {
  width: auto;
  min-width: 0;
}

#modalNuevaCita .cita-asistente-canales-row {
  margin: 0;
}

#modalNuevaCita .cita-add-asistente-btn {
  width: auto;
  min-width: 7.5rem;
  min-height: 42px;
}

#modalNuevaCita .cita-whatsapp-preview-bubble {
  max-width: 100%;
}

#modalNuevaCita .cita-asistentes-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#modalNuevaCita .cita-asistentes-table {
  min-width: 32rem;
}

#modalNuevaCita.cita-form-page .cita-form-page-footer {
  position: static;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

@media (min-width: 768px) {
  #modalNuevaCita .cita-google-options {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  #modalNuevaCita .cita-datos-evento {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem);
    align-items: start;
  }

  #modalNuevaCita .cita-datos-when {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #modalNuevaCita .cita-asistentes-who,
  #modalNuevaCita .cita-asistentes-meta {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    align-items: end;
  }

  #modalNuevaCita .cita-add-asistente-btn {
    width: auto;
  }
}

/* Never put who + meta + actions on one row: the cita dialog is ~720px
   and leftover grid-column rules made Teléfono / Recordatorio overlap. */
#modalNuevaCita .cita-asistentes-add,
#modalNuevaCita.modal-cita-dialogo .cita-asistentes-add {
  grid-template-columns: 1fr;
  align-items: stretch;
}

#modalNuevaCita .cita-add-asistente-btn {
  width: auto;
  min-width: 7.5rem;
}

@container cita-form (min-width: 520px) {
  #modalNuevaCita .cita-asistentes-who,
  #modalNuevaCita .cita-asistentes-meta {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    align-items: end;
  }
}

@container cita-form (max-width: 519.98px) {
  #modalNuevaCita .cita-asistentes-who,
  #modalNuevaCita .cita-asistentes-meta,
  #modalNuevaCita .cita-asistentes-add {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  #modalNuevaCita .modal-body {
    padding: 0.8rem;
  }

  #modalNuevaCita .cita-google-options,
  #modalNuevaCita .cita-compact-grid,
  #modalNuevaCita .cita-asistentes-row,
  #modalNuevaCita .cita-asistente-canales-row,
  #modalNuevaCita .cita-datos-evento,
  #modalNuevaCita .cita-datos-when,
  #modalNuevaCita .cita-asistentes-who,
  #modalNuevaCita .cita-asistentes-meta,
  #modalNuevaCita .cita-asistentes-add {
    grid-template-columns: 1fr;
  }
}

#modalNuevaCita .form-control::placeholder,
#modalNuevaCita .form-control::-webkit-input-placeholder {
  color: #332b25 !important;
  font-weight: 800;
  opacity: 1;
  letter-spacing: 0.01em;
}

#modalNuevaCita .cita-ph-static {
  position: relative;
}

#modalNuevaCita .cita-ph-static::before {
  content: attr(data-ph);
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  font-weight: 800;
  font-size: 0.82rem;
  color: #332b25;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

#modalNuevaCita .cita-ph-static[data-ph="Tipo"] .form-select {
  padding-left: 3.35rem !important;
}

#modalNuevaCita .cita-ph-static[data-ph="Fecha *"] .form-control {
  padding-left: 4.55rem !important;
}

#modalNuevaCita .cita-ph-static[data-ph="Inicio *"] .form-control {
  padding-left: 4.95rem !important;
}

#modalNuevaCita .cita-ph-static[data-ph="Fin"] .form-control {
  padding-left: 2.55rem !important;
}

#modalNuevaCita .cita-control-ph {
  font-weight: 800;
  font-size: 0.82rem;
  color: #332b25;
  margin-right: 0.2rem;
  line-height: 1;
  white-space: nowrap;
}

#modalNuevaCita .cita-avisos-section {
  padding: 0;
  overflow: hidden;
}

#modalNuevaCita .cita-avisos-section .cita-reagendar-banner {
  margin: 0.85rem 0.85rem 0;
}

#modalNuevaCita .cita-avisos-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

#modalNuevaCita .cita-avisos-toggle:hover {
  background: rgba(255, 255, 255, 0.45);
}

#modalNuevaCita .cita-avisos-wa {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e7f6ee;
  color: #128c7e;
  flex-shrink: 0;
  font-size: 1.1rem;
}

#modalNuevaCita .cita-avisos-toggle-copy {
  flex: 1;
  min-width: 0;
}

#modalNuevaCita .cita-avisos-toggle-copy strong {
  display: block;
  font-weight: 800;
  color: #2f2a25;
  line-height: 1.2;
}

#modalNuevaCita .cita-avisos-toggle-hint {
  display: block;
  font-size: 0.82rem;
  color: #7a736b;
  line-height: 1.35;
  margin-top: 0.12rem;
}

#modalNuevaCita .cita-avisos-toggle-count {
  font-size: 0.76rem;
  font-weight: 800;
  color: #5e5247;
  background: #f4efe9;
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  white-space: nowrap;
}

#modalNuevaCita .cita-avisos-chevron {
  color: #8a7a67;
  font-size: 0.78rem;
  transition: transform 0.15s ease;
}

#modalNuevaCita .cita-avisos-toggle[aria-expanded="true"] .cita-avisos-chevron {
  transform: rotate(180deg);
}

#modalNuevaCita .cita-avisos-panel {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid #eadfce;
}

#modalNuevaCita .cita-avisos-panel[hidden] {
  display: none !important;
}

#modalNuevaCita .cita-google-card,
#modalNuevaCita .cita-section.cita-google-card {
  padding: 0.4rem 0.7rem;
  border-radius: 12px;
}

#modalNuevaCita .cita-google-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}

#modalNuevaCita .cita-google-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  width: 100%;
}

#modalNuevaCita .cita-google-title {
  font-size: 0.88rem;
  font-weight: 800;
}

#modalNuevaCita .cita-google-options:not(.d-none),
#modalNuevaCita .cita-google-banner-action:not(.d-none) {
  display: flex;
  width: auto;
  min-width: 0;
  margin-left: auto;
  gap: 0.4rem;
  align-items: center;
  grid-template-columns: none;
}

#modalNuevaCita .cita-google-card .form-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 0;
  margin: 0;
  padding: 0;
}

#modalNuevaCita .cita-google-card .form-check-input {
  width: 2.35em;
  height: 1.2em;
  margin: 0;
  cursor: pointer;
  background-color: #d9d0c6 !important;
  border-color: #c5b9ac !important;
}

#modalNuevaCita .cita-google-card .form-check-input:checked {
  background-color: #1a73e8 !important;
  border-color: #1a73e8 !important;
}

#modalNuevaCita .cita-google-card .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.22) !important;
}

#modalNuevaCita .cita-google-card .form-check-label {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #2f2a25;
}

#modalNuevaCita .cita-google-subtitle {
  font-size: 0.78rem;
  margin: 0;
}

/* =====================================================
   Buscadores de listado: compactos en desktop, ocultos
   en móvil detrás de un icono (el-list-search)
   ===================================================== */
.el-list-search__toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--el-border-strong, #e2e6eb);
  border-radius: 10px;
  background: #fff;
  color: var(--el-ink, #1A1F26);
  flex-shrink: 0;
  line-height: 1;
  cursor: pointer;
}
.el-list-search__toggle i,
.el-list-search__toggle svg {
  font-size: 1rem;
  display: block;
}
.el-list-search__toggle .el-list-search__icon-close {
  display: none;
}
.el-list-search__toggle.is-open .el-list-search__icon-search,
.el-list-search__toggle[aria-expanded="true"] .el-list-search__icon-search {
  display: none;
}
.el-list-search__toggle.is-open .el-list-search__icon-close,
.el-list-search__toggle[aria-expanded="true"] .el-list-search__icon-close {
  display: block;
}
.el-list-search__toggle.is-filtered,
.el-list-search__toggle.is-open,
.el-list-search__toggle[aria-expanded="true"] {
  border-color: #c4a882;
  background: #fffaf4;
}
.el-list-search__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c2410c;
}
.el-list-search__panel {
  margin-bottom: 0.75rem;
}
.el-list-search__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.el-list-search__q {
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 0;
}
.el-list-search__select {
  flex: 0 1 160px;
  min-width: 120px;
  max-width: 200px;
}
.el-list-search__panel .form-label,
.el-list-search__fields .form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.el-list-search__panel .form-control,
.el-list-search__panel .form-select,
.el-list-search__fields .form-control,
.el-list-search__fields .form-select {
  min-height: 38px;
  height: 38px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.875rem;
  width: 100%;
}
.el-list-search__panel .citas-search .form-control,
.el-list-search__panel .q-search .form-control {
  padding-left: 2rem;
}
.search-header.el-list-search__panel {
  padding-top: 0;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}
.el-list-search__panel .card,
.el-list-search__panel.card {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.el-list-search__panel .card-body {
  padding: 0;
}

@media (max-width: 767.98px) {
  .el-list-search__toggle {
    display: inline-flex;
  }
  .el-list-search__panel:not(.is-open) {
    display: none !important;
  }
  .el-list-search__q,
  .el-list-search__select {
    flex: 1 1 100%;
    max-width: none;
  }
  .el-list-search__fields .btn {
    width: auto;
  }
}

@media (max-width: 767.98px) {
  .el-list-search__panel.is-open .citas-filters-panel,
  .el-list-search__panel.is-open .q-filters-panel {
    display: block !important;
  }
  .el-list-search__panel .citas-filters-toggle,
  .el-list-search__panel .q-filters-toggle {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .el-list-search__toggle,
  .el-list-search__mobile-only {
    display: none !important;
  }
}



/* =====================================================
   WhatsApp inbox — Trabajo → WhatsApp
   Layout tipo conversaciones: lista + hilo
   ===================================================== */
.wa-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100dvh - var(--el-topbar-h, 60px) - 44px);
  min-height: 560px;
}

.wa-page > .page-header {
  flex: 0 0 auto;
}

.wa-inbox {
  --wa-green: #25d366;
  --wa-green-dark: #128c7e;
  --wa-bubble: #d9fdd3;
  --wa-bubble-border: #c6f0bf;
  --wa-chat-bg: #efeae2;
  --wa-header: #f0f2f5;
  --wa-tick: #667781;
  --wa-tick-read: #53bdeb;
  --wa-list-w: minmax(280px, 380px);
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--wa-list-w) minmax(0, 1fr);
  border: 1px solid var(--el-border, #ddd3c8);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(45, 33, 24, 0.05);
}

.wa-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #fff;
  border-right: 1px solid var(--el-border, #ddd3c8);
}

.wa-list__head {
  flex: 0 0 auto;
  padding: 10px 12px 8px;
  background: var(--wa-header);
  border-bottom: 1px solid var(--el-border, #ddd3c8);
}

.wa-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--el-border, #ddd3c8);
  border-radius: 999px;
  padding: 0 12px;
  height: 38px;
}

.wa-search i {
  color: var(--el-muted, #7a6b5d);
  font-size: 1.05rem;
}

.wa-search input {
  border: 0;
  outline: 0;
  box-shadow: none !important;
  background: transparent;
  width: 100%;
  font-size: 0.88rem;
  color: var(--el-ink, #2d2118);
}

.wa-list__filters {
  margin-top: 8px;
  padding-top: 2px;
}

.wa-list__filters.el-list-search__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}

.wa-list__filters .el-list-search__q,
.wa-list__filters .el-list-search__select {
  max-width: none;
  flex: none;
  width: 100%;
}

.wa-list__filters .form-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--el-muted, #7a6b5d);
  margin-bottom: 0.2rem;
}

.wa-list__filters .wa-filter-actions {
  grid-column: 1/-1;
  display: flex;
  gap: 8px;
}

.wa-chats {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.wa-chat-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  padding: 11px 14px 11px 12px;
  border: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #f0ece6;
}

.wa-chat-item:hover {
  background: #f5f3ef;
}

.wa-chat-item.is-active {
  background: #e9e1d6;
}

.wa-chat-item.is-hidden {
  display: none;
}

.wa-avatar {
  width: 49px;
  height: 49px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

.wa-avatar--0 {
  background: #02a698;
}

.wa-avatar--1 {
  background: #53bdeb;
}

.wa-avatar--2 {
  background: #06cf9c;
}

.wa-avatar--3 {
  background: #a5b337;
}

.wa-avatar--4 {
  background: #e07a5f;
}

.wa-avatar--5 {
  background: #c4a882;
}

.wa-avatar--6 {
  background: #7a9b8a;
}

.wa-avatar--7 {
  background: #6b7c85;
}

.wa-chat-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.wa-chat-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.wa-chat-item__name {
  font-weight: 650;
  color: var(--el-ink, #2d2118);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-chat-item__time {
  font-size: 0.72rem;
  color: var(--el-muted, #7a6b5d);
  white-space: nowrap;
  flex: 0 0 auto;
}

.wa-chat-item.is-unread .wa-chat-item__time,
.wa-chat-item.has-error .wa-chat-item__time {
  color: var(--wa-green-dark);
  font-weight: 700;
}

.wa-chat-item.has-error .wa-chat-item__time {
  color: #c45c4a;
}

.wa-chat-item__preview {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #667781;
  font-size: 0.82rem;
}

.wa-chat-item__preview-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-chat-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

.wa-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--wa-green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wa-badge--error {
  background: #c45c4a;
}

.wa-empty-list,
.wa-empty-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 2.5rem 1.5rem;
  color: var(--el-muted, #7a6b5d);
  min-height: 280px;
}

.wa-empty-list i,
.wa-empty-pane i {
  font-size: 2.4rem;
  color: var(--el-taupe, #c4a882);
}

.wa-empty-pane h3 {
  margin: 0.4rem 0 0;
  font-size: 1.35rem;
  font-weight: 500;
  color: #41525d;
  font-family: Newsreader, Georgia, serif;
}

.wa-panes {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--wa-chat-bg);
}

.wa-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: var(--wa-chat-bg);
}

.wa-pane.is-hidden {
  display: none;
}

.wa-pane__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--wa-header);
  border-bottom: 1px solid var(--el-border, #ddd3c8);
  min-height: 62px;
}

.wa-pane__back {
  display: none;
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #54656f;
}

.wa-pane__back:hover {
  background: rgba(0, 0, 0, 0.06);
}

.wa-pane__who {
  min-width: 0;
  flex: 1 1 auto;
}

.wa-pane__name {
  font-weight: 650;
  font-size: 0.98rem;
  color: var(--el-ink, #2d2118);
  line-height: 1.2;
}

.wa-pane__sub {
  font-size: 0.78rem;
  color: #667781;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 7% 18px;
  background-color: var(--wa-chat-bg);
  background-image: radial-gradient(rgba(45, 33, 24, 0.045) 0.8px, transparent 0.9px), radial-gradient(rgba(45, 33, 24, 0.03) 0.7px, transparent 0.8px);
  background-size: 18px 18px, 28px 28px;
  background-position: 0 0, 9px 14px;
}

.wa-date {
  display: flex;
  justify-content: center;
  margin: 10px 0 14px;
}

.wa-date span {
  background: rgba(255, 255, 255, 0.8509803922);
  color: #54656f;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  padding: 5px 12px;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.wa-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 2px 0 10px;
}

.wa-undelivered {
  max-width: min(78%, 42rem);
  margin: 6px 2px 0;
  padding: 8px 10px;
  background: #fff8e8;
  border: 1px solid #edd8a4;
  border-radius: 8px;
  color: #6b5344;
  font-size: 0.78rem;
  line-height: 1.4;
}

.wa-undelivered strong {
  display: block;
  color: #c45c4a;
  font-size: 0.76rem;
  font-weight: 750;
  margin-bottom: 2px;
}

.wa-bubble {
  position: relative;
  max-width: min(78%, 42rem);
  background: var(--wa-bubble);
  border: 1px solid var(--wa-bubble-border);
  border-radius: 8px 8px 2px 8px;
  padding: 6px 8px 8px 10px;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.08);
  color: #111b21;
  cursor: pointer;
}

.wa-bubble:hover {
  filter: brightness(0.985);
}

.wa-bubble.is-pending {
  background: #fff8e8;
  border-color: #edd8a4;
}

.wa-bubble.is-failed {
  background: #fdecec;
  border-color: #f3c4c0;
}

.wa-bubble.is-cancelled {
  background: #f3f0eb;
  border-color: #e3ddd4;
  opacity: 0.85;
}

.wa-bubble__kicker {
  font-size: 0.72rem;
  font-weight: 750;
  color: #128c7e;
  margin-bottom: 4px;
}

.wa-bubble__text {
  font-size: 0.9rem;
  line-height: 1.45;
  word-break: break-word;
}

.wa-bubble__text p {
  margin: 0 0 0.9em;
}

.wa-bubble__text p:last-child {
  margin-bottom: 0;
}

.wa-bubble__text strong {
  font-weight: 750;
}

.wa-bubble__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: #667781;
  font-size: 0.7rem;
}

.wa-ticks {
  display: inline-flex;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--wa-tick);
}

.wa-ticks.is-read {
  color: var(--wa-tick-read);
}

.wa-ticks.is-failed {
  color: #c45c4a;
}

.wa-ticks.is-pending {
  color: #a88b68;
}

.wa-bubble__error {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #9b2c2c;
}

.wa-pane__foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--wa-header);
  border-top: 1px solid var(--el-border, #ddd3c8);
}

.wa-pane__hint {
  font-size: 0.78rem;
  color: #667781;
  margin-right: auto;
  align-self: center;
}

.wa-pane.is-empty {
  display: flex;
}

@media (max-width: 991px) {
  .wa-page {
    height: auto;
    min-height: 0;
  }
  .wa-inbox {
    grid-template-columns: 1fr;
    min-height: calc(100dvh - 190px);
  }
  .wa-panes,
  .wa-pane {
    display: none;
  }
  .wa-inbox.is-chat-open .wa-list {
    display: none;
  }
  .wa-inbox.is-chat-open .wa-panes,
  .wa-inbox.is-chat-open .wa-pane:not(.is-hidden) {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }
  .wa-pane__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .wa-thread {
    padding: 10px 12px 16px;
  }
  .wa-bubble,
  .wa-undelivered {
    max-width: 88%;
  }
}