/* ==========================================================================
   Syncfusion Component Overrides
   Anchored by CssClass where possible to avoid bare .e-xxx selectors.
   ========================================================================== */

/* Gender icon utility — reused in cards, dropdowns, grids */
.genero-icon           { margin-right: 0.3rem; }
.genero-icon-m         { color: var(--bf-male); }
.genero-icon-f         { color: var(--bf-female); }
.e-rowcell .genero-icon-m { color: var(--bf-male) !important; }
.e-rowcell .genero-icon-f { color: var(--bf-female) !important; }

/* Syncfusion e-small DDL value-template inherits wrong font-size + padding */
.e-ddl.e-small .e-input-value { font-size: inherit; padding-left: 8px; height: 26px; line-height: 26px; }

/* ==========================================================================
   Grid compact (.grid-compact CssClass anchor)
   ========================================================================== */

/* Toolbar — colored icons */
.grid-compact .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-circle-add::before {
    color: var(--bf-success);
}

.grid-compact .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-edit::before {
    color: var(--bf-primary);
}

.grid-compact .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-trash::before {
    color: var(--bf-danger);
}

.grid-compact .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-save::before {
    color: var(--bf-success);
}

.grid-compact .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-close::before {
    color: var(--bf-icon-cancel);
}

/* Toolbar — smaller */
.grid-compact .e-toolbar {
    min-height: 0;
    padding: 2px 4px;
}

.grid-compact .e-toolbar .e-toolbar-items {
    min-height: 0;
}

.grid-compact .e-toolbar .e-toolbar-item .e-tbar-btn {
    padding: 2px 6px;
    min-height: 0;
    min-width: 0;
}

.grid-compact .e-toolbar .e-toolbar-item .e-tbar-btn .e-icons {
    font-size: 14px;
}

/* Header & cells — smaller */
.grid-compact.e-grid .e-headercell {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px 6px;
}

.grid-compact.e-grid .e-rowcell {
    font-size: 0.75rem;
    padding: 2px 6px;
}

.e-grid .e-rowcell .color-chip {
    vertical-align: middle;
    line-height: 1;
    padding: 3px 7px;
}

.grid-empty-msg {
    font-size: 0.75rem;
    color: var(--bf-text-secondary);
    opacity: 0.6;
}

.grid-compact.e-grid .e-gridheader {
    padding-right: 0 !important;
}

/* Edit inputs — smaller */
.grid-compact.e-grid .e-rowcell .e-input-group {
    min-height: 0;
}

.grid-compact.e-grid .e-rowcell .e-input,
.grid-compact.e-grid .e-rowcell input.e-input {
    font-size: 0.75rem;
    height: 24px;
    padding: 1px 4px;
}

/* ==========================================================================
   Chips — square with slightly rounded corners instead of pill shape
   ========================================================================== */
.e-chip,
.e-chip-list .e-chip {
    border-radius: 4px !important;
}

/* ==========================================================================
   Scheduler month view (.bf-month-schedule CssClass anchor)
   ========================================================================== */

/* Compact appointment bars, left-aligned */
.bf-month-schedule .e-month-view .e-appointment {
    height: 21px !important;
    padding: 0 4px !important;
    min-height: 0 !important;
    margin-bottom: 1px !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 0.68rem !important;
    right: 3px !important;
    margin-left: 1px !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 16px !important;
    border: 1px solid var(--bf-surface) !important;
}

.bf-month-schedule .e-month-view .e-appointment .e-appointment-details {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.68rem !important;
    text-align: left !important;
    width: 100% !important;
}

.bf-month-schedule .e-month-view .e-appointment .e-subject {
    line-height: 18px !important;
    font-size: 0.68rem !important;
}

.bf-month-schedule .e-month-view .e-appointment .e-time,
.bf-month-schedule .e-month-view .e-appointment .e-date-time {
    display: none !important;
}

/* Hide "All day" label */
.bf-month-schedule .e-all-day-appointment-section,
.bf-month-schedule .e-all-day-appointment-wrapper {
    display: none !important;
}

