/*
    Módulo Avisos (CU 1103, INC-22). Tokens y estilos del "sistema semántico del aviso"
    (design_handoff_avisos/README.md): badge de prioridad con barras, chip de estado, fila
    vencida, avatar de iniciales del responsable y estado vacío del listado. Registrado en
    AssetsManagementBundleContributor (mismo mecanismo que main.css).
*/

.todo-item-priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.todo-item-priority-badge-urgent {
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
}

.todo-item-priority-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
}

.todo-item-priority-bar {
    display: inline-block;
    width: 3px;
    border-radius: 1px;
}

.todo-item-priority-bar-1 {
    height: 5px;
}

.todo-item-priority-bar-2 {
    height: 8px;
}

.todo-item-priority-bar-3 {
    height: 11px;
}

.todo-item-priority-icon {
    font-size: 15px !important;
    line-height: 1;
}

.todo-item-state-chip-icon {
    font-size: 14px !important;
    vertical-align: middle;
    margin-right: 2px;
}

/* Fila vencida (Pendiente/En curso con IsOverdue): fondo tenue, D-17. */
.todo-item-row-overdue > td {
    background-color: #FFFBFB !important;
}

.todo-item-title-strikethrough {
    text-decoration: line-through;
    color: #6B7280;
}

.todo-item-title-secondary {
    display: block;
    font-size: 11.5px;
    color: #6B7280;
}

/* Avatar de iniciales del responsable (README, «Listado»: 22 px, fondo rosa, texto granate). */
.todo-item-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #F2D7DA;
    color: #8B1620;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.todo-item-assignee {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.todo-item-due-overdue {
    color: #B81E26;
    font-weight: 700;
}

.todo-item-due-relative {
    display: block;
    font-size: 11.5px;
    color: #6B7280;
}

.todo-item-due-relative.todo-item-due-overdue {
    color: #B81E26;
}

.todo-item-progress-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.todo-item-progress-cell .rz-progressbar {
    height: 6px !important;
    flex: 1 1 auto;
}

.todo-item-progress-value {
    font-size: 11.5px;
    color: #6B7280;
    min-width: 32px;
    text-align: right;
}

.todo-item-entity-icon {
    font-size: 16px !important;
    vertical-align: middle;
    margin-right: 4px;
    color: #6B7280;
}

.todo-item-entity-empty {
    color: #9AA1AB;
}

/* Estado vacío (3c): icono en círculo, texto y botón "Nuevo aviso" deshabilitado. */
.todo-item-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 16px;
    text-align: center;
}

.todo-item-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #F7F8FA;
    color: #9AA1AB;
}

.todo-item-empty-state-icon .material-symbols-outlined {
    font-size: 28px;
}

/* ==========================================================================================
   Panel lateral de aviso (CU 1103, INC-23; README «04 · Panel lateral de aviso»): SidePanel a la
   derecha de ~560 px, barra superior roja de 4 px, máscara rgba(26,35,50,.12), cabecera, cuerpo
   con scroll y pie fijo. Foco con anillo de 3 px y deshabilitado al 50 % (README, «Comportamiento
   global»).
   ========================================================================================== */

.todo-item-page-spacer,
.todo-item-panel-footer-spacer {
    flex: 1 1 auto;
}

/* La fila del listado abre el panel. */
.todo-item-page-grid .rz-data-row {
    cursor: pointer;
}

.rz-dialog-side.todo-item-side-dialog {
    border-top: 4px solid #B81E26;
    box-shadow: -12px 0 32px rgba(26, 35, 50, .16);
}

.todo-item-side-dialog .rz-dialog-side-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* La máscara es hermana del panel: solo se tiñe mientras el panel de avisos está abierto. */
body:has(.todo-item-side-dialog) .rz-dialog-mask {
    background-color: rgba(26, 35, 50, .12);
}

.todo-item-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    font-size: 13px;
    color: #1A2332;
}

.todo-item-panel-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.todo-item-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 56px 12px 20px;
    border-bottom: 1px solid #E6E8EC;
}

