/* === base.css === */
/**
 * CSS Base - Reset y normalización mínima
 * Inicializa márgenes, paddings, borders y asegura compatibilidad entre navegadores
 */

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* Elementos básicos */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 500;
}

p {
    margin: 0;
}

button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Eliminar estilos por defecto de botones */
button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* Sin outline al tomar foco en ningún elemento (evitar borde al hacer click) */
*:focus {
    outline: none;
}

/* Imágenes responsivas */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Listas */
ul,
ol {
    list-style: none;
}

/* Enlaces */
a {
    text-decoration: none;
    color: inherit;
}

/* Tablas */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Prevenir selección de texto en elementos interactivos */
button,
.btn {
    user-select: none;
    -webkit-user-select: none;
}

/* Cursor pointer para elementos con data-action (excepto disabled) */
[data-action]:not(.disabled) {
    cursor: pointer;
}

.disabled,
[disabled] {
    color: #9ca3af !important;
}

.readonly-field {
    background-color: #f9fafb;
}

.hidden {
    display: none !important;
}

/* ========== UI components (from ui-base) ========== */
/* NOTIFICATIONS */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 400px;
}

.notification {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 300px;
    max-width: 400px;
    word-wrap: break-word;
    position: relative;
    overflow: hidden;
}

.notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #0066cc;
}

.notification.notification-success::before {
    background: #28a745;
}

.notification.notification-error::before {
    background: #dc3545;
}

.notification.notification-warning::before {
    background: #ffc107;
}

.notification.notification-info::before {
    background: #0066cc;
}

.notification-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    font-size: 18px;
    font-weight: bold;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 500;
    margin: 0 0 4px 0;
    font-size: 14px;
}

.notification-message {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.notification-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    border-radius: 2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

@keyframes slideInDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-50px);
        opacity: 0;
    }
}

@keyframes notificationFlash {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes headerAppIconSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-slide-in-down {
    animation: slideInDown 0.3s ease-out forwards;
}

.animate-slide-out-up {
    animation: slideOutUp 0.3s ease-out forwards;
}

.notification-flash {
    animation: notificationFlash 0.5s ease-in-out;
}

@media (max-width: 450px) {
    .notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .notification {
        min-width: auto;
        max-width: none;
    }
}

/* MODALS */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay:not(.hidden) {
    opacity: 1;
}

.modal-container {
    position: relative;
    max-height: 100vh;
    margin-top: -1ex;
}

@media (min-width: 769px) {
    .modal-container {
        padding: 10px;
    }
}

.modal-dialog {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    min-width: 250px;
    min-height: 200px;
    max-height: 95vh;
    overflow: hidden;
    position: relative;
}

.resize-handle {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    z-index: 50;
    opacity: 0.7;
    user-select: none;
    touch-action: none;
}

.resize-handle::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 45%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.25) 55%, transparent 55%),
        linear-gradient(135deg, transparent 65%, rgba(0, 0, 0, 0.25) 65%, rgba(0, 0, 0, 0.25) 75%, transparent 75%);
}

@media (min-width: 769px) {
    .modal-dialog {
        width: 100%;
        max-height: 92vh;
        max-width: min(1200px, calc(95vw - 20px));
    }
}

@media (max-width: 450px) {
    .modal-dialog {
        max-width: 96vw;
        margin: 8px;
    }

    .modal-dialog.modal-prompt,
    .modal-dialog[data-type="prompt"],
    .modal-dialog[data-type="confirm"] {
        max-width: 85vw;
        margin: 20px;
    }
}

.dialog-hidden {
    visibility: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    padding-bottom: 0;
    border-bottom: 1px solid #e0e0e0;
    cursor: grab;
}

.modal-header:active {
    cursor: grabbing;
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

.modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    overflow: visible;
}

@media (max-width: 450px) {
    .modal-body {
        padding: 8px;
    }
}

.modal-message {
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.modal-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.modal-input:focus {
    outline: none;
    border-color: #0066cc;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid #e0e0e0;
}

.btn {
    padding: 8px 16px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

/* SORTABLE / ORDENABLE */
.sortable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sortable-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    cursor: move;
    transition: all 0.2s ease;
    justify-content: space-between;
}

.sortable-item.dragging {
    cursor: grabbing;
}

.sortable-handle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: grab;
    user-select: none;
}

.sortable-handle:active {
    cursor: grabbing;
}

.sortable-content {
    flex: 1;
    font-size: 14px;
}

.sortable-placeholder {
    border-radius: 6px;
    margin-bottom: 8px;
    pointer-events: none;
}

.ordenable {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: opacity 0.2s ease;
    justify-content: space-between;
}

.ordenable.dragging {
    opacity: 0.4;
    pointer-events: none;
}

.asa {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: grab;
    user-select: none;
}

.asa:active {
    cursor: grabbing;
}

.sortable-insert-indicator {
    height: 2px;
    margin: 2px 0;
    border-radius: 1px;
    pointer-events: none;
}

.ordenable.sortable-insert-before {
    border-top-width: 2px;
    border-top-style: solid;
}

.ordenable.sortable-insert-after {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.sortable-drag-clone {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.9;
    transition: none;
    cursor: grabbing;
}

/* HEADER - botón volver (derecha) y logout (derecha); ocultos hasta updateHeader */
#app-header .header-back-btn,
#app-header .header-logout-btn {
    height: var(--app-header-height, 56px);
    width: fit-content;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
}

#app-header .header-back-btn svg,
#app-header .header-logout-btn svg {
    width: var(--header-logout-icon-size, 20px);
    height: var(--header-logout-icon-size, 20px);
}

