/* Estilos del formulario de reclamaciones */

#reclamaciones-form .bordered-section {
    width: 100%;
    border: 1px solid #000;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 4px;
}

#reclamaciones-form .date-sheet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#reclamaciones-form .date-sheet .half-input {
    width: 48%;
}

/* Fin estilos del formulario de reclamaciones */
/* Estilos para el formulario de configuración */
#config-form-panel {
    max-width: 800px; /* Ancho máximo del formulario */
    padding: 20px; /* Espaciado interno */
    border: 1px solid #ddd; /* Borde */
    border-radius: 5px; /* Bordes redondeados */
    background-color: #f9f9f9; /* Color de fondo */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Estilo para etiquetas */
#config-form-panel label {
    display: block; /* Hace que las etiquetas ocupen toda la línea */
    margin: 10px 0 5px; /* Margen superior e inferior */
}

/* Estilo para inputs, selects y textareas */
#config-form-panel input,
#config-form-panel select,
#config-form-panel textarea {
    width: 100%; /* Ancho completo */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 10px; /* Margen inferior */
    border: 1px solid #ccc; /* Borde */
    border-radius: 4px; /* Bordes redondeados */
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
}

/* Estilo para el botón de guardar */
#config-form-panel button {
    background-color: #0073aa; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    border: none; /* Sin borde */
    padding: 10px 15px; /* Espaciado interno */
    font-size: 16px; /* Tamaño de la fuente */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

/* Estilo para el botón al pasar el mouse */
#config-form-panel button:hover {
    background-color: #005177; /* Color más oscuro al pasar el mouse */
}

#config-form-panel td {
    padding: 0px; /* Aplica 10px de espaciado interno */
    border-bottom: 0px solid #ddd; /* Aplica un borde inferior */
}

/* Fin Estilos para el formulario de configuracion*/

