/* static/css/style.css */

/* (Otros estilos que tengas) */

body {
    padding-bottom: 60px; /* Ajusta según la altura de tu footer */
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* ---- Estilos para botones de acción en tablas (ajustados para ser un poco más grandes) ---- */
.table td .btn.btn-sm.btn-outline-warning,
.table td .btn.btn-sm.btn-outline-danger {
    padding: 0.25rem 0.50rem !important;   /* Ligeramente más padding que antes */
    font-size: 0.68rem !important;      /* Fuente un poco más grande que antes */
    line-height: 1.3 !important;       /* Altura de línea ajustada */
}
/* static/css/style.css */

/* Estilos generales del cuerpo y pie de página (los que ya tenías) */
body {
    padding-bottom: 70px; /* Ajusta según la altura real de tu footer para evitar superposición */
    display: flex;        /* Ayuda a empujar el footer hacia abajo si el contenido es corto */
    flex-direction: column; /* Stackea el contenido principal y el footer verticalmente */
    min-height: 100vh;    /* Asegura que el body ocupe al menos toda la altura de la ventana */
}

main { /* Asumiendo que tu contenido principal está en un <main> */
    flex: 1; /* Permite que el contenido principal crezca y empuje el footer */
}

.footer {
    /* position: fixed; */ /* 'fixed' puede causar problemas si el contenido es más largo que la ventana */
    /* bottom: 0; */       /* Considera un footer que fluye normalmente o un "sticky footer" */
    width: 100%;
    background-color: #f8f9fa; /* Un color de fondo para el footer, ajusta según necesites */
    padding: 1rem 0;          /* Algo de padding */
    text-align: center;
    border-top: 1px solid #e7e7e7;
    /* Si quieres un footer realmente pegado abajo sin ser 'fixed':
       Asegúrate que el contenedor padre del body (html) tenga height: 100%
       y el body display: flex; flex-direction: column; min-height: 100vh;
       y el <main> o div de contenido principal tenga flex: 1;
    */
}

/* ---- Clases personalizadas para colores de marca ---- */
.card-header-custom-orange {
    background-color: #FF8C00 !important; /* ¡USA TU COLOR NARANJA AQUÍ! Ejemplo: #F28C28 o el de tu logo */
    color: white !important;             /* Asegura que el texto contraste bien */
}

.btn-custom-orange {
    background-color: #FFA500 !important; /* ¡USA TU COLOR NARANJA PARA BOTONES AQUÍ! */
    border-color: #EE9A00 !important;     /* Un tono ligeramente más oscuro para el borde */
    color: white !important;              /* O negro, según el contraste con tu naranja */
}

.btn-custom-orange:hover,
.btn-custom-orange:focus,
.btn-custom-orange:active {
    background-color: #EE9A00 !important; /* Naranja más oscuro para hover/focus/active */
    border-color: #D98C00 !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 165, 0, 0.5) !important; /* Sombra de foco opcional */
}


/* ---- Estilos para botones de acción en tablas (tus estilos ajustados) ---- */
.table td .btn.btn-sm.btn-outline-warning,
.table td .btn.btn-sm.btn-outline-danger {
    padding: 0.25rem 0.50rem !important;
    font-size: 0.75rem !important;  /* Ligeramente aumentado para mejor legibilidad */
    line-height: 1.3 !important;
    /* Considera no usar !important a menos que sea estrictamente necesario para sobrescribir Bootstrap */
}

/* Ajuste para los iconos dentro de estos botones específicos */
.table td .btn.btn-sm.btn-outline-warning .fas,
.table td .btn.btn-sm.btn-outline-danger .fas {
    font-size: 0.85rem !important; /* Un poco más grande para el ícono */
    /* margin-right: 4px; */ /* Bootstrap 5 maneja mejor el espaciado con íconos, quizás no necesario o ajustar */
}

/* Clase para el texto de los botones que queremos controlar responsivamente */
.button-text-responsive {
    display: none; /* Oculto por defecto en pantallas muy pequeñas */
}

/* Mostrar el texto del botón en pantallas pequeñas (sm) y más grandes */
@media (min-width: 576px) { /* Punto de quiebre 'sm' de Bootstrap (móviles en horizontal y más) */
    .button-text-responsive {
        display: inline; 
    }
    /* Si los botones de tabla siguen siendo muy pequeños, puedes ajustar el padding/font-size aquí también */
    .table td .btn.btn-sm.btn-outline-warning .fas,
    .table td .btn.btn-sm.btn-outline-danger .fas {
        margin-right: 0.25rem; /* Añadir un pequeño margen si el texto se muestra */
    }
}

/* Mejoras generales opcionales para formularios y tarjetas */
.card {
    border: 1px solid #dee2e6; /* Borde sutil por defecto para todas las tarjetas */
}

.form-label {
    font-weight: 500; /* Hacer las etiquetas un poco más prominentes */
}

/* Estilo para los mensajes de invalid-feedback para que sean un poco más notorios si es necesario */
.invalid-feedback {
    font-size: 0.8rem; /* Un poco más pequeño que el texto normal pero legible */
    /* color: #dc3545; /* Color por defecto de Bootstrap para error */
}

/* Alineación vertical de elementos en el footer de las tarjetas de formulario */
.card-footer.d-flex.justify-content-end .btn {
    margin-left: 0.5rem; /* Espacio entre botones en el footer */
}
.card-footer.d-flex.justify-content-end .btn:first-child {
    margin-left: 0;
}

/* Para asegurar que los selects pequeños y los inputs pequeños tengan la misma altura */
.form-select-sm, .form-control-sm {
    /* Bootstrap 5 ya debería manejarlos bien, pero si no:
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: .875rem;
    line-height: 1.5;
    */
}

/* Mejorar un poco la apariencia de los fieldset */
fieldset.border {
    border-color: #ced4da !important; /* Borde un poco más visible para fieldsets */
}
fieldset.border legend {
    font-size: 1rem; /* Tamaño de la leyenda un poco más estándar */
    font-weight: 500;
}

/* Ajustes para la barra de navegación si la tienes, ejemplo: */
/*
.navbar-custom-orange {
    background-color: #FFA500; // Tu color naranja
}
.navbar-custom-orange .navbar-brand,
.navbar-custom-orange .nav-link {
    color: white;
}
.navbar-custom-orange .nav-link:hover {
    color: #f0f0f0;
}
*/
/* Ajuste para los iconos dentro de estos botones específicos */
.table td .btn.btn-sm.btn-outline-warning .fas,
.table td .btn.btn-sm.btn-outline-danger .fas {
    font-size: 0.82rem !important; /* Icono un poco más grande */
    margin-right: 4px;        
}

/* Clase para el texto de los botones que queremos controlar responsivamente */
.button-text-responsive {
    display: none; /* Oculto por defecto (en pantallas muy pequeñas) */
}

/* Mostrar el texto del botón en pantallas medianas (md) y más grandes */
@media (min-width: 768px) { /* Punto de quiebre 'md' de Bootstrap (tablets y más grandes) */
    .button-text-responsive {
        display: inline; 
    }
}
.seccion-header-inspeccion {
    display: flex;                 /* Activa Flexbox para alinear elementos hijos */
    justify-content: space-between;/* Coloca el título a la izquierda y el círculo a la derecha */
    align-items: center;           /* Alinea verticalmente los elementos al centro (la clave de la solución) */
    padding-bottom: 8px;           /* Un poco de espacio debajo del texto */
    margin-bottom: 15px;           /* Espacio antes de la lista de ítems de la sección */
    border-bottom: 2px solid #dee2e6; /* Línea divisoria, igual que la de Bootstrap */
}

/* El círculo indicador de estado */
.status-indicator-circle {
    height: 15px;
    width: 15px;
    background-color: #ffffff; /* Círculo blanco por defecto */
    border: 2px solid #adb5bd; /* Borde gris */
    border-radius: 50%;        /* Lo hace perfectamente redondo */
    display: inline-block;
    transition: background-color 0.3s ease; /* Transición suave de color */
}

/* Clase que se añadirá con JavaScript cuando la sección esté completa */
.status-indicator-circle.completado {
    background-color: #198754; /* Verde de éxito de Bootstrap */
    border-color: #146c43;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}