/* assets/css/styles.css */

/* Fuente Inter */
html { font-family: 'Inter', sans-serif; }

/* Tema oscuro */
body {
    background-color: #1a202c; /* bg-gray-900 */
    color: #e2e8f0; /* text-gray-100 */
}

/* Estilos para el modal personalizado */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Posición fija en la pantalla */
    z-index: 1000; /* Por encima de todo */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    overflow: auto; /* Habilitar scroll si el contenido es muy grande */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

.modal-content {
    background-color: #2d3748; /* bg-gray-800 */
    margin: auto;
    padding: 20px;
    border-radius: 0.5rem; /* rounded-lg */
    width: 80%; /* Ancho del modal */
    max-width: 500px; /* Ancho máximo */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Sombra */
    position: relative; /* Para posicionar el botón de cerrar */
}

/* Ajustes para el botón de cerrar modal */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px; /* Espacio debajo del encabezado */
    /* La posición relativa se define en .modal-content, no es necesaria aquí */
    /* position: relative; */ 
}

.modal-title {
    font-size: 1.5rem; /* Tamaño del título */
    font-weight: bold;
    color: #cbd5e0; /* text-gray-200 */
}

.modal-close-button {
    position: absolute; /* Posicionamiento absoluto */
    top: 10px; /* Distancia ajustada desde la parte superior para mejor posicionamiento */
    right: 10px; /* Distancia ajustada desde la derecha para mejor posicionamiento */
    background: none;
    border: none;
    font-size: 1.5rem; /* Tamaño de la 'X' */
    color: #a0aec0; /* Color gris suave */
    cursor: pointer;
    padding: 5px; /* Espacio alrededor de la 'X' para hacerla más fácil de cliquear */
    line-height: 1; /* Asegurar que la 'X' esté bien alineada */
    transition: color 0.2s ease-in-out;
}

.modal-close-button:hover {
    color: #e2e8f0; /* Color más claro al pasar el ratón */
}

/* Estilos para el cuerpo del modal */
.modal-body {
    padding-bottom: 20px; /* Añade un padding inferior para separar el texto del footer */
}

/* Estilos para el pie de página del modal */
.modal-footer {
    display: flex;
    justify-content: flex-start; /* Alinea los botones a la izquierda */
    padding-top: 0; /* Eliminar padding superior */
    border-top: none; /* Eliminar línea divisoria */
    margin-top: 15px; /* Mantener un espacio superior adicional si se necesita */
}


/* Estilos específicos para la barra de navegación */
.navbar {
    background-color: #1a202c; /* Fondo de la barra de navegación */
    color: #e2e8f0; /* Color del texto */
}

.navbar a {
    color: #e2e8f0; /* Color de los enlaces */
    text-decoration: none;
}

.navbar a:hover {
    color: #a0aec0; /* Color al pasar el ratón */
}

/* Clases de colores personalizados para el texto */
.text-omb-green {
    color: #008060; /* Un verde oscuro similar al de la imagen */
}

.text-latam-orange {
    color: #FF6600; /* Un naranja brillante similar al de la imagen */
}

/* Estilos para el modal de reportes */
.modal-content-report {
    max-width: 900px; /* Más ancho para los reportes */
    width: 90%;
}

/* Estilos para la tabla de reportes en impresión */
.report-view table {
    width: 100%;
    border-collapse: collapse;
}

.report-view th, .report-view td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.report-view th {
    background-color: #f2f2f2;
}

/* Estilos para el área de impresión */
@media print {
    body {
        margin: 0;
        padding: 0;
        background-color: #fff; /* Fondo blanco para impresión */
        color: #000; /* Texto negro */
        font-size: 10pt; /* Tamaño de fuente más pequeño para impresión */
    }

    .no-print {
        display: none !important;
    }

    .print-area {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        background-color: #fff;
        color: #000;
    }

    .report-view {
        padding: 20px;
        color: #000;
    }

    .report-header-tech h1 {
        font-size: 2em;
        color: #000;
    }

    .report-header-tech p {
        font-size: 1em;
        color: #333;
    }

    .report-header-tech input[type="text"] { /* Estilos para inputs en impresión */
        border: none;
        background-color: transparent;
        color: #000; /* Asegurar texto negro para impresión */
        padding: 0;
        width: auto;
        max-width: none;
        margin: 0;
        display: inline; /* Para que el texto fluya con el párrafo */
        box-shadow: none;
    }

    .report-header-tech .logo-omb {
        display: block; /* Asegurar que el logo se muestre en impresión */
        margin: 0 auto 15px auto; /* Centrar y añadir margen inferior */
        max-width: 150px; /* Reducir tamaño del logo en impresión si es muy grande */
    }

    .report-section-tech {
        margin-bottom: 20px;
        page-break-inside: avoid; /* Evitar que las secciones se rompan en dos páginas */
    }

    .report-section-tech h2 {
        font-size: 1.4em;
        color: #000;
        border-left: 3px solid #007B72; /* Color de la barra lateral */
        padding-left: 10px;
        margin-bottom: 15px;
    }

    .report-section-tech p {
        font-size: 1em;
        color: #000;
        line-height: 1.5;
    }

    .report-section-tech ul {
        list-style: disc;
        margin-left: 20px;
        color: #000;
    }

    .report-section-tech ul li {
        margin-bottom: 5px;
    }

    .report-section-tech label {
        font-weight: bold;
        color: #000;
    }

    .report-table-tech {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
        font-size: 0.9em;
    }

    .report-table-tech th,
    .report-table-tech td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
        color: #000;
    }

    .report-table-tech th {
        background-color: #e0e0e0;
        font-weight: bold;
    }

    .report-footer-tech {
        text-align: center;
        margin-top: 30px;
        font-size: 0.9em;
        color: #000;
    }
}


