/* Action column spacing fix - Ajustado para la estructura real */
.x-action-col-cell {
    padding: 8px !important;
}

.x-action-col-cell .x-action-col-icon {
    margin-right: 8px !important;
    margin-left: 8px !important;
    display: inline-block;
}

.x-action-col-cell .x-action-col-icon:last-child {
    margin-right: 0 !important;
}

.x-action-col-cell .x-action-col-icon:first-child {
    margin-left: 0 !important;
}

/* Ticket details modal styling */
.ticket-details-modal .x-form-field {
    margin-bottom: 10px;
}

.ticket-details-modal .x-form-label {
    font-weight: bold;
    color: #343a40;
}

.ticket-details-modal .patient-info-section {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin-top: 15px;
}

.ticket-details-modal .patient-info-section h4 {
    color: #1e3a8a;
    margin-bottom: 10px;
}

/* ------------------------------------------------------------
   Call Efficiency Dashboard: fix text sitting too low in cards
   (runtime CSS override; avoids rebuild)
------------------------------------------------------------ */
.call-efficiency-dashboard .stats-card .x-panel-body {
    /* Reduce extra bottom space and bring content up */
    padding: 10px 20px 8px !important;
}

.call-efficiency-dashboard .stats-card .x-panel-body .x-component,
.call-efficiency-dashboard .stats-card .x-panel-body > div {
    /* Keep number + label grouped, not far apart */
    height: 100%;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.call-efficiency-dashboard .stats-card .stat-number {
    margin-bottom: 4px !important;
}

.call-efficiency-dashboard .stats-card .stat-label {
    margin-top: 0 !important;
}

/* Header period buttons (Today / Week / Month) */
.call-efficiency-dashboard .stats-period-btn.x-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    min-width: 30px;
    height: 26px;
    margin-left: 6px;
    box-shadow: none !important;
    /* make the button content center nicely */
    overflow: hidden;
}