#app-header[data-header-right="back"] .header-back-btn {
    display: flex;
}

#app-header[data-header-right="logout"] .header-logout-btn {
    display: flex;
}

#app-header .header-back-btn {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#app-header .header-logout-btn {
    -webkit-tap-highlight-color: transparent;
}

#app-header .header-user-label {
    position: absolute;
    right: var(--header-user-label-right-offset, 8px);
    top: 70%;
    font-size: var(--header-user-label-font-size, 11px);
    line-height: 1;
    padding-top: var(--header-user-label-top-offset, 4px);
    white-space: nowrap;
}

/* Icono de app en header (izquierda). Debe quedar dentro del encabezado. */
#app-header .header-app-icon-btn {
    position: absolute;
    left: 3px;
    top: 4px;
    width: calc(var(--app-header-height, 56px) - 8px);
    height: calc(var(--app-header-height, 56px) - 8px);
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#app-header .header-app-icon-btn:focus,
#app-header .header-app-icon-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

#app-header .header-app-icon-left {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    display: block;
    pointer-events: none;
    border: none;
}

#app-header .header-app-icon-left.header-app-icon-spin {
    animation: headerAppIconSpin 1.5s linear 1;
}

/* ========== TableRenderer (structure, from pria_demo) ========== */
.table-column-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px;
}

.table-column-_recordNumber,
th.table-column-_recordNumber {
    cursor: default !important;
}