.todo-item-panel-header-icon {
    font-size: 22px !important;
    font-variation-settings: "FILL" 1;
    margin-top: 1px;
}

.todo-item-panel-header-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.todo-item-panel-title {
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.todo-item-panel-subtitle {
    font-size: 11.5px;
    color: #6B7280;
}

.todo-item-panel-header-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.todo-item-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.todo-item-panel-loading {
    align-items: center;
    justify-content: center;
}

.todo-item-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #E6E8EC;
    background-color: #F7F8FA;
}

.todo-item-panel-delete.rz-button {
    color: #B81E26;
    margin-right: 12px;
}

/* Aspa de cierre (INC-35-ui): esquina superior derecha del panel, por encima de la cabecera y
   del cuerpo con scroll. */
.todo-item-panel .todo-item-panel-close.rz-button {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 20;
}

.todo-item-panel-open-origin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

/* Bandas: solo lectura (rosa), concurrencia (ámbar) y error (rojo). */
.todo-item-panel-band {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
}

.todo-item-panel-band .material-symbols-outlined {
    font-size: 18px;
}

.todo-item-panel-band-readonly {
    background-color: #FBE9EA;
    color: #8B1620;
}

.todo-item-panel-band-warning {
    background-color: #FFF7E8;
    color: #7A4A08;
    border: 1px solid #F1D9A8;
}

.todo-item-panel-band-error {
    background-color: #FBE9EA;
    color: #8B1620;
    border: 1px solid #F2D7DA;
}

/* Campos. */
.todo-item-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.todo-item-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.todo-item-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #3F4A5C;
}

.todo-item-required {
    color: #B81E26;
    margin-left: 2px;
}

.todo-item-field-optional {
    font-weight: 500;
    color: #9AA1AB;
}

.todo-item-field-readonly {
    font-size: 13px;
    font-weight: 500;
}

.todo-item-field-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #6B7280;
}

.todo-item-field-hint .material-symbols-outlined {
    font-size: 14px;
}

.todo-item-field-hint-error {
    color: #B81E26;
}

.todo-item-field-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #C77A11;
    font-weight: 600;
}

.todo-item-field-warning .material-symbols-outlined {
    font-size: 15px;
}

.todo-item-field-with-lock {
    display: flex;
    align-items: center;
    gap: 6px;
}

.todo-item-lock-icon {
    font-size: 18px !important;
    color: #6B7280;
}

/* Errores de validación en línea, en rojo y bajo el campo. */
.todo-item-panel .rz-message-popup,
.todo-item-panel .rz-messages-error {
    color: #B81E26;
    font-size: 11.5px;
}

/* Anillo de foco del README. */
.todo-item-panel :focus-visible {
    outline: 3px solid rgba(184, 30, 38, .28);
    outline-offset: 1px;
}

.todo-item-panel button[disabled],
.todo-item-panel .rz-state-disabled {
    opacity: .5;
}

/* Prioridad (4 opciones, INC-35-ui): botones Radzen con la estética de Assista. El seleccionado
   lleva el estilo de «Guardar» (primario) y los demás el de «Cancelar» (claro); el estilo lo pone
   Radzen vía TodoItemPanelButtonStyles, aquí solo la rejilla y las barras, que heredan el color
   del texto del botón para verse igual en ambos estados. */
.todo-item-priority-segmented {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.todo-item-priority-segmented .todo-item-priority-segment.rz-button {
    width: 100%;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
}

.todo-item-priority-segment .rz-button-box {
    justify-content: center;
    gap: 6px;
}

.todo-item-priority-segment .todo-item-priority-bar {
    background-color: currentColor;
}

.todo-item-priority-segment .todo-item-priority-bar-unlit {
    opacity: .3;
}

.todo-item-priority-segment .todo-item-priority-icon {
    font-size: 18px !important;
}

.todo-item-priority-segmented-disabled {
    opacity: .5;
}

/* Responsable. */
.todo-item-assignee-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.todo-item-assignee-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.todo-item-assignee-option-name {
    font-weight: 600;
}

.todo-item-assignee-option-meta {
    font-size: 11.5px;
    color: #6B7280;
}

.todo-item-assignee-option-overdue {
    color: #B81E26;
    font-weight: 600;
}

/* Entidad asociada. */
.todo-item-entity-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background-color: #F7F8FA;
    border: 1px solid #E6E8EC;
    border-radius: 6px;
}

