/* ======================================================
   ESTILOS GLOBALES Y DE ESTRUCTURA GENERAL
   Define la fuente base, márgenes y comportamiento general.
====================================================== */
* {
    box-sizing: border-box; /* Asegura que el padding y border estén dentro del tamaño total */
}

body {
    font-family: Arial, sans-serif; /* Fuente general para el sitio */
    margin: 0; /* Elimina espacio externo del body */
    padding: 0; /* Elimina padding interno del body */
    background-color: #f4f4f4; /* Color de fondo claro general */
}

.cliente-info p {
    white-space: normal; /* Permite que los textos en párrafos se ajusten automáticamente */
}

/* ======================================================
   CONTENEDORES Y DISEÑO DE LAYOUT
   Define la distribución general de columnas.
====================================================== */
.container {
    display: flex; /* Coloca los hijos uno al lado del otro (menú y contenido) */
    min-height: 100vh; /* Ocupa al menos la altura completa de la pantalla */
}

/* ======================================================
   MENÚ LATERAL
   Estilos para la barra lateral de navegación.
====================================================== */
.menu {
    width: 20%; /* Ocupa el 20% del ancho total */
    background-color: #0037A6; /* Azul institucional */
    color: white; /* Texto blanco */
    padding: 20px; /* Espaciado interno */
    box-sizing: border-box; /* Incluye padding en el cálculo del ancho */
}

.menu ul {
    list-style-type: none; /* Elimina viñetas */
    padding: 0; /* Elimina padding interno */
}

.menu li {
    margin-bottom: 10px; /* Espaciado entre elementos */
}

.menu a {
    color: white; /* Enlaces blancos */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Ocupa toda la línea */
    padding: 10px; /* Espaciado interno */
    border-radius: 4px; /* Bordes redondeados */
    transition: background-color 0.3s; /* Transición suave al pasar el mouse */
}

.menu a:hover {
    background-color: #34495e; /* Cambio de color al hacer hover */
}

/* ======================================================
   CONTENIDO PRINCIPAL
   Área de trabajo principal al lado del menú.
====================================================== */
.principal {
    width: 100%; /* Ocupa todo el ancho restante */
    padding: 40px 60px; /* Espaciado interno */
    background-color: white; /* Fondo blanco */
    box-sizing: border-box; /* Incluye padding en ancho */
}

.principal table {
    background-color: white; /* Fondo blanco en tablas */
}

.principal h2 {
    margin-bottom: 20px; /* Separación inferior del título */
    color: #234E70; /* Azul oscuro personalizado */
}

.principal2 {
    background-image: url('imagenes/fondo1_pequenio.png'); /* Fondo con imagen */
    background-size: cover; /* Escala la imagen para cubrir */
    background-repeat: no-repeat; /* No se repite la imagen */
    background-position: center; /* Centra la imagen */
    width: 100%; /* Ancho completo */
    min-height: 300px; /* Altura mínima para asegurar visibilidad */
}

/* ======================================================
   TABLAS
   Define apariencia de tablas de datos.
====================================================== */
table {
    width: 100%; /* Ancho completo */
    border-collapse: collapse; /* Quita espacio entre bordes */
    margin-bottom: 20px; /* Separación inferior */
}

table, th, td {
    border: 1px solid #ddd; /* Borde gris claro para todos */
}

th, td {
    padding: 12px; /* Espaciado interno */
    text-align: left; /* Texto alineado a la izquierda */
}

th {
    background-color: #f2f2f2; /* Fondo gris claro para cabeceras */
}

tr:nth-child(even) {
    background-color: #f9f9f9; /* Alternancia de color en filas pares */
}

.table-striped tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Fondo claro para filas impares */
}

.table-striped tbody tr:nth-child(even) {
    background-color: #eaf2f8; /* Azul tenue para filas pares */
}

/* ======================================================
   TABLAS CON PSEUDO-CONTENEDORES (simulación)
====================================================== */
.contenedor {
    display: table; /* Simula comportamiento de tabla */
    width: 100%; /* Ancho completo */
}

.fila {
    display: table-row; /* Simula fila de tabla */
}

.celda {
    display: table-cell; /* Simula celda de tabla */
    padding: 8px 12px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde gris tenue */
}

/* ======================================================
   FORMULARIOS
   Campos de entrada, botones, textos y selects.
====================================================== */
.form-group {
    margin-bottom: 15px; /* Espaciado inferior entre grupos */
}

.form-group label {
    display: block; /* Ocupa línea completa */
    margin-bottom: 5px; /* Espaciado con el input */
    font-weight: bold; /* Negrita */
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; /* Ocupa todo el ancho disponible */
    padding: 8px; /* Espaciado interno */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 4px; /* Bordes redondeados */
    box-sizing: border-box; /* Incluye padding */
}

/* Estilo general para botones */
.btn {
    padding: 10px 15px; /* Espaciado interno */
    background-color: #007bff; /* Azul Bootstrap */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cursor tipo mano */
}

.btn:hover {
    background-color: #0056b3; /* Azul más oscuro al pasar el mouse */
}

/* Inputs y áreas de texto específicas */
input[type="text"],
input[type="password"],
input[type="file"],
select,
textarea {
    width: 100%; /* Ancho completo */
    max-width: 600px; /* Máximo ancho */
    padding: 8px; /* Espaciado interno */
    box-sizing: border-box; /* Incluye padding */
    font-size: 15px; /* Tamaño legible */
}

/* Permitir redimensionar verticalmente el textarea */
textarea {
    resize: vertical; /* Solo permite ajustar altura */
}