th.table-column-_recordNumber:hover {
    background-color: inherit !important;
    color: inherit !important;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

/* Contenedor que mantiene etiqueta + icono de ordenación en una sola línea */
.column-header-content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.column-title {
    display: inline-block;
    vertical-align: middle;
}

.sort-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

th {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
}

td {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.table-checkbox-header {
    width: 60px;
    text-align: center;
    padding: 4px;
}

.table-checkbox-header .table-header-select-button {
    margin: 0;
}

.table-actions-header {
    width: 44px;
    min-width: 44px;
    text-align: center;
}

.table-header-checkbox {
    cursor: pointer;
}

.table-action-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.table-menu-button {
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-menu-button .icon,
.table-row-action-button .icon {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.virtual-scroll-container {
    height: auto;
    max-height: calc(100vh - 164px);
    overflow-y: auto;
    position: relative;
    border: 0;
}

.virtual-scroll-spacer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    pointer-events: none;
    visibility: hidden;
    z-index: -1;
}

.virtual-scroll-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.virtual-scroll-thead-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    box-shadow: 2px 2px 5px lightgray;
}

/* Tabla de registros en estrecho: listview por ficha (activado por JS: record-table--mobile) */
/* Solo el <th> de la primera columna visible permanece (ordenación respecto a esa columna; ver TABLE_RENDER.md) */
.record-table--mobile thead .table-column-header:not(.table-column-header--listview-primary) {
    display: none;
}

.record-table--mobile .table-record-card-cell {
    width: 100%;
    padding: 5px 6px;
    vertical-align: top;
    border-bottom: 1px solid #e5e7eb;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.record-table--mobile .table-record-card__toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.record-table--mobile .table-record-card__record-number {
    color: #6b7280;
    font-size: 12px;
    line-height: 1;
}

.record-table--mobile .table-record-card__line {
    margin-top: 2px;
}

.record-table--mobile .table-record-card__line--primary .table-data-cell {
    font-weight: bold;
}

.record-table--mobile .table-record-card__row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.record-table--mobile .table-record-card__col-label {
    flex: 0 0 auto;
    max-width: 50%;
    font-weight: 700;
    color: var(--text-muted, #6b7280) !important;
    white-space: nowrap;
    font-size: 90%;
    width: 30%;
    margin-right: 3px;
}

.record-table--mobile .table-record-card__col-value-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.record-table--mobile .table-record-card__col-value-scroll .table-data-cell {
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    font-size: 0.85rem;
}

/* Misma alineación que en celdas td del modo tabla (N/F a la derecha, etc.) */
.record-table--mobile .table-record-card__col-value-scroll .table-data-cell.align-right {
    display: block;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
}

.record-table--mobile .table-record-card__col-value-scroll .table-data-cell.align-center {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.record-table--mobile .table-record-card__line--primary .table-data-cell.enlace {
    font-weight: 400;
}

.drag-handle {
    cursor: grab;
    user-select: none;
    -webkit-user-drag: element;
}

.drag-handle:active {
    cursor: grabbing;
}

.table-row.dragging {
    opacity: 0.5;
}

.virtual-table {
    width: 100%;
    table-layout: fixed;
    position: relative;
}

.virtual-table tr {
    position: absolute;
    width: 100%;
    box-sizing: border-box;
}

#header-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.header-title-main {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Cabecera global (#header-title): en estrecho el contador debe subir para no solaparse con la zona derecha (login gestor / nombre alumno). No quitar el margen negativo ni el media sin revisar ese layout. */
.header-title-counter {
    font-size: 0.75em;
    font-weight: normal;
    margin-top: -10px;
}

@media (max-width: 450px) {
    #header-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

.table-header-select-button {
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    border-radius: 4px;
    word-break: break-all;
    text-align: center;
    line-height: 1;
}

/* ----- Contenedor pantalla entidad: búsqueda arriba, lista abajo ----- */
.entity-screen-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ----- Filtro de búsqueda encima de listas de entidad ----- */
.results-filter-container {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    width: 100%;
    border-radius: 10px;
    padding: 10px;
}

.filter-input-container {
    position: relative;
    flex: 1;
}

.filter-input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.filter-input-icon-search {
    left: 12px;
    font-size: 14px;
}

/* Iconos SVG monocromo (heredan color y tamaño del contexto) */
svg.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
}

.filter-input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid transparent;
}

.filter-input.has-search-icon {
    padding-left: 40px;
}

.filter-clear-button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    display: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.filter-clear-button.visible {
    display: flex;
}

.filter-help {
    margin-left: 15px;
    position: relative;
}

.filter-help-icon {
    cursor: pointer;
    font-size: 1.2rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.filter-help-tooltip {
    position: absolute;
    right: 0;
    top: 100%;
    width: 300px;
    border-radius: 8px;
    padding: 16px;
    z-index: 100;
    display: none;
    margin-top: 8px;
    border: 1px solid transparent;
}

.filter-help-icon:hover+.filter-help-tooltip {
    display: block;
}

.filter-help-tooltip p {
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.4;
}

/* ----- Header y título de pantalla (BaseScreen / BaseEntityScreen) ----- */
.screen-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid transparent;
}

.screen-title {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.screen-counter {
    font-size: 0.9rem;
    text-align: center;
    margin-top: 5px;
    font-weight: normal;
}

.filter-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.filter-action-btn i {
    font-size: 12px;
}

.filter-content {
    padding: 15px;
}

/* Widget plugin: TABS */
.frm-tabs {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.frm-tabs-headers {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.frm-tabs-header {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #ffffff;
    color: #333333;
    white-space: nowrap;
    padding: 8px 12px;
    line-height: 1.2;
}

.frm-tabs-header.active {
    border-color: #0066cc;
    color: #0066cc;
    font-weight: 500;
}

.frm-tabs-panels {
    display: grid;
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.frm-tabs-panel {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    max-height: 100%;
}

/* Widget plugin: CALENDARIO (estructura/base) */
.calendar-widget {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    max-width: 1480px;
    width: 100%;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.calendar-selection-label {
    font-size: 0.92rem;
    font-weight: 600;
}

.calendar-resource-select {
    min-width: 120px;
    height: 34px;
    border-radius: 8px;
    padding: 0 10px;
    border: 1px solid transparent;
}

.calendar-months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
}

.calendar-month-card {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px;
    min-width: 0;
}

.calendar-month-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.calendar-month-table {
    width: 100%;
    table-layout: fixed;
}

.calendar-month-table th,
.calendar-month-table td {
    text-align: center;
    padding: 2px;
    font-size: 0.75rem;
}

.calendar-day-btn {
    width: 100%;
    min-height: 26px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.78rem;
}

.calendar-day-btn.is-disabled {
    opacity: 0.45;
    cursor: default;
}

.calendar-day-btn.is-full-day,
.calendar-day-btn.is-incidencia-day,
.calendar-day-btn.is-holiday-day {
    cursor: default;
}

.calendar-empty-cell {
    visibility: hidden;
}

/* Tablas: estado vacío (cuando no hay filas visibles) */
.table-empty-row .table-empty-cell {
    text-align: center;
    padding: 14px 10px;
    color: #666;
    font-size: 0.95rem;
}

.calendar-slots-dialog {
    min-width: 720px;
    max-width: 100%;
}

.calendar-slots-resource-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.calendar-slots-resource-label {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.calendar-slots-resource-select {
    flex: 1;
    min-width: 0;
}

.calendar-slots-hint {
    font-size: 0.88rem;
    margin-bottom: 8px;
}

.calendar-slots-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.calendar-slots-nav-date {
    font-size: 0.95rem;
    font-weight: 600;
}

.calendar-slots-nav-btn {
    width: 34px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
}

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

.calendar-slots-table {
    width: 100%;
    border-collapse: collapse;
    min-width: max-content;
}

.calendar-slots-table th,
.calendar-slots-table td {
    padding: 8px 10px;
    border: 1px solid transparent;
    text-align: left;
    font-size: 0.9rem;
    user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 450px) {

    .calendar-slots-table th,
    .calendar-slots-table td {
        padding: 6px 8px;
        font-size: 0.82rem;
    }
}

.calendar-slot-row {
    cursor: pointer;
}

.calendar-slot-row td {
    cursor: pointer;
}

.calendar-slots-dialog-wrap.is-readonly .calendar-slot-row,
.calendar-slots-dialog-wrap.is-readonly .calendar-slot-row td {
    cursor: default;
}

@media (max-width: 840px) {
    .calendar-slots-dialog {
        min-width: 0;
    }
}

/* === app-base.css === */
/**
 * Estructura de aplicación (layout) independiente de tema.
 * - Header fijo en la parte superior
 * - #app-container: zona scrollable bajo el header
 * - Pantallas centradas (Login/Menu) dentro del contenedor
 */

:root {
    --app-header-height: 56px;
    --focus-ring-inner-color: var(--bg-primary, #ffffff);
    --focus-ring-outer-color: var(--primary-color, #4d86ff);
}

html,
body {
    height: 100%;
}

body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Indicador SSE de reconexión (portado de Nautilus) */
.sse-reconnection-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    min-width: 220px;
    text-align: center;
    border: 2px solid #fff;
    color: #fff;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35);
    animation: sse-pulse 2s infinite;
}

.sse-reconnection-indicator .status-text {
    margin-bottom: 4px;
    font-weight: 600;
}

.sse-reconnection-indicator .attempt-text {
    font-size: 12px;
    opacity: 0.9;
}

@keyframes sse-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Diálogos modales: botón cerrar (×) y menú … del editor — tabindex=-1 en ui.js; sin anillo ni borde al foco */
.modal-dialog .modal-close:focus,
.modal-dialog .modal-close:focus-visible,
.modal-dialog .modal-close:active,
.modal-dialog .edit-dialog-header-menu-trigger:focus,
.modal-dialog .edit-dialog-header-menu-trigger:focus-visible,
.modal-dialog .edit-dialog-header-menu-trigger:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Header ocupa todo el borde superior */
#app-header {
    flex: 0 0 var(--app-header-height);
    height: var(--app-header-height);
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
    position: relative;
}

/* Título centrado sin tener en cuenta los botones */
#app-header .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Icono de app: pegado a la izquierda; no afecta al centrado del título */
#app-header .header-app-icon-left {
    position: absolute;
    left: 3px;
    top: 4px;
    bottom: 4px;
    height: auto !important;
    max-height: calc(var(--app-header-height, 56px) - 8px) !important;
    width: auto !important;
    object-fit: contain;
    pointer-events: none;
    border: none;
}

/* Zona scrollable bajo el header */
#app-container {
    flex: 1 1 auto;
    overflow: auto;
    width: 100%;
}

/* Viewport de pantalla: contenido anclado arriba (no se re-centra al filtrar) */
#app-container.screensContainer {
    display: block;
    padding: 0;
    padding-top: 7px;
    padding-right: 10px;
}

/* Contenedor de cada pantalla inyectada por ScreenManager */
#app-container.screensContainer .screen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    margin-top: -10px;
}

.screen.screen-menualumno {
    padding: 6px;
}

/* Pantallas de entidad (búsqueda + tabla): ancladas arriba, no se re-centran al filtrar */
#app-container.screensContainer .screen:has(.entity-screen-content) {
    align-items: flex-start;
    justify-content: flex-start;
}

/* Recuadro del contenido: caja con sombra (estructura solo) */
.screen-frame {
    width: 100%;
    max-width: 600px;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Pantalla Reservar: permitir calendario ancho y responsivo */
#app-container.screensContainer .screen .screen-frame.screen-frame-reservar {
    max-width: 1480px;
    width: min(1480px, calc(100vw - 40px));
}

/* Formulario de login dentro del frame */
.screen-frame .form-group {
    margin-bottom: 1rem;
}

.screen-frame .form-group label {
    display: block;
    margin-bottom: 0.25rem;
}

.screen-frame .form-group input[type="text"],
.screen-frame .form-group input[type="password"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    box-sizing: border-box;
}

.screen-frame .form-group .login-secret-input.masked {
    -webkit-text-security: disc;
    text-security: disc;
}

.screen-frame .screen-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Menú: lista de botones */
.screen-frame .menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.screen-frame.screen-frame-menu .menu-buttons {
    gap: 0.75rem;
}

.screen-frame.screen-frame-menu .menu-buttons-hidden {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.screen-frame.screen-frame-menu .menu-buttons-hidden.is-visible {
    display: flex;
}

/* Menú gestor: opciones de desarrollo (p. ej. gendata full) siguen en el DOM pero no se muestran */
.screen-frame.screen-frame-menu .menu-button-suppressed {
    display: none !important;
}

.screen-frame.screen-frame-menu .screen-title[data-action="toggle-menu-hidden"] {
    cursor: pointer;
}

/* Menú alumno (suplantación): minificha bajo el título */
.menualumno-ficha {
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    text-align: left;
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    background: var(--surface-muted, rgba(0, 0, 0, 0.03));
}

.menualumno-ficha-nombre {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.menualumno-ficha-meta {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted, #666);
    line-height: 1.4;
}

.menualumno-ficha-meta+.menualumno-ficha-meta {
    margin-top: 0.2rem;
}

/* Menú alumno (suplantación): resumen arriba */
.menualumno-resumen {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 0 1.1rem 0;
    text-align: left;
}

.menualumno-resumen-block {
    margin: 0;
}

.menualumno-resumen-k {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.72;
    margin-bottom: 0.35rem;
}

.menualumno-resumen-link {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    word-break: break-word;
    cursor: pointer;
    color: var(--primary-color, #0066cc);
    text-decoration: none;
    transition: text-decoration-color 0.12s ease;
}

.menualumno-resumen-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.menualumno-resumen-link:focus-visible {
    outline: 2px solid var(--primary-color, #0066cc);
    outline-offset: 2px;
    border-radius: 2px;
}

.screen-frame .menu-buttons .menu-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.screen-frame.screen-frame-menu .menu-buttons .menu-button {
    transition: none;
}

.screen-frame .menu-button:active {
    transform: translateY(0);
}

.screen-frame .menu-buttons .menu-button .menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex: 0 0 28px;
}

.screen-frame .menu-buttons .menu-button .menu-label {
    flex: 1 1 auto;
    text-align: left;
}

.screen-frame .login-button {
    width: 100%;
    margin-top: 1rem;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.screen-frame .login-button:active {
    transform: translateY(0);
}

.screen-frame .login-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring-inner-color), 0 0 0 6px var(--focus-ring-outer-color);
}

@media (max-width: 450px) {
    #app-container.screensContainer {
        padding: 10px 0 !important;
    }

    #app-header {
        padding: 0 10px;
    }

    .screen-frame {
        padding: 1.5rem;
        border-radius: 8px;
    }

    .screen-frame.screen-frame-menu .menu-buttons {
        gap: 0.3rem;
    }

    .screen-frame.screen-frame-menu .menu-buttons .menu-button {
        padding: 0px 10px;
        font-size: 0.9rem;
    }

    .screen-frame.screen-frame-menu .menu-buttons .menu-button .menu-icon {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        flex: 0 0 26px;
    }

    /* Listview / fichas móviles: forzar alineación izquierda en todos los valores */
    .record-table--mobile .table-record-card__col-value-scroll .table-data-cell {
        text-align: left !important;
    }
}

/* ======= Pestaña Útiles (ficha alumno) ======= */
.utiles-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.75rem;
    padding: 0.75rem 1rem 0;
}

.utiles-fields .form-group-half {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.utiles-fields .form-group-half label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color);
}

.utiles-value {
    font-size: 0.9rem;
    color: var(--text-color);
    padding: 0.3rem 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    word-break: break-all;
    min-height: 1.8rem;
    display: flex;
    align-items: center;
}

.btn-half-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 1rem 0.75rem;
}