.todo-item-entity-locked-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.todo-item-entity-locked-code {
    font-weight: 700;
}

.todo-item-entity-reference {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.todo-item-entity-code {
    font-weight: 700;
    color: #B81E26;
}

.todo-item-entity-code-nolink {
    color: #3F4A5C;
}

.todo-item-entity-description {
    color: #3F4A5C;
}

.todo-item-entity-external {
    font-size: 16px !important;
    color: #B81E26;
}

.todo-item-entity-warning {
    font-size: 16px !important;
    color: #8A5A0B;
}

.todo-item-entity-warning-text {
    display: inline-flex;
    align-self: flex-start;
    padding: 2px 8px;
    border: 1px dashed #AEB4BE;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #3F4A5C;
}

/* Alta: aviso de que estado y progreso llegan al guardar. */
.todo-item-panel-new-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: #F7F8FA;
    border-radius: 6px;
    font-size: 12px;
    color: #6B7280;
}

/* Estado y porcentaje (bloque ámbar de 4b). */
.todo-item-execution {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background-color: #FFF9EF;
    border: 1px solid #F1E2C4;
    border-radius: 8px;
}

.todo-item-execution-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    align-items: start;
}

.todo-item-execution-progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.todo-item-execution-progress-value {
    font-size: 13px;
    font-weight: 700;
    color: #C77A11;
}

.todo-item-slider-locked {
    opacity: .5;
}

/* Solo lectura (4c). */
.todo-item-readonly-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.todo-item-origin-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background-color: #1A2332;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
}

.todo-item-origin-chip .material-symbols-outlined {
    font-size: 14px;
}

.todo-item-readonly-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.todo-item-readonly-body {
    margin: 0;
    color: #3F4A5C;
    white-space: pre-line;
}

.todo-item-readonly-list {
    display: grid;
    grid-template-columns: 130px 1fr;
    row-gap: 10px;
    column-gap: 12px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #EDEFF2;
}

.todo-item-readonly-list dt {
    font-weight: 500;
    color: #6B7280;
}

.todo-item-readonly-list dd {
    margin: 0;
    font-weight: 500;
}

.todo-item-readonly-progress {
    max-width: 240px;
}

/* ==========================================================================================
   Supervisión (CU 1103, INC-24; README «03 · Listado de avisos», 3b): selección múltiple. Las
   acciones sobre la selección van en la barra DataGridNavMenu de la cabecera (INC-34-ui).
   ========================================================================================== */

/* Fila seleccionada (README: fondo #FBE9EA). Más específico que .todo-item-row-overdue para que
   gane si un aviso vencido está además seleccionado. */
.todo-item-page-grid .rz-data-row.todo-item-row-selected > td {
    background-color: #FBE9EA !important;
}

/* Cabecera de la rejilla: la barra DataGridNavMenu y, en Supervisión, «N seleccionados». */
.todo-item-grid-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.todo-item-grid-header-count {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #3F4A5C;
}

/* ==========================================================================================
   Diálogo de reasignación y de cambio de prioridad (CU-06, CU-07, CU-36; README «05 · Diálogo de
   reasignación»). Contenido del cuerpo del RadzenDialog (~520 px), sin cabecera propia: el título
   lo pone el llamante (DialogOptions/OpenAsync).
   ========================================================================================== */

.todo-item-reassign-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 13px;
    color: #1A2332;
}

.todo-item-reassign-summary-one {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background-color: #F7F8FA;
    border-radius: 6px;
}

.todo-item-reassign-summary-title {
    font-weight: 700;
}

.todo-item-reassign-summary-meta {
    font-size: 11.5px;
    color: #6B7280;
}

.todo-item-reassign-summary-assignee {
    font-size: 12px;
    color: #3F4A5C;
}