/* Smaller grey day numbers */
.bf-month-schedule .e-month-view .e-date-header,
.bf-month-schedule .e-month-view .e-date-header * {
    font-size: 0.7rem !important;
    color: var(--bf-muted-gray) !important;
}

/* Compact "more" indicator */
.bf-month-schedule .e-month-view .e-more-indicator {
    font-size: 0.65rem !important;
    padding: 0 !important;
    height: 16px !important;
    line-height: 16px !important;
}

/* Today indicator: blue circle with white bold text */
.bf-month-schedule .e-month-view .e-current-date .e-date-header {
    background-color: var(--bf-today);
    color: var(--bf-surface) !important;
    font-weight: 700 !important;
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-size: 0.75rem;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}

/* Compact weekend columns (Sat=6th, Sun=7th with FirstDayOfWeek=Monday) */
.bf-month-schedule .e-month-view .e-header-row th:nth-child(6),
.bf-month-schedule .e-month-view .e-header-row th:nth-child(7) {
    width: 10%;
}

.bf-month-schedule .e-month-view colgroup col:nth-child(6),
.bf-month-schedule .e-month-view colgroup col:nth-child(7) {
    width: 10%;
}

.bf-month-schedule .e-month-view .e-work-cells:nth-child(6),
.bf-month-schedule .e-month-view .e-work-cells:nth-child(7),
.bf-month-schedule .e-month-view .e-header-cells:nth-child(6),
.bf-month-schedule .e-month-view .e-header-cells:nth-child(7) {
    width: 10%;
}

/* ==========================================================================
   Scheduler agenda view (.bf-home-agenda CssClass anchor)
   ========================================================================== */

/* Agenda: color marker left border only, no full background */
.bf-home-agenda .e-agenda-view .e-appointment {
    background-color: transparent !important;
    color: var(--color-sf-on-surface) !important;
}

.bf-home-agenda .e-agenda-view .e-agenda-item {
    position: relative;
}

/* Hide "All day" label in agenda view */
.bf-home-agenda .e-agenda-view .e-date-time {
    display: none !important;
}

/* ==========================================================================
   Toast — smaller font, text color matches severity
   ========================================================================== */
.e-toast-container .e-toast {
    font-size: 0.75rem !important;
}

.e-toast-container .e-toast.e-toast-success {
    color: var(--bf-toast-success) !important;
}

.e-toast-container .e-toast.e-toast-success .e-toast-icon {
    color: var(--bf-toast-success) !important;
}

.e-toast-container .e-toast.e-toast-danger {
    color: var(--bf-toast-danger) !important;
}

.e-toast-container .e-toast.e-toast-danger .e-toast-icon {
    color: var(--bf-toast-danger) !important;
}

/* ==========================================================================
   SfMessage — text color matches severity
   ========================================================================== */
.e-message.e-success .e-msg-content {
    color: var(--bf-success) !important;
}

.e-message.e-error .e-msg-content {
    color: var(--bf-danger) !important;
}

/* ==========================================================================
   Nav calendar (.nav-calendar CssClass anchor)
   ========================================================================== */
.nav-calendar .e-content td.has-turno span.e-day {
    position: relative;
}

.nav-calendar .e-content td.has-turno span.e-day::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--bf-calendar-dot);
}

/* ==========================================================================
   Button overrides — shared across pages
   ========================================================================== */
.e-btn.e-outline.e-success,
.e-btn.e-outline.e-success:hover,
.e-btn.e-outline.e-success:focus,
.e-btn.e-outline.e-success:focus-visible,
.e-btn.e-outline.e-success:focus:not(:focus-visible),
.e-btn.e-outline.e-success:active,
.e-btn.e-outline.e-success.e-active {
    display: inline-flex;
    align-items: center;
    font-weight: normal;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--bf-success-soft);
}

.e-btn.e-outline.e-success:hover {
    background-color: var(--bf-success-hover);
}