.btn-half-row .form-action-button {
    flex: 1;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.btn-half-row .form-action-button.secondary {
    background-color: var(--bg-secondary);
    color: var(--text-color);
}

.btn-half-row .form-action-button.secondary:hover:not(:disabled) {
    background-color: var(--hover-color);
    border-color: var(--border-color);
}

.btn-half-row .form-action-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 450px) {
    .utiles-fields {
        grid-template-columns: 1fr;
    }

    .btn-half-row {
        flex-direction: column;
    }
}

/* ========== Diálogo de edición (estructura y formulario) ========== */
.popup-content.edit-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: min(325px, calc(100vw - 10px));
    max-width: calc(100vw - 4px);
    max-height: calc(95vh - 88px);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--modal-bg, var(--bg-primary));
    color: var(--text-color);
}

.popup-content.edit-dialog .popup-header {
    flex-shrink: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--modal-border, var(--border-color));
}

.popup-content.edit-dialog .popup-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.popup-content.edit-dialog .popup-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary, var(--text-muted));
    margin-top: 2px;
}

.popup-content.edit-dialog .popup-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 1rem 4rem;
}


@media (max-width: 450px) {
    .popup-content.edit-dialog .popup-body {
        padding: 4px;
    }
}

.popup-content.edit-dialog .popup-footer {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--modal-border, var(--border-color));
    background: var(--modal-bg, var(--bg-primary));
}

