/* static/css/estilos.css */

/* Restablecimiento de márgenes y rellenos */
* {
  margin: 0;
  padding: 0;
  /*box-sizing: border-box;*/
}

/* Estilos generales del cuerpo */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.2;
}

/* Cabecera fija con fondo oscuro */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  padding: 10px 0;
  z-index: 1000;
}

/* Estilos del menú de navegación */
nav {
  display: flex;
  justify-content: center;
  gap: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #575757;
}

/* Contenedor principal */
.container {
  margin-top: 60px; /* Espacio para la cabecera fija */
  padding: 20px;
  max-width: 1200px;
  margin: 20px auto 20px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Título principal */
h1 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 10px;
  color: #333;
}

/* Subtítulo */
h2 {
  text-align: center;
  font-size: 2em;
  /*margin-bottom: 20px;*/
  color: #333;
}

h3 {
  text-align: center;
  font-size: 1.8em;
  /*margin-bottom: 20px;*/
  color: #666;
}

#centrado{
  text-align: center;
}

/* Estilos del contenido principal */
main {
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos de los enlaces dentro del contenido
/* botón inicial del menú de navegación */
.btn-personalizado {
    margin: 0 auto;
    background-color: #839adf;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 10px;
    display: inline-block; /* Asegura que se comporten como bloques en línea */
    position: relative; /* Necesario para los submenús */
}

/* Efecto hover del botón */
.btn-personalizado:hover {
    background-color: #4870da;
    color: black;
}

/* Estilo del contenedor del dropdown */
.dropdown {
    display: inline-block; /* Alinea el menú desplegable en línea con los otros botones */
    position: relative; /* Para posicionar el submenú relativo a este */
}
/* Estilo del submenú oculto */
.dropdown-content {
    display: none; /* Oculto por defecto */
    position: absolute; /* Posicionamiento absoluto respecto al .dropdown */
    background-color: #839adf; /* Color de fondo del submenú */
    border-radius: 10px; /* Bordes redondeados */
    min-width: 160px; /* Ancho mínimo */
    z-index: 1; /* Asegura que el menú esté por encima */
}
/* Muestra el submenú cuando el padre tiene hover */
.dropdown:hover .dropdown-content {
    display: block; /* Muestra el submenú al pasar el mouse */
}
/* Estilo de los enlaces dentro del dropdown */
.dropdown-content a {
    color: white; /* Color del texto */
    padding: 10px 15px; /* Espaciado */
    text-decoration: none; /* Sin subrayado */
    display: block; /* Los enlaces ocupan ocupan el ancho */
    border-radius: 10px; /* Bordes redondeados */
}

/* Hover para los enlaces del dropdown */
.dropdown-content a:hover {
    background-color: #4870da; /* Cambia el color al pasar el mouse */
    color: black; /* Color del texto en hover */
}

/* ESTILOS PARA DROPDOWN LATERAL (NUEVA NOMENCLATURA) lista reparaciones */
.dropdown-lateral {
    position: relative;
    display: inline-block;
}

.dropdown-lateral-content {
    display: none;
    position: absolute;
    left: 100%;  /* Posiciona el menú a la derecha del botón padre */
    top: 0;
    background-color: #839adf;
    border-radius: 10px;
    min-width: 100px;
    z-index: 2;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

/* Submenús anidados */
.dropdown-lateral-sub {
    position: relative;
}

.dropdown-lateral-subcontent {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #4870da; /*azul*/
    border-radius: 10px;
    min-width: 160px;
    z-index: 3;
}

/* Hover behaviors */
.dropdown-lateral:hover .dropdown-lateral-content {
    display: block;
}

.dropdown-lateral-sub:hover .dropdown-lateral-subcontent {
    display: block;
}

/* Estilos para los botones y enlaces */
.dropdown-lateral-content a,
.dropdown-lateral-sub button {
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    border-radius: 10px;
    white-space: nowrap;
    text-align: left;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
}

/* Estilo especial para elementos con submenú */
.dropdown-lateral-sub button::after {
    content: "▶";
    float: right;
    margin-left: 10px;
    font-size: 0.8em;
}

/* botón crear usuario */
.btn-primary {
    margin: 0 auto;
    background-color: #87e986;
    color: black;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 10px;
}

.btn-primary:hover {
     background-color: #1c8b1b;
     color: white;
}

/* botón tabla reparaciones crear/editar */
.btn-success-reparacion {
    font-size: 20px !important;
    background-color: #28a745;
    color: white;
    padding: 3px 5px;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.8s;
}

.btn-success-reparacion:hover {
     background-color: #218838;
     color: white;
}

 /* estilo del formulario de nuevo usuario */

.form-row {
    width: 600px;
    margin: 0 auto; /* Centra el bloque horizontalmente */
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #b2fbf4;
    /* Se eliminan position, top, left y transform */
}

.form-row-eventos {
    width: 700px;
    margin: 0 auto; /* Centra el bloque horizontalmente */
    padding: 5px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #b2fbf4;
    /* Se eliminan position, top, left y transform */
}

.form-campos{
    color: black;
    margin: 10px;
}

.form-campos-boton{
    color: black;
    margin-left: 20px;
    text-align: center;
}


/* Estilos generales para centrar el formulario */

/* Asegura que cada campo esté en su línea */
.form-campos {
    display: flex;
    flex-direction: column; /* Apilar label e input verticalmente */
    margin-bottom: 10px; /* Espacio entre campos */
}

/* Estilo para las etiquetas */
.form-campos label {
    font-weight: bold; /* Negrita para los labels */
    margin-bottom: 5px; /* Espacio entre label e input */
    color: #333333; /* Color oscuro para mejor lectura */
}

/* Estilo para los campos de entrada */
.form-campos input, .form-campos select {
    padding: 10px;
    border: 1px solid #ced4da; /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 14px; /* Tamaño de fuente legible */
    outline: none; /* Elimina el borde azul al hacer foco */
    transition: border 0.3s ease;
}
.form-campos textarea {
    padding: 4px;
}
/* Efecto al enfocar los campos */
.form-campos input:focus, .form-campos select:focus {
    border-color: #007bff; /* Resalta el borde en azul al hacer foco */
}

/* Botón de enviar */
.form-campos-boton {
    text-align: center; /* Centrar el botón */
    margin-top: 10px;
}

/* Estilo del botón */
.btn-success {
    background-color: #28a745; /* Verde Bootstrap */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Efecto hover en el botón */
.btn-success:hover {
    background-color: #218838; /* Verde más oscuro */
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 480px) {
    .form-signin {
        padding: 15px;
    }
}

/* Centrar el contenedor principal */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    /* margin: 20px auto; Margen alrededor del formulario */
    /*border: 10px solid #000000;*/
    /*background-color: #b2fbf4;  Fondo azul */
}

/* Estilo del formulario */
.form-signin {
    max-width: 500px;
    width: 100%;
    padding: 20px 20px;
    /*border: 10px solid #000000;*/
    background: #b2fbf4; /* Fondo azul */
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sutil sombra */
}

/* Logo centrado */
.logo-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.logo {
    height: 140px;
}

/* Título centrado */
.login-title {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* Estilo del botón */
.form-campos-boton {
    text-align: center;
}

/* Mensajes de error DANGER en rojo */
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    transform: translateZ(0); /* Fuerza a crear un nuevo contexto */
}

/* Mensajes de error ERROR en rojo */
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    transform: translateZ(0); /* Fuerza a crear un nuevo contexto */
}

/* Pie de página centrado */
.footer-text {
    text-align: center;
    margin-top: 20px;
    color: #666;
}

/* Estilo para la tabla de usuarios */
.table-container {
    margin-top: 10px; /* Espacio superior */
    margin-bottom: 10px; /* Espacio inferior */
    border-radius: 10px; /* Bordes redondeados */
    overflow: hidden; /* Para evitar desbordes en los bordes redondeados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra más suave */
    background-color: #f9f9f9; /* Fondo suave */
    padding: 20px;
}

.table-responsive {
    overflow-x: auto; /* Asegura que la tabla sea desplazable en pantallas pequeñas */
}

/* Estilo de la tabla de usuarios */
.table-usuarios {
    table-layout: fixed;      /* Fuerza que la tabla respete anchos fijos */
    width: 100%;
    border-collapse: collapse; /* Elimina los espacios entre celdas */
    margin-top: 10px;
}

.table-usuarios th, .table-usuarios td {

    text-overflow: ellipsis;  /* Muestra "…" si el texto es muy largo */
    padding: 12px; /* Espaciado dentro de las celdas */
    text-align: left; /* Alineación del texto */
    border-bottom: 1px solid #ddd; /* Línea inferior entre filas */
}
.ocultar-sobrante th, .ocultar-sobrante td{
    overflow: hidden; /* ocultar-sobrante */
}
.columna-limitada { /*limita la columna al ancho especificado para que no se coma las siguiente*/
    max-width: 450px; /* Define el ancho máximo deseado */
    overflow: hidden; /* Oculta el contenido que excede el ancho */
    text-overflow: ellipsis; /* Muestra puntos suspensivos si el texto es muy largo */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}
.table-usuarios th {
    background-color: #b2fbf4; /* #f4f4f4; Fondo gris claro para las cabeceras */
    font-weight: bold;
}

.table-header {
    border-radius: 14px; /* Bordes redondeados */

    font-size: 18px;
}

.table-usuarios tr:hover {
    background-color: #e1e1e1; /*#f1f1f1;  Efecto hover para las filas */
}

/* Estilo de los botones en las acciones */
.btn-success, .btn-danger {
    font-size: 14px;
    padding: 8px 12px; /* Ajuste de tamaño para que se vean más compactos */
}

/* Espaciado entre las filas de la tabla */
.table-usuarios tr {
    transition: background-color 0.3s ease;
}

/* Botón de crear nuevo usuario */
.text-center .btn-primary {
    padding: 12px 20px;
    background-color: #28a745; /* Verde más fuerte */
    color: white;
    border-radius: 8px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.text-center .btn-primary:hover {
    background-color: #218838; /* Verde más oscuro */
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .table-usuarios th, .table-usuarios td {
        padding: 8px; /* Ajustar el tamaño de las celdas en pantallas pequeñas */
    }

    .text-center .btn-primary {
        font-size: 14px; /* Reducir el tamaño del botón */
        padding: 10px 15px;
    }
}

/* clase color rojo */
.rojo {
color: red;
}


/* Contenedor de dos columnas */
.form-row.dos-columnas {
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Estilos para los campos del formulario en dos columnas*/
.form-campos.dos-columnas {
    flex: 1 1 calc(50% - 80px);
    display: flex;
    flex-direction: column;
}

/* transformar en mayúsculas el texto escrito */
.mayusculas {
    text-transform: uppercase;
}

/*  estilo para las alertas en rojo de las plantillas cuando se pasa un mensaje */
/* Contenedor de alertas */
.alert-container {
    position: fixed; /* Fijado en la parte superior */
    top: 200px; /* Separado del borde superior */
    left: 50%;
    transform: translateX(-50%); /* Centrar horizontalmente */
    z-index: 1050; /* Asegura que esté por encima de otros elementos */
}
/* Contenedor de alertas para reparaciones */
.alert-container-reparaciones {
    position: fixed; /* Fijado en la parte superior */
    top: 150px; /* Separado del borde superior */
    left: 50%;
    transform: translateX(-50%); /* Centrar horizontalmente */
    z-index: 1050; /* Asegura que esté por encima de otros elementos */
}

/* Estilo de la alerta */
.alert {
    display: flex; /* Permite alinear el texto y el botón */
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: space-between; /* Espacio entre texto y botón */
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px; /* Espacio entre alertas */
    max-width: 600px; /* Ancho máximo de las alertas */
}

/* Botón de cierre (X) */
.close-btn {
    margin-left: 10px;
    padding: 5px 5px;
    border-radius: 4px;
    background: #b87879;
    border: none;
    color: #333;
    font-size: 30px;
    cursor: pointer;
}

.close-btn:hover {
    color: red; /* Color al pasar el mouse */
}

/* Personalización por categoría */
.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}
.alert-warning {
  background-color: #fff3cd;
  color: #856404;
}

.alert-info {
  background-color: #d1ecf1;
  color: #0c5460;
}

/* Contenedor de búsqueda clientes */
.form-busqueda {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
    width: 550px;
    /*display: flex;*/
    flex-wrap: wrap;
    gap: 10px;
    background-color: #b2fbf4;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sutil sombra */
    padding: 10px 25px;

}
/* Contenedor de búsqueda reparaciones */
.form-busqueda-reparaciones {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
    width: 770px;
    /*display: flex;*/
    flex-wrap: wrap;
    gap: 10px;
    background-color: #b2fbf4;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sutil sombra */
    padding: 10px 25px;
}
.form-campos-busqueda {
    padding: 10px;
    border: 1px solid #ced4da; /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 14px; /* Tamaño de fuente legible */
    outline: none; /* Elimina el borde azul al hacer foco */
    transition: border 0.3s ease;
}

/* Contenedor de tres columnas */
.form-row.tres-columnas {
    width: 1000px; /* Ajusta si necesitas más ancho */
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin-top: 1px; /* Añade espacio entre el texto y el formulario */
    box-shadow: none;
}

/* Estilos para los campos del formulario en tres columnas */
.form-campos.tres-columnas {
    flex: 1 1 calc(33.33% - 40px); /* Ocupa un tercio del contenedor */
    display: flex;
    flex-direction: column;
}

/* estilo para observaciones de factura que ocupe medio contenedor*/
.form-campos.medio {
    flex: 1 1 50%;
}
/* y un cuarto cada uno de los checkbox*/
.form-campos.cuartos {
    flex: 1 1 20%;
}

/* Estilos para los campos del formulario en 1 columna */
.form-campos.una-columnas {
    flex: 1 1 calc(99% - 40px); /* Ocupa el contenedor completo */
    display: flex;
    flex-direction: column;
}
/* Estilos para los campos del formulario en 1 columna */
.form-campos-boton.una-columnas {
    flex: 1 1 calc(99% - 40px); /* Ocupa el contenedor completo */
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    justify-content: center;
}
/* Estilo de cuadro para boolean */
.checkbox-grande {
    transform: scale(3); /* Ajusta el tamaño según lo necesites */
   /*  margin-left: 30px; Opcional: espacio entre el checkbox y la etiqueta */
    margin-top: 12px; /* margen con label encima */
}
/* cuadro de boolean ajustar a la izquierda */
.checkbox-container {
/*    display: flex;
    flex-direction: column; /* Coloca el label debajo */
 /*   align-items: flex-start; /* Alinea a la izquierda */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center;     /* Centra el contenido verticalmente */
    text-align: center;      /* Centra el texto si es necesario */
    display: flex;           /* Habilita flexbox para centrar */
}

/* campos de reparación al crearlas */
.linea-producto {
    display: flex;
    gap: 10px;
    align-items: center;
}
.linea-producto input {
    width: 100px; /* Ajusta según necesites */
    font-size: 16px;
    padding: 2px;
}
#lineas-productos {
    max-height: 300px; /* Ajusta la altura según tus necesidades */
    overflow-y: auto;  /* Permite que se muestre una barra de desplazamiento vertical */
    margin-top: 10px;  /* Opcional: separa visualmente esta sección del resto del formulario */
    width: 100%;       /* Igual al contenedor padre */
}
/*Justificar totales a la derecha*/
#totales{
    text-align: right;
}
/* Se aplican estilos únicamente a las líneas de reparación */
.linea-producto {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

/* Campo para cantidad: suficiente para 4 dígitos */
.linea-producto .cantidad {
    width: 60px;
}

/* Campos para descuentos: suficiente para 3 dígitos */
.linea-producto .dto1,
.linea-producto .dto2 {
    width: 40px;
}

/* Campos para subtotal y total: suficiente para 8 dígitos más dos decimales */
.linea-producto .subtotal,
.linea-producto .total {
    width: 120px;
}

/* El campo descripción toma el espacio restante */
.linea-producto .descripcion {
    flex: 1;
}
/* Contenedor general para el formulario, con ancho fijo y centrado */
.formulario-container {
    width: 1000px;       /* Ancho fijo para el formulario */
    margin: 0 auto;      /* Centrado horizontal */
    display: flex;
    flex-direction: column; /* Apila los hijos verticalmente en el orden del HTML */
    gap: 10px;           /* Opcional: espacio entre secciones */
    padding: 20px;       /* Espacio interno */
    background-color: #b2fbf4;
    border-radius: 12px; /* Bordes redondeados */
}
/* Estilo de los botones en las acciones */
.btn-agregar {
    background-color: #28a745; /* Verde Bootstrap */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Efecto hover en el botón */
.btn-agregar:hover {
    background-color: #218838; /* Verde más oscuro */
}

/*estilos para evitar que se corten los botones de listar reparaciones*/
/* Permitir que los dropdowns sobresalgan del contenedor */
.table-responsive {
    overflow: visible; /* Permite que los elementos floten fuera del contenedor */
}

/* Ajustes para el dropdown principal */
.dropdown-lateral-content {
    display: none;
    position: absolute; /* Absoluto para salir del flujo normal */
    left: 100%; /* Despliega hacia la derecha */
    top: 0;
    background-color: #28a745; /* Verde Bootstrap */
    border-radius: 10px;
    min-width: 100px;
    z-index: 9999; /* Asegura que esté por encima de lo demás */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap; /* Evita el salto de línea */
}

/* Ajustes para el submenú */
.dropdown-lateral-subcontent {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #28a745; /* Verde Bootstrap */
    border-radius: 10px;
    min-width: 100px;
    z-index: 10000; /* Más alto que el principal */
}

/* Mostrar el menú al pasar el mouse */
.dropdown-lateral:hover .dropdown-lateral-content {
    display: block;
}

.dropdown-lateral-sub:hover .dropdown-lateral-subcontent {
    display: block;
}

/* Estilos para los enlaces y botones */
.dropdown-lateral-content a,
.dropdown-lateral-sub button {
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    border-radius: 10px;
    white-space: nowrap; /* Mantiene los elementos en una sola línea */
    text-align: left;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
}
.dropdown-lateral-content.btn-rojo a{
    margin: 0 auto;
    background-color: #ff5f5f;
    color: white;
    padding: 3px 5px;
    text-decoration: none;
    border-radius: 10px;
}

.dropdown-lateral-content a:hover,
.dropdown-lateral-sub button:hover {
    background-color: #218838; /* Verde más oscuro */
    min-width: 100px; /* 🔴 Establece un ancho mínimo */
    box-sizing: border-box; /* 🟢 Garantiza que padding no afecte el ancho */
}

/* Flecha indicadora en el submenú */
.dropdown-lateral-sub button::after {
    content: "▶";
    float: right;
    margin-left: 10px;
    font-size: 0.8em;
}

/* Contenedor del campo de entrada */
.autocomplete-container {
  position: relative;
  display: inline-block; /* o block, según el diseño */
  width: 100%;
}

/* botón tabla usuarios borrar */
.btn-danger {
    background-color: #ff5f5f;
    color: white;
    border-radius: 10px;
}

.btn-danger:hover {
     background-color: #a52727 !important;
     color: white;
}

/* Contenedor de las sugerencias */
.autocomplete-list {
  position: absolute;
  top: 400px; /* justo debajo del input */
  left: 0;
  background: white;
  border: 1px solid #ddd;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  /*width: 600px;  ajusta este ancho si es necesario */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos para cada ítem de las sugerencias */
.autocomplete-item {
  padding: 8px;
  cursor: pointer;
  white-space: nowrap; /* mantiene el texto en una sola línea */
}

.autocomplete-item:hover {
  background-color: #f0f0f0;
}
/* Contenedor de las sugerencias aparatos */
.autocomplete-aparatos {
  /*position: absolute;*/
  top: 400px; /* justo debajo del input */
  left: 0;
  background: white;
  border: 1px solid #ddd;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  /*width: 600px;  ajusta este ancho si es necesario */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos para cada ítem de las sugerencias */
.autocomplete-aparatos-item {
  padding: 8px;
  cursor: pointer;
  white-space: nowrap; /* mantiene el texto en una sola línea */
}

.autocomplete-aparatos-item:hover {
  background-color: #f0f0f0;
}
/*estilos para el calendario*/
table.calendar {
    width: 100%;
    border-collapse: collapse;
}
table.calendar th{
    background-color: #b2fbf4;
}
table.calendar th, table.calendar td {
    border: 1px solid #ccc;
    padding: 5px;
    vertical-align: top;
    text-align: left;
}

/* Ancho para días de lunes a viernes (weekday) */
table.calendar th.weekday, table.calendar td.weekday {
    width: 16.67%;
}

/* Ancho para sábado y domingo (weekend) */
table.calendar th.weekend, table.calendar td.weekend {
    width: 8.33%;
}

.not-current-month {
    background-color: #f9f9f9;
    color: #aaa;
}

.day-number {
    font-weight: bold;
}

/* Contenedor de búsqueda calendario */
.form-busqueda-calendario {
    font-size: 1.2em;
    background-color: #b2fbf4;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px 25px;
    text-align: center; /* Centrar texto */
    left: 50%;
}

/* Estilos básicos para el modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* Fondo semi-transparente */
  display: none; /* Oculto por defecto */
  align-items: start;
  justify-content: center;
  z-index: 1000;
}

.modal-contenido {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 90%;
  max-width: 500px;
  position: relative;
}

/* Botón para cerrar */
.modal-cerrar {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* Estilos para los botones del modal */
.btn-modal,
.btn-secundario,
.btn-primario {
  padding: 8px 16px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-modal {
  background-color: #007BFF;
  color: #fff;
}

.btn-primario {
  background-color: #28a745;
  color: #fff;
}

.btn-secundario {
  background-color: #6c757d;
  color: #fff;
  margin-right: 10px;
}

/*estilos de las sugerencias de modificar cliente reparacion*/
.autocomplete-list-factura {
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  background: #fff;
  width: 100%;
  z-index: 1001;
}
.autocomplete-item {
  padding: 5px 10px;
  cursor: pointer;
}
.autocomplete-item:hover {
  background: #f0f0f0;
}

/*estilos de calendario*/
.reparaciones li {
  color: blue;
  list-style-type: none;
}
/* reparaciones ya existentes serán azul oscuro por defecto */
.reparacion-evento {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
}

/* no facturado */
.reparacion-evento.no-facturado {
  background-color: #007bff;  /* azul */
}

/* facturado */
.reparacion-evento.facturado {
  background-color: #20c997;  /* verde azulado o “teal” */
}

/* eventos de google calendar */
.google-events li {
  color: green;
  list-style-type: none;
}
.google-events a {
  color: green;
  list-style-type: none;
}
 .ampliado{
     width: 900px;
 }

    /* estilos para modal de crear aparatología en crear reparación */

 /* Oculta el modal por defecto */
.custom-modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Para scroll si es necesario */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
}

/* delimitar tamaño tabla */
.ancho-mil {
    max-width: 800px;
    margin: 0 auto; /* deja centrado el contenedor div */

}

.centrado-400{
    max-width: 400px;
    margin: 0 auto; /* deja centrado el contenedor div */
}

/* eventos propios al calendario */
.evento-calendario {
    color: #800000;   /* rojo apagado / granate */
    text-decoration: none;
  }
  .user-events li {
    margin: 2px 0;
    list-style-type: none;
  }

/* para los mensajes de alerta, que se difuminen */
.alert {
  transition: opacity 2s ease;
}

.alert.fade-out {
  opacity: 0;
}

/* hacer que la fila de la tabla sea clickable */
tr.clickable-row {
    cursor: pointer;
}

/* Estilo general para cualquier tabla modular */
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.table th,
.table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Específico para la tabla de clientes */
.with-clientes {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}



.with-clientes th:nth-child(1),
.with-clientes td:nth-child(1) { /* NIF */
    width: 10%;
}

.with-clientes th:nth-child(2),
.with-clientes td:nth-child(2) { /* Nombre */
    width: 25%;
}

.with-clientes th:nth-child(3),
.with-clientes td:nth-child(3) { /* Email */
    width: 30%;
}

.with-clientes th:nth-child(4),
.with-clientes td:nth-child(4) { /* Teléfono */
    width: 15%;
}

.with-clientes th:nth-child(5),
.with-clientes td:nth-child(5) { /* Acciones */
    width: 20%;
}

/* Adaptable para pantallas pequeñas */
@media (max-width: 768px) {
    .with-clientes th:nth-child(1),
    .with-clientes td:nth-child(1) {
        width: 20%;
    }
    .with-clientes th:nth-child(2),
    .with-clientes td:nth-child(2) {
        width: 30%;
    }
    .with-clientes th:nth-child(3),
    .with-clientes td:nth-child(3) {
        width: 0;
        display: none;
    }
    .with-clientes th:nth-child(4),
    .with-clientes td:nth-child(4) {
        width: 25%;
    }
    .with-clientes th:nth-child(5),
    .with-clientes td:nth-child(5) {
        width: 25%;
    }
}

/* Utility para truncar texto con puntos suspensivos */
.truncate {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Específico para la tabla de aparatología */
.with-aparatologia {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.with-aparatologia th,
.with-aparatologia td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: visible; /* permitir dropdowns */
    text-overflow: ellipsis;
    position: relative;
}

.with-aparatologia th:nth-child(1),
.with-aparatologia td:nth-child(1) { /* n serie */
    width: 10%;
}

.with-aparatologia th:nth-child(2),
.with-aparatologia td:nth-child(2) { /* Aparato */
    width: 30%;
}

.with-aparatologia th:nth-child(3),
.with-aparatologia td:nth-child(3) { /* precio */
    width: 5%;
}

.with-aparatologia th:nth-child(4),
.with-aparatologia td:nth-child(4) { /* cliente */
    width: 20%;
}

.with-aparatologia th:nth-child(5),
.with-aparatologia td:nth-child(5) { /* Acciones */
    width: 20%;
}

/* Adaptable para pantallas pequeñas */
@media (max-width: 768px) {
    .with-aparatologia th:nth-child(1),
    .with-aparatologia td:nth-child(1) {
        width: 20%;
    }
    .with-aparatologia th:nth-child(2),
    .with-aparatologia td:nth-child(2) {
        width: 30%;
    }
    .with-aparatologia th:nth-child(3),
    .with-aparatologia td:nth-child(3) {
        width: 0;
        display: none;
    }
    .with-aparatologia th:nth-child(4),
    .with-aparatologia td:nth-child(4) {
        width: 25%;
    }
    .with-aparatologia th:nth-child(5),
    .with-aparatologia td:nth-child(5) {
        width: 25%;
    }
}

/* Específico para la tabla de eventos *** Título - Fecha - Inicio - Privado - Alerta - Hecho - Acciones */
.with-eventos {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.with-eventos th,
.with-eventos td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: visible; /* permitir dropdowns */
    text-overflow: ellipsis;
    position: relative;
}

.with-eventos th:nth-child(1),
.with-eventos td:nth-child(1) { /* título */
    width: 70%;
}

.with-eventos th:nth-child(2),
.with-eventos td:nth-child(2) { /* Fecha */
    width: 15%;
}

.with-eventos th:nth-child(3),
.with-eventos td:nth-child(3) { /* inicio */
    width: 8%;
}

.with-eventos th:nth-child(4),
.with-eventos td:nth-child(4) { /* privado */
    width: 8%;
}

.with-eventos th:nth-child(5),
.with-eventos td:nth-child(4) { /* hecho */
    width: 8%;
}

.with-eventos th:nth-child(6),
.with-eventos td:nth-child(6) { /* Acciones */
    width: 20%;
}

/* Adaptable para pantallas pequeñas */
@media (max-width: 768px) {
    .with-eventos th:nth-child(1),
    .with-eventos td:nth-child(1) {
        width: 40%;
    }
    .with-eventos th:nth-child(2),
    .with-eventos td:nth-child(2) {
        width: 10%;
    }
    .with-eventos th:nth-child(3),
    .with-eventos td:nth-child(3) {
        width: 5;
    }
    .with-eventos th:nth-child(4),
    .with-eventos td:nth-child(4) {
        width: 5%;
    }
     .with-eventos th:nth-child(5),
    .with-eventos td:nth-child(5) {
        width: 5%;
    }
    .with-eventos th:nth-child(6),
    .with-eventos td:nth-child(6) {
        width: 15%;
    }
}

/* Específico para la tabla de Reparaciones *** Reparado - Facturado - Cliente - Producto - Fecha - Acciones */
.with-reparaciones {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.with-reparaciones th,
.with-reparaciones td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: visible; /* permitir dropdowns */
    text-overflow: ellipsis;
    position: relative;
}

.with-reparaciones th:nth-child(1),
.with-reparaciones td:nth-child(1) { /* Reparado */
    width: 8%;
}

.with-reparaciones th:nth-child(2),
.with-reparaciones td:nth-child(2) { /* Facturado */
    width: 8%;
}

.with-reparaciones th:nth-child(3),
.with-reparaciones td:nth-child(3) { /* Cliente */
    width: 30%;
}

.with-reparaciones th:nth-child(4),
.with-reparaciones td:nth-child(4) { /* Producto */
    width: 30%;
}

.with-reparaciones th:nth-child(5),
.with-reparaciones td:nth-child(5) { /* Fecha */
    width: 10%;
}

.with-reparaciones th:nth-child(6),
.with-reparaciones td:nth-child(6) { /* Acciones */
    width: 10%;
}

/* Adaptable para pantallas pequeñas */
@media (max-width: 768px) {
    .with-reparaciones th:nth-child(1),
    .with-reparaciones td:nth-child(1) {
        width: 5%;
    }
    .with-reparaciones th:nth-child(2),
    .with-reparaciones td:nth-child(2) {
        width: 5%;
    }
    .with-reparaciones th:nth-child(3),
    .with-reparaciones td:nth-child(3) {
        width: 15;
    }
    .with-reparaciones th:nth-child(4),
    .with-reparaciones td:nth-child(4) {
        width: 15%;
    }
    .with-reparaciones th:nth-child(5),
    .with-reparaciones td:nth-child(5) {
        width: 10%;
    }
    .with-reparaciones th:nth-child(6),
    .with-reparaciones td:nth-child(6) {
        width: 10%;
    }
}

/* Específico para la tabla de Facturas *** Facturado	Cobrado	N. Factura	Fecha	Cliente	Acciones */
.with-facturas {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.with-facturas th,
.with-facturas td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: visible; /* permitir dropdowns */
    text-overflow: ellipsis;
    position: relative;
}

.with-facturas th:nth-child(1),
.with-facturas td:nth-child(1) { /* Facturado */
    width: 8%;
}

.with-facturas th:nth-child(2),
.with-facturas td:nth-child(2) { /* Cobrado */
    width: 8%;
}

.with-facturas th:nth-child(3),
.with-facturas td:nth-child(3) { /* Estado Billin */
    width: 10%;
}

.with-facturas th:nth-child(4),
.with-facturas td:nth-child(4) { /* N. Factura */
    width: 10%;
}

.with-facturas th:nth-child(5),
.with-facturas td:nth-child(5) { /* Fecha */
    width: 10%;
}

.with-facturas th:nth-child(6),
.with-facturas td:nth-child(6) { /* Cliente */
    width: 40%;
}

.with-facturas th:nth-child(7),
.with-facturas td:nth-child(7) { /* Acciones */
    width: 15%;
}

/* Adaptable para pantallas pequeñas */
@media (max-width: 768px) {
    .with-facturas th:nth-child(1),
    .with-facturas td:nth-child(1) {
        width: 5%;
    }
    .with-facturas th:nth-child(2),
    .with-facturas td:nth-child(2) {
        width: 5%;
    }
    .with-facturas th:nth-child(3),
    .with-facturas td:nth-child(3) {
        width: 10;
    }
    .with-facturas th:nth-child(4),
    .with-facturas td:nth-child(4) {
        width: 15%;
    }
    .with-facturas th:nth-child(5),
    .with-facturas td:nth-child(5) {
        width: 25%;
    }
    .with-facturas th:nth-child(6),
    .with-facturas td:nth-child(6) {
        width: 10%;
    }
}


/* Específico para la tabla de productos *** Referencia	Nombre	Precio	Cantidad	Acciones */
.with-productos {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.with-productos th,
.with-productos td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: visible; /* permitir dropdowns */
    text-overflow: ellipsis;
    /* position: relative; */
}

.with-productos th:nth-child(1),
.with-productos td:nth-child(1) { /* Referencia */
    width: 15%;
}

.with-productos th:nth-child(2),
.with-productos td:nth-child(2) { /* Nombre */
    width: 40%;
}

.with-productos th:nth-child(3),
.with-productos td:nth-child(3) { /* Precio */
    width: 5%;
}

.with-productos th:nth-child(4),
.with-productos td:nth-child(4) { /* Cantidad */
    width: 5%;
}

.with-productos th:nth-child(5),
.with-productos td:nth-child(5) { /* Acciones */
    width: 10%;
}

/* Adaptable para pantallas pequeñas */
@media (max-width: 768px) {
    .with-productos th:nth-child(1),
    .with-productos td:nth-child(1) {
        width: 40%;
    }
    .with-productos th:nth-child(2),
    .with-productos td:nth-child(2) {
        width: 10%;
    }
    .with-productos th:nth-child(3),
    .with-productos td:nth-child(3) {
        width: 5;
    }
    .with-productos th:nth-child(4),
    .with-productos td:nth-child(4) {
        width: 5%;
    }
    .with-productos th:nth-child(5),
    .with-productos td:nth-child(5) {
        width: 15%;
    }
}

/* Específico para la tabla de Usuarios *** Usuario - Email - Nombre - Autorización - login - Logout - Acciones */
.with-usuarios {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.with-usuarios th,
.with-usuarios td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: visible; /* permitir dropdowns */
    text-overflow: ellipsis;
    position: relative;
}

.with-usuarios th:nth-child(1),
.with-usuarios td:nth-child(1) { /* usuarios */
    width: 7%;
}

.with-usuarios th:nth-child(2),
.with-usuarios td:nth-child(2) { /* Email */
    width: 20%;
}

.with-usuarios th:nth-child(3),
.with-usuarios td:nth-child(3) { /* Nombre */
    width: 15%;
}

.with-usuarios th:nth-child(4),
.with-usuarios td:nth-child(4) { /* Autorización */
    width: 10%;
}

.with-usuarios th:nth-child(5),
.with-usuarios td:nth-child(5) { /* login */
    width: 15%;
}

.with-usuarios th:nth-child(6),
.with-usuarios td:nth-child(6) { /* logout */
    width: 15%;
}

.with-usuarios th:nth-child(7),
.with-usuarios td:nth-child(7) { /* Acciones */
    width: 8%;
}

/* Adaptable para pantallas pequeñas */
@media (max-width: 768px) {
    .with-usuarios th:nth-child(1),
    .with-usuarios td:nth-child(1) {
        width: 5%;
    }
    .with-usuarios th:nth-child(2),
    .with-usuarios td:nth-child(2) {
        width: 10%;
    }
    .with-usuarios th:nth-child(3),
    .with-usuarios td:nth-child(3) {
        width: 10;
    }
    .with-usuarios th:nth-child(4),
    .with-usuarios td:nth-child(4) {
        width: 10%;
    }
    .with-usuarios th:nth-child(5),
    .with-usuarios td:nth-child(5) {
        width: 8%;
    }
    .with-usuarios th:nth-child(6),
    .with-usuarios td:nth-child(6) {
        width: 8%;
    }
    .with-usuarios th:nth-child(7),
    .with-usuarios td:nth-child(7) {
        width: 5%;
    }
}

/* Específico para la tabla de presupuestos */
.with-presupuestos {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.with-presupuestos th,
.with-presupuestos td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: visible; /* permitir dropdowns */
    text-overflow: ellipsis;
    position: relative;
}

.with-presupuestos th:nth-child(1),
.with-presupuestos td:nth-child(1) { /* nombre carpeta */
    width: 30%;
}

.with-presupuestos th:nth-child(2),
.with-presupuestos td:nth-child(2) { /* cliente */
    width: 30%;
}

.with-presupuestos th:nth-child(3),
.with-presupuestos td:nth-child(3) { /* fecha */
    width: 15%;
}

.with-presupuestos th:nth-child(4),
.with-presupuestos td:nth-child(4) { /* acciones */
    width: 20%;
}


/* Adaptable para pantallas pequeñas */
@media (max-width: 768px) {
    .with-presupuestos th:nth-child(1),
    .with-presupuestos td:nth-child(1) {
        width: 20%;
    }
    .with-presupuestos th:nth-child(2),
    .with-presupuestos td:nth-child(2) {
        width: 30%;
    }
    .with-presupuestos th:nth-child(3),
    .with-presupuestos td:nth-child(3) {
        width: 15;
        display: none;
    }
    .with-presupuestos th:nth-child(4),
    .with-presupuestos td:nth-child(4) {
        width: 25%;
    }
}

/* Clase para títulos 'chillones' */
.titulo-chillon {
  background: linear-gradient(90deg, #ff3b8f 0%, #ff8800 100%); /* degradado vibrante */
  color: #0b0b0b;                /* texto oscuro para contraste */
  font-weight: 700;              /* negrita */
  padding: 6px 10px;             /* espacio interior */
  border-radius: 6px;            /* esquinas suaves */
  display: inline-block;         /* para que el background quede alrededor del texto */
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* efecto al pasar el ratón */
.titulo-chillon:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

/* Alternativa: color sólido llamativo (neón) */
 .titulo-chillon2 {
   background: #ccff00; /* neón lima */
   color: #000;         /* texto negro para contraste */
 }

/* Si alguna regla inline de la tabla interfiere, fuerza con !important (usar solo si es necesario) */
// .titulo-chillon {
//   background: #ff3b8f !important;
// }

/* --- mejoras específicas para documentos (añadir al final de estilos.css) --- */
.documentos-detalle .card-title { font-size: 1.15rem; }
.file-card { overflow: hidden; border-radius: 0.5rem; }
.file-thumb-wrap { height: 160px; overflow: hidden; background: #f8f9fa; display:flex; align-items:center; justify-content:center; }
.file-thumb { width: 100%; height: 160px; object-fit: cover; display:block; }
.file-thumb-placeholder { height: 160px; background: #f1f3f5; color:#6c757d; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
//.alert-container { position: relative; z-index: 10; }
/* pequeñas adaptaciones responsive */
@media (max-width: 576px) {
  .file-thumb, .file-thumb-placeholder, .file-thumb-wrap { height: 130px; }
}

# Botón de subir archivos a documentos
.custom-file-input {
    border: 2px dashed #0d6efd;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
}