/* Estilo de los tabs en el panel de administración */
.nav-tab-wrapper {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.nav-tab {
    padding: 10px 20px;
    margin-right: 5px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-tab-active {
    background-color: #fff;
    border-color: #0073aa;
    color: #0073aa;
}

.nav-tab:hover {
    background-color: #eaeaea;
    color: #0073aa;
}
/* Estilo para las sub-pestañas dentro de "Lista de Reclamos" */
.sub-tab-wrapper {
    margin-top: 20px;
    border-bottom: 1px solid #ccc;
    display: flex;
}

.sub-tab {
    padding: 10px 20px;
    margin-right: 5px;
    cursor: pointer;
    color: #0073aa;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px 3px 0 0;
    background-color: #f1f1f1;
}

.sub-tab-active {
    background-color: #fff;
    border: 1px solid #ccc;
    border-bottom: none;
    color: #000;
}

.sub-tab:hover {
    background-color: #e5e5e5;
    color: #000;
}

/* Ocultar contenido de sub-pestañas por defecto */
.sub-tab-content {
    padding: 15px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
}
/* Contenido de los tabs */
.tab-content {
    display: none; /* Oculta todos los contenidos por defecto */
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0 5px 5px 5px;
    animation: fadeIn 0.5s ease-in-out;
}

/* Muestra el contenido del tab activo */
.nav-tab-active + .tab-content {
    display: block; /* Asegúrate de que el contenido esté directamente después del tab activo en el HTML */
}

/* Animación de desvanecimiento suave */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Estilo para la tabla específica */
.tabla-reclamos {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
}

.tabla-reclamos thead th {
    background-color: #f8af29;
    color: #fff;
    padding: 10px;
}

.tabla-reclamos tbody td {
    padding: 15px 2px;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}

/* Estilo para la columna "Acción" */
.tabla-reclamos thead th:first-child,
.tabla-reclamos tbody td:first-child {
    text-align: center;
    /*background-color: #f3f3f3;*/
    color: #121212;
    width: 8%;
}
/* Estilo para los enlaces dentro de la columna "Acción" */
.tabla-reclamos tbody td:first-child a {
    color: #0c11af; /* Color azul */
    text-decoration: none; /* Opcional: elimina el subrayado */
}

/* Cambia el color al pasar el mouse  de la columna "Acción"*/
.tabla-reclamos tbody td:first-child a:hover {
    color: #ff6600; /* Color diferente al pasar el mouse */
    text-decoration: underline; /* Opcional: agrega subrayado al pasar el mouse */
}
/* Estilo para la columna "N° Libro" */
.tabla-reclamos thead th:nth-child(2),
.tabla-reclamos tbody td:nth-child(2) {
    text-align: left;
    color: #121212;
    width: 6.5%;
}

/* Estilo para la columna "Nombre" */
.tabla-reclamos thead th:nth-child(3),
.tabla-reclamos tbody td:nth-child(3) {
    text-align: left;
    color: #121212;
    width: 13%;
}
/* Estilo para la columna "apellidop" */
.tabla-reclamos thead th:nth-child(4),
.tabla-reclamos tbody td:nth-child(4) {
    text-align: left;
    color: #121212;
    width: 13.5%;
}
/* Estilo para la columna "apellidom" */
.tabla-reclamos thead th:nth-child(5),
.tabla-reclamos tbody td:nth-child(5) {
    text-align: left;
    color: #121212;
    width: 13.5%;
}
/* Estilo para la columna "Email" */
.tabla-reclamos thead th:nth-child(6),
.tabla-reclamos tbody td:nth-child(6) {
    text-align: left;
    color: #121212;
     width: 18%;
}

/* Estilo para la columna "Fecha" */
.tabla-reclamos thead th:nth-child(7),
.tabla-reclamos tbody td:nth-child(7) {
    text-align: left;
    color: #121212;
    width: 12%;
}
/* Estilo para la columna "dias transcurridos" */
.tabla-reclamos thead th:nth-child(8),
.tabla-reclamos tbody td:nth-child(8) {
    text-align: left;
    color: #121212;
    width: 12%;
}
/* Estilo para la columna "PDF" */
.tabla-reclamos thead th:nth-child(9),
.tabla-reclamos tbody td:nth-child(9) {
    text-align: left;
    color: #121212;
    width: 13%;
}
/* Estilo para los enlaces dentro de la columna "PDF" */
.tabla-reclamos tbody td:nth-child(9) a {
    color: #0c11af; /* Color azul */
    text-decoration: none; /* Opcional: elimina el subrayado */
}

/* Cambia el color al pasar el mouse */
.tabla-reclamos tbody td:nth-child(9) a:hover {
    color: #ff6600; /* Color diferente al pasar el mouse */
    text-decoration: underline; /* Opcional: agrega subrayado al pasar el mouse */
}
/* Estilo para la columna "adjuntos" */
.tabla-reclamos thead th:last-child,
.tabla-reclamos tbody td:last-child {
    text-align: left;
    color: #333;
    width: 15%;
}
/* Estilo para los enlaces dentro de la columna "adjuntos" */
.tabla-reclamos tbody td:last-child a {
    color: #0c11af; /* Color azul */
    text-decoration: none; /* Opcional: elimina el subrayado */
}

/* Cambia el color al pasar el mouse de la columna "adjuntos" */
.tabla-reclamos tbody td:last-child a:hover {
    color: #ff6600; /* Color diferente al pasar el mouse */
    text-decoration: underline; /* Opcional: agrega subrayado al pasar el mouse */
}

/* Hover para toda la fila */
.tabla-reclamos tbody tr:hover {
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
}






/* Estilo para la tabla específica */
.tabla-reclamos-a {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
}

.tabla-reclamos-a thead th {
    background-color: #e4edb0;
    color: #fff;
    padding: 10px;
}

.tabla-reclamos-a tbody td {
    padding: 15px 2px;
    border-bottom: 1px solid #ddd;
}

/* Estilo para la columna "N° Libro" */
.tabla-reclamos-a thead th:first-child,
.tabla-reclamos-a tbody td:first-child {
    text-align: left;
    color: #333;
    width: 8%;
}

/* Estilo para la columna "Nombre" */
.tabla-reclamos-a thead th:nth-child(2),
.tabla-reclamos-a tbody td:nth-child(2) {
    text-align: left;
    color: #333;
    width: 15%;
}
/* Estilo para la columna "apellidop" */
.tabla-reclamos-a thead th:nth-child(3),
.tabla-reclamos-a tbody td:nth-child(3) {
    text-align: left;
    color: #333;
    width: 14%;
}
/* Estilo para la columna "apellidom" */
.tabla-reclamos-a thead th:nth-child(4),
.tabla-reclamos-a tbody td:nth-child(4) {
    text-align: left;
    color: #333;
    width: 14%;
}
/* Estilo para la columna "Email" */
.tabla-reclamos-a thead th:nth-child(5),
.tabla-reclamos-a tbody td:nth-child(5) {
    text-align: left;
    color: #333;
     width: 18%;
}

/* Estilo para la columna "Fecha presentacion" */
.tabla-reclamos-a thead th:nth-child(6),
.tabla-reclamos-a tbody td:nth-child(6) {
    text-align: left;
    color: #333;
    width: 12%;
}
/* Estilo para la columna "Fecha respuesta" */
.tabla-reclamos-a thead th:nth-child(7),
.tabla-reclamos-a tbody td:nth-child(7) {
    text-align: left;
    color: #333;
    width: 12%;
}
/* Estilo para la columna "ver hora pdf" */
.tabla-reclamos-a thead th:nth-child(8),
.tabla-reclamos-a tbody td:nth-child(8) {
    text-align: left;
    width: 15%;
}
/* Estilo para los enlaces dentro de la columna "PDF" */
.tabla-reclamos-a tbody td:nth-child(8) a {
    color: #0c11af; /* Color azul */
    text-decoration: none; /* Opcional: elimina el subrayado */
}

/* Cambia el color al pasar el mouse de la columna "PDF" */
.tabla-reclamos-a tbody td:nth-child(8) a:hover {
    color: #ff6600; /* Color diferente al pasar el mouse */
    text-decoration: underline; /* Opcional: agrega subrayado al pasar el mouse */
}
/* Estilo para la columna "adjuntos" */
.tabla-reclamos-a thead th:last-child,
.tabla-reclamos-a tbody td:last-child {
    text-align: left;
    width: 15%;
}
/* Estilo para los enlaces dentro de la columna "adjuntos" */
.tabla-reclamos-a tbody td:last-child a {
    color: #0c11af; /* Color azul */
    text-decoration: none; /* Opcional: elimina el subrayado */
}

/* Cambia el color al pasar el mouse de la columna "adjuntos" */
.tabla-reclamos-a tbody td:last-child a:hover {
    color: #ff6600; /* Color diferente al pasar el mouse */
    text-decoration: underline; /* Opcional: agrega subrayado al pasar el mouse */
}

/* Hover para toda la fila */
.tabla-reclamos-a tbody tr:hover {
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
}
/* Estilo mejorado para la tabla configuraciones*/
.config-form table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.config-form th,
.config-form td {
    padding: 10px;
    text-align: left;
    border-bottom: 0px solid #ddd;
    width: 60%;
}

.config-form th {
    background-color: #2d322e00;
    color: #1c1a1a;
    font-weight: bold;
    text-transform: uppercase;
    width: 35%;
}

.config-form tr:nth-child(even) {
    background-color: #f9f9f9;
}

.config-form tr:hover {
    background-color: #f1f1f1;
}

.config-form td a {
    color: #007cba;
    text-decoration: none;
    font-weight: bold;
}

.config-form td a:hover {
    text-decoration: underline;
}

/* Estilo de la hoja PDF */
.pdf-reclamacion {
  font-family: Arial, sans-serif;
  margin: 20px;
}
.pdf-reclamacion h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
}
.pdf-reclamacion h2 {
  text-align: left;
  font-size: 15px;
  margin-top: 5px;
}
.pdf-reclamacion table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.pdf-reclamacion th, .pdf-reclamacion td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}
.pdf-reclamacion th {
  background-color: #d3cecd;
  font-weight: bold;
}
.pdf-reclamacion .observaciones {
  font-size: 10px;
  color: #666;
  margin-top: 20px;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}
.pdf-reclamacion .textarea {
  height: auto;
  min-height: 50px;
  overflow-wrap: break-word;
}
.pdf-reclamacion .footer-table {
  margin-top: 20px;
  font-size: 10px;
  width: 100%;
}

/* Estilo de la hoja PDF */