.todo-item-reassign-summary-count {
    font-weight: 700;
    margin-bottom: 6px;
}

.todo-item-reassign-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.todo-item-reassign-summary-list li {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    background-color: #F7F8FA;
    border-radius: 6px;
}

.todo-item-reassign-summary-list-title {
    font-weight: 600;
}

.todo-item-reassign-dialog-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Enlace «Deshacer» dentro del toast (Radzen.NotificationMessage.SummaryContent). */
.todo-item-toast-undo {
    margin-left: 4px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* ==========================================================================================
   Filtros del listado (CU 1103, INC-25; CU-31 flujo 3; README «03 · Listado de avisos»): chips
   rápidos, «Creados por mí para otros» y desplegables, compartidos por las dos pestañas.
   ========================================================================================== */

.todo-item-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.todo-item-filter-chip-separator {
    width: 1px;
    height: 20px;
    background-color: #E6E8EC;
    margin: 0 2px;
}

.todo-item-filter-dropdowns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}

.todo-item-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.todo-item-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #3F4A5C;
}

/* Responsable bloqueado en «yo» dentro de «Mis avisos» (README, «03 · Listado»). */
.todo-item-filter-locked {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    background-color: #F7F8FA;
    border: 1px solid #E6E8EC;
    border-radius: 4px;
    color: #6B7280;
    font-size: 13px;
}

/* Tiempo real (CU-26, CA-31.12): fundido de 120-200 ms en los cambios de estilo de la fila
   (fondo de vencido/seleccionada) cuando llega TodoItemChanged; sin rebotes ni bucles. */
.todo-item-page-grid .rz-data-row,
.todo-item-page-grid .rz-data-row > td {
    transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================================
   Hilo de comentarios (CU 1103, INC-26; CU-08, CU-10, CU-26, CU-34; README «04 · Panel lateral»,
   «Hilo de comentarios»): avatar de iniciales, autor y fecha; marcas de sistema en gris y en
   línea, SIN burbuja; caja «Añadir comentario…» que guarda al momento.
   ========================================================================================== */

.todo-item-comment-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid #E6E8EC;
}

.todo-item-comment-thread-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #3F4A5C;
}

.todo-item-comment-thread-loading {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.todo-item-comment-empty {
    font-size: 12px;
    color: #9AA1AB;
}

.todo-item-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.todo-item-comment {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.todo-item-comment-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.todo-item-comment-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.todo-item-comment-author {
    font-size: 12px;
    font-weight: 700;
    color: #1A2332;
}

.todo-item-comment-date,
.todo-item-comment-system-date {
    font-size: 11px;
    color: #9AA1AB;
}

.todo-item-comment-text {
    margin: 0;
    font-size: 12.5px;
    color: #3F4A5C;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* Marca de sistema: gris, en línea, sin burbuja ni avatar (README). */
.todo-item-comment-system {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
    font-size: 11.5px;
    color: #6B7280;
}

.todo-item-comment-system .material-symbols-outlined {
    font-size: 14px !important;
}

.todo-item-comment-system-text {
    flex: 1 1 auto;
    min-width: 0;
}

.todo-item-comment-composer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.todo-item-comment-composer-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
    Capa de avisos en la agenda del dashboard (CU 1103, INC-28; ServiceLaunchCalendar.razor;
    design_handoff_avisos/README.md, «01 · Agenda con avisos» y «Sistema semántico del aviso»).
    Los lanzamientos no llevan ninguna de estas clases: su aspecto no cambia (D-42).
*/

.todo-item-agenda-layers {
    padding-bottom: 4px;
}

.todo-item-agenda-truncated {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    background: #FFF8E6;
    color: #6B4A00;
    font-size: 13px;
}

.todo-item-agenda-truncated .material-symbols-outlined {
    font-size: 16px;
}

/* Franja "De días anteriores" (vista Día, CA-29.4). */
.todo-item-agenda-overdue-strip {
    border: 1px solid #E6E8EC;
    border-radius: 6px;
    padding: 6px 10px;
}

.todo-item-agenda-overdue-strip-title {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    margin-bottom: 4px;
}

.todo-item-agenda-overdue-strip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-left: 4px solid transparent;
    cursor: pointer;
}

.todo-item-agenda-overdue-strip-row:hover {
    background: #F7F8FA;
}

.todo-item-agenda-overdue-strip-check {
    flex: 0 0 auto;
}

.todo-item-agenda-overdue-strip-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Evento de punto del aviso en el RadzenScheduler (README: altura mínima ~26 px, fondo blanco,
   borde izquierdo de 4 px, campana). El color y el fondo vencido se fijan inline desde
   AppointmentRender (dependen del estado); aquí solo la forma. */
.todo-item-agenda-point-event {
    display: flex !important;
    align-items: center;
    gap: 4px;
    border-radius: 3px;
    padding: 2px 6px;
    overflow: hidden;
}

.todo-item-agenda-point-event-overdue {
    font-weight: 600;
}

.todo-item-agenda-point-icon {
    font-size: 14px !important;
    flex: 0 0 auto;
}

.todo-item-agenda-point-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

/* Popover del aviso (300 ms, ~320 px; CU-29 flujo 6). */
.todo-item-agenda-popover {
    max-width: 320px;
}

.todo-item-agenda-popover-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 260px;
}

.todo-item-agenda-popover-title {
    font-weight: 600;
}

.todo-item-agenda-popover-due-overdue {
    color: #B81E26;
    font-weight: 700;
}

.todo-item-agenda-popover-meta {
    font-size: 12px;
    color: #6B7280;
}

.todo-item-agenda-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
}