/* Envíos: pestaña Info (placeholders) */
.envios-help {
    padding: 0.25rem 0.15rem 0.75rem;
}

.envios-help-lead {
    margin: 0 0 1rem;
    line-height: 1.55;
    color: var(--text-secondary, #444);
    font-size: 0.95rem;
}

.envios-help-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.92rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    overflow: hidden;
}

.envios-help-table thead {
    background: var(--bg-tertiary, #f3f4f6);
}

.envios-help-table th,
.envios-help-table td {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.envios-help-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.envios-help-table tbody tr:last-child td {
    border-bottom: none;
}

.envios-help-col-ph {
    width: 38%;
}

.envios-help-col-ex {
    width: 62%;
}

.envios-help-ph code {
    font-size: 0.85rem;
    word-break: break-word;
}

.envios-help-ex {
    line-height: 1.5;
    color: var(--text-color, #222);
}

.popup-content.edit-dialog .popup-footer {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--modal-border, var(--border-color));
    background: var(--modal-bg, var(--bg-primary));
}

.popup-content.edit-dialog .popup-footer button {
    min-width: 5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.popup-content.edit-dialog .popup-footer button.primary {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.popup-content.edit-dialog .popup-footer button.primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.popup-content.edit-dialog .popup-footer button.secondary {
    background-color: var(--bg-secondary);
    color: var(--text-color);
    border-color: var(--border-color);
}

.popup-content.edit-dialog .popup-footer button.secondary:hover:not(:disabled) {
    background-color: var(--hover-color);
    border-color: var(--border-color);
}

.popup-content.edit-dialog .popup-footer button.danger {
    background-color: var(--error-color);
    color: #fff;
    border-color: var(--error-color);
}

.popup-content.edit-dialog .popup-footer button.danger.edit-dialog-footer-extra {
    color: #fff;
}

.popup-content.edit-dialog .popup-footer button.danger:hover:not(:disabled) {
    filter: brightness(0.95);
}

.popup-content.edit-dialog .popup-footer button.navigation-button {
    min-width: 2.5rem;
    padding: 0.4rem;
    background-color: var(--bg-secondary);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.popup-content.edit-dialog .popup-footer button.navigation-button:hover:not(:disabled) {
    background-color: var(--hover-color);
}

.modal-dialog[data-type="custom"] .modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.edit-dialog-header-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    border-radius: 4px;
}

.edit-dialog-header-menu-trigger:hover {
    background-color: var(--hover-color);
}

.edit-dialog-header-menu-trigger .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.edit-dialog-title-text {
    font-weight: 600;
}

.edit-dialog-count {
    font-size: 0.8rem;
    font-weight: normal;
    color: lightcyan;
}

.edit-dialog-header-menu.context-menu {
    min-width: 140px;
}

/* En el editor, los botones "extra" (Cancelar/Eliminar/Salir) se ocultan por espacio real
   cuando la botonera hace wrap (ver EntidadFrmEdicion._updateEditDialogFooterVisibility).
   No usar un corte fijo por ancho. */

/* Formulario de entidad en diálogo: grid media/columna entera */
.entity-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.entity-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
}

.entity-form .form-group-half,
.entity-form .form-group-full {
    min-width: 0;
    width: 100%;
}

.entity-form .form-group-full {
    grid-column: span 2;
}

@media (max-width: 450px) {
    .entity-form .form-row {
        grid-template-columns: 1fr;
    }

    .entity-form .form-group-full,
    .entity-form .form-group-half {
        grid-column: span 1;
    }

    /* Fila con al menos un campo frm.mediaFilaMovil: dos columnas; el resto de medias en esa fila pasan a ancho completo. */
    .entity-form .form-row:has(.form-group-media-fila-movil) {
        grid-template-columns: 1fr 1fr;
    }

    .entity-form .form-row:has(.form-group-media-fila-movil) .form-group-full {
        grid-column: 1 / -1;
    }

    .entity-form .form-row:has(.form-group-media-fila-movil) .form-group-half:not(.form-group-media-fila-movil) {
        grid-column: 1 / -1;
    }

    .entity-form .form-row:has(.form-group-media-fila-movil) .form-group-half.form-group-media-fila-movil {
        grid-column: span 1;
    }
}

@media (min-width: 769px) {

    #envios-editor-tabs,
    .envios-editor-tabs {
        width: min(850px, 95vw);
    }
}

.popup-content.edit-dialog .entity-form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


.popup-content.edit-dialog .entity-form .form-row {
    justify-items: start;
}

.popup-content.edit-dialog .entity-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
    align-items: stretch;
}

.popup-content.edit-dialog .entity-form .form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    text-align: left;
    margin-top: 3px;
}

.popup-content.edit-dialog .entity-form .form-group input[type="text"],
.popup-content.edit-dialog .entity-form .form-group input[type="email"],
.popup-content.edit-dialog .entity-form .form-group input[type="number"],
.popup-content.edit-dialog .entity-form .form-group input[type="date"],
.popup-content.edit-dialog .entity-form .form-group input[type="datetime-local"],
.popup-content.edit-dialog .entity-form .form-group select,
.popup-content.edit-dialog .entity-form .form-group textarea {
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-color);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
}