/* --- INICIO DE LOS ESTILOS PARA LAS ETIQUETAS DE ESTADO EN LAS TABLAS --- */
/* Estos estilos son para las celdas de la tabla, con un aspecto de "píldora" */
.estado-aprobado,
.estado-pendiente,
.estado-rechazado,
.estado-observaciones {
    display: inline-block; /* Essential for padding and border-radius */
    /* Convertir px a em basado en el font-size de 0.875em (14px si la base es 16px) */
    padding: 0.193em 0.578em; /* Aproximadamente 2.695px y 8.085px */
    border-radius: 9999px; /* Pill shape */
    font-size: 0.875em; /* Smaller font for badges */
    font-weight: bold;
    text-align: center;
    white-space: nowrap; /* Prevent text wrapping */
    /* Establecer un min-width para asegurar consistencia entre diferentes textos */
    min-width: 6.4em; /* Aproximadamente 61.689px de contenido (basado en 14px font-size) */
    line-height: 1.25em; /* Aproximadamente 17.501px de altura de contenido */
}

.estado-aprobado {
    background-color: #10B981; /* bg-green-500 */
    color: #064E3B; /* Darker text for contrast on bright green */
}

.estado-pendiente {
    background-color: #6B7280; /* bg-gray-500 */
    color: #FFFFFF; /* White text */
}

.estado-rechazado {
    background-color: #EF4444; /* bg-red-500 */
    color: #7F1D1D; /* Darker text for contrast on bright red */
}

.estado-observaciones {
    background-color: #FBBF24; /* bg-yellow-400 */
    color: #78350F; /* Darker text for contrast on bright yellow */
}

/* Para la impresión */
@media print {
    .estado-aprobado,
    .estado-pendiente,
    .estado-rechazado,
    .estado-observaciones {
        background-color: transparent !important;
        border: 1px solid #000 !important;
        color: #000 !important;
        box-shadow: none !important;
        /* Revert specific badge styles for print */
        display: inline !important;
        padding: 0 !important;
        border-radius: 0 !important;
        min-width: unset !important;
        white-space: normal !important;
        font-weight: normal !important; /* Maybe revert bold for print for more formality */
        line-height: normal !important; /* Restablecer para impresión */
    }
}
/* --- FIN DE LOS ESTILOS PARA LAS ETIQUETAS DE ESTADO EN LAS TABLAS --- */


/* --- INICIO DE ESTILOS ESPECÍFICOS PARA EL CAMPO "ESTADO" EN EL FORMULARIO DE GESTIÓN DE ÍTEMS --- */
/* Estas clases de estado se aplicarán directamente al div #estado_display por JavaScript */
#estado_display {
    /* Estas propiedades ya están en el HTML con Tailwind:
       - mt-1 (margin-top)
       - block (display)
       - w-full (width)
       - px-3 py-2 (padding)
       - bg-gray-700 (fondo inicial)
       - border border-gray-600 (bordes)
       - rounded-md (border-radius)
       - shadow-sm (box-shadow)
       - sm:text-sm (font-size para el div, heredado por el span)
    */
    /* Asegurar que el texto esté alineado a la izquierda dentro del div */
    text-align: left;
    
    /* Forzar la altura y usar flexbox para el centrado vertical del texto */
    height: 38px; /* Ajustado a 38px para que la altura de contenido sea 20px */
    display: flex; 
    align-items: center; /* Centra el contenido verticalmente */

    /* Asegurar que el padding sea el mismo que los inputs para consistencia */
    padding: 0.5rem 0.75rem; /* Esto es equivalente a px-3 py-2 de Tailwind */
}

/* Aplicar el color de fondo y texto cuando las clases de estado son añadidas por JS */
#estado_display.estado-aprobado { background-color: #10B981; color: #FFFFFF; }
#estado_display.estado-pendiente { background-color: #6B7280; color: #FFFFFF; }
#estado_display.estado-rechazado { background-color: #EF4444; color: #FFFFFF; }
#estado_display.estado-observaciones { background-color: #FBBF24; color: #1F2937; }

/* El span dentro del div solo controlará el texto y su grosor */
#estado_display #estado_text {
    font-weight: 600; /* Mantener negrita como se solicitó */
    /* No se necesitan estilos de alineación o fondo aquí, ya que el div padre los maneja */
    line-height: normal; /* Restablecer line-height para que se ajuste automáticamente */
}
/* --- FIN DE ESTILOS ESPECÍFICOS PARA EL CAMPO "ESTADO" EN EL FORMULARIO DE GESTIÓN DE ÍTEMS --- */