/*
    Línea de la hora actual (CA-29.5). NO CONFIRMADO: el porcentaje lo calcula
    TodoItemAgendaCurrentTimeLine sobre la fracción del día (0-100%) y aquí se posiciona sobre TODO
    el contenedor del RadzenScheduler (cabecera de vistas + rejilla horaria incluidas), así que el
    0%/100% no coincide exactamente con la medianoche visual de la rejilla. Requiere calibrar a
    ojo en el navegador (o mover el cálculo a JS leyendo el alto real de la rejilla) antes de dar
    esta pieza por cerrada.
*/
.todo-item-agenda-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid #B81E26;
    z-index: 5;
    pointer-events: none;
}

/* ==========================================================================================
   Acceso «Avisos (N)» de las fichas (CU 1103, INC-37-ui; CU-37): botón de la columna de botones
   verticales de cada ficha (.vertical-button de main.css, mismo estilo que «Seguimiento»). Con 0
   avisos abiertos se atenúa (sigue activo para crear o ver los cerrados).
*/
.vertical-button.todo-item-entity-button-dimmed {
    opacity: .6;
}

/* ==========================================================================================
   Modal lateral «Avisos de …» de una entidad (CU 1103, INC-37-ui; CU-37; README «06 · Pestaña
   lateral»): cabecera con código y contadores, interruptor y rejilla simplificada de /todo-items
   (EntityTodoItemsList). Abierto por EntityTodoItemsDrawerLauncher (DialogService.OpenSideAsync),
   mismo mecanismo que el panel de aviso (.todo-item-side-dialog).
*/
.rz-dialog-side.todo-item-entity-drawer {
    border-top: 4px solid #B81E26;
    box-shadow: -12px 0 32px rgba(26, 35, 50, .16);
}

.todo-item-entity-drawer .rz-dialog-side-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* La máscara es hermana del modal: solo se tiñe mientras el modal de avisos está abierto. */
body:has(.todo-item-entity-drawer) .rz-dialog-mask {
    background-color: rgba(26, 35, 50, .12);
}

.todo-item-entity-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.todo-item-entity-drawer-header {
    padding: 18px 20px;
    border-bottom: 1px solid #E6E8EC;
}

.todo-item-entity-drawer-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.todo-item-entity-drawer-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: #1A2332;
}

.todo-item-entity-drawer-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #3F4A5C;
}

.todo-item-entity-drawer-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid #E6E8EC;
}

.todo-item-entity-drawer-toggle-label {
    font-size: 13px;
}

.todo-item-entity-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 20px 16px;
}