/* Estilos personalizados del sistema - Finca San Eduardo */

/* Inputs: transición de borde a magenta en focus */
.form-input {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.form-input:focus {
    border-color: #D61F69; /* Magenta */
    box-shadow: 0 0 0 1px #D61F69;
    outline: none;
}

/* Iconos Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.icon-filled {
    font-variation-settings: 'FILL' 1;
}

body {
    background-color: #f8f9ff;
}

/* Submenú de configuración: despliegue animado */
.config-submenu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.config-submenu.open {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
}

/* Botón padre del submenú: transición de color al expandirse */
#config-menu-btn {
    transition: color 0.2s ease, background-color 0.2s ease;
}
#config-menu-btn.config-open {
    color: #af0051;
    font-weight: 700;
    background-color: rgba(174, 238, 203, 0.1);
}

/* Mejoras generales de UI */
a,
button {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Evitar el contorno/foco al hacer clic en enlaces y botones */
a:focus,
button:focus {
    outline: none;
}

/* Evitar el cursor de edición "|" y la selección de texto en toda la interfaz */
html,
body {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
}

a,
button,
[role="button"] {
    cursor: pointer;
}

/* Mantener la edición solo en los campos de formulario */
input,
textarea,
select,
[contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    cursor: auto;
}

::selection {
    background: rgba(214, 31, 105, 0.15);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: #d1dbec;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e2bdc4;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* Animación de apertura de modales */
@keyframes app-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes app-pop-in {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.app-modal-backdrop {
    animation: app-fade-in 0.2s ease;
}
.app-modal-panel {
    animation: app-pop-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}