/* ==========================================================================
   Icon action buttons — small transparent buttons (edit, delete, print)
   Used via CssClass on SfButton in card panels.
   ========================================================================== */
.icon-action-btn.e-btn {
    padding: 2px;
    min-width: 0;
    min-height: 0;
    line-height: 1;
    opacity: 0.5;
}

.icon-action-btn.e-btn:hover {
    opacity: 1;
}

/* ==========================================================================
   Ficha-detail grid (.ficha-detail wrapper anchor)
   ========================================================================== */
.ficha-detail .e-grid .e-gridheader,
.ficha-detail .e-gridheader {
    background-color: var(--bf-grid-header-bg) !important;
}

.ficha-detail .e-grid {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--bf-grid-border) !important;
    box-shadow: 0 2px 6px rgba(14, 40, 67, 0.08);
}

.ficha-detail .e-grid .e-headercell,
.ficha-detail .e-grid .e-headercelldiv,
.ficha-detail .e-grid .e-headertext {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--bf-text) !important;
}

.ficha-detail .e-grid .e-rowcell {
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: var(--bf-text-muted) !important;
}

/* Boolean checkbox icons */
.ficha-detail .e-grid .e-rowcell .e-checkbox-wrapper .e-frame,
.ficha-detail .e-grid .e-rowcell .e-checkboxfilter,
.ficha-detail .e-grid .e-rowcell .e-icons.e-check,
.ficha-detail .e-grid .e-rowcell .e-icons.e-uncheck,
.ficha-detail .e-grid .e-rowcell .e-icons.e-stop {
    color: var(--bf-primary) !important;
    font-size: 1rem !important;
}

.ficha-detail .e-grid .e-rowcell .e-icons.e-uncheck {
    color: var(--bf-icon-unchecked) !important;
}

.ficha-detail .e-grid .e-altrow .e-rowcell {
    background-color: var(--bf-grid-alt-row) !important;
}

.ficha-detail .e-grid .e-row:hover .e-rowcell {
    background-color: var(--bf-grid-row-hover) !important;
}

.ficha-detail .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn {
    border-radius: 8px !important;
}

/* Grid edit mode: light field borders */
.ficha-detail .e-grid .e-editedrow .e-input-group,
.ficha-detail .e-grid .e-editedrow .e-input-group.e-control-wrapper,
.ficha-detail .e-grid .e-editedrow .e-input-group.e-control-container {
    border-color: var(--bf-border-input) !important;
    box-shadow: none !important;
}

.ficha-detail .e-grid .e-editedrow .e-input-group:hover,
.ficha-detail .e-grid .e-editedrow .e-input-group.e-input-focus {
    border-color: var(--bf-border-input-hover) !important;
}

/* Suppress green valid-input outline inside grid edit dialogs */
.lab-edit-form .e-input-group.e-valid-input,
.lab-edit-form .e-input-group.e-valid-input:hover,
.lab-edit-form .e-input-group.e-valid-input.e-input-focus,
.img-edit-form .e-input-group.e-valid-input,
.img-edit-form .e-input-group.e-valid-input:hover,
.img-edit-form .e-input-group.e-valid-input.e-input-focus,
.turno-edit-form .e-input-group.e-valid-input,
.turno-edit-form .e-input-group.e-valid-input:hover,
.turno-edit-form .e-input-group.e-valid-input.e-input-focus {
    border-color: var(--bf-border-input) !important;
    box-shadow: none !important;
}

.ficha-detail .e-grid .lab-num-input .e-input {
    text-align: right !important;
}

/* Disabled command buttons in read-only grids */
.ficha-detail .e-grid .e-unboundcell .e-btn.e-disabled {
    opacity: 0.35 !important;
}

.ficha-detail .e-grid .e-unboundcell:has(.e-btn.e-disabled) {
    pointer-events: none !important;
}

/* Force row-only visual feedback */
.ficha-detail .e-grid .e-cellselectionbackground,
.ficha-detail .e-grid .e-columnselection {
    background-color: inherit !important;
}

