/* Ajustes propios sobre Cuba. Mantener mínimo: todo lo visual sale de la plantilla. */

.brand-logo {
  font-family: Rubik, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #2c323f;
  white-space: nowrap;
}
.brand-logo-lg { font-size: 28px; }
body.dark-only .brand-logo { color: #fff; }

/* Avatar con iniciales cuando no hay foto */
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(115, 102, 255, 0.12);
  color: var(--theme-deafult, #7366ff);
  font-weight: 600;
  flex-shrink: 0;
}
.avatar-initials.img-30 { width: 30px; height: 30px; font-size: 11px; }
.avatar-initials.img-37, .avatar-initials.b-r-10 { width: 37px; height: 37px; font-size: 13px; border-radius: 10px; }
.avatar-initials.img-40 { width: 40px; height: 40px; font-size: 14px; }
.avatar-initials.img-100 { width: 100px; height: 100px; font-size: 32px; }

/* Selector de cliente en el header: se mantiene a 38 px para no estirar el header de Cuba (80 px). */
.page-header .left-header { display: flex; align-items: center; }
.client-context-form { max-width: 320px; padding-left: 10px; margin: 0; }
.page-header .client-context-form .select2-container { min-width: 240px; display: block; line-height: normal; }
.page-header .client-context-form .select2-container--default .select2-selection--single { height: 38px !important; min-height: 0 !important; padding: 4px 8px; display: flex; align-items: center; }
.page-header .client-context-form .select2-container .dropdown-wrapper { display: none; }
.page-header .client-context-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.client-logo-option { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin-right: 8px; vertical-align: middle; }
.client-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }

/* Botón "Cerrar sesión" dentro del dropdown del perfil */
.profile-dropdown .logout-link { color: inherit; font-size: 14px; text-decoration: none; }
.profile-dropdown .logout-link svg { width: 16px; height: 16px; margin-right: 10px; }

/* Matriz de permisos */
.permissions-matrix th, .permissions-matrix td { text-align: center; vertical-align: middle; }
.permissions-matrix td:first-child, .permissions-matrix th:first-child { text-align: left; }
.permissions-matrix .group-row td { background: rgba(115, 102, 255, 0.06); font-weight: 600; }

