:root {
    /* Brand Colors */
    --color-brand-50: #f8f6f4;
    --color-brand-100: #efece5;
    --color-brand-200: #ded7ca;
    --color-brand-300: #c9bca8;
    --color-brand-400: #b6a289;
    --color-brand-500: #a3886c;
    --color-brand-600: #967860;
    --color-brand-700: #7d6351;
    --color-brand-800: #675245;
    --color-brand-900: #54443a;
    --color-brand-950: #2c221e;

    /* Background Colors */
    --bg-gray: #f5f5f5;
    --bg-gray-100: #f3f4f6;
    --bg-gray-200: #dcdcdc;
    --bg-gray-300: #bdbdbd;
    --bg-bluedark: #182430;
    --bg-gray-hover: #e9e9e9;

    /* Text Colors */
    --text-color-dark: #182430;
    --text-color-muted: #6c6c6c;
    --text-color-white: #ffffff;
    --text-gray-medium: #909090;
    --text-link-blue: #2b6cb0;

    /* Utility Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-danger: #e53935;
    --color-danger-muted: #C2506E;
    --color-success: #298053;
    --color-green-success: #028702;
    --color-warning: #f99c01;

    /* Wizard Specifics */
    --bg-wizard-header: #e1d6c2;
    --text-wizard-inactive: #848b94;

    /* Editing Banner */
    --bg-banner-warning: #FFF8E6;
    --border-banner-warning: #FAD67A;
    --color-dot-warning: #F4B400;
    --bg-avatar-orange: #B65C00;
    --bg-badge-warning: #FFF1C2;

    /* Metrics */
    --color-metric-active: #059669;
    --color-metric-closed: #e11d48;
    --color-metric-total: #475569;
    --text-metric-active: #065f46;
    --text-metric-closed: #881337;
    --text-metric-total: #334155;

    /* Tables */
    --bg-table-focus: #fff0d4;
    --shadow-table-focus: rgb(196, 148, 6);
}

/* ==========================================================================
   Global Reset & Base Styles
   ========================================================================== */
html {
    width: 100% !important;
}

html.fi {
    scrollbar-gutter: unset !important;
}

body * {
    /* line-height: 1.3; */
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

/* --- Sidebar Logo Swap --- */

@keyframes logo-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Collapsed: solo el icono */
.fi-logo {
    height: 2.5rem !important;
    width: auto;
    object-fit: contain;
    animation: logo-fade-in 250ms ease forwards;
}

/* Expanded: logo completo — topbar */
body:has(.fi-sidebar.fi-sidebar-open) .fi-topbar-start .fi-logo {
    content: url('/images/Logo-web.png');
    height: auto !important;
    max-height: 3.5rem;
    max-width: 220px;
    object-fit: contain;
    padding-left: 1rem;
    animation: logo-fade-in 250ms ease forwards;
}

/* Expanded: logo completo — sidebar header (por si aplica) */
.fi-sidebar.fi-sidebar-open .fi-sidebar-header .fi-logo {
    content: url('/images/Logo-web.png');
    height: auto !important;
    max-height: 3.5rem;
    max-width: 180px;
    object-fit: contain;
    animation: logo-fade-in 250ms ease forwards;
}

/* --- Sidebar --- */
aside.fi-sidebar {
	background-color: var(--color-white);
	--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
	box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
	--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
	--tw-ring-color: color-mix(in oklab, var(--bg-bluedark) 5%, transparent);
}

aside.fi-sidebar:where(.dark, .dark *) {
    background-color: var(--gray-900);
    --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}

/* --- Sidebar Transitions & Widths --- */

/* Reglas comunes: Animación siempre activa y overflow para evitar saltos */
.fi-sidebar.fi-main-sidebar {
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1),
                max-width 300ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                margin 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: width, transform;
    overflow-x: hidden !important; /* Vital para que el contenido no fuerce el ancho al cerrar */
}

/* DESKTOP (lg y superior): Comportamiento colapsable */
@media (min-width: 1024px) {
    /* Estado CERRADO (por defecto o sin clase open) */
    .fi-sidebar.fi-main-sidebar {
        width: 4.5rem !important;
        max-width: 4.5rem !important;
    }

    /* Estado ABIERTO */
    .fi-sidebar.fi-main-sidebar.fi-sidebar-open {
        width: 18rem !important;
        max-width: 18rem !important;
    }

    /* Ocultar textos suavemente al cerrar en desktop */
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label,
    .fi-sidebar.fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label {
        opacity: 0;
        transition: opacity 100ms ease-out;
        pointer-events: none;
        white-space: nowrap;
    }

    /* .fi-sidebar.fi-main-sidebar.fi-sidebar-open .fi-sidebar-item-btn {
        padding-left: 0.5rem;
    } */

    .fi-sidebar.fi-main-sidebar.fi-sidebar-open .fi-sidebar-item-label,
    .fi-sidebar.fi-main-sidebar.fi-sidebar-open .fi-sidebar-group-label {
        opacity: 1;
        transition: opacity 300ms ease-in 100ms; /* Pequeño delay al abrir */
        white-space: nowrap;
    }
}

/* --- Login / Simple Page Animations --- */

/* Contenedor principal del login (lado izquierdo) */