.popup-content.edit-dialog .entity-form .form-group input[type="text"]:disabled,
.popup-content.edit-dialog .entity-form .form-group input[type="email"]:disabled,
.popup-content.edit-dialog .entity-form .form-group input[type="number"]:disabled,
.popup-content.edit-dialog .entity-form .form-group input[type="date"]:disabled,
.popup-content.edit-dialog .entity-form .form-group input[type="datetime-local"]:disabled,
.popup-content.edit-dialog .entity-form .form-group select:disabled,
.popup-content.edit-dialog .entity-form .form-group textarea:disabled {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.popup-content.edit-dialog .entity-form .form-group input[type="text"][readonly],
.popup-content.edit-dialog .entity-form .form-group input[type="email"][readonly],
.popup-content.edit-dialog .entity-form .form-group input[type="number"][readonly],
.popup-content.edit-dialog .entity-form .form-group input[type="date"][readonly],
.popup-content.edit-dialog .entity-form .form-group input[type="datetime-local"][readonly],
.popup-content.edit-dialog .entity-form .form-group textarea[readonly],
.popup-content.edit-dialog .entity-form .form-group .readonly-field {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
}

.popup-content.edit-dialog .entity-form .custom-dropdown[data-readonly="true"] .dropdown-trigger {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.popup-content.edit-dialog .entity-form .custom-dropdown[data-readonly="true"] .dropdown-arrow {
    opacity: 0.55;
}

.popup-content.edit-dialog .entity-form .form-group input.validation-error,
.popup-content.edit-dialog .entity-form .form-group select.validation-error,
.popup-content.edit-dialog .entity-form .form-group textarea.validation-error,
.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-trigger.validation-error {
    border-color: #d32f2f;
}

.popup-content.edit-dialog .entity-form .form-group input:focus,
.popup-content.edit-dialog .entity-form .form-group select:focus,
.popup-content.edit-dialog .entity-form .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.popup-content.edit-dialog .entity-form .form-group .form-checkbox {
    width: auto;
    min-width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
    align-self: flex-start;
}

.popup-content.edit-dialog .entity-form .form-group .form-checkbox:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.entity-form .form-help-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
}

.entity-form .password-field-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.entity-form .password-change-btn {
    font-size: 0.8rem;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    background-color: var(--bg-secondary);
    color: var(--text-color);
    padding: 0.3rem 0.6rem;
}

.entity-form .password-change-btn:hover:not(:disabled) {
    background-color: var(--hover-color);
    border-color: var(--border-color);
}

.entity-form .password-change-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.entity-form .form-image-b64-field {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
}

.entity-form .form-image-b64-preview {
    display: block;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
}

.entity-form .form-image-b64-readonly-wrap .form-image-b64-preview {
    min-height: 2rem;
}

.entity-form .form-image-b64-file {
    max-width: 100%;
}

.entity-form .form-image-b64-clear {
    font-size: 0.8rem;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    background-color: var(--bg-secondary);
    color: var(--text-color);
    padding: 0.3rem 0.6rem;
}

.entity-form .form-image-b64-clear:hover:not(:disabled) {
    background-color: var(--hover-color);
    border-color: var(--border-color);
}

.entity-form .form-richtext-host.pell,
.entity-form .form-richtext-host .pell {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-primary);
    width: 100%;
    box-sizing: border-box;
}

