/* Estilos generales */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f9fafb; /* Color de fondo claro por defecto */
    margin: 0;
    padding: 0;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el modo oscuro */
}

/* Estilos para el modo oscuro */
html.dark body {
    background-color: #1a202c; /* Color de fondo oscuro */
    color: #e2e8f0; /* Color de texto claro para el modo oscuro */
}

/* Ocultar los botones de incremento/decremento en inputs numéricos */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Estilo para el checkbox personalizado */
.custom-checkbox {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    transition: all 0.2s;
    vertical-align: middle;
    background-color: transparent; /* Por defecto */
}

.custom-checkbox.checked {
    background-color: #3b82f6; /* Color primario de Tailwind */
    border-color: #3b82f6;
}

.custom-checkbox.checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Esconder el input original del checkbox */
input[type="checkbox"].hidden + .custom-checkbox {
    cursor: pointer;
}

/* Estilo para las secciones de vista (ahora más genéricas) */
/* .view { display: none; } ya no es necesario aquí si se maneja con style.display en JS */

/* Estilos para el modal */
.modal {
    display: none; /* Oculto por defecto */
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 500px;
    position: relative;
}

.close-button {
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #888;
}

.close-button:hover {
    color: #555;
}

/* Estilos para el contenedor de coches (car-list-container) */
#car-list-container {
    /* Las clases de grid/flex/table se añadirán y controlarán por JS */
}

/* Estilos para los botones de vista */
.view-button.active {
    background-color: #e0e7ff; /* Un color de fondo para el botón activo, puedes ajustar */
    color: #3b82f6; /* Color del ícono activo */
}

.view-button.active i {
    color: #3b82f6; /* Asegura que el ícono también sea del color primario */
}

/* Estilos para el menú de tres puntos */
.kebab-menu {
    position: relative;
    display: inline-block; /* Para que el menú ocupe solo el espacio necesario */
}

.kebab-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem; /* Ajusta el tamaño del icono */
    color: #6b7280; /* Un gris neutro */
    padding: 5px;
    border-radius: 50%; /* Para que el fondo sea circular al hacer hover */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.kebab-button:hover {
    background-color: #e5e7eb; /* Un gris más claro al hacer hover */
    color: #3b82f6; /* Color primario al hacer hover */
}

.kebab-dropdown {
    position: absolute;
    bottom: 100%; /* Posiciona el menú encima del botón */
    right: 0; /* Alinea a la derecha del botón */
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.kebab-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kebab-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #374151; /* Color de texto oscuro */
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: pointer;
}

.kebab-dropdown-item:hover {
    background-color: #f3f4f6; /* Gris claro al hacer hover */
    color: #3b82f6; /* Color primario al hacer hover */
}

.kebab-dropdown-item i {
    margin-right: 10px; /* Espacio entre icono y texto */
    font-size: 1.1rem;
}

.kebab-dropdown-item.delete-action {
    color: #ef4444; /* Color rojo para la acción de eliminar */
}

.kebab-dropdown-item.delete-action:hover {
    background-color: #fee2e2; /* Fondo rojo claro al hacer hover */
    color: #b91c1c; /* Rojo más oscuro */
}

/* Ajustes para el posicionamiento en la card */
.car-card .actions {
    position: relative; /* Asegura que el kebab-menu se posicione correctamente */
    z-index: 10; /* Para que el menú se vea sobre otros elementos de la tarjeta */
}

/* Esconder el botón normal de editar y eliminar, ya que ahora estarán en el kebab menu */
/* Esto es opcional, si quieres que SÓLO se usen los 3 puntos */
.car-card .actions .edit-btn,
.car-card .actions .delete-btn {
    display: none !important;
}

/* Si usas la vista de tabla, quizás quieras seguir mostrando los botones directamente */
/* o añadir una columna para el kebab menu. Por ahora, asumimos que se mantiene como antes en la tabla. */
.table-row-item .actions .edit-btn,
.table-row-item .actions .delete-btn {
    display: inline-flex !important; /* Asegura que sigan visibles en la tabla */
}

/* Estilos para el campo de cantidad con botones */
.quantity-input-container {
    display: flex; /* Hace que los elementos dentro se alineen horizontalmente */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

.quantity-input-container input[type="number"] {
    -moz-appearance: textfield; /* Para Firefox */
    appearance: textfield; /* Restablecer la apariencia para que el input sea el centro */
    text-align: center; /* Centrar el texto */
    border-radius: 0; /* Quitar bordes para que se unan a los botones */
    /* Asegura que el input se expanda para llenar el espacio */
    flex-grow: 1;
}

.quantity-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Ancho fijo para los botones */
    flex-shrink: 0; /* Evita que los botones se encojan */
    font-size: 1.2rem; /* Tamaño de los iconos */
}