.call-efficiency-dashboard .stats-period-btn .x-btn-button {
    background: transparent !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.call-efficiency-dashboard .stats-period-btn .x-btn-icon-el.x-fa {
    color: #fff !important;
    font-size: 15px;
    line-height: 1 !important;
    margin: 0 !important;
}

.call-efficiency-dashboard .stats-period-btn.x-btn-pressed {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

.call-efficiency-dashboard .stats-period-btn.x-btn-over {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* Make panel titles (headers) more legible/contrasty */
.call-efficiency-dashboard .x-panel-header-title,
.call-efficiency-dashboard .x-panel-header-title-default,
.call-efficiency-dashboard .x-panel-header-title-default-framed,
.call-efficiency-dashboard .x-panel-header-title .x-title-text,
.call-efficiency-dashboard .x-panel-header-title-default .x-title-text,
.call-efficiency-dashboard .x-panel-header-title-default-framed .x-title-text,
.call-efficiency-dashboard .x-panel-header .x-title-text {
    color: #fff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Title icons inside headers */
.call-efficiency-dashboard .x-panel-header i,
.call-efficiency-dashboard .x-panel-header .x-fa,
.call-efficiency-dashboard .x-panel-header .x-title-icon,
.call-efficiency-dashboard .x-panel-header .x-title-icon:before {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Solid header background (white text needs contrast) */
.call-efficiency-dashboard .x-panel-header,
.call-efficiency-dashboard .x-panel-header-default,
.call-efficiency-dashboard .x-panel-header-default-framed {
    background: #1f2937 !important; /* solid slate */
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Keep header toolbars transparent over solid header */
.call-efficiency-dashboard .x-panel-header .x-toolbar,
.call-efficiency-dashboard .x-panel-header .x-toolbar-default,
.call-efficiency-dashboard .x-panel-header .x-toolbar-default-docked-top {
    background: transparent !important;
    background-image: none !important;
}

/* Header labels like "From:" / "To:" */
.call-efficiency-dashboard .x-panel-header .x-form-item-label,
.call-efficiency-dashboard .x-panel-header label,
.call-efficiency-dashboard .x-panel-header .x-field-label-cell,
.call-efficiency-dashboard .x-panel-header .x-form-item-label-text {
    color: #fff !important;
    opacity: 1 !important;
}

/* =============================================================================
   Classic responsive – mejor uso en celular / viewport estrecho
   Clases: sencha-dash-mobile (viewport), sencha-dash-mobile-body (body)
   ============================================================================= */

body.sencha-dash-mobile-body {
    overflow-x: hidden;
}

.sencha-dash-viewport.sencha-dash-mobile .sencha-dash-dash-headerbar {
    min-height: 56px;
}

.sencha-dash-viewport.sencha-dash-mobile .sencha-dash-dash-headerbar .x-toolbar {
    padding-left: 4px;
    padding-right: 4px;
}

/* Logo en móvil: que quepa entero dentro del slot (el img del tema usa max-width 240px y se recorta) */
.sencha-dash-viewport.sencha-dash-mobile .sencha-logo .main-logo {
    max-width: 120px;
    justify-content: flex-start;
    box-sizing: border-box;
}

.sencha-dash-viewport.sencha-dash-mobile .sencha-logo img.suzyai-header-wordmark,
.sencha-dash-viewport.sencha-dash-mobile .sencha-logo .suzyai-header-wordmark {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 34px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.sencha-dash-viewport.sencha-dash-mobile .sencha-dash-right-main-container {
    min-width: 0 !important;
}

/* Shell hbox: el contenedor no fuerza min-width que empuje el contenido */
.sencha-dash-viewport.sencha-dash-mobile .sencha-dash-main-wrap {
    min-width: 0 !important;
}

/* Menú cerrado: slot 0px en el hbox. NO usar width fijo !important en el treelist (rompe el layout). */
.sencha-dash-viewport.sencha-dash-mobile:not(.sencha-dash-mobile-nav-open) .sencha-dash-nav-treelist {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

.sencha-dash-viewport.sencha-dash-mobile:not(.sencha-dash-mobile-nav-open) .sencha-dash-main-card {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* Refuerzo: el contenedor x-box-item del nav no debe quedar con ancho residual (Ext hbox) */
.sencha-dash-viewport.sencha-dash-mobile:not(.sencha-dash-mobile-nav-open) .sencha-dash-main-wrap > .x-box-item:first-child {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

.sencha-dash-viewport.sencha-dash-mobile.sencha-dash-mobile-nav-open .sencha-dash-nav-treelist {
    flex: 0 0 280px !important;
    max-width: 85vw !important;
    min-width: 0 !important;
}

.sencha-dash-viewport.sencha-dash-mobile .sencha-dash-main-card {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Dashboard inicio: filas de stats en varias líneas en lugar de una franja */
.sencha-dash-viewport.sencha-dash-mobile .call-efficiency-dashboard .x-box-inner {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
}

.sencha-dash-viewport.sencha-dash-mobile .call-efficiency-dashboard .stats-card {
    flex: 1 1 calc(50% - 16px) !important;
    min-width: 130px !important;
    box-sizing: border-box !important;
}

@media (max-width: 480px) {
    .sencha-dash-viewport.sencha-dash-mobile .call-efficiency-dashboard .stats-card {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
}

/* Menú lateral por encima del contenido y de la máscara */
.sencha-dash-viewport.sencha-dash-mobile .x-treelist.navigation {
    position: relative;
    z-index: 10001;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
    min-width: 0 !important;
}

/* Clics al treelist solo con drawer abierto (evita capturar con menú colapsado) */
.sencha-dash-viewport.sencha-dash-mobile.sencha-dash-mobile-nav-open .x-treelist.navigation,
.sencha-dash-viewport.sencha-dash-mobile.sencha-dash-mobile-nav-open .x-treelist.navigation * {
    pointer-events: auto;
}

/* Botón Logout: texto opcional en pantallas muy estrechas */
@media (max-width: 400px) {
    .sencha-dash-viewport.sencha-dash-mobile .sencha-dash-dash-headerbar .x-btn-inner {
        font-size: 12px;
    }
}

/* Grids: permitir scroll horizontal en lugar de romper el layout */
.sencha-dash-viewport.sencha-dash-mobile .x-grid-body {
    overflow-x: auto !important;
}

.sencha-dash-viewport.sencha-dash-mobile .x-panel-body {
    min-width: 0;
}

/* Stats / analytics: pestañas con dos columnas (hbox) → una columna en móvil */
.sencha-dash-viewport.sencha-dash-mobile .sencha-dash-stack-wide-panels .x-box-inner {
    flex-wrap: wrap !important;
    align-content: flex-start !important;
}

.sencha-dash-viewport.sencha-dash-mobile .sencha-dash-stack-wide-panels .x-box-inner > .x-box-item {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* ---------------------------------------------------------------------------
   Calendario (admin-calendar) en móvil
   NO poner overflow en .x-border-region-center: envuelve titleBar + vista y
   recorta Today / fecha / switcher (solo se veía "D" de Day).
   Scroll horizontal solo en la vista día (.x-calendar-days).
   --------------------------------------------------------------------------- */
.sencha-dash-viewport.sencha-dash-mobile .admin-calendar .x-border-region-west {
    max-width: min(220px, 42vw) !important;
    min-width: 0 !important;
}

.sencha-dash-viewport.sencha-dash-mobile .admin-calendar .x-border-region-center {
    overflow: visible !important;
    min-width: 0 !important;
}

.sencha-dash-viewport.sencha-dash-mobile .admin-calendar .x-border-layout-ct {
    min-width: 0 !important;
}

/* Barra Today / fecha / Day|Week|Month: permitir varias filas si no cabe el ancho */
.sencha-dash-viewport.sencha-dash-mobile .admin-calendar .x-toolbar .x-box-inner {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 6px;
}

/* Vistas día / semana / mes: scroll en el cuerpo de la vista, no en el panel entero */
.sencha-dash-viewport.sencha-dash-mobile .admin-calendar .x-calendar-days,
.sencha-dash-viewport.sencha-dash-mobile .admin-calendar .x-calendar-weeks {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
}

/* Lista de calendarios (Missed Calls / Tickets): puntos de color + fila activa.
   Sobrescribe Calendar.scss que ocultaba .x-calendar-list-icon con display:none */
.admin-calendar .x-calendar-list .x-calendar-list-icon {
    display: block !important;
    position: absolute !important;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px !important;
    height: 14px !important;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

.admin-calendar .x-calendar-list .x-calendar-list-text {
    padding-left: 28px !important;
}

.admin-calendar .x-calendar-list .x-calendar-list-item {
    position: relative;
    border-radius: 6px;
}

.admin-calendar .x-calendar-list .x-calendar-list-item:hover {
    background-color: rgba(7, 51, 89, 0.06) !important;
}

.admin-calendar .x-calendar-list .x-calendar-list-item.x-item-selected {
    background-color: rgba(7, 51, 89, 0.12) !important;
    box-shadow: inset 3px 0 0 #073359;
}

.admin-calendar .x-calendar-list .x-calendar-list-item.x-item-selected .x-calendar-list-text {
    color: #073359 !important;
    font-weight: 600 !important;
}

/* =============================================================================
   Modal Add/Edit evento calendario (Ext.calendar.form.AbstractForm → Window)
   ============================================================================= */
@media (max-width: 767px) {
    /* Ancho y centrado: preferir AbstractForm.syncCalendarWindowLayout (JS); aquí refuerzo CSS */
    .calendar-event-form-window.x-window {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
    }

    .sencha-dash-viewport.sencha-dash-mobile .calendar-event-form-window.x-window {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .calendar-event-form-window .x-window-header {
        padding: 10px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .calendar-event-form-window .x-window-header-title {
        white-space: normal !important;
        word-break: break-word;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.35;
        max-width: 100%;
    }

    .calendar-event-form-window .x-window-body {
        max-width: 100% !important;
        max-height: min(70vh, 600px) !important;
        overflow-x: visible !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    .calendar-event-form-window .x-panel-body-default,
    .calendar-event-form-window form .x-panel-body {
        overflow-x: visible !important;
        max-width: 100% !important;
    }

    .calendar-event-form-window .x-form-text-field,
    .calendar-event-form-window .x-form-field,
    .calendar-event-form-window .x-form-trigger-wrap {
        max-width: 100% !important;
    }

    /* Descripción y textos largos: no cortar solo a la derecha */
    .calendar-event-form-window textarea.x-form-field,
    .calendar-event-form-window .x-form-textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
    }

    .calendar-event-form-window .x-form-item-body {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* From / To: fecha + hora en columna en pantallas estrechas */
    .calendar-event-form-window .x-fieldcontainer {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .calendar-event-form-window .x-fieldcontainer .x-form-item,
    .calendar-event-form-window .x-fieldcontainer > .x-component {
        margin-left: 0 !important;
        margin-bottom: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /*
     * Footer fbar: NO forzar display:flex en .x-box-inner — ExtJS usa hbox con posicionamiento
     * absoluto; al poner flex+column los botones desaparecen o quedan con altura 0.
     * El spacer flex:1 se omite en JS (generateButtons en AbstractForm override) en <768px.
     */
    .calendar-event-form-window .x-toolbar-footer {
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .calendar-event-form-window .x-toolbar-footer .x-box-inner {
        overflow: visible !important;
        max-width: 100% !important;
    }
}

/* -------------------------------------------------------------------------
   FullCalendar "Calendar test" — semáforo (misma lógica que Admin.override.calendar.Event)
   + título oscuro para legibilidad sobre fondos claros/naranjas
   ------------------------------------------------------------------------- */

.fc-calendar-notification-bell {
    display: inline-block;
    position: relative;
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}

.fc-calendar-fax-notification {
    display: inline-block;
    position: relative;
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}

.fc-calendar-fax-notification-icon {
    display: inline-block;
    font-size: 18px;
    color: #888;
}

.fc-test-event-source-icon {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    margin-right: 2px;
    vertical-align: middle;
    opacity: 0.95;
}

.fc-header-toolbar .fc-calendar-fax-notification {
    margin-left: 10px;
}

.fc-header-toolbar .fc-calendar-fax-notification .fc-calendar-notification-badge {
    position: absolute;
    top: -6px;
    right: -10px;
}

.fc-calendar-notification-bell-icon {
    display: inline-block;
    font-size: 18px;
    color: #888;
    transform-origin: 50% 0%;
}

@keyframes fc-calendar-bell-ring {
    0%, 28%, 56%, 84%, 100% {
        transform: rotate(0deg);
    }
    4% {
        transform: rotate(16deg);
    }
    8% {
        transform: rotate(-16deg);
    }
    12% {
        transform: rotate(12deg);
    }
    16% {
        transform: rotate(-12deg);
    }
    20% {
        transform: rotate(0deg);
    }
    32% {
        transform: rotate(16deg);
    }
    36% {
        transform: rotate(-16deg);
    }
    40% {
        transform: rotate(12deg);
    }
    44% {
        transform: rotate(-12deg);
    }
    48% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(16deg);
    }
    64% {
        transform: rotate(-16deg);
    }
    68% {
        transform: rotate(12deg);
    }
    72% {
        transform: rotate(-12deg);
    }
    76% {
        transform: rotate(0deg);
    }
}

.fc-calendar-notification-bell.fc-calendar-notification-bell-ring .fc-calendar-notification-bell-icon {
    animation: fc-calendar-bell-ring 1.35s ease-in-out;
}

.fc-calendar-notification-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    font-weight: 700;
    color: #fff;
    background: #757575;
    border: 1px solid #616161;
    box-sizing: border-box;
}

.fc-calendar-notification-badge.fc-calendar-notification-badge-zero {
    font-weight: 700;
    color: #fff;
    background: #616161;
    border-color: #424242;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.fc-calendar-notification-badge.fc-calendar-notification-badge-alert {
    font-weight: 700;
    color: #212121;
    background: #ffc107;
    border-color: #f9a825;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.fc-calendar-display-options-wrap {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    white-space: nowrap;
}

.fc-calendar-display-options-toggle {
    min-width: 2em;
    padding-left: 0.45em;
    padding-right: 0.45em;
}

.fc-calendar-display-options-chevron {
    display: inline-block;
    transition: transform 0.15s ease;
}

.fc-calendar-display-options-expanded .fc-calendar-display-options-chevron {
    transform: rotate(180deg);
}

.fc-calendar-display-options-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 999;
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

.fc-calendar-display-options-panel-collapsed {
    display: none;
}

.fc-calendar-display-options-hide-mount,
.fc-calendar-display-options-task-mount {
    display: block;
    margin-top: 8px;
    background-color: #fff;
}

.fc-calendar-display-options-task-mount .x-form-item {
    margin-bottom: 0;
}

.fc-calendar-display-options-panel .x-form-item,
.fc-calendar-display-options-panel .x-form-item-body,
.fc-calendar-display-options-panel .x-form-trigger-wrap,
.fc-calendar-display-options-panel .x-form-text-field {
    background-color: #fff;
}

.fc-calendar-test-root .fc-test-duration-strip {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    max-width: 6px;
    border-radius: 3px 0 0 3px;
    z-index: 1;
    box-sizing: border-box;
    pointer-events: none;
}

.fc-calendar-test-root .fc-calendar-channel-filter-mount {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

.fc-calendar-test-root .fc-calendar-channel-filter .x-btn {
    min-width: 36px;
}

.fc-calendar-test-root .fc-test-source-marker,
.fc-calendar-test-root .fc-test-fax-marker {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 22px;
    max-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #374151;
    border-radius: 3px 0 0 3px;
    z-index: 2;
    box-sizing: border-box;
    pointer-events: none;
}

.fc-calendar-test-root .fc-test-source-marker-icon,
.fc-calendar-test-root .fc-test-fax-marker-icon {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    color: #fff;
}

.fc-calendar-test-root .fc-test-fax-marker.fc-test-fax-marker-pending-epic {
    background: #d35400;
}

.fc-calendar-test-root .fc-test-fax-marker.fc-test-fax-marker-epic-done {
    background: #1e8449;
}

.fc-calendar-test-root .fc-event.fc-fax-pending-epic .fc-event-main {
    background-color: #fdebd0 !important;
    border-color: #d35400 !important;
    border-style: dashed !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(211, 84, 0, 0.35);
}

.fc-calendar-test-root .fc-event.fc-fax-epic-done .fc-event-main {
    background-color: #d4efdf !important;
    border-color: #1e8449 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(30, 132, 73, 0.35);
}

.fc-calendar-test-root .fc-test-duration-strip.duration-green {
    background: linear-gradient(to bottom, #27ae60 0%, #27ae60 33%, #ffffff 33%, #ffffff 66%, #27ae60 66%, #27ae60 100%);
}

.fc-calendar-test-root .fc-test-duration-strip.duration-yellow {
    background: linear-gradient(to bottom, #e67e22 0%, #e67e22 33%, #ffffff 33%, #ffffff 66%, #e67e22 66%, #e67e22 100%);
}

.fc-calendar-test-root .fc-test-duration-strip.duration-red {
    background: linear-gradient(to bottom, #e74c3c 0%, #e74c3c 33%, #d8d8d8 33%, #d8d8d8 66%, #e74c3c 66%, #e74c3c 100%);
}

.fc-calendar-test-root .fc-test-duration-strip.outreach-callback-current {
    width: 8px;
    max-width: 8px;
    background: #1e8449;
}

.fc-calendar-test-root .fc-test-duration-strip.outreach-callback-canceled {
    width: 8px;
    max-width: 8px;
    background: repeating-linear-gradient(
        -45deg,
        #c0392b,
        #c0392b 4px,
        #ffffff 4px,
        #ffffff 8px
    );
}

.fc-calendar-test-root .fc-test-duration-strip.outreach-callback-changed {
    width: 8px;
    max-width: 8px;
    background: repeating-linear-gradient(
        90deg,
        #d35400 0,
        #d35400 3px,
        #f5deb3 3px,
        #f5deb3 6px
    );
}

.fc-calendar-test-root .fc-test-duration-strip.outreach-callback-changed-epic {
    width: 8px;
    max-width: 8px;
    background: #1a5276;
}

.fc-calendar-test-root .fc-event.fc-outreach-program .fc-event-main {
    border-style: dashed !important;
    border-width: 2px !important;
    box-sizing: border-box;
}

.fc-calendar-test-root .fc-event.fc-outreach-callback-current .fc-event-main {
    background-color: #d4efdf !important;
    border-color: #1e8449 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(30, 132, 73, 0.35);
}

.fc-calendar-test-root .fc-event.fc-outreach-pending-epic .fc-event-main {
    background-color: #fdebd0 !important;
    border-color: #d35400 !important;
    border-style: dashed !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(211, 84, 0, 0.35);
}

.fc-calendar-test-root .fc-test-duration-strip.outreach-pending-epic {
    width: 8px;
    max-width: 8px;
    background: repeating-linear-gradient(
        90deg,
        #d35400 0,
        #d35400 3px,
        #fdebd0 3px,
        #fdebd0 6px
    );
}

.fc-calendar-test-root .fc-test-duration-strip.outreach-callback-no-response-48h {
    width: 8px;
    max-width: 8px;
    background: #d35400;
}

.fc-calendar-test-root .fc-event.fc-outreach-callback-no-response-48h .fc-event-main {
    background-color: #fdebd0 !important;
    border-color: #d35400 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(211, 84, 0, 0.35);
}

.fc-calendar-test-root .fc-event.fc-outreach-callback-canceled .fc-event-main {
    background-color: #f5d6d6 !important;
    border-color: #922b21 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(146, 43, 33, 0.35);
    opacity: 0.95;
}

.fc-calendar-test-root .fc-event.fc-outreach-callback-changed .fc-event-main {
    background-color: #fdebd0 !important;
    border-color: #ca6f1e !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(202, 111, 30, 0.35);
}

.fc-calendar-test-root .fc-event.fc-outreach-callback-changed-epic .fc-event-main {
    background-color: #d4e6f1 !important;
    border-color: #1a5276 !important;
    border-style: solid !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(26, 82, 118, 0.35);
}

.fc-calendar-test-root .fc-test-event-body-outreach {
    padding-left: 12px;
}

.fc-calendar-test-root .fc-test-event-outreach-type {
    font-weight: 800;
    font-size: 11px;
    line-height: 1.2;
    color: #1a252f;
    letter-spacing: 0.02em;
    text-transform: none;
    text-shadow: none;
}

.fc-calendar-test-root .fc-daygrid-event .fc-test-event-outreach-type {
    display: inline-block;
    margin-left: 4px;
}

.fc-calendar-test-root .fc-test-event-title.fc-test-event-title-canceled,
.fc-calendar-test-root .fc-test-event-title-canceled {
    text-decoration: line-through;
    opacity: 0.85;
}

.fc-calendar-test-root .fc-timegrid-event,
.fc-calendar-test-root .fc-daygrid-event,
.fc-calendar-test-root .fc-list-event {
    color: inherit;
}

.fc-calendar-test-root .fc-event-main {
    position: relative !important;
    overflow: hidden;
    border-radius: 3px;
}

.fc-calendar-test-root .fc-test-event-body {
    position: relative;
    z-index: 2;
    padding: 2px 8px 2px 10px;
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.fc-calendar-test-root .fc-test-event-time {
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.fc-calendar-test-root .fc-test-event-title {
    font-weight: 700;
    font-size: 11px;
    line-height: 1.25;
    color: #111827;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.6);
    word-break: break-word;
}

/* Mes: una línea (hora + título) */
.fc-calendar-test-root .fc-daygrid-event .fc-test-event-body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    padding: 1px 6px 1px 8px;
}

/* Lista: compacto */
.fc-calendar-test-root .fc-list-event .fc-test-event-body {
    padding: 1px 6px 1px 8px;
}

.fc-calendar-test-root .fc-list-event .fc-test-event-time,
.fc-calendar-test-root .fc-list-event .fc-test-event-title {
    font-size: 12px;
}

/* Channel icon column (fax / phone / sms / web / …): indent text past the left icon. */
.fc-calendar-test-root .fc-timegrid-event .fc-test-event-body.fc-test-event-body-icon,
.fc-calendar-test-root .fc-event-main .fc-test-event-body.fc-test-event-body-icon,
.fc-calendar-test-root .fc-timegrid-event .fc-test-event-body.fc-test-event-body-fax,
.fc-calendar-test-root .fc-event-main .fc-test-event-body.fc-test-event-body-fax {
    padding: 2px 8px 2px 34px;
}

.fc-calendar-test-root .fc-daygrid-event .fc-test-event-body.fc-test-event-body-icon,
.fc-calendar-test-root .fc-daygrid-event .fc-test-event-body.fc-test-event-body-fax {
    padding: 1px 6px 1px 30px;
}

.fc-calendar-test-root .fc-list-event .fc-test-event-body.fc-test-event-body-icon,
.fc-calendar-test-root .fc-list-event .fc-test-event-body.fc-test-event-body-fax {
    padding: 1px 6px 1px 30px;
}

/* Fax only: branch/line meta line on light orange/green blocks */
.fc-calendar-test-root .fc-test-event-body-fax .fc-test-event-time {
    color: #3d5260;
    text-shadow: none;
}

/* Tooltip Calendar test (Ext.tip.ToolTip) — cabecera azul + barra roja, secciones */
.x-tip.fc-test-event-tooltip {
    border: 1px solid #d1d5db !important;
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18) !important;
    background-color: #ffffff !important;
    /* No más del 90% del alto de pantalla; ancho mín. 280px, hasta 50% del viewport */
    max-height: 90vh !important;
    min-width: 280px !important;
    max-width: 50vw !important;
    width: max-content !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.fc-test-event-tooltip .x-tip-body {
    padding: 0 !important;
    background: transparent !important;
    max-height: calc(90vh - 12px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.fc-tip-wrap {
    padding: 14px 16px 16px;
    font-size: 13px;
    line-height: 1.45;
    color: #1f2937;
    min-width: 0;
    box-sizing: border-box;
}

.fc-tip-header {
    font-weight: 700;
    font-size: 14px;
    color: #1e3a8a;
    padding-bottom: 8px;
    margin-bottom: 0;
}

.fc-tip-header-rule {
    height: 3px;
    background: #e74c3c;
    border-radius: 1px;
    margin: 0 0 12px 0;
}

.fc-tip-kv {
    margin-bottom: 8px;
}

.fc-tip-kv:last-of-type {
    margin-bottom: 0;
}

.fc-tip-label {
    font-weight: 700;
    color: #374151;
}

.fc-tip-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 12px 0;
}

.fc-tip-block {
    margin-top: 4px;
}

.fc-tip-heading {
    display: block;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
}

.fc-tip-text {
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Patient column: phone / email under name */
.admin-patients-grid .patients-sub-line {
    font-size: 11px;
    line-height: 1.35;
    opacity: 0.88;
    margin-top: 2px;
}

/* Patients grid (Classic): gap cells fill row td height; chips sit on one line (JS syncGapCellRowHeights) */
.admin-patients-grid td.patients-gap-col {
    vertical-align: top;
}

.admin-patients-grid td.patients-gap-col .x-grid-cell-inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}

.admin-patients-grid td.patients-gap-col .patients-gap-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

.admin-patients-grid td.patients-gap-col .patients-gap-cell-lines {
    flex: 0 0 auto;
    width: 100%;
}

.admin-patients-grid td.patients-gap-col .patients-gap-cell-chip {
    margin-top: auto;
    width: 100%;
    text-align: center;
    padding-top: 4px;
    box-sizing: border-box;
}