/*
 * Hoja móvil. Se carga con media="(max-width: 1023px)".
 * En un teléfono con "sitio de escritorio" el JS la activa igual (media="all").
 *
 * Tipografía fluida: 4.15vw sobre un viewport inflado (~980px) hace que
 * 1rem se lea bien cuando Chrome encoge toda la página.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: clamp(16px, 4.15vw, 42px);
}

html,
body.fi-body,
body.fi-body-has-navigation,
.fi-simple-layout,
.fi-simple-main-ctn,
.fi-layout,
.fi-main-ctn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
}

body.fi-body {
    min-height: 100dvh;
}

.fi-layout {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.fi-main-ctn {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100% !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.fi-layout > div:has(> .fi-sidebar) {
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.fi-sidebar {
    position: fixed !important;
    inset-block: 0 !important;
    inset-inline-start: 0 !important;
    top: 0 !important;
    z-index: 70 !important;
    display: flex !important;
    height: 100dvh !important;
    width: min(20rem, 88vw) !important;
    max-width: 22rem !important;
    background: #fff !important;
    translate: -110% !important;
    box-shadow: none !important;
}

html.dark .fi-sidebar {
    background: #111827 !important;
}

.fi-sidebar.fi-sidebar-open {
    translate: 0 !important;
    box-shadow: 16px 0 40px rgb(15 23 42 / 0.28) !important;
}

.fi-layout:has(.fi-sidebar.fi-sidebar-open) .fi-sidebar-close-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 65 !important;
    background: rgb(15 23 42 / 0.5) !important;
}

.school-sidebar-toggle-wrap,
.fi-sidebar-open-collapse-sidebar-btn,
.fi-topbar-collapse-sidebar-btn-ctn,
.fi-topbar-open-collapse-sidebar-btn,
.fi-topbar-close-collapse-sidebar-btn {
    display: none !important;
}

.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-item-badge-ctn {
    display: block !important;
    opacity: 1 !important;
    width: auto !important;
}

.fi-sidebar .fi-logo img {
    max-width: 7rem !important;
    max-height: 5rem !important;
}

.fi-topbar-ctn {
    display: block !important;
    position: sticky !important;
    top: 0;
    z-index: 50;
}

.fi-topbar {
    min-height: 3.5rem !important;
    padding: max(0.45rem, env(safe-area-inset-top)) 0.75rem 0.45rem !important;
    gap: 0.65rem;
}

.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    min-height: 3rem !important;
}

.fi-topbar-open-sidebar-btn:not([style*="display: none"]),
.fi-topbar-close-sidebar-btn:not([style*="display: none"]) {
    display: inline-flex !important;
}

.fi-topbar-start {
    display: flex !important;
    align-items: center;
    min-width: 0;
    margin-inline-end: 0 !important;
}

.fi-topbar .fi-logo,
.fi-topbar .fi-logo img {
    height: 2.5rem !important;
    max-height: 2.5rem !important;
    width: auto !important;
}

.fi-simple-main-ctn {
    padding: 0.85rem !important;
    align-items: stretch !important;
}

.fi-simple-main {
    width: 100% !important;
    max-width: 26rem !important;
    margin: 1.25rem auto !important;
    padding: 1.5rem 1.2rem !important;
    border-radius: 1rem !important;
}

.fi-simple-header-heading {
    font-size: 1.45rem !important;
}

.fi-simple-main .fi-fo-field-label,
.fi-simple-main .fi-fo-field-label-content,
.fi-simple-main .fi-fo-field-label-content span,
.fi-simple-main .fi-checkbox-label,
.fi-simple-main label,
.fi-simple-main .fi-link {
    font-size: 1.05rem !important;
}

.fi-simple-main .fi-input-wrp,
.fi-simple-main input.fi-input,
.fi-simple-main .fi-btn {
    min-height: 3.15rem !important;
}

.fi-simple-main input.fi-input,
.fi-simple-main .fi-btn,
.fi-simple-main .fi-btn span {
    font-size: 1.15rem !important;
}

.fi-simple-header .fi-logo,
.fi-simple-header .fi-logo img {
    max-width: 9rem !important;
    max-height: 6rem !important;
    height: auto !important;
}

.fi-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.85rem 0.85rem 1.75rem !important;
    box-sizing: border-box;
}

.fi-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.35rem !important;
}

.fi-header-heading,
.fi-header-heading * {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
}

.fi-header-actions-ctn,
.fi-header-actions-ctn > .fi-ac {
    width: 100%;
    flex-wrap: wrap !important;
}

.fi-page-header-main-ctn {
    padding-block: 0.25rem !important;
    gap: 0.35rem !important;
}

.fi-page-content {
    gap: 0.35rem !important;
}

.fi-btn,
.fi-link,
.fi-icon-btn,
.school-agenda-icon-btn,
.school-agenda-save,
.school-agenda-calendar-nav button,
.school-agenda-day-link,
.school-agenda-photo-camera,
.school-agenda-photo-download-all,
.school-agenda-photo-download,
.school-agenda-chat-form button {
    min-height: 3rem !important;
    min-width: 3rem;
    font-size: 1.05rem !important;
    touch-action: manipulation;
}

.fi-page,
.fi-page-content,
.fi-sc,
.fi-section,
.fi-fo-field-wrp,
.fi-input-wrp,
.fi-fo-component-ctn {
    min-width: 0;
    max-width: 100%;
}

.fi-grid:not(.fi-grid-direction-col) {
    grid-template-columns: minmax(0, 1fr) !important;
}

.fi-grid:not(.fi-grid-direction-col) > * {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fi-main input,
.fi-main select,
.fi-main textarea,
.fi-modal input,
.fi-modal select,
.fi-modal textarea,
.fi-simple-main input,
.school-agenda-text textarea,
.school-agenda-chat-form input {
    font-size: max(1rem, 16px) !important;
}

.fi-main .fi-ta-ctn,
.fi-ta-ctn,
.fi-ta-content-ctn {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.fi-ta-table-stacked-on-mobile {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
}

.fi-ta-table-stacked-on-mobile > thead {
    display: none !important;
}

.fi-ta-table-stacked-on-mobile > tbody,
.fi-ta-table-stacked-on-mobile > tbody > tr,
.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
}

.fi-ta-table-stacked-on-mobile > tbody > tr {
    padding: 0.4rem 0 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell {
    padding: 0.3rem 1rem !important;
}

.fi-ta-table-stacked-on-mobile .fi-ta-cell-label {
    display: block !important;
    font-size: 0.85rem;
    font-weight: 700;
    color: #6b7280;
}

.fi-main .fi-ta-table:not(.fi-ta-table-stacked-on-mobile) {
    width: max-content;
    min-width: 100%;
    table-layout: auto !important;
}

.fi-main .fi-ta-actions-header-cell,
.fi-main .fi-ta-cell:has(.fi-ta-actions) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.fi-ta-actions,
.fi-ta-toolbar,
.fi-ta-header,
.fi-pagination,
.fi-ta-pagination,
.fi-ta-filters {
    flex-wrap: wrap !important;
    max-width: 100%;
}

.fi-ta-actions {
    justify-content: flex-start !important;
    gap: 0.45rem !important;
}

.fi-ta-header-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding-block: 0.4rem !important;
    max-width: 100%;
}

.fi-ta-header-toolbar > * {
    min-height: 0 !important;
}

.fi-ta-header-toolbar > .fi-ta-actions:not(:has(.fi-btn, .fi-icon-btn, .fi-dropdown, .fi-input, .fi-select)) {
    display: none !important;
}

.fi-ta-header-toolbar > :nth-child(2) {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.4rem;
    margin-inline-start: 0 !important;
    min-width: 0;
    width: auto !important;
    max-width: 100%;
}

.school-agenda-students .fi-ta-table-stacked-on-mobile > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name name"
        "class actions";
    align-items: start;
    column-gap: 0.35rem;
    row-gap: 0;
    padding-block: 0.25rem 0.3rem;
}

.school-agenda-students .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(:has(.fi-ta-actions)):first-of-type {
    grid-area: name;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.school-agenda-students .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(:has(.fi-ta-actions)):first-of-type .fi-ta-cell-label {
    display: none !important;
}

.school-agenda-students .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(:has(.fi-ta-actions)):first-of-type .fi-ta-text,
.school-agenda-students .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(:has(.fi-ta-actions)):first-of-type .fi-ta-text-item,
.school-agenda-students .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(:has(.fi-ta-actions)):first-of-type .fi-ta-cell-content {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}

.school-agenda-students .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(:has(.fi-ta-actions)):nth-of-type(2) {
    grid-area: class;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    width: auto !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline-end: 0.35rem !important;
    margin-top: -0.2rem;
}

.school-agenda-students .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(:has(.fi-ta-actions)):nth-of-type(2) .fi-ta-cell-label {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}

.school-agenda-students .fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) {
    grid-area: actions;
    display: flex !important;
    align-items: center;
    width: auto !important;
    max-width: none !important;
    padding: 0 0.75rem 0 0 !important;
    margin-top: -0.2rem;
}

.school-agenda-students .fi-ta-cell:has(.fi-ta-actions) .fi-ta-cell-label {
    display: none !important;
}

.school-agenda-students .fi-ta-cell .fi-ta-actions {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 0.15rem !important;
}

.school-agenda-students .fi-ta-cell .fi-ta-actions .fi-link-label {
    display: none !important;
}

.school-agenda-students .fi-ta-cell .fi-ta-actions .fi-link,
.school-agenda-students .fi-ta-cell .fi-ta-actions .fi-ac-link-action,
.school-agenda-students .fi-ta-cell .fi-ta-actions .fi-icon-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 !important;
    gap: 0 !important;
}

.school-agenda-students .fi-ta-cell .fi-ta-actions .fi-link svg,
.school-agenda-students .fi-ta-cell .fi-ta-actions .fi-ac-link-action svg {
    width: 1.35rem !important;
    height: 1.35rem !important;
}

.school-report-table-wrap,
.school-report-table-wrap.is-temperature-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.school-tutor-repeater .school-tutor-card .fi-section-header {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
}

.school-extras-repeater.fi-fo-table-repeater > table,
.school-extras-repeater.fi-fo-table-repeater > table > tbody,
.school-extras-repeater.fi-fo-table-repeater > table > tbody > tr,
.school-extras-repeater.fi-fo-table-repeater > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
}

.fi-modal-window {
    width: calc(100vw - 1rem) !important;
    max-width: 100% !important;
}

.school-agenda-sheet-head,
.school-agenda-calendar-toolbar,
.school-agenda-photo-toolbar {
    flex-direction: column;
    align-items: stretch;
}

.school-agenda-sheet-name {
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.school-agenda-sheet-nav,
.school-agenda-calendar-nav,
.school-agenda-photo-toolbar-actions {
    width: 100%;
}

.school-agenda-sheet-nav a,
.school-agenda-calendar-nav button,
.school-agenda-photo-camera,
.school-agenda-photo-download-all {
    flex: 1;
    justify-content: center;
    text-align: center;
}

.school-agenda-blocks {
    flex-direction: column;
    gap: 1rem;
}

.school-agenda-block,
.school-agenda-block-sleep,
.school-agenda-block-meals,
.school-agenda-block-bowel {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100%;
}

.school-agenda-meals {
    grid-template-columns: 4.5rem repeat(4, minmax(0, 1fr));
}

.school-agenda-yesno-grid-sleep {
    grid-template-columns: minmax(0, 1fr) 3rem 3rem;
    max-width: 100%;
}

.school-agenda-sleep-times-head {
    display: none;
}

.school-agenda-sleep-range {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
}

.school-agenda-sleep-range label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}

.school-agenda-sleep-range input[type="time"] {
    flex: 0 0 auto;
    width: 6.5rem;
    min-width: 6.5rem;
    max-width: 6.5rem;
    height: 2.75rem;
    min-height: 2.75rem;
    font-size: 1.05rem !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.school-agenda-sleep-range input[type="time"]::-webkit-datetime-edit,
.school-agenda-sleep-range input[type="time"]::-webkit-datetime-edit-fields-wrapper,
.school-agenda-sleep-range input[type="time"]::-webkit-datetime-edit-hour-field,
.school-agenda-sleep-range input[type="time"]::-webkit-datetime-edit-minute-field,
.school-agenda-sleep-range input[type="time"]::-webkit-datetime-edit-text {
    min-width: 0;
    width: 100%;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

.school-agenda-sleep-range input[type="time"]::-webkit-datetime-edit-fields-wrapper {
    display: inline-flex;
    justify-content: center;
}

.school-agenda-calendar-grid {
    font-size: 0.8rem;
}

.school-agenda-dow-full {
    display: none;
}

.school-agenda-dow-short {
    display: inline;
}

.school-agenda-calendar-day {
    min-height: 4.5rem;
    padding: 0.25rem;
}

.school-agenda-day-link {
    width: 100%;
    font-size: 0.85rem !important;
}

.school-agenda-day-link-full {
    display: none;
}

.school-agenda-day-link-short {
    display: inline;
}

.school-agenda-chat-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.school-agenda-chat-meta span {
    display: block;
}

.school-agenda-chat-form {
    flex-direction: column;
    width: 100%;
}

.school-agenda-chat-form input,
.school-agenda-chat-form button {
    width: 100%;
}

.school-agenda-photo-classes,
.school-agenda-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.school-agenda-lightbox {
    padding: 0.5rem;
    align-items: stretch;
}

.school-agenda-lightbox-inner {
    width: 100%;
    padding-top: 2.75rem;
}

.school-agenda-carousel {
    position: relative;
    gap: 0;
}

.school-agenda-carousel-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}

.school-agenda-carousel-nav.is-prev {
    left: 0.35rem;
}

.school-agenda-carousel-nav.is-next {
    right: 0.35rem;
}

.fi-fo-file-upload,
.filepond--root,
.fi-account-widget,
.fi-wi,
.fi-section-content,
.fi-fo-field {
    width: 100%;
    max-width: 100%;
}

.fi-ta-search-field {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
}

.fi-dropdown-panel {
    max-width: min(22rem, calc(100vw - 1.25rem)) !important;
}

.school-dash-comments {
    width: 100%;
}

.school-dash-comment {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.75rem 0.85rem;
}

.school-dash-comment-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    overflow-wrap: anywhere;
}

.school-dash-comment-student {
    margin-inline: 0;
    white-space: normal;
}

.school-dash-comment-when {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.45rem;
    text-align: left;
}