.color-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; border: 1px solid rgba(0,0,0,.1); }
.table-actions { white-space: nowrap; }
.table-actions form { display: inline; }
.qr-box { display: inline-block; padding: 10px; background: #fff; border-radius: 8px; }
.recovery-codes { font-family: monospace; font-size: 15px; columns: 2; }

/* ---------- Fase 2: publicaciones y calendario ---------- */

.status-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; color: #fff; line-height: 1.4; }
.status-badge.status-pending_client { color: #2c323f; }
.status-badge.status-cancelled { color: #2c323f; text-decoration: line-through; }
.type-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.type-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; }

/* Tarjeta del evento dentro de la celda (SPEC §8) */
.fc .post-event { background: #fff; border: 1px solid #eceff4; border-left-width: 4px; color: #2c323f; border-radius: 6px; padding: 0; overflow: hidden; }
body.dark-only .fc .post-event { background: #262932; border-color: #374558; color: #fff; }
.fc .post-event .fc-event-main { color: inherit; padding: 3px 5px; }
.pe-card { display: flex; gap: 5px; align-items: flex-start; font-size: 11px; line-height: 1.35; white-space: normal; }
.pe-thumb { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.pe-body { min-width: 0; flex: 1; }
.pe-top { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pe-time { font-weight: 600; }
.pe-icons i { font-size: 11px; margin-right: 2px; opacity: .75; }
.pe-title { font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pe-flags { display: flex; gap: 6px; font-size: 10px; }
.pe-client { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 8px; font-weight: 700; color: #fff; }
.pe-client img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.fc-list .post-event { border: 0; }
.fc .fc-daygrid-event { white-space: normal; }
.fc .holiday-bg { background: rgba(248, 214, 43, .16); opacity: 1; }
.fc .holiday-bg .fc-event-title { font-size: 10px; font-style: normal; color: #8a6d00; padding: 2px 4px; margin: 0; }
.fc .fc-day-today { background: rgba(115, 102, 255, .05) !important; }
.fc .fc-daygrid-day.fc-day-sat, .fc .fc-daygrid-day.fc-day-sun { background: rgba(0, 0, 0, .015); }
.fc .fc-button-primary { background-color: var(--theme-deafult, #7366ff); border-color: var(--theme-deafult, #7366ff); }
.fc .fc-toolbar-title { text-transform: capitalize; }

.calendar-filters h6 { font-size: 13px; margin: 14px 0 6px; }
.calendar-filters .form-check { margin-bottom: 2px; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; }

/* Barra de cumplimiento de parrilla */
.quota-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.quota-item { min-width: 130px; flex: 1; }
.quota-item .progress { height: 6px; }
.quota-item .quota-label { font-size: 12px; display: flex; justify-content: space-between; }

/* Formulario de publicación */
.type-selector .btn { min-width: 110px; }
.type-selector .btn-check:checked + .btn { color: #fff; }
.network-checks .form-check-input:checked + .form-check-label { font-weight: 600; }
.network-checks label i { width: 16px; text-align: center; }
.counter-list { font-size: 12px; }
.counter-list .counter { display: inline-flex; gap: 4px; align-items: center; margin-right: 12px; }
.counter.ok { color: #51bb25; } .counter.warn { color: #c8a100; } .counter.over { color: #dc3545; font-weight: 600; }
.slide-row { border: 1px dashed #d8dce3; border-radius: 6px; padding: 10px; margin-bottom: 8px; }
.autosave-indicator { font-size: 12px; color: #8a94a6; }

/* Grilla de material */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.asset-tile { position: relative; border: 1px solid #eceff4; border-radius: 8px; overflow: hidden; background: #fafbfc; cursor: grab; }
.asset-tile .asset-media { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #f3f4f7; }
.asset-tile .asset-media img { width: 100%; height: 100%; object-fit: cover; }
.asset-tile .asset-media i { font-size: 36px; color: #8a94a6; }
.asset-tile .asset-name { font-size: 11px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-tile .asset-actions { display: flex; justify-content: space-between; padding: 0 6px 6px; }
.asset-tile.is-final { border-color: #51bb25; box-shadow: 0 0 0 2px rgba(81, 187, 37, .25); }
.asset-tile .final-flag { position: absolute; top: 6px; left: 6px; }
.asset-placeholder { border: 2px dashed #7366ff; border-radius: 8px; background: rgba(115, 102, 255, .05); }

/* Vista previa tipo feed de Instagram y vertical 9:16 */
.ig-preview { max-width: 420px; margin: 0 auto; border: 1px solid #dbdbdb; border-radius: 8px; background: #fff; color: #262626; font-size: 14px; }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ig-head .ig-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ig-head .ig-handle { font-weight: 600; }
.ig-media { position: relative; background: #efefef; aspect-ratio: 4 / 5; overflow: hidden; }
.ig-media img, .ig-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-media .ig-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #999; flex-direction: column; gap: 6px; }
.ig-media .ig-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.85); border: 0; border-radius: 50%; width: 28px; height: 28px; }
.ig-media .ig-prev { left: 8px; } .ig-media .ig-next { right: 8px; }
.ig-dots { text-align: center; padding: 6px 0 0; }
.ig-dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; margin: 0 2px; }
.ig-dots span.active { background: #0095f6; }
.ig-actions { padding: 8px 12px 0; font-size: 20px; display: flex; gap: 14px; }
.ig-caption { padding: 6px 12px 12px; white-space: pre-wrap; word-break: break-word; }
.ig-caption .ig-tags { color: #00376b; }
.ig-more { color: #8e8e8e; cursor: pointer; }
.vertical-preview { width: 270px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #111; position: relative; color: #fff; }
.vertical-preview img, .vertical-preview video { width: 100%; height: 100%; object-fit: cover; }
.vertical-preview .vp-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); font-size: 12px; white-space: pre-wrap; max-height: 45%; overflow: hidden; }
.vertical-preview .vp-handle { font-weight: 600; margin-bottom: 4px; }
.blog-preview { max-width: 720px; margin: 0 auto; }
.blog-preview .blog-meta { color: #8a94a6; font-size: 13px; }

.timeline-events { list-style: none; padding: 0; margin: 0; }
.timeline-events li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid #eceff4; margin-left: 6px; }
.timeline-events li::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--theme-deafult, #7366ff); }

/* Paneles laterales: style.css de Cuba redefine .offcanvas (position: unset) para su propio menú;
   aquí se restaura el offcanvas de Bootstrap solo para nuestros paneles. */
.offcanvas.side-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1060; visibility: hidden; background: #fff;
  box-shadow: -8px 0 30px rgba(0, 0, 0, .12); transform: translateX(100%); transition: transform .3s ease-in-out; }
.offcanvas.side-panel.show { visibility: visible; transform: none; }
.offcanvas.side-panel .offcanvas-body { overflow-y: auto; }
body.dark-only .offcanvas.side-panel { background: #262932; }