/* TABLET/MOVIL (< 1024px): Comportamiento Drawer/Overlay */
@media (max-width: 1023.98px) {
    .fi-sidebar.fi-main-sidebar {
        /* En móvil siempre queremos el ancho completo del sidebar cuando se ve */
        width: 16rem !important;
        max-width: 16rem !important;
        /* Asegurar que el transform se anime */
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

nav.fi-sidebar-nav {
    scrollbar-gutter: unset;
    padding-block: unset;
}

.fi-sidebar-nav-groups {
    position: sticky;
    top: 20px;
}

/* Sidebar Footer */
.fi-sidebar.fi-main-sidebar footer {
    display: none;
}

.fi-sidebar.fi-main-sidebar.fi-sidebar-open footer {
    display: block;
    width: 100%;
}

footer.sidebar-footer {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--color-silver-100);
}

footer.sidebar-footer .sidebar-footer__company {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

footer.sidebar-footer .sidebar-footer__sub {
    font-size: 0.7rem;
    margin-top: 1px;
}

footer.sidebar-footer .sidebar-footer__version {
    font-size: 0.65rem;
    color: var(--text-gray-medium);
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-silver-100);
    font-variant-numeric: tabular-nums;
}

.fi-sidebar-item-btn {
    border-radius: var(--radius-xl);
    transition: background-color 0.15s ease;
}

.fi-sidebar-item-btn:hover:not(.fi-active .fi-sidebar-item-btn) {
    background-color: var(--color-brand-50);
}

.fi-sidebar-item-btn:hover svg {
    color: var(--color-brand-600);
}

/* Sidebar Active Item */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(90deg, var(--color-brand-400) 0%, var(--color-brand-400) 100%);
    transition: all 0.3s ease;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg {
    background-color: transparent;
    color: white;
    font-weight: 600;
}

/* --- Topbar --- */
.fi-topbar-ctn {
    z-index: 40;
}
nav.fi-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Logo container and ordering */
.fi-topbar-start {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
}

.fi-topbar-start > a {
    order: -1 !important;
    margin-left: 0 !important;
    margin-right: 1rem !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 3rem;
}

.fi-topbar-start > a::before {
    content: none;
}

.fi-topbar-start .fi-logo {
    margin-inline-start: unset;
}

.fi-topbar-start > .fi-topbar-open-collapse-sidebar-btn,
.fi-topbar-start > .fi-topbar-close-collapse-sidebar-btn {
    order: 10 !important;
}

/* Navbar Flex Ordering */
nav.fi-topbar > .fi-topbar-start { order: 0; }
nav.fi-topbar > .fi-topbar-open-sidebar-btn,
nav.fi-topbar > .fi-topbar-close-sidebar-btn { order: 1; }
nav.fi-topbar > .fi-topbar-end { order: 2; }

/* --- Main Content Area --- */
.fi-main {
    max-width: 100% !important;
}

.fi-body.fi-panel-admin {
    position: relative;
}

.fi-body.fi-panel-admin .fi-simple-main-ctn::after {
    content: '';
    max-width: 100%;
    width: 105%;
    height: 100dvh;
    background: linear-gradient(rgba(182, 162, 137, 0.623), rgba(182, 162, 137, 0.623)), url('../images/_DSC3528.webp') no-repeat;
    background-position: center;
    background-size: cover;
}

/* --- Login / Simple Page --- */
.fi-body.fi-panel-admin .fi-simple-main.fi-width-lg {
    margin: 0;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: clamp(400px, 35dvw, 656px);
    position: relative;
    border-color: #efefef;
    border-radius: 0;
    --tw-shadow: 0px -3px 7px rgba(133, 120, 63, 0.14), 0px -29px 18px rgba(133, 114, 63, 0.02), 0px 43px 17px rgba(133, 114, 63, 0.03), 0px 24px 15px rgba(133, 111, 63, 0.1), 0px 11px 11px rgba(133, 117, 63, 0.17), 0px 3px 6px rgba(133, 117, 63, 0.2), 0px 0px 0px rgba(133, 117, 63, 0.2);
    --tw-shadow-colored: 0px -3px 7px var(--tw-shadow-color), 0px -29px 18px var(--tw-shadow-color), 0px 43px 17px var(--tw-shadow-color), 0px 24px 15px var(--tw-shadow-color), 0px 11px 11px var(--tw-shadow-color), 0px 3px 6px var(--tw-shadow-color), 0px 0px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
    border: unset;
}

.fi-body.fi-panel-admin .fi-simple-main.fi-width-lg > * {
    transform: translateY(-5vh);
    will-change: transform;
}

.fi-body.fi-panel-admin .fi-simple-page {
    width: 85%;
}

.fi-body.fi-panel-admin .fi-simple-main-ctn {
    justify-content: flex-start;
}

.fi-body.fi-panel-admin .fi-simple-header-heading {
    font-size: 32px;
    margin-bottom: 32px;
}

.fi-body.fi-panel-admin .fi-simple-layout .fi-simple-main-ctn .fi-logo {
    height: 11.5rem !important;
    width: 250px;
    object-fit: contain;
}

.fi-simple-main.fi-width-lg .fi-sc-text a {
    color: var(--text-gray-medium);
    transition: all .3s linear;
}

.fi-simple-header-subheading *,
.fi-simple-header-subheading svg {
    color: var(--color-brand-400);
}

/* ==========================================================================
   Form Components
   ========================================================================== */

/* --- Inputs & Fields --- */
.fi-input:read-only,
.fi-input[readonly],
textarea:read-only,
textarea[readonly] {
    background-color: var(--bg-gray-100);
    color: #6b7280;
    cursor: default;
}

.fi-input:disabled,
.fi-input[disabled] {
    border-bottom: none !important;
    box-shadow: none;
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    --tw-ring-color: var(--bg-bluedark);
}

.fi-input-wrp-content-ctn input {
    border-radius: 0;
    border: unset;
    font-family: "Helvetica", sans-serif;
}

.fi-fo-field-label-ctn .fi-fo-select-label,
.fi-fo-field-label,
.fi-fo-field-label-content,
.fi-fo-field-label-ctn > label {
    font-weight: 600;
}

.fi-fo-field-label {
    align-items: center;
}

/* --Helper Text -- */
.fi-sc-text:not(.fi-badge) {
    font-size: var(--text-xs);
}

/* Tooltips for Error Fields */
.fi-input-wrp {
    overflow: visible !important;
}

.fi-input-wrp.border-red-ko .fi-input-wrp-suffix::after {
    content: "Magma ID Erróneo";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-danger);
    color: var(--color-white);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 9999;
}

.fi-input-wrp.border-red-ko .fi-input-wrp-suffix::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-danger) transparent transparent transparent;
    opacity: 1;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 9998;
}