.ficha-detail .e-grid .e-rowcell.e-focus:not(.e-selectionbackground),
.ficha-detail .e-grid .e-rowcell.e-focused:not(.e-selectionbackground),
.ficha-detail .e-grid .e-headercell.e-focus,
.ficha-detail .e-grid .e-headercell.e-focused {
    background-color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

.ficha-detail .e-grid .e-rowcell:focus,
.ficha-detail .e-grid .e-headercell:focus {
    outline: none !important;
}

.ficha-detail .e-grid .e-gridcontent {
    padding-bottom: 10px !important;
}

/* Disallow direct cell interaction; keep command buttons usable */
.ficha-detail .e-grid .e-content .e-row .e-rowcell:not(.e-unboundcell):not(.e-templatecell) {
    pointer-events: none !important;
}

/* Row command icon colors */
.ficha-detail .e-grid .cmd-edit .e-icons::before {
    color: var(--bf-primary) !important;
}

.ficha-detail .e-grid .cmd-delete .e-icons::before {
    color: var(--bf-danger) !important;
}

/* ==========================================================================
   Edit form layouts (lab, imagen, turno)
   ========================================================================== */

/* Lab edit dialog: 2-column compact layout */
.lab-edit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding: 4px 0;
}

.lab-edit-form .lab-edit-full {
    grid-column: 1 / -1;
    max-width: 180px;
}

/* Imagen edit dialog */
.img-edit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding: 4px 0;
}

.img-edit-form .img-edit-full {
    grid-column: 1 / -1;
}

.img-edit-form .img-edit-row {
    grid-column: span 1;
}

.img-edit-form .img-edit-checks {
    grid-column: 1 / -1;
    display: flex;
    gap: 1.2rem;
    padding-top: 4px;
}

/* Turno edit dialog */
.turno-edit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding: 4px 0;
}

.turno-edit-form .turno-edit-full {
    grid-column: 1 / -1;
}

.turno-edit-form .turno-edit-row {
    grid-column: span 1;
}

.turno-edit-form .turno-edit-checks {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding-top: 4px;
}

.grid-nuevo-btn {
    margin-top: 12px !important;
    align-self: flex-start;
}

/* Minimal delete-confirmation dialog (ficha delete) */
.dlg-delete-confirm.e-dialog {
    min-height: auto;
}

.dlg-delete-confirm .e-dlg-content {
    padding: 14px 16px 8px;
}

.dlg-delete-confirm .e-footer-content {
    padding: 4px 12px 10px;
    justify-content: flex-end;
}

/* Solid danger button in delete dialogs (Syncfusion auto-adds e-flat to dialog buttons) */
.dlg-delete-confirm .e-btn.e-flat.e-danger {
    background-color: var(--bf-danger);
    color: #fff;
    border: none;
}

.dlg-delete-confirm .e-btn.e-flat.e-danger:hover {
    background-color: var(--bf-danger-soft);
    color: #fff;
}

/* Compact delete confirmation dialog (grid inline) */
.e-gridcnfdlg.e-popup.e-dialog {
    max-width: 320px !important;
    min-height: auto !important;
}

.e-gridcnfdlg .e-dlg-content {
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
}

.e-gridcnfdlg .e-footer-content {
    padding: 8px 16px 12px !important;
}

.e-gridcnfdlg .e-dlg-header-content {
    padding: 10px 16px 0 !important;
}

/* ==========================================================================
   Home page grids (.home-page wrapper anchor)
   ========================================================================== */
.home-page .e-grid .e-headercell,
.home-page .e-grid .e-headercelldiv,
.home-page .e-grid .e-headertext {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.home-page .e-grid .e-headercell {
    padding: 4px 6px !important;
}

.home-page .e-grid .e-rowcell {
    font-size: 0.75rem !important;
    padding: 2px 6px !important;
}

/* ==========================================================================
   Detail tabs (.bf-detail-tabs CssClass anchor)
   Shared by PacienteFichas and PacienteProcedimientos detail panels.
   ========================================================================== */
.bf-detail-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bf-detail-tabs .e-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 1.5rem;
}