.entity-form .form-richtext-host .pell-actionbar {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.entity-form .form-richtext-host .pell-content {
    padding: 0.5rem;
    color: var(--text-color);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Pell content: restaurar marcadores de listas (base.css los desactiva globalmente) */
.entity-form .form-richtext-host .pell-content ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.entity-form .form-richtext-host .pell-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
}

/* Desplegable personalizado (custom-dropdown): menú colapsado hasta hacer clic */
.popup-content.edit-dialog .entity-form .form-group .custom-dropdown,
.entity-form .form-group .custom-dropdown {
    position: relative;
    width: 100%;
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-trigger,
.entity-form .form-group .custom-dropdown .dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-color);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-trigger:focus,
.entity-form .form-group .custom-dropdown .dropdown-trigger:focus {
    outline: none;
    border-color: var(--primary-color);
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-value,
.entity-form .form-group .custom-dropdown .dropdown-value {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-controls,
.entity-form .form-group .custom-dropdown .dropdown-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-arrow,
.entity-form .form-group .custom-dropdown .dropdown-arrow {
    font-size: 0.6rem;
    opacity: 0.7;
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-clear-trigger,
.entity-form .form-group .custom-dropdown .dropdown-clear-trigger {
    padding: 0 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-clear-trigger:hover,
.entity-form .form-group .custom-dropdown .dropdown-clear-trigger:hover {
    color: var(--text-color);
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-clear-trigger.hidden,
.entity-form .form-group .custom-dropdown .dropdown-clear-trigger.hidden {
    display: none;
}

/* Menú oculto por defecto; visible solo con clase .show */
.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-menu,
.entity-form .form-group .custom-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    min-width: 100%;
    z-index: 1000;
    margin: 2px 0 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-menu.show,
.entity-form .form-group .custom-dropdown .dropdown-menu.show {
    display: block;
}

/* Al abrir un desplegable ajena, el menú es position:absolute y queda recortado por:
   - .modal-dialog { overflow: hidden }
   - .popup-content.edit-dialog { overflow: hidden }
   - .popup-body { overflow-y: auto } (scroll del formulario) */
.modal-dialog:has(.custom-dropdown .dropdown-menu.show) {
    overflow: visible;
}

.popup-content.edit-dialog:has(.custom-dropdown .dropdown-menu.show) {
    overflow: visible;
}

.popup-content.edit-dialog:has(.custom-dropdown .dropdown-menu.show) .popup-body {
    overflow: visible;
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-option,
.entity-form .form-group .custom-dropdown .dropdown-option {
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-color);
}

.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-option:hover,
.entity-form .form-group .custom-dropdown .dropdown-option:hover,
.popup-content.edit-dialog .entity-form .form-group .custom-dropdown .dropdown-option.selected,
.entity-form .form-group .custom-dropdown .dropdown-option.selected {
    background-color: var(--hover-color, rgba(0, 0, 0, 0.06));
}

/* ========== Diálogos de filtros y configuración de columnas ========== */
.modal-dialog:has(.filter-actions) {
    min-width: 350px;
}

.popup-content.edit-dialog .filter-subtitle {
    margin: 0 0 0.5rem 0;
}

/* Flechas a la izquierda, botones (Todo, Nada, Invertir, Buscar) a la derecha; ningún grupo con ancho fijo */
.popup-content.edit-dialog .filter-actions.context-menu-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0.75rem 0;
    gap: 0.5rem;
}

.popup-content.edit-dialog .filter-navigation,
.popup-content.edit-dialog .filter-selection-buttons {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.popup-content.edit-dialog .filter-navigation button.secondary,
.popup-content.edit-dialog .filter-selection-buttons button.primary,
.popup-content.edit-dialog .filter-selection-buttons button.secondary {
    min-width: auto;
    padding: 0.35rem 0.6rem;
}

.popup-content.edit-dialog .filter-selection-buttons button {
    font-size: 0.8rem;
    font-family: inherit;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.popup-content.edit-dialog .filter-selection-buttons button.primary {
    background-color: var(--primary-color, #0066cc);
    color: #fff;
    border-color: var(--primary-color, #0066cc);
}

.popup-content.edit-dialog .filter-selection-buttons button.primary:hover:not(:disabled) {
    background-color: var(--primary-hover, #0052a3);
    border-color: var(--primary-hover, #0052a3);
}

.popup-content.edit-dialog .filter-selection-buttons button.secondary {
    background-color: var(--bg-secondary, #f8f9fa);
    color: var(--text-color);
    border-color: var(--border-color, #e0e0e0);
}

.popup-content.edit-dialog .filter-selection-buttons button.secondary:hover:not(:disabled) {
    background-color: var(--hover-color, #f0f0f0);
    border-color: var(--border-color, #e0e0e0);
}

.popup-content.edit-dialog .filter-info {
    white-space: nowrap;
}

/* Diálogo de filtro: grid con auto-flow dense para rellenar huecos al ocultar ítems por búsqueda */
.popup-content.edit-dialog .entity-form.filter-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    grid-auto-flow: dense;
}

.popup-content.edit-dialog .entity-form.filter-form .form-group-half {
    grid-column: span 1;
}

.popup-content.edit-dialog .entity-form.filter-form .form-group-full {
    grid-column: 1 / -1;
}

.popup-content.edit-dialog .filter-search-box:not(.hidden) {
    margin-bottom: 0.5rem;
}

.popup-content.edit-dialog .filter-search-box .filter-search-input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    font: inherit;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    box-sizing: border-box;
}

.popup-content.edit-dialog .filter-form .filter-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popup-content.edit-dialog .filter-form .filter-count {
    color: var(--text-muted, #999);
    white-space: nowrap;
    font-size: 0.85rem;
}

.popup-content.edit-dialog .filterActive {
    color: var(--primary-color, #0066cc);
}

.popup-content.edit-dialog .filterInactive {
    color: var(--text-color);
}

/* Diálogo configurar columnas */
.modal-dialog.columns-config-dialog {
    min-width: 200px;
    max-width: min(480px, 90vw);
}

.popup-content.edit-dialog.columns-config-container {
    padding: 0 1rem;
}

.popup-content.edit-dialog.columns-config-container .popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-right: 0;
}

.popup-content.edit-dialog.columns-config-container .popup-header .popup-header-title-block {
    flex: 1;
    min-width: 0;
}

.popup-content.edit-dialog.columns-config-container .popup-header .columns-config-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text-muted, #666);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content.edit-dialog.columns-config-container .popup-header .columns-config-close:hover {
    background-color: var(--hover-color, #f0f0f0);
    color: var(--text-color);
}

.popup-content.edit-dialog.columns-config-container .popup-body.listado {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.popup-content.edit-dialog.columns-config-container .help-text {
    font-size: 0.85rem;
    color: var(--text-secondary, var(--text-muted, #666));
    margin-bottom: 0.5rem;
}

.popup-content.edit-dialog.columns-config-container .selection-buttons-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0;
}

.popup-content.edit-dialog.columns-config-container .selection-buttons-container .selection-button {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    background-color: var(--bg-secondary, #f8f9fa);
    color: var(--text-color);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.popup-content.edit-dialog.columns-config-container .selection-buttons-container .selection-button i {
    font-size: 0.9rem;
}

.popup-content.edit-dialog.columns-config-container .selection-buttons-container .selection-button:hover {
    background-color: var(--hover-color, #f0f0f0);
}

.popup-content.edit-dialog.columns-config-container .listado-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem;
    background-color: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    cursor: grab;
}

.popup-content.edit-dialog.columns-config-container .listado-item.drag-over {
    border-color: var(--primary-color, #0066cc);
    background-color: var(--hover-color, #f0f0f0);
}

.popup-content.edit-dialog.columns-config-container .listado-item.dragging {
    opacity: 0.6;
    cursor: grabbing;
}

.popup-content.edit-dialog.columns-config-container .listado-item .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    color: var(--text-secondary, var(--text-muted, #666));
    cursor: grab;
    border-radius: 4px;
    flex-shrink: 0;
}

.popup-content.edit-dialog.columns-config-container .listado-item .icon-container:hover {
    color: var(--text-color);
    background-color: var(--hover-color, #e8e8e8);
}

.popup-content.edit-dialog.columns-config-container .listado-item .icon-container:active,
.popup-content.edit-dialog.columns-config-container .listado-item.dragging .icon-container {
    cursor: grabbing;
}

.popup-content.edit-dialog.columns-config-container .listado-item .icon-container .fa,
.popup-content.edit-dialog.columns-config-container .listado-item .icon-container i {
    font-size: 0.9rem;
    pointer-events: none;
}

.popup-content.edit-dialog.columns-config-container .listado-item .check-container {
    flex-shrink: 0;
    margin-right: 0.35rem;
}

.popup-content.edit-dialog.columns-config-container .listado-item .form-checkbox {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--primary-color, #0066cc);
    cursor: pointer;
}

/* Campo de búsqueda para claves ajenas con tipoSel 'B' */
.popup-content.edit-dialog .entity-form .form-group .ajena-search-field {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.popup-content.edit-dialog .entity-form .form-group .ajena-search-display {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.popup-content.edit-dialog .entity-form .form-group .ajena-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 4px 4px 0;
    background-color: var(--bg-primary);
    cursor: pointer;
}

.popup-content.edit-dialog .entity-form .form-group .ajena-search-btn .icon {
    width: 1rem;
    height: 1rem;
}

.popup-content.edit-dialog.columns-config-container .listado-item .label {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    color: var(--text-color);
}

.popup-content.edit-dialog.columns-config-container .listado-item .columns-config-sort {
    flex-shrink: 0;
    width: 5.5rem;
    min-width: 0;
    max-width: 6rem;
    padding: 0.2rem 0.25rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    background: var(--bg-primary, #fff);
    color: var(--text-color);
    cursor: pointer;
}

@media (max-width: 500px) {
    .popup-content.edit-dialog.columns-config-container .listado-item .columns-config-sort {
        width: 4.5rem;
        max-width: 4.75rem;
        font-size: 0.72rem;
        padding: 0.15rem 0.15rem;
    }
}

.popup-content.edit-dialog.columns-config-container .popup-footer {
    padding-left: 0;
    padding-right: 0;
}

/* Navegación en tablas de registros - flechas de scroll */
.table-navigation {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.table-navigation:hover {
    opacity: 0.95;
}

.table-navigation.drag-mode {
    opacity: 1.0;
    border: 1px dashed var(--table-nav-drag-border);
    border-radius: 6px;
    padding: 3px;
    background: var(--table-nav-drag-bg);
    box-shadow: var(--table-nav-drag-shadow);
}

.table-navigation.drag-mode .table-nav-btn {
    border: 1px solid var(--table-nav-drag-border);
    box-shadow: 0 0 6px rgba(33, 150, 243, 0.2);
}

.table-navigation.mobile {
    flex-direction: column;
}

.table-navigation.desktop {
    flex-direction: column;
}

.table-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--table-nav-border);
    background: var(--table-nav-bg);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    box-shadow: var(--table-nav-shadow);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.table-nav-btn:hover {
    background: var(--table-nav-hover);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.table-nav-btn:active {
    background: var(--table-nav-active) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(0.95);
    opacity: 1.0 !important;
}

.table-nav-btn.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none;
}

.table-nav-btn .icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    font-weight: bold;
}

.table-nav-middle .icon {
    width: 20px;
    height: 20px;
    stroke-width: 0;
    font-weight: bold;
}

/* Responsive: móvil con ancho <= 450px */
@media (max-width: 450px) {
    .table-navigation.mobile {
        right: 10px;
    }

    .table-nav-btn {
        width: 28px;
        height: 28px;
    }

    .table-nav-btn .icon {
        width: 22px;
        height: 22px;
    }

    .table-nav-middle .icon {
        width: 18px;
        height: 18px;
    }
}