/* Redondear solo los extremos del contenedor */
.quantity-input-container .quantity-btn.minus-btn {
    border-top-left-radius: 0.5rem; /* rounded-md */
    border-bottom-left-radius: 0.5rem; /* rounded-md */
}

.quantity-input-container .quantity-btn.plus-btn {
    border-top-right-radius: 0.5rem; /* rounded-md */
    border-bottom-right-radius: 0.5rem; /* rounded-md */
}

/* Ajustes para el foco y la transición del input y botones */
.quantity-input-container input:focus,
.quantity-input-container .quantity-btn:focus {
    z-index: 1; /* Asegura que el borde de foco no sea cortado por elementos adyacentes */
    position: relative;
}

/* Asegurar que el focus ring no cause solapamiento de bordes */
.quantity-input-container input:focus + .quantity-btn.plus-btn,
.quantity-input-container .quantity-btn.minus-btn + input:focus {
    border-color: transparent; /* Oculta el borde adyacente al foco */
}

/* Corrige el doble borde cuando el input tiene foco */
.quantity-input-container input:focus {
    border-color: transparent; /* Oculta su propio borde cuando tiene focus-ring */
}

/* Ajusta los bordes para que se vean conectados */
.quantity-input-container input[type="number"] {
    border-left: 0;
    border-right: 0;
}

/* Corrige bordes al tener foco en los botones */
.quantity-input-container .quantity-btn.minus-btn:focus {
    border-right-color: transparent;
}
.quantity-input-container .quantity-btn.plus-btn:focus {
    border-left-color: transparent;
}

/* Asegura que el contenedor de cantidad y notas se muestre con un padding */
#user-fields > div {
    margin-bottom: 1rem; /* Añade un pequeño espacio entre los campos */
}
/* ... tus estilos existentes ... */

/* Estilos para el contenedor de la imagen en la tarjeta */
.car-card .car-image-container {
    width: 100%;
    height: 200px; /* Altura fija para todas las imágenes */
    overflow: hidden; /* Asegura que la imagen no se desborde */
    display: flex; /* Para centrar la imagen si es necesario */
    justify-content: center;
    align-items: center;
}

/*.car-card .car-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;  Recorta la imagen para cubrir el área sin distorsión 
    border-radius: 6px;  Ligeramente más pequeño que el card para un mejor efecto 
}
*/

/* Si tienes la vista de lista, ajusta también la imagen */
.car-card.flex-row .car-image-container {
    width: 120px; /* Ancho más pequeño para vista de lista */
    height: 90px; /* Altura más pequeña para vista de lista */
    margin-right: 1.5rem; /* Espacio a la derecha del la imagen en vista de lista */
    flex-shrink: 0; /* Evita que la imagen se encoja */
}

/* En vista de tabla, no necesitamos la imagen directamente en la celda */
/* O si la quieres, necesitarías una nueva columna y un renderizado diferente */

/* Estilos para Toast Notifications */
.toast {
    background-color: #333;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 250px;
    max-width: 350px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.hide {
    opacity: 0;
    transform: translateY(-20px);
}

.toast.success {
    background-color: #10b981; /* secondary color */
}

.toast.error {
    background-color: #ef4444; /* red-500 from Tailwind */
}

.toast.info {
    background-color: #3b82f6; /* primary color */
}

.toast .toast-icon {
    margin-right: 10px;
    font-size: 1.2rem;
}

.toast .toast-message {
    flex-grow: 1;
}

.toast .close-toast {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 10px;
    padding: 0 5px;
}

/* Modo oscuro para los toasts */
html.dark .toast {
    background-color: #4a5568; /* dark-700 */
    color: #e2e8f0;
}

html.dark .toast.success {
    background-color: #059669; /* green-700 dark mode */
}

html.dark .toast.error {
    background-color: #dc2626; /* red-700 dark mode */
}

html.dark .toast.info {
    background-color: #2563eb; /* blue-700 dark mode */
}

/* Estilos para el botón de eliminar filtro */
.remove-filter-btn {
    background: transparent;
    border: none;
    font-size: 1.2em;
    line-height: 1;
    margin-left: 0.5rem;
    cursor: pointer;
}

#active-filters {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.95); }
}

.filter-tag {
    animation: fadeIn 0.2s ease-out forwards;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.filter-tag.fade-out {
    animation: fadeOut 0.2s ease-in forwards;
}

/* Estilos para botones TH y STH */
.hunt-button {
    padding: 2px;
    border-radius: 9999px;
    transition: all 0.2s;
}

.hunt-button.active {
    background-color: #3b82f6;
}