.fi-input-wrp.border-red-ko .fi-input-wrp-suffix:hover::after,
.fi-input-wrp.border-red-ko .fi-input-wrp-suffix:hover::before,
.fi-input-wrp.border-red-ko .fi-input-wrp-suffix:focus-within::after,
.fi-input-wrp.border-red-ko .fi-input-wrp-suffix:focus-within::before {
    opacity: 1;
    visibility: visible;
}

.fi-input-wrp-suffix,
.fi-input-wrp-actions svg,
.fi-input-wrp-suffix svg {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ensure Icons are Visible */
.fi-input-wrp-suffix svg,
.fi-input-wrp-actions svg,
[data-field-wrapper*="qrcode"] svg,
[data-field-wrapper*="qrcode_alt"] svg,
.qr-code-field-debug svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

.nh-history-input .fi-input-wrp-actions .fi-loading-indicator {
    display: none !important;
}

/* --- Toggles (BigToggle) --- */
.bigToggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    grid-auto-rows: 1fr;
}

.bigToggle .fi-fo-toggle-buttons-btn-ctn {
    display: flex;
    height: 100%;
}

.bigToggle .fi-fo-toggle-buttons-btn-ctn label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    border-radius: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    border: 2px solid var(--gray-100);
    background-color: var(--color-white);
    color: var(--bg-bluedark);
}
.bigToggle .fi-fo-toggle-buttons-btn-ctn input:not(:checked) + label {
    box-shadow: unset;
}

.bigToggle .fi-fo-toggle-buttons-btn-ctn label .toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
}

.bigToggle .fi-fo-toggle-buttons-btn-ctn label .toggle .toggle-icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0.75rem;
    min-height: 40px;
    min-width: 40px;
    background-color: var(--gray-100);
    border-radius: 9999px;
}

/* Toggle Active State */
.bigToggle .fi-fo-toggle-buttons-btn-ctn input:checked + label,
.bigToggle .fi-fo-toggle-buttons-btn-ctn label[aria-pressed="true"] {
    border: 2px solid var(--bg-bluedark);
    background-color: var(--bg-gray);
    color: var(--bg-bluedark) !important;
}

.bigToggle .fi-fo-toggle-buttons-btn-ctn input:checked + label .toggle .toggle-icon,
.bigToggle .fi-fo-toggle-buttons-btn-ctn label[aria-pressed="true"] .toggle .toggle-icon {
    background-color: var(--bg-bluedark);
    color: var(--color-white);
}

.bigToggle .fi-fo-toggle-buttons-btn-ctn label:hover {
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
}

.bigToggle .fi-fo-toggle-buttons-btn-ctn input:not(:checked) + label:hover .toggle .toggle-icon {
    background-color: var(--gray-200);
    color: var(--bg-bluedark);
}

/* --- Standard Toggle Buttons --- */
.fi-fo-toggle-buttons-btn-ctn input:checked ~ label,
.fi-fo-toggle-buttons-btn-ctn label[aria-pressed="true"] {
    background-color: var(--bg-bluedark);
    color: var(--color-white);
}

.fi-fo-toggle-buttons-btn-ctn input + label,
.fi-fo-toggle-buttons-btn-ctn label {
    transition: all 0.15s ease-in-out;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
}

.fi-fo-toggle-buttons-btn-ctn input:not(:checked) ~ label:hover {
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
    background-color: var(--bg-gray-hover);
    color: var(--text-color-muted);
}

.fi-fo-toggle-buttons.fi-btn-group input:checked + :is(label.fi-btn:not(.fi-outlined).fi-color) {
    color: var(--color-white);
}

.fi-fo-toggle-buttons.fi-btn-group input:checked + :is(label.fi-btn:not(.fi-outlined).fi-color) svg {
    fill: var(--color-white);
}

/* --- Radio & Checkbox --- */
input[type=radio].fi-radio-input:checked {
    background-color: var(--color-brand-400);
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, #B6A289);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.fi-checkbox-input:checked {
    background-color: var(--color-black);
    --tw-ring-shadow: var(--color-black);
    box-shadow: var(--color-black);
}

.fi-fo-field-label:has(.fi-checkbox-input):hover {
    cursor: pointer;
}

/* --- Tabs --- */
.fi-page-sub-navigation-tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0;
}

.fi-tabs:not(.fi-contained) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0;
    padding: calc(var(--spacing) * 1.05);
}

nav.fi-tabs button.fi-tabs-item {
    transition: background-color 0.1s ease-in-out;
}

nav.fi-tabs .fi-active {
    background-color: var(--color-gray-100);
}

nav.fi-tabs .fi-active .fi-tabs-item-label {
    color: var(--color-gray-600);
}

nav.fi-tabs .fi-badge:not(.fi-color-info):not(.fi-color-success):not(.fi-color-warning) .fi-badge-label {
    color: var(--color-brand-500);
}

/* ICSI Inner Tabs */
.icsi-inner-tabs .fi-tabs-item {
    border-radius: 16px !important;
    overflow: hidden;
}

.icsi-inner-tabs .fi-tabs-item-label {
    border-radius: 16px !important;
}

.icsi-inner-tabs .fi-tabs-item.fi-active::after {
    display: none !important;
    content: none !important;
}

