/* assets/css/gestion_items.css */

/* Estilos específicos para el display de estado en el formulario de gestión */
#estado_display {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); /* Sombra más fuerte para los badges */
    color: #FFFFFF !important; /* Asegura que el color de texto sea blanco */
}

/* Estilos específicos para vista móvil hasta 639px (cubre 320px, 375px, etc.) */
@media (max-width: 639px) { /* Corresponde al breakpoint 'sm' de Tailwind por defecto */
    /* S/N Primario - target the div with .font-mono inside #items-display-view */
    #items-display-view .font-mono {
        font-size: 0.875rem; /* text-sm */
        width: 8rem; /* equivalent to w-32 */
        padding-left: 0.5rem; /* px-2 */
        padding-right: 0.5rem; /* px-2 */
    }

    /* Buttons "Editar" and "Eliminar" - target buttons inside #items-display-view */
    #items-display-view button {
        font-size: 0.75rem; /* text-xs */
        padding-top: 0.25rem; /* py-1 */
        padding-bottom: 0.25rem; /* py-1 */
        padding-left: 0.5rem; /* px-2 */
        padding-right: 0.5rem; /* px-2 */
    }

    /* Botones de control principales del FORMULARIO: Volver, Actualizar/Guardar, Limpiar */
    /* Aplicamos flex y justify-between al contenedor de los botones para distribuirlos */
    #item-form > div:last-child { /* Selector para el div que contiene los botones del formulario */
        flex-direction: row; /* Asegura que estén en fila */
        justify-content: space-between; /* Distribuye el espacio entre ellos */
        gap: 0.5rem; /* Espacio entre los botones */
    }

    #item-form #back-button,
    #item-form #save-item-btn,
    #item-form #clear-form-btn {
        font-size: 0.8rem; /* Aumentar ligeramente el tamaño de la fuente para mejor legibilidad */
        padding: 0.45rem 0.75rem; /* Aumentar el padding vertical y horizontal para más "cuerpo" */
        flex-grow: 1; /* Permite que los botones crezcan para llenar el espacio disponible */
        text-align: center; /* Centra el texto dentro del botón */
        /* Asegurarse de que la altura sea suficiente para el touch target */
        min-height: 2.5rem; /* Aproximadamente 40px, un buen touch target */
    }

    /* Botones de control de la LISTA: Limpiar, Agregar */
    /* Reafirmamos estilos para estos también si necesitan ser más pequeños */
    #filter-items-btn,
    #add-item-btn {
        font-size: 0.75rem; /* text-xs */
        padding-top: 0.25rem; /* py-1 */
        padding-bottom: 0.25rem; /* py-1 */
        padding-left: 0.5rem; /* px-2 */
        padding-right: 0.5rem; /* px-2 */
    }
}

/* Estilo para el borde del botón del logo con el color del logo */
.border-logo-blue {
    border-color: #00BFFF; /* El tono azul del logo image_e6ada9.png */
}

/* Estilo para el elemento activo del menú de navegación móvil */
/* Se utiliza !important para asegurar que sobrescribe la regla general de color blanco */
#mobile-menu a.mobile-nav-active {
    color: #93C5FD !important; /* Color de text-blue-300 */
    text-shadow: none !important; /* Eliminar sombra para el elemento activo */
}

/* Estilo para el icono dentro del elemento activo del menú de navegación móvil */
#mobile-menu a.mobile-nav-active i {
    color: #93C5FD !important; /* Color de text-blue-300 */
    text-shadow: none !important; /* Eliminar sombra para el icono activo */
}

/* Intento de cambiar el color del icono del calendario en input type="date" */
/* Este estilo puede no ser consistente en todos los navegadores,
   pero se intenta con 'color' y '!important' */
input[type="date"]::-webkit-calendar-picker-indicator {
    color: #E2E8F0 !important; /* Tailwind text-gray-200 */
    cursor: pointer;
}

/* Para navegadores que no son WebKit */
input[type="date"] {
    color-scheme: dark; /* Sugiere al navegador usar un esquema de color oscuro para el control nativo */
}

/* --- CLASES AÑADIDAS/MODIFICADAS PARA EL MANEJO DE HOVER DE BOTONES (CONTROLADAS POR JS) --- */

/* Estilos de transición para todos los botones en el área de visualización de ítems */
/* Esta clase se añade directamente al HTML de los botones por lib_gestion_items.js */
#items-display-view button {
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* Estilos de sombreado para los iconos de los botones dentro de las tarjetas */

/* Sombra definida para iconos en botones con fondos sólidos (móvil y hover de escritorio) */
/* Asegura nitidez y contraste para los iconos blancos sobre fondos de color */
.mobile-edit-btn i,
.mobile-delete-btn i,
.lg\:btn-hover-edit i,
.lg\:btn-hover-delete i {
    text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5); /* Sombra sutil oscura */
}

/* Estilos para móvil y tablet (aplicados por JS si no es desktop) */
.mobile-edit-btn {
    background-color: #51A2FF; /* Azul Cielo Interactivo (para Editar en móvil) */
    color: #FFFFFF;
}

.mobile-delete-btn {
    background-color: #FF637E; /* Rojo Coral de Alerta (para Eliminar en móvil) */
    color: #FFFFFF;
}

/* Estilos por defecto para escritorio (cuando la tarjeta NO está en hover) */
.lg\:btn-transparent-white {
    background-color: transparent;
    color: #FFFFFF; /* blanco */
}

/* Sombra definida para iconos en botones transparentes (escritorio por defecto) */
/* Es crucial para la visibilidad del icono blanco sobre el fondo oscuro de la tarjeta */
.lg\:btn-transparent-white i {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Sombra oscura más pronunciada */
}

/* Estilos para escritorio cuando el BOTÓN ESTÁ directamente en hover */
.lg\:btn-hover-edit {
    background-color: #337BB2; /* Azul Océano Profundo (para Editar en hover de escritorio - más oscuro) */
    color: #FFFFFF;
}

.lg\:btn-hover-delete {
    background-color: #0C0A09; /* Negro Profundo de Acción (para Eliminar en hover de escritorio) */
    color: #FFFFFF;
}
/* --- FIN DE CLASES AÑADIDAS/MODIFICADAS --- */