/*
 * Identidad visual de Odontoclínica (spec 007).
 * La clínica es luz, vidrio y vegetación: superficies claras, transparencias suaves,
 * el verde agua del logo y el dorado de su comunicación. Filament ya define los colores
 * (--primary-*, --dorado-*) desde App\Filament\Support\Marca: aquí solo se usan.
 * Se carga después de los estilos de Filament (render hook HEAD_END), sin compilar nada.
 */

:root {
    --marca-titulos: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    --marca-sombra: 0 0 0 1px rgb(0 90 80 / 0.07), 0 1px 2px rgb(16 60 55 / 0.04), 0 10px 28px -14px rgb(16 60 55 / 0.16);
}

/* Títulos con la tipografía de la marca ---------------------------------------- */
.fi-header-heading,
.fi-simple-header-heading,
.fi-modal-heading,
.fi-section-header-heading,
.marca-logo__nombre {
    font-family: var(--marca-titulos);
    letter-spacing: -0.01em;
}

.fi-header-heading {
    font-weight: 600;
}

/* Logo ----------------------------------------------------------------------- */
.marca-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.marca-logo__monograma {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--primary-600) 60%, transparent);
}

.marca-logo__nombre {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--primary-800);
    white-space: nowrap;
}

.dark .marca-logo__nombre {
    color: #fff;
}

/* Luz: el fondo del panel con un reflejo verde agua y otro dorado ------------- */
html:not(.dark) .fi-body {
    background:
        radial-gradient(70rem 40rem at 105% -15%, color-mix(in oklab, var(--primary-200) 45%, transparent), transparent 60%),
        radial-gradient(55rem 35rem at -10% 115%, color-mix(in oklab, var(--dorado-100) 70%, transparent), transparent 60%),
        #f6fbfa;
    background-attachment: fixed;
}

/* Vidrio: barra superior y menú lateral translúcidos ------------------------- */
html:not(.dark) .fi-topbar,
html:not(.dark) .fi-sidebar {
    background-color: rgb(255 255 255 / 0.72);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
}

/* Botones principales: texto blanco sobre el verde agua 600 (contraste 4,53:1).
   Filament elegiría el 400 con texto oscuro, que queda apenas por debajo de AA. */
html:not(.dark) .fi-btn.fi-color-primary.fi-bg-color-400 {
    background-color: var(--primary-600);
    color: #fff;
}

html:not(.dark) .fi-btn.fi-color-primary.fi-bg-color-400:hover {
    background-color: var(--primary-700);
    color: #fff;
}

/* Tarjetas y tablas: bordes suaves y sombra luminosa ------------------------- */
.fi-section,
.fi-ta-ctn {
    border-radius: 1rem;
}

html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn {
    box-shadow: var(--marca-sombra);
}

/* Inicio de sesión ------------------------------------------------------------ */
.fi-simple-layout {
    position: relative;
    isolation: isolate;
}

html:not(.dark) .fi-simple-layout {
    background:
        radial-gradient(60rem 40rem at 110% -10%, color-mix(in oklab, var(--primary-300) 55%, transparent), transparent 60%),
        radial-gradient(50rem 35rem at -15% 110%, color-mix(in oklab, var(--dorado-200) 65%, transparent), transparent 60%),
        linear-gradient(160deg, #f2fbf9 0%, #ffffff 55%, #eef8f6 100%);
}

.dark .fi-simple-layout {
    background:
        radial-gradient(60rem 40rem at 110% -10%, color-mix(in oklab, var(--primary-700) 45%, transparent), transparent 60%),
        #0b1514;
}

/* Vegetación: dos ramas de líneas finas, como las plantas detrás del vidrio. */
.fi-simple-layout::before,
.fi-simple-layout::after {
    content: '';
    position: fixed;
    width: 22rem;
    height: 22rem;
    z-index: -1;
    pointer-events: none;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2300B3A0' stroke-opacity='.32' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 192C58 142 92 100 152 28'/%3E%3Cpath d='M60 140C40 120 38 100 48 84C62 98 66 118 60 140Z'/%3E%3Cpath d='M84 108C66 92 66 70 78 56C92 72 94 92 84 108Z'/%3E%3Cpath d='M108 78C92 62 94 42 108 30C120 46 120 64 108 78Z'/%3E%3Cpath d='M74 124C96 120 112 128 122 142C102 148 86 142 74 124Z'/%3E%3Cpath d='M100 92C120 86 138 92 148 104C128 112 112 108 100 92Z'/%3E%3Cpath d='M124 60C142 54 158 58 168 68C150 78 134 74 124 60Z'/%3E%3C/g%3E%3C/svg%3E");
}

.fi-simple-layout::before {
    left: -3rem;
    bottom: -2.5rem;
}

.fi-simple-layout::after {
    right: -3.5rem;
    top: -3rem;
    transform: rotate(180deg);
    opacity: 0.7;
}

.fi-simple-main {
    background: rgb(255 255 255 / 0.62);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgb(255 255 255 / 0.75);
    border-radius: 1.5rem;
    box-shadow: 0 30px 80px -30px rgb(0 80 72 / 0.35);
}

.dark .fi-simple-main {
    background: rgb(24 24 27 / 0.65);
    border-color: rgb(255 255 255 / 0.08);
}

.fi-simple-layout .fi-logo {
    height: auto !important;
}

.fi-simple-layout .marca-logo {
    flex-direction: column;
    gap: 0.75rem;
}

.fi-simple-layout .marca-logo__monograma {
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
}

.fi-simple-layout .marca-logo__nombre {
    font-size: 1.5rem;
}

.marca-frase {
    text-align: center;
    font-family: var(--marca-titulos);
    font-size: 0.95rem;
    color: var(--primary-700);
    margin: -0.25rem 0 0.25rem;
}

.dark .marca-frase {
    color: var(--primary-300);
}

@media (prefers-reduced-transparency: reduce) {
    .fi-simple-main,
    html:not(.dark) .fi-topbar,
    html:not(.dark) .fi-sidebar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: #fff;
    }
}