/* --- Wizard --- */
.fi-sc-wizard.fi-contained {
    --tw-ring-shadow: unset;
    --tw-shadow: unset;
    --tw-shadow: unset;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.fi-sc-wizard .fi-sc-wizard-header {
    border: unset;
    padding-bottom: 40px;
    background-color: var(--bg-wizard-header);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.fi-sc-wizard.fi-contained .fi-sc-wizard-footer {
    background-color: var(--bg-wizard-header);
}

.fi-sc-wizard-header-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    width: 100%;
}

.fi-sc-wizard .fi-sc-wizard-header-step-label {
    text-align: center;
    max-width: 100%;
    width: 100%;
}

.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn {
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    max-width: 100%;
    width: 100%;
    border: 1px solid var(--gray-300);
    background-color: var(--gray-100);
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn {
    background-color: var(--color-brand-200) !important;
    border: unset;
    border-radius: 20px 20px 0 0;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-color: var(--color-brand-400) !important;
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn * {
    color: var(--color-brand-600);
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-text .fi-sc-wizard-header-step-label {
    font-size: 1.1rem;
    color: #fff !important;
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-number,
.fi-sc-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn {
    font-size: 14px;
}

.fi-sc-wizard .fi-sc-wizard-header-step:not(.fi-active) .fi-sc-wizard-header-step-btn * {
    color: var(--text-wizard-inactive);
}

.fi-sc-wizard .fi-sc-wizard-header-step-separator {
    display: none;
}

/* Completed Steps */
.fi-sc-wizard .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-btn {
    border: 2px solid var(--color-white);
    background-color: var(--gray-300);
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-completed .fi-icon.fi-size-lg {
    width: 1.2rem;
    stroke: var(--bg-bluedark);
}



.fi-sc-wizard-header .fi-sc-wizard-header-step.fi-completed {
    border-color: var(--color-white);
}

.fi-sc-wizard .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-number,
.fi-sc-wizard .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-label {
    color: var(--color-white);
}

.fi-sc-wizard.fi-contained .fi-sc-wizard-step.fi-active {
    background-color: var(--bg-wizard-header) !important;
}

/* ICSI Wizard Specifics */

.fi-section-content:has(.icsi-wizard) {
    padding: calc(var(--spacing) * 4);
}
.icsi-wizard .fi-sc-wizard-step.fi-active {
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
}
.icsi-wizard.fi-sc-wizard {
    display: grid !important;
    grid-template-columns: max-content 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 0 !important;
}

@media (max-width: 1280px) {
    .icsi-wizard.fi-sc-wizard {
        grid-template-columns: 180px 1fr !important;
    }
}

.icsi-wizard .fi-sc-wizard-header {
    grid-column: 1 / 1;
    grid-row: 1 / -1;
    gap: 0.40rem;
    display: flex !important;
    flex-direction: column !important;
    padding: 5px 10px !important;
    background-color: var(--color-white) !important;
}

.icsi-wizard > :not(.fi-sc-wizard-header) {
    grid-column: 2 / 2;
}

.icsi-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1rem !important;
    gap: 10px !important;
    border: 1px solid #e5e7eb;
    background-color: var(--bg-gray);
    height: 4rem;
    border-radius: 16px 0 0 16px !important;
    margin-right: 18px;
    font-size: var(--text-sm);
    position: relative;
    width: 100%;
    margin-top: 0;
}

.icsi-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-btn {
    background-color: var(--bg-gray-200);
    border-color: var(--bg-gray-200);
}

.icsi-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-btn:hover {
    background-color: var(--bg-gray-300);
    border-color: var(--bg-gray-300);
}

.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step:not(.fi-active, .fi-completed) .fi-sc-wizard-header-step-btn {
    background-color: var(--bg-gray) !important;
}

.icsi-wizard .fi-sc-wizard-header-step-label {
    text-align: left !important;
    font-weight: 600 !important;
    color: var(--text-color-dark) !important;
}

.icsi-wizard .fi-sc-wizard-header-step-number {
    border-radius: 999px !important;
    color: var(--color-brand-500) !important;
    background-color: var(--color-white) !important;
}

.icsi-wizard .fi-sc-wizard-header-step-icon-ctn {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--color-white) !important;
}

.icsi-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn {
    background-color: var(--color-brand-400) !important;
    border: none !important;
    box-shadow: none !important;
}

.icsi-wizard .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn:after {
    content: "";
    position: absolute;
    top: 50%;
    /* Posicionamiento robusto: Left 100% asegura inicio al final del contenedor */
    /* margin-left: -1px fuerza solapamiento para evitar línea blanca por sub-pixel rendering */
    right: auto;
    left: 100%;
    margin-left: -0.5px;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 32px 0 32px 18px;
    border-color: transparent transparent transparent var(--color-brand-400);
    z-index: 10;
}

.icsi-wizard .fi-sc-wizard-header-step:not(.fi-active, .fi-completed) .fi-sc-wizard-header-step-btn:hover {
    background-color: var(--bg-gray-200) !important;
    border-color: var(--bg-gray-200) !important;
}

.fi-sc-wizard .fi-sc-wizard-header .fi-sc-wizard-header-step:not(.fi-completed) .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn {
    border: none !important;
}

.icsi-wizard.fi-contained .fi-sc-wizard-step.fi-active {
    background-color: var(--color-white) !important;
    gap: 16px !important;
}

.icsi-wizard .fi-sc-wizard-step,
.icsi-wizard .fi-sc-wizard-footer {
    background-color: var(--color-white) !important;
}

/* ICSI Wizard Last Step Green Style */
.icsi-wizard .fi-sc-wizard-header-step-btn:last-child[aria-current="step"] .fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--color-green-success);
}
.icsi-wizard .fi-sc-wizard-header-step-btn:last-child[aria-current="step"] .fi-sc-wizard-header-step-number {
    color: var(--color-green-success);
}
.icsi-wizard .fi-sc-wizard-header-step-btn:last-child[aria-current="step"] span.fi-sc-wizard-header-step-label {
    color: var(--color-green-success) !important;
}

/* --- Sections & Panels --- */
.fi-sc-form .fi-section {
    border-bottom: unset !important;
}

.semen-treatment-capacitacion-section .fi-sc.fi-sc-has-gap {
    background-color: var(--bg-wizard-header) !important;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.fi-sc-section-label {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
}

.fi-sc-section-label-ctn {
    border-bottom: 1px solid var(--color-brand-400);
    padding-bottom: 1%;
    padding-top: 1%;
}

.fi-section-content-ctn {
    background-attachment: var(--bg-wizard-header);
}

.fi-sc-wizard .fi-grid-col,
.fi-sc-form .fi-grid-col {
    width: 100% !important;
}

.fi-sc-wizard-step .fi-sc.fi-grid {
    gap: calc(var(--spacing) * 6) !important;
    display: grid !important;
}

.fi-sc.fi-sc-has-gap {
    position: relative;
}

/* Pre-Cap Section */
.pre-cap-section {
    border: none !important;
}

.pre-cap-section .fi-section-header {
    border: 2px solid var(--color-brand-400) !important;
    border-radius: 10px !important;
}

.pre-cap-section .fi-section-header button.fi-icon-btn.fi-size-md.fi-section-collapse-btn {
    background-color: var(--color-brand-400) !important;
    color: var(--color-black) !important;
}

.pre-cap-section .fi-section-header button.fi-icon-btn.fi-size-md.fi-section-collapse-btn svg.fi-icon.fi-size-md {
    color: var(--color-black) !important;
}

.pre-cap-section .fi-section-header button.fi-icon-btn.fi-size-md.fi-section-collapse-btn:hover {
    background-color: #a48f73 !important;
}

.pre-cap-section .fi-section-content-ctn {
    border: none !important;
    border-color: transparent !important;
}

/* ==========================================================================
   Notification
   ========================================================================== */
/* Center the “no-notification” block while keeping it responsive */
.cont-not .fi-no-notification {
    min-width: 80%;
    margin: 0 auto;
    transition: visibility 0.3s ease;
}

/* When the element is explicitly hidden via inline style, ensure it’s truly gone */
.cont-not .fi-no-notification[style*="visibility: hidden"] {
    display: none !important;
}

/* ==========================================================================
   Buttons & Actions
   ========================================================================== */
.fi-btn.fi-size-md.fi-labeled-from-sm,
.fi-ac-btn-action:not(.fi-color-danger) {
    transition: all .3s linear;
    background-color: var(--bg-bluedark);
    border-radius: 20px;
    color: var(--color-white);
}

.fi-btn.fi-size-md.fi-labeled-from-sm {
    padding: 8px 25px;
}

.fi-btn.fi-size-md.fi-labeled-from-sm svg,
.fi-ac .fi-ac-btn-action:not(.fi-color-danger) .span {
    color: var(--color-white);
    transition: all .3s linear;
}

.fi-btn.fi-size-md.fi-labeled-from-sm:hover,
.fi-ac-btn-action:not(.fi-color-danger):hover {
    background-color: var(--bg-gray-hover);
    border-radius: 20px;
    color: var(--text-color-muted);
}

.fi-btn.fi-size-md.fi-labeled-from-sm:hover svg,
.fi-ac .fi-ac-btn-action:not(.fi-color-danger):hover .span {
    color: var(--text-color-muted);
}

/* Danger */
.fi-ac-btn-action.fi-color-danger {
    border-radius: 20px;
}
.fi-ac-btn-action.fi-color-danger svg {
    color: var(--color-white);
}

.fi-icon-btn.fi-size-sm.fi-ac-icon-btn-action[title="Mover"],
.fi-icon-btn.fi-size-sm.fi-ac-icon-btn-action[aria-label="Mover"] {
    cursor: grab;
}

.fi-icon-btn.fi-size-sm.fi-ac-icon-btn-action[title="Mover"]:active,
.fi-icon-btn.fi-size-sm.fi-ac-icon-btn-action[aria-label="Mover"]:active {
    cursor: grabbing;
}

.fi-icon-btn.fi-size-sm.fi-ac-icon-btn-action {
    user-select: none;
    -webkit-user-select: none;
}

.post_capacitation_save_button {
    position: absolute !important;
    right: 0 !important;
    bottom: -3.7rem;
}

/* --- Repeater "Add" Button Customization --- */
.fi-fo-table-repeater-add > .fi-ac-btn-action {
    width: 100%;
    justify-content: center;
    border: dashed 2px var(--bg-gray-300);
    background-color: var(--gray-50);
    color: var(--gray-400);
    border-radius: var(--radius-xl);
    padding: 0.75rem 1.25rem;
    transition: border-color 0.2s ease-in-out color 0.2s ease-in-out;
    box-shadow: none;
}

.fi-fo-table-repeater-add > .fi-ac-btn-action:hover {
    background-color: var(--gray-50);
    border-radius: var(--radius-xl);
    border-color: var(--bg-bluedark);
    color: var(--bg-bluedark);
}

/* Icon Repeater Add */
.fi-fo-table-repeater-add > .fi-ac-btn-action::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12h14'/%3e%3cpath d='M12 5v14'/%3e%3c/svg%3e") no-repeat 50% 50%;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12h14'/%3e%3cpath d='M12 5v14'/%3e%3c/svg%3e") no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* ==========================================================================
    Repeater Component
   ========================================================================== */

.fi-fo-repeater:not(.fi-fo-table-repeater) .fi-fo-repeater-item {
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-100);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.fi-fo-repeater:not(.fi-fo-table-repeater) .fi-fo-repeater-item-header {
    background-color: var(--gray-50);
}

/* ==========================================================================
   Table Components
   ========================================================================== */
.fi-ta-row.fi-clickable:hover {
    background-color: #efefef;
}

.fi-ta-actions.fi-align-start.fi-wrapped button svg {
    color: var(--bg-gray);
    transition: all .3s linear;
}

.fi-ta-actions.fi-align-start.fi-wrapped button:hover svg {
    color: var(--text-gray-medium);
}

/* Clase reutilizable para row actions de tabla — estilo pill sin subrayado */
.fi-ta-actions .fi-link.ta-link-pill {
    padding: .25rem .5rem;
    border-radius: .375rem;
    text-decoration: none !important;
    color: var(--text-gray-medium);
    transition: background-color .15s ease;
}

.fi-ta-actions .fi-link.ta-link-pill .fi-icon {
    margin-right: .25rem;
    color: var(--text-gray-medium);
}

.fi-ta-actions .fi-link.ta-link-pill:hover {
    background-color: var(--bg-gray-100, 0.5);
    color: var(--text-gray-dark);
}

.fi-ta-actions .fi-link.ta-link-pill:hover .fi-icon {
    color: var(--color-brand-500);
}

.day-one-table-repeater td:first-child,
.day-two-table-repeater td:first-child,
.day-three-table-repeater td:first-child,
.day-four-table-repeater td:first-child,
.day-five-table-repeater td:first-child,
.day-six-table-repeater td:first-child,
.day-seven-table-repeater td:first-child {
    min-width: 32px !important;
}

.day-two-table-repeater,
.day-three-table-repeater,
.day-four-table-repeater,
.day-five-table-repeater,
.day-six-table-repeater,
.day-seven-table-repeater {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.day-two-table-repeater table,
.day-three-table-repeater table,
.day-four-table-repeater table,
.day-five-table-repeater table,
.day-six-table-repeater table,
.day-seven-table-repeater table {
    min-width: 1200px;
    table-layout: fixed;
    width: 100%;
}

.medication-table-repeater {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding: 1px;
    padding-bottom: 1rem;
    overflow-y: visible;
}

.medication-table-repeater:has(.fi-select-input-btn[aria-expanded="true"]) {
    overflow-x: visible;
    overflow-y: visible;
}

/* Column widths (1: drag, 2: medication, 3: days, 4: start date, 5: via, 6: actions) */
.medication-table-repeater th:nth-child(1),
.medication-table-repeater td:nth-child(1) {
    min-width: 400px;
}

.medication-table-repeater th:nth-child(2),
.medication-table-repeater td:nth-child(2) {
    min-width: 120px;
}

.medication-table-repeater  th:nth-child(3),
.medication-table-repeater td:nth-child(3)  {
    min-width: 100px;
}

.medication-table-repeater th:nth-child(4),
.medication-table-repeater td:nth-child(4)  {
    min-width: 150px;
}

.medication-table-repeater th:nth-child(5),
.medication-table-repeater td:nth-child(5)  {
    min-width: 170px;
}

.day-two-table-repeater th, .day-two-table-repeater td,
.day-three-table-repeater th, .day-three-table-repeater td,
.day-four-table-repeater th, .day-four-table-repeater td,
.day-five-table-repeater th, .day-five-table-repeater td,
.day-six-table-repeater th, .day-six-table-repeater td,
.day-seven-table-repeater th, .day-seven-table-repeater td {
    word-wrap: break-word;
    overflow: hidden;
}

/* Table Inputs & Focus States */
.icsi-micro-comments-repeater tr[wire\:key*="form.icsi_micro_comments."]:focus-within,
.day-one-table-repeater tr[wire\:key*="form.day_one_table."]:focus-within {
    background-color: var(--bg-table-focus);
}

.icsi-micro-comments-repeater tr[wire\:key*="form.icsi_micro_comments."]:focus-within td,
.day-one-table-repeater tr[wire\:key*="form.day_one_table."]:focus-within td {
    box-shadow: inset 0 0 0 1px var(--shadow-table-focus);
}

/* Centralized Inputs in Tables */
.day-one-table-repeater input[id^="form.day_one_table"][id$=".id"],
.day-one-table-repeater input[id^="form.day_one_table"][id$=".oocyte_id"],
.icsi-micro-comments-repeater input[id^="form.icsi_micro_comments"][id$=".id"],
.icsi-micro-comments-repeater input[id^="form.icsi_micro_comments"][id$=".oocyte_id"],
.day-two-table-repeater input[id^="form.day_two_table"][id$=".id"],
.day-two-table-repeater input[id^="form.day_two_table"][id$=".d_tw_oocyte_id"],
.day-three-table-repeater input[id^="form.day_three_table"][id$=".d_th_oocyte_id"] {
    text-align: center;
    background-color: var(--color-brand-400) !important;
    border-radius: 10px !important;
    color: var(--color-white) !important;
}

/* Disabled State for Table Inputs */
.day-one-table-repeater input[id^="form.day_one_table"][id$=".id"]:disabled,
.day-one-table-repeater input[id^="form.day_one_table"][id$=".oocyte_id"]:disabled,
.icsi-micro-comments-repeater input[id^="form.icsi_micro_comments"][id$=".id"]:disabled,
.icsi-micro-comments-repeater input[id^="form.icsi_micro_comments"][id$=".oocyte_id"]:disabled,
.day-two-table-repeater input[id^="form.day_two_table"][id$=".id"]:disabled,
.day-two-table-repeater input[id^="form.day_two_table"][id$=".d_tw_oocyte_id"]:disabled,
.day-three-table-repeater input[id^="form.day_three_table"][id$=".d_th_oocyte_id"]:disabled,
.day-four-table-repeater input[id^="form.day_four_table"][id$=".d_f_oocyte_id"]:disabled,
.day-five-table-repeater input[id^="form.day_five_table"][id$=".d_fv_oocyte_id"]:disabled,
.day-six-table-repeater input[id^="form.day_six_table"][id$=".d_sx_oocyte_id"]:disabled,
.day-seven-table-repeater input[id^="form.day_seven_table"][id$=".d_sv_oocyte_id"]:disabled {
    background-color: var(--color-brand-400) !important;
    text-align: center;
    min-width: 32px !important;
    color: var(--color-white) !important;
    -webkit-text-fill-color: var(--color-white) !important;
}

/* Remove Border Bottom in Table Inputs */
.day-one-table-repeater .fi-input-wrp:has(input[id^="form.day_one_table"]),
.day-one-table-repeater .fi-input-wrp:has(select[id^="form.day_one_table"]),
.icsi-micro-comments-repeater .fi-input-wrp:has(input[id^="form.icsi_micro_comments"]),
.icsi-micro-comments-repeater .fi-input-wrp:has(select[id^="form.icsi_micro_comments"]),
.day-two-table-repeater .fi-input-wrp:has(input[id^="form.day_two_table"]),
.day-two-table-repeater .fi-input-wrp:has(select[id^="form.day_two_table"]),
.day-three-table-repeater .fi-input-wrp:has(input[id^="form.day_three_table"]),
.day-three-table-repeater .fi-input-wrp:has(select[id^="form.day_three_table"]) {
    border-bottom: 0 !important;
}

/* Center Text in Table Inputs/Selects */
.day-one-table-repeater select[id^="form.day_one_table"],
.day-one-table-repeater input[id^="form.day_one_table"],
.day-two-table-repeater select[id^="form.day_two_table"],
.day-two-table-repeater input[id^="form.day_two_table"],
.day-three-table-repeater select[id^="form.day_three_table"],
.day-three-table-repeater input[id^="form.day_three_table"],
.day-four-table-repeater select[id^="form.day_four_table"],
.day-four-table-repeater input[id^="form.day_four_table"],
.day-five-table-repeater select[id^="form.day_five_table"],
.day-five-table-repeater input[id^="form.day_five_table"],
.day-six-table-repeater select[id^="form.day_six_table"],
.day-six-table-repeater input[id^="form.day_six_table"],
.day-seven-table-repeater select[id^="form.day_seven_table"],
.day-seven-table-repeater input[id^="form.day_seven_table"] {
    text-align: center;
}

/* Table Headers */
.day-one-table-repeater th,
.icsi-micro-comments-repeater th,
.day-two-table-repeater th,
.day-three-table-repeater th,
.day-four-table-repeater th,
.day-five-table-repeater th,
.day-six-table-repeater th,
.day-seven-table-repeater th {
    background-color: var(--color-brand-400) !important;
    color: var(--color-white) !important;
}

/* General Input Styling in Tables */
textarea,
input:not([type=checkbox]) {
    border-radius: 10px !important;
}

/* ==========================================================================
   Badges & Colors
   ========================================================================== */
.fi-badge.fi-color-primary {
    background-color: var(--color-brand-50);
    border: 1px solid var(--color-brand-500);
}

.fi-badge.fi-color-primary svg {
    color: var(--color-brand-500);
}

.fi-badge-label-ctn .fi-badge-label {
    color: color-mix(in oklab, var(--color-700) 75%, transparent);
}

.fi-badge.brand {
    border-radius: 0.5rem;
    background-color: var(--color-brand-500) !important;
}

.fi-badge.brand .fi-badge-label,
.fi-badge.brand svg {
    color: var(--color-white);
}

.fi-color-success svg {
    color: var(--success-700);
}

.fi-icon.fi-size-md {
    color: var(--color-brand-400);
}

.fi-color-correct { color: var(--color-success) !important; }
.fi-color-warning { color: var(--color-warning) !important; }
.fi-color-error { color: var(--color-danger) !important; }

.dark\:fi-text-color-300 { color: var(--text-gray-medium); }
.fi-ta-cell .fi-icon.fi-size-lg.fi-color.fi-color-danger { color: var(--color-danger-muted); }
.fi-ta-cell .fi-icon.fi-size-lg.fi-color.fi-color-success { color: var(--color-success); }
.fi-select-input-placeholder { color: var(--color-black); }

.fi-bg-color-900 {
    --bg: var(--color-brand-400);
}

/* ==========================================================================
   Editing Banner
   ========================================================================== */
.editing-banner {
    width: 100%;
    background-color: var(--bg-banner-warning);
    border: 2px solid var(--border-banner-warning);
    border-radius: 18px;
    padding: 12px 16px;
    margin: 8px 0 16px 0;
}
.editing-banner__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    color: var(--text-color-muted);
    font-weight: 600;
}
.editing-banner__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-dot-warning);
    display: inline-block;
}
.editing-banner__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.editing-item {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    align-items: center;
    gap: 12px;
    background-color: var(--color-white);
    border: 1px solid var(--border-banner-warning);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 1px 0 var(--border-banner-warning);
}
.editing-item__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-avatar-orange);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.editing-item__content { display: flex; flex-direction: column; }
.editing-item__label { font-weight: 700; color: var(--text-color-dark); }
.editing-item__name { color: var(--text-link-blue); font-size: 0.9rem; }
.editing-item__badge {
    background-color: var(--bg-badge-warning);
    color: var(--text-color-muted);
    border-radius: 8px;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 0.85rem;
}
.editing-item__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-color-dark);
    background-color: transparent;
    border: none;
}
.editing-item__action:hover { color: var(--text-gray-medium); }

