/* Estilo general para el cuerpo */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #413F3F;
    color: #fff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor principal general */
.container, .wide-container {
    width: auto;
    padding: 20px;
    background-color: #333;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    text-align: center;
    color: #fff;
}

/* Estilo específico para el contenedor de la página de clientes */
.clientes-container {
    display: inline-block;
    text-align: center;
}

/* Estilo de la tabla de clientes */
.clientes-container .clientes-table {
    width: 100%; /* La tabla se adapta al ancho del contenedor */
    border-collapse: collapse; /* Quita los espacios entre las celdas */
    margin-bottom: 20px; /* Espacio debajo de la tabla */
}

.clientes-container .clientes-table th, .clientes-container .clientes-table td {
    border: 1px solid #a44d01; /* Borde de las celdas */
    padding: 8px 12px; /* Espacio interno en las celdas */
    text-align: left; /* Alineación a la izquierda */
    vertical-align: middle; /* Centrado vertical */
}

.clientes-container .clientes-table th {
    background-color: #823e01; /* Color de fondo del encabezado */
    color: white; /* Color del texto del encabezado */
    font-weight: bold; /* Texto en negrita */
}

.clientes-container .clientes-table tr:nth-child(even) {
    background-color: #333; /* Fila alterna con color de fondo */
}

/* Ajuste de celdas de la tabla */
.clientes-container .clientes-table td {
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta el contenido que se sale de la celda */
    text-overflow: ellipsis; /* Muestra "..." si el contenido es muy largo */
}

/* Botones en la página de clientes */
.clientes-container .clientes-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacio entre los botones */
    margin-top: 20px; /* Espacio superior */
}

.clientes-container .clientes-buttons input[type="submit"] {
    padding: 10px 10px; /* Tamaño de los botones */
    background-color: #530000; /* Color de fondo del botón */
    color: white; /* Color del texto */
    border: none;
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer;
    font-size: 16px; /* Tamaño del texto */
}

.clientes-container .clientes-buttons input[type="submit"]:hover {
    background-color: #530000; /* Cambio de color en hover */
	gap: 20px; /* Espacio entre los botones */
}

/* Estilo general de formularios y botones */
form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

form label {
    margin-bottom: 2px;
    text-align: left;
    font-weight: bold;
    color: #fff;
}

form input, form textarea, form select {
    padding: 5px;
    margin-bottom: 0px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* Botones de acción general */
input[type="submit"], button {
    background-color: #D57522;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    width: auto;
}

input[type="submit"]:hover, button:hover {
    background-color: #530000;
}

/* Estilo general del contenedor en el dashboard */
.dashboard-container {
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #333;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    text-align: center;
    color: #fff;
}

/* Encabezado del dashboard */
.dashboard-header {
    margin-bottom: 30px;
    font-size: 24px;
    color: #E9E9E9;
    text-align: center;
}

/* Estilo para las opciones del menú del dashboard */
.dashboard-options ul {
    list-style-type: none;
    padding: 0;
}

.dashboard-options li {
    margin: 10px 0;
}

.dashboard-options a {
    display: block;
    padding: 15px 25px;
    background-color: #D57522;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 18px;
    transition: background-color 0.3s ease;
    cursor: pointer;
    text-align: center;
    width: 200px;
    margin: 0 auto;
}

.dashboard-options a:hover {
    background-color: #FF4801;
}

/* Estilo de los botones en registro_cobranza.php */
.cobranza-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Añade espacio entre los botones */
    margin-top: 20px; /* Espacio superior para separar de otros elementos */
}

.cobranza-buttons input[type="submit"], .cobranza-buttons button {
    padding: 10px 20px;
    background-color: #530000;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.cobranza-buttons input[type="submit"]:hover, .cobranza-buttons button:hover {
    background-color: #530000;
}

/* Estilo para la tabla de cobranzas */
.cobranza-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 14px;
}

.cobranza-table th, .cobranza-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    vertical-align: middle;
}

.cobranza-table th {
    background-color: #530000;
    color: white;
    font-weight: bold;
}

.cobranza-table tr:nth-child(even) {
    background-color: #333;
}

/* Estilo para el total por cliente */
.total-cliente td {
    background-color: #e0f7fa;
    font-weight: bold;
    color: #000;
}

/* Estilo para el total general */
.total-general td {
    background-color: #b2ebf2;
    font-weight: bold;
    color: #000;
}

/* Alineación y formato de los montos */
.cobranza-table td:last-child {
    text-align: right;
    font-weight: bold;
}

/* Estilo de las tablas */
.cobranza-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.cobranza-table th, .cobranza-table td {
    border: 1px solid #530000;
    padding: 10px;
    text-align: left;
}

.cobranza-table th {
    background-color: #530000;
    color: white;
}

.cobranza-table tr:nth-child(even) {
    background-color: #333;
}

.cobranza-buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.cobranza-buttons input[type="submit"] {
    padding: 10px 20px;
    background-color: #530000;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.cobranza-buttons input[type="submit"]:hover {
    background-color: #530000;
}