.bf-detail-tabs .e-content .e-item.e-active {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.bf-detail-tabs .e-tab-header .e-toolbar-item .e-tab-text {
    font-size: 0.8rem;
    font-weight: 400;
}

.bf-detail-tabs .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding: 0.25rem 0.5rem 0.15rem;
    height: auto;
    min-height: 0;
}

.bf-detail-tabs .e-tab-header .e-toolbar-item {
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 0;
}

.bf-detail-tabs .e-tab-header {
    min-height: 0;
    height: auto;
    padding: 0;
}

.bf-detail-tabs .e-tab-header .e-toolbar-items {
    height: auto;
    min-height: 0;
}

.bf-detail-tabs .e-tab-header .e-hscroll {
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.bf-detail-tabs .e-tab-header .e-scroll-nav,
.bf-detail-tabs .e-tab-header .e-hscroll .e-scroll-content {
    height: auto;
    min-height: 0;
}

.bf-detail-tabs .e-tab-header .e-indicator {
    bottom: 0;
}

/* Float label size — smaller labels in form grids and clinical text areas */
.form-grid .e-float-input .e-float-text,
.clinica-grid .e-float-input .e-float-text,
.informe-grid .e-float-input .e-float-text {
    font-size: 0.68rem;
}

/* ==========================================================================
   Form dialog (.bf-form-dialog CssClass anchor)
   Shared by FichaFormDialog and ProcedimientoFormDialog.
   ========================================================================== */

/* Fixed tab content height so dialog doesn't resize between tabs */
.bf-form-dialog .e-tab .e-content {
    min-height: 340px;
    padding-top: 1.5rem;
}

/* Combobox/dropdown padding in dialog to match textboxes */
/* ==========================================================================
   Pacientes page (.pacientes-page wrapper anchor)
   ========================================================================== */

/* Flat info/danger buttons — scoped to cards (not dialogs) */
.pacientes-page .cards-grid .e-btn.e-flat.e-info,
.pacientes-page .cards-grid .e-btn.e-flat.e-info:hover,
.pacientes-page .cards-grid .e-btn.e-flat.e-info:focus {
    font-weight: normal;
    border: none;
    color: var(--bf-primary-soft);
}

.pacientes-page .cards-grid .e-btn.e-flat.e-info:hover {
    background-color: var(--bf-primary-hover);
}

.pacientes-page .cards-grid .e-btn.e-flat.e-danger,
.pacientes-page .cards-grid .e-btn.e-flat.e-danger:hover,
.pacientes-page .cards-grid .e-btn.e-flat.e-danger:focus {
    font-weight: normal;
    border: none;
    color: var(--bf-danger-soft);
}

.pacientes-page .cards-grid .e-btn.e-flat.e-danger:hover {
    background-color: var(--bf-danger-hover);
}

/* Chip links — borderless, semantic color */
.pacientes-page .link-item .e-chip {
    border: none;
    color: var(--bf-primary);
    padding-left: 0;
}

.pacientes-page .link-item-ficha .e-chip {
    color: var(--bf-danger-soft);
}

/* Copy email button — compact */
.pacientes-page .copy-email-btn.e-btn {
    padding: 0 0.2rem;
    min-width: auto;
}

/* Patient card hover + action buttons */
.pacientes-page .patient-card {
    position: relative;
    justify-content: flex-start;
}

.pacientes-page .patient-card:hover {
    background-color: var(--bf-surface-card-hover);
}

.pacientes-page .card-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
}

/* Combobox/dropdown padding in dialog to match textboxes */
.bf-form-dialog .e-ddl .e-input-group input.e-input,
.bf-form-dialog .e-ddl input.e-input,
.bf-form-dialog .e-dropdownlist input.e-input,
.bf-form-dialog .e-input-group input.e-dropdownlist {
    padding-left: 0.25rem;
}