/* ==========================================================================
   Metrics (Dashboard)
   ========================================================================== */
.metric-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.metric-row {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.metric-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.metric-icon.is-active { color: var(--color-metric-active); }
.metric-icon.is-closed { color: var(--color-metric-closed); }
.metric-icon.is-total { color: var(--color-metric-total); }

.metric-value {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
}
.metric-value.is-active { color: var(--text-metric-active); }
.metric-value.is-closed { color: var(--text-metric-closed); }
.metric-value.is-total { color: var(--text-metric-total); }

.metric-note {
    margin-top: 0.5rem;
    font-size: 0.75rem;
}
.metric-note.is-active { color: rgba(6,95,70,.7); }
.metric-note.is-closed { color: rgba(136,19,55,.7); }
.metric-note.is-total { color: rgba(51,65,85,.7); }

/* ==========================================================================
   Miscellaneous
   ========================================================================== */
.fi-sc-component .fi-sc-flex.fi-from-default {
    align-items: end !important;
}

.fi-dropdown-list .fi-icon.fi-size-md,
.fi-ta-search-field .fi-icon.fi-size-md,
.fi-dropdown-trigger .fi-icon.fi-size-md,
.fi-ta-actions svg,
.fi-dropdown.fi-ta-col-manager-dropdown svg,
.fi-input-wrp-actions .fi-icon-btn.fi-size-sm.fi-ac-icon-btn-action svg {
    color: var(--text-color-dark);
}

.fi-dropdown-list button.fi-color-danger  .fi-icon.fi-size-md {
    color: var(--color-red-500);
}


/* ── DatePicker: navegación de mes con botones ‹ › ─────────────────────── */
.fi-fo-date-time-picker-panel-header {
    gap: 0.25rem;
}

.fi-fo-date-time-picker-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.fi-fo-date-time-picker-nav-btn:hover {
    background-color: #f3f4f6;
    color: var(--text-color-dark);
}

.fi-fo-date-time-picker-month-label {
    flex: 1;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    text-transform: capitalize;
}

.fi-fo-date-time-picker-year-input {
    width: 4.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    text-align: start;
}


/* ── DatePicker: diferenciar día hoy vs. día seleccionado ───────────────── */

/* Seleccionado: círculo sólido beige + texto blanco */
.fi-fo-date-time-picker-calendar-day.fi-selected {
    background-color: #B6A289 !important;
    color: #ffffff !important;
    border-radius: 9999px;
}

/* Hoy (no seleccionado): borde fino beige, sin relleno */
.fi-fo-date-time-picker-calendar-day.fi-fo-date-time-picker-calendar-day-today:not(.fi-selected) {
    color: #B6A289 !important;
    outline: 1.5px solid #B6A289;
    outline-offset: -1.5px;
    border-radius: 9999px;
    background-color: transparent !important;
}



.fi-pagination-item *,
.fi-breadcrumbs-item-label {
    color: var(--text-color-dark);
}

.fi-dropdown-panel svg {
    color: var(--bg-bluedark);
}

.scoreInfo {
    font-size: 22px;
    line-height: 1;
    padding: 5px 7px 4px 8px;
    border-radius: 100px;
    border: 1px solid;
    display: block;
    width: fit-content;
    font-weight: 600;
    position: absolute;
    top: 0px;
    right: 20px;
}

.fi-size-sm.fi-in-text-item.fi-wrapped.fi-in-text {
    text-align: center;
    font-weight: 600;
    font-size: large;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 1750px) {
    nav.fi-tabs.fi-contained.fi-vertical {
        min-width: 23%;
        max-width: 23%;
    }
}

@media (max-width: 1024px) {
    nav.fi-topbar > .fi-topbar-open-sidebar-btn,
    nav.fi-topbar > .fi-topbar-close-sidebar-btn {
        display: none !important;
    }
    nav.fi-sidebar-nav {
        padding-right: 1.5rem;
    }
    .fi-sidebar.fi-main-sidebar.fi-sidebar-open footer {
        padding: 20px;
    }
    .fi-logo {
        transform: unset;
        height: 3rem !important;
    }
    .fi-body.fi-panel-admin .fi-simple-page {
        width: 100%;
    }
    .fi-sidebar-header {
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 850px) {
    .icsi-wizard.fi-sc-wizard {
        display: block !important;
    }
    .icsi-wizard .fi-sc-wizard-header {
        position: relative !important;
        border-right: none !important;
    }
}

@media (max-width: 776px) {
    .fi-body.fi-panel-admin .fi-simple-main-ctn::after {
        content: unset;
    }
    .fi-body.fi-panel-admin .fi-simple-main.fi-width-lg {
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    /* Logo behavior on mobile */
    body:not(:has(.fi-main-ctn-sidebar-open)) .fi-topbar-start .fi-logo {
        display: inline-block !important;
    }
    body:has(.fi-main-ctn-sidebar-open) .fi-topbar-start .fi-logo {
        display: none !important;
    }
    body:not(:has(.fi-main-ctn-sidebar-open)) .fi-topbar-start a::before {
        content: none;
    }

    /* Wizard on mobile */
    .fi-sc-wizard-header {
        gap: 4px;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        box-sizing: border-box;
        all: revert-layer;
    }

    .fi-sc-wizard-header-step {
        display: unset;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        position: relative;
        width: 100%;
        all: revert-layer;
    }
}

/* ==========================================================================
   Parrilla Print — native window.print() in a separate window
   The print window contains only #parrilla-printable content, so these
   rules ensure the table renders correctly for A4 landscape.
   ========================================================================== */
@media print {
    @page { size: A4 landscape; margin: 10mm; }

    body { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Avoid page-break inside a table row */
    tr { page-break-inside: avoid; }
}

/* ==========================================================================
   Checklist — Consents Table Widget
   ========================================================================== */
.consents-table-widget .fi-ta-ctn .fi-ta-header {
    background-color: var(--bg-bluedark) !important;
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 0.75rem 1rem;
}

.consents-table-widget .fi-ta-ctn .fi-ta-main .fi-ta-header-ctn .fi-ta-header-heading {
    color: #ffffff !important;
}

.consents-table-widget .fi-ta-ctn .fi-ta-main.fi-ta-actions .fi-btn {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.consents-table-widget .fi-ta-ctn .fi-ta-main .fi-ta-actions .fi-btn:hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

.consents-table-widget .fi-ta-ctn .fi-ta-main .fi-ta-actions .fi-btn:hover .fi-icon {
    color: var(--color-brand-500) !important;
}

/* Dim de loading: se aplica a los hijos VISIBLES de la tabla, nunca al raíz .fi-ta,
   que también contiene el wrapper de los modales (<x-filament-actions::modals> →
   <div wire:partial="action-modals">). Si el opacity cayera en el raíz crearía un
   stacking context que atrapa el modal (position:fixed) y la tabla hermana (Pareja)
   se pintaría por encima durante el loading. */
.consents-table-widget.consents-table-loading > :not([wire\:partial="action-modals"]) {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* ToggleButtons full-width — para modales de medicación (.toggle-full-width) */
.toggle-full-width {
    width: 100%;
    display: flex;
}
.toggle-full-width > .fi-fo-toggle-buttons-btn-ctn {
    flex: 1;
}
.toggle-full-width > .fi-fo-toggle-buttons-btn-ctn .fi-btn {
    width: 100%;
    justify-content: center;
}