* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

/* Configuración del cuerpo */
html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  min-height: 100vh;
  background-color: #f3f4f6;
}
:root {
  --sidebar-bg:    #1e2732;
  --item-default:  #2a3746;
  --item-hover:    #3e4e62;
  --item-active:   #556a81;
  --text-color:    #f0f4f8;
  --icon-color:    #7f8c9d;
  --icon-hover:    #ecf0f1;
}

.app-container {
  display: grid;
  grid-template-columns: 270px 1fr;
  width: 100%;
  height: 100%;
  overflow: hidden; /* evita scroll fuera de main */
}
/* Main content */
.main-content {
  background: #f8fafc;
  padding: 20px;
  overflow-y: auto;
}

  .field-container { 	/* Boton para eliminar campo del formualrio creado */
position: relative;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
background-color: #fff;
transition: all 0.3s ease;
}

.field-container:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.field-container .delete-field {
position: absolute;
top: 5px;
right: 5px;
color: red;
font-size: 18px;
cursor: pointer;
font-weight: bold;
transition: color 0.3s ease;
}

.field-container .delete-field:hover {
color: darkred;
}

  /* Contenedor del interruptor */
.required-toggle-container {
display: flex;
align-items: center;
margin-top: 10px;
}

/* Texto al lado del interruptor */
.required-toggle-container label {
font-size: 14px;
margin-left: 8px;
cursor: pointer;
}

/* Estilo del checkbox oculto */
.required-toggle-container input[type="checkbox"] {
display: none;
}

/* Contenedor del switch */
.required-toggle-container .toggle-switch {
position: relative;
width: 40px;
height: 20px;
background-color: #ccc;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}

/* Indicador del switch */
.required-toggle-container .toggle-switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
background-color: white;
border-radius: 50%;
transition: transform 0.3s ease;
}

/* Estilo cuando el checkbox está marcado */
.required-toggle-container input[type="checkbox"]:checked + .toggle-switch {
background-color: #4caf50;
}

.required-toggle-container input[type="checkbox"]:checked + .toggle-switch::after {
transform: translateX(20px);
}
/* Botón de cerrar */
.close-button {
position: absolute; /* Posición absoluta dentro del contenedor */
top: 10px; /* Distancia desde la parte superior */
right: 10px; /* Distancia desde la parte derecha */
font-size: 24px;
font-weight: bold;
color: #333;
cursor: pointer;
background: none;
border: none;
}

.close-button:hover {
color: #e74c3c; /* Cambia el color al pasar el mouse */
}

/* Campos arrastrables */
.draggable-field {
padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
cursor: grab;
display: flex;
flex-direction: column;
gap: 5px;
transition: background-color 0.2s ease;
}

.draggable-field.dragging {
opacity: 0.5;
cursor: grabbing;
background-color: #e0e0e0;
}

.draggable-field label {
font-weight: bold;
}

.draggable-field input,
.draggable-field select,
.draggable-field textarea {
padding: 5px;
font-size: 14px;
}
/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  text-align: left;
  max-height: 90vh;
  overflow-y: auto;
  position: relative; /* Asegura que el tache use este contenedor como referencia */

}

/* Botones del modal */
.modal button {
  margin: 5px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Botón "Cerrar" como tache en la esquina superior derecha del modal */
.close-modal-btn {
font-size: 1.2rem; /* Ajuste del tamaño del texto */
color: white; /* Color del ícono */
background-color: red; /* Fondo del botón */
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
width: 30px; /* Ancho del botón */
height: 30px; /* Altura del botón */
border: none; /* Sin bordes */
border-radius: 50%; /* Forma circular */
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease; /* Transición para color y tamaño */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para un efecto flotante */
}

.close-modal-btn:hover {
color: black; /* Cambia el color del ícono al pasar el mouse */
background-color: white; /* Cambia el fondo al pasar el mouse */
border: 1px solid red; /* Agrega un borde rojo */
}
.star-rating-container {
display: flex;
justify-content: center;
align-items: center;
}

.star {
font-size: 24px;
cursor: pointer;
transition: color 0.2s;
}

.star:hover {
color: gold;  /* Color de estrella al pasar el cursor */
}

.form-name-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

/* Botón de guardar */
.save-btn-text {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

.save-btn-text:hover {
background-color: #218838;
transform: translateY(-2px); /* Efecto flotante */
}

.clear-form-btn {
margin-top: 15px;
padding: 8px 12px;
background-color: #dc3545;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

.clear-form-btn:hover {
background-color: #c82333;
}

/* Formulario de Servicio */
.container {
  padding: 20px;
  background-color: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 20px auto;
}

h2 {
  text-align: center;
  color: #333333;
  margin-bottom: 20px;
}

label {
  font-weight: bold;
  display: block;
  margin-top: 15px;
  color: #4b5563;
}

label.required::after {
  content: " *";
  color: red;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 16px;
  color: #333333;
  background-color: #ffffff;
  transition: border-color 0.3s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #3b82f6;
  outline: none;
}

.location-btn,
.submit-btn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.location-btn {
  background-color: #2563eb;
  color: #ffffff;
}

.location-btn:hover {
  background-color: #1d4ed8;
}

.submit-btn {
  background-color: #10b981;
  color: #ffffff;
}

.submit-btn:hover {
  background-color: #059669;
}

/* úsalo como clase si tienes varios; si es uno, puedes dejar #signatureCanvas */
.signature-canvas{
  border: 2px solid #ef4444;   /* rojo por defecto */
  border-radius: 8px;
  width: 100%;
  height: 160px;               /* solo visual; el real lo ajusta JS */
  display: block;
  touch-action: none;          /* evita pan/zoom del navegador al firmar */
  -webkit-user-select: none;
  user-select: none;
}
.signature-canvas.is-drawing{ border-color:#22c55e; }   /* verde al dibujar */
.signature-canvas.sig-disabled{
  pointer-events: none;
  cursor: not-allowed;
  opacity: .65;
  border-color: #9ca3af;       /* gris bloqueado */
  filter: grayscale(.2);
}
/* Estilo del contenedor del mapa */
#map-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#map {
  width: 100%;
  height: 300px;
  margin-bottom: 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

/* Ajustes para Leaflet */
.leaflet-container {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.leaflet-tile {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenedor para los botones en una fila */
.button-row {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* Espacio entre los botones */
  margin-top: 20px;
}

/* Estilos para los botones */
.delete-signature-btn,
.close-btn,
.submit-btn {
  flex: 1;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Botón de borrar firma */
.delete-signature-btn {
  background-color: #ffca28;
  color: #333;
}

.delete-signature-btn:hover {
  background-color: #ffb300;
}

/* Botón de cerrar */
.close-btn {
  background-color: #e53e3e;
  color: #ffffff;
}

.close-btn:hover {
  background-color: #c53030;
}

/* Botón de enviar */
.submit-btn {
  background-color: #28a745;
  color: #ffffff;
}

.submit-btn:hover {
  background-color: #218838;
}
/* Ocultar el input de archivo */
.file-input {
  display: none;
}

/* Estilo para el botón personalizado */
.custom-file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: #2563eb;
  color: white;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 15px;
  width: 100%; /* Ocupa el ancho completo */
  box-sizing: border-box; /* Asegura que el padding no expanda el ancho */
}

.custom-file-label:hover {
  background-color: #1d4ed8;
}

/* Icono de cámara dentro del botón */
.custom-file-label i {
  margin-right: 8px;
  font-size: 18px;
}
/* Estilos básicos */
.custom-select-container {
  position: relative;
  width: 300px; /* Ajusta el ancho aquí */
}

.custom-select-btn {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  text-align: left;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.select-container {
          position: relative;
           width: 100%; /* Ocupa el ancho completo */
  box-sizing: border-box; /* Asegura que el padding no expanda el ancho */
      }

      .select-button {
          width: 100%;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          cursor: pointer;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .dropdown-menu {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          max-height: 200px;
          overflow-y: auto;
          border: 1px solid #ccc;
          border-radius: 4px;
          background-color: #fff;
          box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
          z-index: 1;
      }

      .dropdown-menu.show {
          display: block;
      }

      .dropdown-item {
          padding: 10px;
          cursor: pointer;
          display: flex;
          align-items: center;
      }

      .dropdown-item:hover {
          background-color: #f0f0f0;
      }

      .checkbox {
          margin-right: 10px;
          width: 16px;
          height: 16px;
      }
main.main-content {
  background-color: #ffffff !important;
}
#formPreview {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  border-radius: 5px;
}
/* Estilos para el select de cliente */
#client {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 16px;
  color: #333333;
  background-color: #ffffff;
  transition: border-color 0.3s;
}

#client:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Botón para agregar cliente */
#add-client-btn {
width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #2563eb;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s;
}

#add-client-btn:hover {
  background-color: #1d4ed8;
}

/* Estilos para el modal de agregar cliente */
#add-client-modal {
display: none; /* Se muestra/oculta con JS */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
z-index: 11001 !important;  /* Más alto que el modal principal */
display: flex;
justify-content: center;
align-items: center;
}

/* Contenido interno del modal */
#add-client-modal .modal-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Título del modal */
#add-client-modal h2 {
margin-top: 0;
margin-bottom: 1rem;
text-align: center;
}

/* Para que el label y el input estén en bloque (uno debajo del otro) */
#add-client-modal label,
#add-client-modal input,
#add-client-modal span {
display: block;
width: 100%;
margin-bottom: 10px;
}

/* Ajustes al input */
#add-client-modal input[type="text"] {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
box-sizing: border-box; /* Para que respete el width al 100% */
}

#add-client-modal input[type="text"]:focus {
border-color: #3b82f6;
outline: none;
}

/* Mensaje de cliente existente */
#client-exists-msg {
  display: block;
  color: #e53e3e;
  margin-top: 5px;
}

/* Botones del modal */

#save-client-btn, #save-client-btn-block {
background-color: #10b981; /* Verde llamativo */
color: #ffffff;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

#save-client-btn:hover {
background-color: #059669; /* Verde oscuro */
transform: scale(1.05); /* Ligero zoom */
}

#close-client-modal, #close-client-modal-block {
background-color: #ef4444; /* Rojo */
color: #ffffff;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

#close-client-modal:hover {
background-color: #dc2626; /* Rojo oscuro */
transform: scale(1.05);
}
/* Sugerencias de clientes */
#client-suggestions {
  margin-top: 10px;
  padding: 5px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#client-suggestions div {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #d1d5db;
  transition: background-color 0.3s;
}

#client-suggestions div:hover {
  background-color: #f1f5f9;
}
.invalid {
  border: 2px solid red;
  background-color: #ffe6e6;
}

.invalid:focus {
  outline: none;
  box-shadow: 0 0 5px red;
}
.img-preview {
  display: inline-block;
  max-width: 100px;
  max-height: 100px;
  margin-left: 10px; /* Espacio entre el botón y la vista previa */
  vertical-align: middle;
}
.file-container {
width: 100%; /* Ocupa todo el ancho del contenedor */
height: 150px; /* Altura fija (puedes ajustar según tu diseño) */
border: 2px dashed #ccc;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
position: relative;
transition: border-color 0.3s;
box-sizing: border-box; /* Incluye el padding y el borde en el ancho */
}

.file-container img {
max-width: 100%;
max-height: 100%;
display: none;
}

.file-container .remove-btn {
position: absolute;
top: 5px;
right: 5px;
background: red;
color: white;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
display: none;
cursor: pointer;
}

.file-container label {
color: #555;
cursor: pointer;
}

.file-container:hover {
border-color: #007bff;
}
.custom-file-label {
display: inline-block;
cursor: pointer;
text-align: center;
margin-right: 10px;
width: 100%;
}

#inicio {
margin: 50px auto;
}
#historial table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
#historial th, #historial td {
border: 1px solid #ddd;
padding: 8px;
}
#historial th {
background-color: #f2f2f2;
text-align: left;
}
#btn-mis-formularios {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#btn-mis-formularios:hover {
background-color: #0056b3;
}


/* Centrar la tabla del historial */
#formulariosTable {
margin: 0 auto; /* Asegura el centrado horizontal */
width: 80%; /* Ajusta el ancho de la tabla */
border-collapse: collapse;
}

#formulariosTable th, #formulariosTable td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}

#formulariosTable th {
background-color: black;
font-weight: bold;
}
  /* Search filters */
.search-filters {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

.search-filters input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
flex: 1;
}

#btn-buscar {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

#btn-buscar:hover {
background-color: #0056b3;
}

/* Table styles */
#formulariosTable {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-size: 12px; /* Ajusta el tamaño del texto */
}

#formulariosTable thead {
background-color: #007bff;
color: white;
font-size: 13px; /* Tamaño del texto para encabezados */
}

#formulariosTable th, #formulariosTable td {
padding: 8px; /* Reduce el relleno */
text-align: left;
border-bottom: 1px solid #ccc;
}

#formulariosTable tr:nth-child(even) {
background-color: #f2f2f2;
}

/* Descargar PDF button */
#formulariosTable .btn-pdf {
background-color: #28a745;
color: white;
padding: 8px 12px;
border: none;
border-radius: 4px;
width: 150px; /* Ancho fijo */
height: 50px; /* Altura fija */
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}

#formulariosTable .btn-pdf:hover {
  background-color: #28a745; /* Fondo gris más oscuro */
  color: #ffffff; /* Texto blanco */
  border-color: #888888; /* Cambia el color del borde */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añade sombra */
  transition: all 0.3s ease; /* Suaviza la transición */
}
/* Efecto al hacer clic */
.btn-pdf:active {
  transform: scale(0.95); /* Reduce ligeramente el tamaño */
  background-color: #888888; /* Fondo más oscuro */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra más pequeña */
}
/* Estilos del modal */
.modalVista {
display: none; /* Ocultar inicialmente */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro */
}

.modalVista .modal-content {
background-color: #fff;
margin: 5% auto;
padding: 20px;
border-radius: 10px;
width: 60%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modalVista .modal-content h3 {
text-align: center;
margin-bottom: 20px;
}

.modalVista .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.modalVista .close:hover,
.modalVista .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

/* Estilo para la vista previa */
.modalVista #vistaFormulario {
font-family: Arial, sans-serif;
color: #333;
}

.modalVista #vistaFormulario table {
width: 100%;
border-collapse: collapse;
}

.modalVista #vistaFormulario td {
padding: 8px;
border-bottom: 1px solid #ddd;
}

.modalVista #vistaFormulario td:first-child {
font-weight: bold;
color: #555;
width: 30%;
}

.modalVista #vistaFormulario td:last-child {
color: #333;
}
  botoon.custom-multi-select-button {
display: inline-block;
box-sizing: border-box;
transition: border 0.3s ease, background-color 0.3s ease;
}

botoon.custom-multi-select-button:hover {
border-color: #007bff;
background-color: #f8f9fa;
}
/* Botón "Vista Previa" estilizado */
.btn-ver {
  background-color: #cccccc; /* Fondo gris claro */
  color: #000000; /* Texto negro */
  padding: 8px 12px; /* Ajusta el tamaño del botón */
  font-size: 14px; /* Tamaño del texto */
  font-weight: bold; /* Texto en negrita */
  border: none;
  border-radius: 4px;
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  width: 150px; /* Ancho fijo */
  height: 50px; /* Altura fija */
  text-align: center; /* Centra el texto horizontalmente */
  transition: all 0.3s ease; /* Transición para suavizar efectos */
}

/* Efecto hover (al pasar el mouse) */
.btn-ver:hover {
  background-color: #aaaaaa; /* Fondo gris más oscuro */
  color: #ffffff; /* Texto blanco */
  border-color: #888888; /* Cambia el color del borde */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añade sombra */
}

/* Efecto al hacer clic */
.btn-ver:active {
  transform: scale(0.95); /* Reduce ligeramente el tamaño */
  background-color: #888888; /* Fondo más oscuro */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra más pequeña */
}
/* Contenedor del saludo de usuario */
.user-greeting-container {
  margin-bottom: 50px; 
position: relative;
display: inline-block;
}

/* Estilo para "Hola, Usuario" */
.user-greeting {
font-size: 16px;
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background-color: #2c3e50;
border-radius: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.user-greeting:hover {
background-color: #1abc9c;
color: #ffffff;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

/* Flecha para indicar desplegar/ocultar */
.arrow {
font-size: 12px;
transition: transform 0.3s ease;
}

/* Ocultar submenú al inicio */
.user-menu {
position: absolute;
top: 60px;
left: 0;
background-color: #34495e;
border-radius: 10px;
width: 240px; /* Ampliar ancho */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
padding: 10px 0;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
transform: translateY(-10px);
}

.user-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.user-menu ul li {
padding: 10px 15px; /* Mayor espacio entre botones */
text-align: center;
transition: background-color 0.3s ease, transform 0.3s ease;
font-size: 16px; /* Tamaño de texto más grande */
}

.user-menu ul li:hover {
background-color: #1abc9c;
transform: scale(1.05);
}

.user-menu ul li a {
color: white;
text-decoration: none;
font-size: 15px;
font-weight: bold;
display: block;
}

.user-menu ul li a:hover {
color: #ffffff;
}

/* Cambiar la flecha cuando el submenú está visible */
.user-greeting-container.active .arrow {
transform: rotate(180deg);
}

/* Mostrar submenú cuando está activo */
.user-greeting-container.active .user-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

/* ------------------------------------------------------------------
   Lista de borradores
------------------------------------------------------------------- */
#draftsList {
  list-style: none;
  margin: 0;
  padding: 0;
}
#draftsList > div {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
#draftsList button {
  background: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 8px;
  flex: 1;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}
#draftsList button:hover {
  background: #e2e6ea;
}
#draftsList button + button {
  margin-left: 8px;
  background: #ffc107;
  color: #212529;
  border: 1px solid #e0a800;
}
#draftsList button + button:hover {
  background: #e0a800;
}
/* ------------------------------------------------------------------
   Botones de acción dentro del modal de plantilla
------------------------------------------------------------------- */
.modal-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.modal-actions .btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.modal-actions .btn:hover {
  opacity: 0.9;
}
.modal-actions .btn-success {
  background: #28a745;
  color: #fff;
}
.modal-actions .btn-danger {
  background: #dc3545;
  color: #fff;
}
/* ------------------------------------------------------------------
   Botón “Cargar más” de borradores
------------------------------------------------------------------- */
#load-more-drafts {
  margin-top: 16px;
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}
#load-more-drafts:hover {
  opacity: 0.9;
}
/* por defecto está oculto */
#form-modal, .custom-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* clase que JS le añade para mostrarlo */
#form-modal.show, .custom-modal.show {
  display: flex;
}
/* overlay */
.custom-modal1{
  display:none;           /* oculto por defecto */
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  z-index:10000;
  justify-content:center; /* centra horizontal */
  align-items:center;     /* centra vertical */
}
.custom-modal1.show{ display:flex; }

/* bloquea el scroll del fondo cuando el modal está abierto */
body.modal-open{ overflow:hidden; }

/* el cuadro interior sigue igual */
.custom-modal-content1{
  position:relative;
  margin:0;               /* evita empujes hacia arriba/izq */
  background:#fff;
  width:90%;
  max-width:800px;
  max-height:85vh;
  padding:24px;
  border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  overflow-y:auto;
}
/* contenido */
#form-modal .custom-modal-content,
.custom-modal .custom-modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
/* Botón de cierre del modal */
.close-button {
font-size: 1.2rem; /* Ajuste del tamaño del texto */
color: white; /* Color del ícono */
background-color: red; /* Fondo del botón */
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
width: 30px; /* Ancho del botón */
height: 30px; /* Altura del botón */
border: none; /* Sin bordes */
border-radius: 50%; /* Forma circular */
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease; /* Transición para color y tamaño */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para un efecto flotante */
z-index: 100;
}

.close-button:hover {
color: black; /* Cambia el color del ícono al pasar el mouse */
background-color: white; /* Cambia el fondo al pasar el mouse */
border: 1px solid red; /* Agrega un borde rojo */
}

/* Encabezado del formulario */
.form-header {
  background: #fff;              /* blanco puro */
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  padding: 20px 0;               /* espacio arriba/abajo */
  border-bottom: 1px solid #eee;/* línea sutil */
  text-align: center;
}
.form-header h1 {
  color: #333;
  font-size: 1.5rem;
  margin: 0 0 8px;
}
/* Contenedor de los controles del formulario */
.form-controls {
display: flex;
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
gap: 15px; /* Espaciado entre el campo y el botón */
width: 100%; /* Asegura que ocupen todo el ancho disponible */
}

/* Campo de entrada del nombre del formulario */
.form-name {
  width: 50%;
  max-width: 400px;
  border: 1px solid #ccc;
  background: #fafafa;
  padding: 10px;
  border-radius: 4px;
}

.form-name:focus {
border-color: #007bff;
box-shadow: 0px 4px 8px rgba(0, 123, 255, 0.3); /* Efecto de enfoque */
}
/* Disposición general */
.container1 {
  display: flex;
  width: 100%;
}
.sidebar1 {
  flex: 0 0 30%;              /* 30% ancho fijo */
  background: #fff;
  border-right: 1px solid #eee;
  padding: 20px;
}
.titulo {
  text-align: center;
}
.sidebar-title {
font-size: 1.2rem;
margin-bottom: 20px;
}

.template-categories {
margin-bottom: 20px;
}

/* Botones secundarios (template-btn) */
.template-btn {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  color: #333;
  cursor: pointer;
  transition: background 0.2s;
}

.template-btn:hover {
  background: #f7f7f7;
}
.template-btn i {
  font-size: 1.5rem;
  margin-right: 12px;
  color: #007bff;
}

.field-buttons {
margin-top: 20px;
}

.field-buttons h3 {
margin-bottom: 10px;
}

/* Botones más modernos dentro del modal */
.field-buttons button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px; /* Espaciado entre texto e ícono */
margin: 10px 0;
padding: 12px 20px;
font-size: 1rem;
font-weight: bold;
color: #fff;
background: linear-gradient(45deg, #007bff, #0056b3); /* Degradado moderno */
border: none;
border-radius: 8px; /* Bordes más redondeados */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
cursor: pointer;
transition: all 0.3s ease; /* Transición fluida */
}
.field-buttons button:hover {
background: linear-gradient(45deg, #0056b3, #003d80); /* Oscurece al pasar el mouse */
transform: translateY(-2px); /* Sutil elevación */
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra más profunda */
}

.field-buttons button i {
font-size: 1.2rem;
color: #fff; /* Íconos blancos */
}
/* Sección de vista previa */
.main-content1 {
flex: 1;
padding: 20px;
background: #ffffff;

}

.main-content1 h2 {
font-size: 1.2rem;
margin-bottom: 20px;
}

/* Contenedor de vista previa con diseño de móvil */
#formPreview1 {
  width: 360px;     /* ancho típico de móvil */
  height: 640px;    /* altura típica */
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 20px;
  overflow-y: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  background: #fafafa;
}

#formPreview1 h3 {
font-size: calc(.2rem + 1vw); /* Ajusta el tamaño del texto según el tamaño de la pantalla */
text-align: center; /* Centra el texto dentro del encabezado */
word-wrap: break-word; /* Permite que el texto se divida en varias líneas si es necesario */
margin: 0; /* Elimina cualquier margen adicional */
white-space: nowrap; /* Para evitar que el texto se divida en dos líneas */
overflow: hidden;    /* Oculta el contenido si se desborda */
text-overflow: ellipsis; /* Muestra "..." si el texto es demasiado largo */
width: 100%; /* O ajusta el tamaño deseado */
}

/* Pantalla interna */
.form-content {
width: 100%;
height: 100%;
padding: 40px;
box-sizing: border-box;
overflow-y: auto; /* Scroll para contenido largo */
}

/* Fondo de la vista previa */
.form-content {
background: linear-gradient(to bottom, #ffffff, #f8f9fa);
border-radius: 28px;
}
/* Iconos para botones */
.template-btn i,
.field-buttons button i {
margin-left: 10px;
}
/* 1) Pasa el overlay a flex para centrar vertical y horizontal */
.modalFormulario{
  position: fixed;
  inset: 0;                 /* top/right/bottom/left: 0 */
  display: none;            /* lo controla JS con display:flex */
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.5);
  z-index: 10000;
  overflow: hidden;         /* bloquea cualquier scroll del overlay */
  overscroll-behavior: contain;
  touch-action: none;       /* evita que los gestos "escapen" al body */
}

/* 2) Elimina el margin:auto de aquí y dale un max-height con overflow interno */
.modalFormularioContent{
  position: relative;
  width: 90vw;
  max-width: 800px;
  max-height: 90dvh;        /* dvh funciona mejor en iOS que vh */
  background: #fff;
  border-radius: 12px;
  padding: 16px 16px 20px;
  display: flex;            /* para fijar header y scrollear el body */
  flex-direction: column;
  overflow: hidden;         /* el scroll vive en el interior */
}

.modalFormularioContent input,
.modalFormularioContent textarea,
.modalFormularioContent select {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
  box-sizing: border-box;    /* ← que no empujen el ancho */
}

/* Nada dentro debe “salirse” del ancho del modal */
.modalFormularioContent *{
  max-width: 100%;
  box-sizing: border-box;
}
#formFieldsContainer{
  flex: 1;
  min-height: 0;            /* MUY IMPORTANTE para que pueda hacer scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Canvas de firma dentro del modal: ocupa ancho y captura el gesto para dibujar */
.modalFormularioContent canvas[data-signature-name]{
  display: block;
  width: 100%;
  height: 160px;             /* alto visual (el real ajústalo en JS si quieres nitidez) */
  touch-action: none;        /* ← clave: permite dibujar sin hacer pan lateral */
  -webkit-user-select: none;
  user-select: none;
}

.closeModalFormularioBtn {
color: #aaa;
font-size: 28px;
font-weight: bold;
}

.closeModalFormularioBtn:hover,
.closeModalFormularioBtn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.form-control {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

.form-group {
margin-bottom: 15px;
}
/* Estilos para el switch de "Campo Obligatorio" */
.toggle-switch {
display: inline-block;
width: 40px;
height: 20px;
background-color: #ccc;
border-radius: 20px;
position: relative;
cursor: pointer;
transition: background-color 0.3s;
}

.toggle-switch::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
background-color: #fff;
border-radius: 50%;
transition: left 0.3s;
}

.toggle-switch.active {
background-color: #4caf50; /* Verde cuando está activo */
}

.toggle-switch.active::after {
left: 21px; /* Posición del círculo cuando está activo */
}

/* Estilos para el contenedor de estrellas */
.star-rating-container .star {
font-size: 24px;
cursor: pointer;
color: #ccc;
transition: color 0.2s;
}

.star-rating-container .star.active {
color: #ffca08;
}


/* Estilos para el dropdown de multiselect-checkbox */
.custom-multi-select-dropdown {
display: none; /* Oculto por defecto */
position: absolute; /* Posicionamiento absoluto para superponer */
top: 100%; /* Directamente debajo del botón */
left: 0;
background-color: #ffffff; /* Fondo blanco opaco */
border: 1px solid #ccc; /* Borde sólido */
border-radius: 4px;
width: 100%;
max-height: 200px; /* Altura máxima */
overflow-y: auto; /* Scroll si excede la altura */
z-index: 1000; /* Asegura que esté por encima de otros elementos */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
pointer-events: auto; /* Asegura que los eventos de puntero sean capturados */
}

/* Estilos para cada opción dentro del dropdown */
.custom-multi-select-dropdown .custom-option-wrapper {
background-color: #ffffff; /* Fondo blanco opaco para cada opción */
padding: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}

.custom-multi-select-dropdown .custom-option-wrapper:hover {
background-color: #f1f1f1; /* Cambio de color al pasar el cursor */
}
.draggable-field .toggle-switch.active {
background-color: #4caf50 !important; /* Uso de !important si es necesario */
}

.draggable-field .toggle-switch.active::after {
left: 21px !important;
}
/* Estilos generales para los campos */
.draggable-field {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}

/* Estilos para el botón de eliminar (tache rojo) */
.draggable-field .delete-btn {
position: absolute;
top: 5px;
right: 5px;
color: red;
font-size: 18px;
cursor: pointer;
font-weight: bold;
z-index: 10;
}

/* Estilos para el contenedor principal del mapa */
#map-container {
height: 300px; /* Altura del mapa */
margin-top: 10px;
border-radius: 5px;
}

/* Estilos para el botón "Mostrar mi ubicación" */
.map-button {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}

.map-button:hover {
background-color: #0056b3;
}
/* Contenedor principal de cada campo */
.form-field-container {
margin-bottom: 15px;
position: relative;
}

/* Botón principal para abrir/cerrar el multiselect */
.custom-multi-select-button {
display: inline-block;
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #f9f9f9;
text-align: left;
font-size: 14px;
color: #333;
cursor: pointer;
position: relative;
transition: background-color 0.2s, border-color 0.2s;
}

.custom-multi-select-button::after {
content: "▼";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #666;
font-size: 14px;
}

.custom-multi-select-button:hover {
background-color: #f1f1f1;
border-color: #bbb;
}

.custom-multi-select-button:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Dropdown */
.custom-multi-select-dropdown {
display: none;
position: absolute;
z-index: 2000;
width: 100%;
max-height: 300px;
overflow-y: auto;
background: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Cada opción en el dropdown */
.custom-option-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
cursor: pointer;
transition: background-color 0.2s;
border-bottom: 1px solid #f1f1f1;
}

.custom-option-wrapper:hover {
background-color: #f9f9f9;
}

.custom-option-wrapper:last-child {
border-bottom: none;
}

/* Checkbox como círculos */
.custom-option-checkbox {
width: 16px !important;
height: 16px !important;
margin-right: 12px !important;
outline: none !important;
cursor: pointer !important;
position: relative !important;
}

.custom-option-checkbox:checked {
background-color: #007bff;
border-color: #007bff;
}

.custom-option-checkbox:checked::after {
content: '';
display: block;
width: 8px;
height: 8px;
margin: auto;
}

/* Texto centrado */
.custom-option-label {
flex: 1;
text-align: left;
font-size: 14px;
color: #333;
user-select: none;
}
.send-form-button {
display: inline-block;
margin-top: 20px;
padding: 12px 20px;
background-color: #4CAF50; /* Un verde agradable */
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}

.send-form-button:hover {
background-color: #45a049; /* Un verde más oscuro al pasar el mouse */
}
#tablaContainer {
overflow-x: auto;
white-space: nowrap;
}

table.display {
width: 100%;
border-collapse: collapse;
}
/* Estilo general del botón */
#toggleColumnSelector {
background-color: #f6f7f9;
color: #333;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}

#toggleColumnSelector:hover {
background-color: #e2e6ea; /* color clarito al hover */
}

/* El contenedor que despliega las checkboxes */
/* Contenedor 'dropdown' */
/* El contenedor “dropdown” */
#columnSelectorContainer {
position: absolute;
top: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
width: 220px; /* Ajusta a tu gusto */
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 999;
padding: 10px;
display: none; /* Se mostrará con JS */
max-height: 300px;
overflow-y: auto;

}
/* === Botón Guardar borrador ======================= */
.save-draft-btn{
  background-color:#6c757d;     /* gris Bootstrap */
  color:#fff;
  padding:10px 20px;
  border:none;
  border-radius:6px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  margin:15px 5px;              /* → tu margen original */
  transition:background .2s, transform .1s, box-shadow .2s;
}

.save-draft-btn:hover{
  background-color:#5a6268;
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,.15);
}

.save-draft-btn:active{
  background-color:#4e555b;
  transform:translateY(0);
  box-shadow:none;
}

/* Cada fila con checkbox + label */
.checkbox-item {
display: flex;                /* Alinear en horizontal */
justify-content: space-between; /* Label a la izq, checkbox a la der */
align-items: center;            /* Centra verticalmente */
margin-bottom: 8px;             /* Separación vertical entre filas */
}

/* El label a la izquierda */
.checkbox-item label {
font-size: 14px;
color: #333;
user-select: none;  /* Evita selección accidental de texto */
margin: 0;
}

/* El checkbox a la derecha */
.checkbox-item input[type="checkbox"] {
cursor: pointer;
width: 16px;    /* Tamaño de la casilla (opcional) */
height: 16px;
margin: 0;      /* Asegura que no se empalme con el label */
}

/* El contenedor que envuelve el botón y el menú */
.dropdown-wrapper {
position: relative; 
display: inline-block; /* si lo deseas en línea, sino block */
}
.btnExportar {
background-color: #28a745;  /* Verde */
color: #fff;
padding: 6px 12px;
border: none;
border-radius: 4px;
margin-right: 5px;  /* Espacio a la derecha si quieres */
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.btnExportar:hover {
background-color: #218838; /* Un verde más oscuro al hover */
}

.btn-vista {
background-color: #6c757d;  /* Gris */
color: #fff;
padding: 6px 12px;
border: none;
border-radius: 4px;
margin-right: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.btn-vista:hover {
background-color: #5a6268; /* Un gris más oscuro al hover */
}
/* Botón de administración de subcuentas en la barra lateral */
#customSubAccToggleBtn {
margin-top: 20px;
background-color: #17a2b8;
color: #fff;
padding: 10px 15px;
border: none;
cursor: pointer;
width: 100%;
}

/* ================================
 Estilos para los Modales de Subcuentas
================================= */
/* Modal de subcuentas: contenedor */
.customSubAcc-modal {
  position: fixed;
  z-index: 2000;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem; /* un poco de espacio en los extremos */
}

/* Contenido del modal (el recuadro blanco) */
.customSubAcc-modal-content {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;

  /* Ocupa hasta el 90% del ancho de la pantalla, con tope de 1000px */
  width: 90vw;
  max-width: 1000px;

  /* Ocupa hasta el 85% de la altura, con scroll interno si hace falta */
  max-height: 85vh;
  overflow-y: auto;

  /* Opcional: sombra más marcada */
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}


/* Botón de cierre (X) en la esquina */
.customSubAcc-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

/* Fieldset con borde suave */
.customSubAcc-fieldset {
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
}
.customSubAcc-fieldset legend {
font-weight: bold;
}

/* Botón principal del modal (Crear/Guardar) */
.customSubAcc-submit-btn {
background-color: #28a745;
color: #fff;
border: none;
padding: 10px 15px;
cursor: pointer;
margin-top: 10px;
width: 100%;
border-radius: 4px;
font-weight: bold;
}

/* Tabla dentro del modal de historial */
.customSubAcc-history-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.customSubAcc-history-table th,
.customSubAcc-history-table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.customSubAcc-history-table th {
background-color: #f2f2f2;
}
/* Botón base */
.btn {
display: inline-block;
padding: 6px 12px;
margin: 5px 0;          /* Ajusta el margen superior e inferior */
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
text-align: center;
transition: background-color 0.3s ease;
}

/* Estilo para el botón de “Recuperar” */
.btn-recover-all,
.btn-recover-resp {
background-color: #28a745; /* Verde */
color: #fff;
}
.btn-recover-all:hover,
.btn-recover-resp:hover {
background-color: #218838; /* Verde un poco más oscuro */
}

/* Estilo para el botón de “Eliminar Definitivamente” */
.btn-delete-forever {
background-color: #dc3545; /* Rojo */
color: #fff;
}
.btn-delete-forever:hover {
background-color: #c82333; /* Rojo más oscuro */
}

/* Ejemplo de cómo podrías estilizar el contenedor de cada grupo */
/* Contenedor principal de cada grupo (el que tiene el título y los botones) */
.trash-group-header-unique {
display: flex;
align-items: center;      /* Centra verticalmente */
justify-content: space-between; /* Distribuye título a la izquierda y botones a la derecha */
margin-bottom: 8px;       /* Espacio debajo */
}

/* El título del formulario (h3) que está dentro del contenedor */
.trash-group-header-unique h3 {
margin: 0;                /* Quita márgenes extras */
flex: 1;                  /* Para que ocupe el espacio sobrante */
}

/* Botones dentro del encabezado, por ejemplo, "Recuperar Todo" y "Eliminar Definitivamente" */
.trash-group-header-unique button {
margin-left: 8px;         /* Un poco de espacio a la izquierda */
}

/* Contenedor de las respuestas individuales (si las hay) */
.trash-responses-unique {
margin-left: 20px;        /* Un pequeño indent para diferenciar */
margin-bottom: 10px; 
}

/* Cada respuesta (texto + botón) en una sola línea */
.trash-response-unique {
display: flex;
align-items: center;
justify-content: space-between; /* Botón a la derecha */
margin: 5px 0;
background-color: #f5f5f5;
padding: 8px;
border-radius: 4px;
}

/* El párrafo con el ID y la fecha */
.trash-response-unique p {
margin: 0;
padding-right: 10px; /* Separación antes del botón */
flex: 1;             /* Para ocupar todo el espacio sobrante */
}

/* El botón "Recuperar" de cada respuesta */
.trash-response-unique button {
margin-left: 8px;
/* Aplica la clase que quieras, por ejemplo: */
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
padding: 6px 12px;
cursor: pointer;
transition: background-color 0.3s;
}

.trash-response-unique button:hover {
background-color: #218838;
}

/* Clase base que ya usas */
.btn {
display: inline-block;
padding: 6px 12px;
margin: 5px 0;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
text-align: center;
transition: background-color 0.3s ease;
}

/* Botón "Recuperar" para respuestas */
.btn-recover-resp {
background-color: #28a745; /* Verde */
color: #fff;
margin-left: 8px; /* opcional */
}

.btn-recover-resp:hover {
background-color: #218838; /* Verde un poco más oscuro */
}

/* Botones de acción (Modificar, Eliminar) en la tabla */
.customSubAcc-action-btn {
margin-right: 5px;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
border: none;
}
/* ──────────────────────────────
 Overrides específicos para Historial de Subcuentas
 ────────────────────────────── */
 #customSubAccHistoryTable .customSubAcc-modify-btn,
 #customSubAccHistoryTable .customSubAcc-delete-btn {
   display: inline-block !important;
   margin: 0 4px !important;
   padding: 6px 12px !important;
   font-size: 14px !important;
   font-weight: 600 !important;
   border-radius: 4px !important;
   border: none !important;
   cursor: pointer !important;
   transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
 }
 
 /* Modificar */
 #customSubAccHistoryTable .customSubAcc-modify-btn {
   background-color: #17a2b8 !important;
   color: #fff !important;
 }
 #customSubAccHistoryTable .customSubAcc-modify-btn:hover {
   background-color: #138496 !important;
   box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
   transform: translateY(-1px) !important;
 }
 #customSubAccHistoryTable .customSubAcc-modify-btn:active {
   background-color: #117a8b !important;
 }
 
 /* Eliminar */
 #customSubAccHistoryTable .customSubAcc-delete-btn {
   background-color: #dc3545 !important;
   color: #fff !important;
 }
 #customSubAccHistoryTable .customSubAcc-delete-btn:hover {
   background-color: #c82333 !important;
   box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
   transform: translateY(-1px) !important;
 }
 #customSubAccHistoryTable .customSubAcc-delete-btn:active {
   background-color: #bd2130 !important;
 }
 
 /* que no quiebren línea */
 #customSubAccHistoryTable td:last-child {
   white-space: nowrap !important;
 }
 
/* Botón "Agregar Subcuenta" dentro del historial */
#customSubAccAddBtn {
margin-top: 15px;
background-color: #007bff;
color: #fff;
padding: 10px 15px;
border: none;
cursor: pointer;
width: 100%;
border-radius: 4px;
font-weight: bold;
}
.modal-row {
display: flex;
gap: 16px;
margin-bottom: 10px;
}
.modal-col {
flex: 1;
}
.modal-col label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.modal-col input {
width: 100%;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
}

/* Estilo de los botones "Administración de Subcuentas", etc. en la sidebar */

.delete-plantilla-btn {
margin-left: 10px;
background-color: #d9534f; /* un rojo suave */
color: white;
border: none;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
}

.delete-plantilla-btn:hover {
background-color: #c9302c; /* un rojo un poco más oscuro */
}
.modal-trash-unique {
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(0,0,0,0.5);
}
.modal-content-trash-unique {
background: #fff;
margin: 10% auto;
padding: 20px;
width: 80%;
max-width: 600px;
border-radius: 8px;
position: relative;
}
.close-trash-unique {
position: absolute;
top: 10px;
right: 15px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

/* Estilos para los grupos de la papelera */
.trash-group-unique {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 15px;
border-radius: 4px;
}
.trash-group-header-unique {
display: flex;
justify-content: space-between;
align-items: center;
}
.trash-responses-unique {
margin-top: 10px;
padding-left: 15px;
border-left: 2px solid #eee;
}
.trash-response-unique {
margin-bottom: 8px;
}
.btn-recover {
background-color: #5cb85c;  /* Verde, similar a Bootstrap */
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 5px;
}

.btn-recover:hover {
background-color: #4cae4c;
}
.hamburger-btn {
display: none;        /* Por defecto no se ve en pantallas grandes */
position: absolute;   /* Para poder ubicarlo en la esquina */
top: 7px;
left: 10px;
z-index: 9999;        /* Encima de la sidebar y contenido */
border: none;
cursor: pointer;
color: #fff;
background: rgba(0, 0, 0, 0.3); /* un fondo negro translúcido */
font-size: 24px;      /* Tamaño del ícono */
}
/* Modal Overlay */
.export-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999; /* Lo más alto posible */
display: none;
pointer-events: auto;
}

.export-modal-content {
position: relative;
max-width: 400px;
margin: 100px auto;
background: #fff;
padding: 20px;
max-height: 80vh;        /* Límite de altura; 80% de la ventana */
overflow-y: auto;        /* Activa el scroll vertical si excede la altura */
border-radius: 8px;
z-index: 1000; /* Puede ser igual o mayor que .export-modal */
}


/* Botón (X) de cerrar en la esquina */
.close-export-modal {
position: absolute;
right: 15px;
top: 10px;
cursor: pointer;
font-size: 20px;
color: #666;
}

.close-export-modal:hover {
color: #111;
}

/* Título del modal */
.export-modal-content h2 {
margin-top: 0;
font-size: 1.2rem;
margin-bottom: 1rem;
}

/* Opciones individuales (checkbox + label) */
.export-option {
display: flex;
flex-direction: column; 
gap: 1rem; /* Espacio entre grupos de checkboxes */
}

/* Alinear texto a la izquierda y checkbox a la derecha */
/* Alinear texto a la izquierda y checkbox a la derecha */
.export-option label,
.export-columns-list label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
cursor: pointer;
width: 100%;
}

/* Checkbox circular */
.export-option label input[type="checkbox"],
.export-columns-list label input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;

width: 16px;
height: 16px;
border: 2px solid #666;  /* Borde negro o gris oscuro */
border-radius: 50%;
background-color: #fff;  /* Fondo blanco inicial */
margin-left: auto;       /* Empuja el checkbox a la derecha */
cursor: pointer;
outline: none;
}

/* Al marcar (checked), se rellena de azul, pero el borde sigue siendo negro */
.export-option label input[type="checkbox"]:checked,
.export-columns-list label input[type="checkbox"]:checked {
background-color: #007BFF; /* Interior azul */
border-color: #666;        /* Borde sigue oscuro (negro/gris) */
}



/* Cada label de columna */
.export-columns-list label {
display: flex;
justify-content: space-between; /* Texto a la izq, checkbox a la der */
align-items: center;
margin-bottom: 5px;
cursor: pointer;
}


/* Botones finales */
.export-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}

.export-modal-actions button {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
}

/* Estilos para los botones de exportación */
#btnExportarSeleccionados,
#btnExportarTodo, #btnExportarZipMasivo{
background-color: #007BFF; /* Azul por defecto (Bootstrap-like) */
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
margin: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}

#btnExportarSeleccionados:hover,
#btnExportarTodo:hover {
background-color: #0056b3; /* Azul más oscuro al hacer hover */
}

#btnCancelExport {
background-color: #999;
color: #fff;
}

#btnCancelExport:hover {
background-color: #777;
}

#btnConfirmExport {
background-color: #28a745;
color: #fff;
}

#btnConfirmExport:hover {
background-color: #218838;
}
/* Contenedor de la paginación (opcional) */
#paginationControls {
text-align: center;    /* Centra horizontalmente */
margin: 10px 0;       /* Espacio vertical */
}

/* Estilos para los botones de paginación */
#paginationControls button {
background-color: #007BFF; /* Azul tipo Bootstrap */
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
margin: 4px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}

/* Hover: tono más oscuro */
#paginationControls button:hover:not(:disabled) {
background-color: #0056b3;
}

/* Estado deshabilitado (por ejemplo, cuando no hay página anterior/siguiente) */
#paginationControls button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

/* Celda de acciones */
.drafts-actions-cell {
  text-align: center;
  white-space: nowrap;
}

/* Botones genéricos de borradores */
.draft-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px;
  font-family: inherit;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.draft-btn i {
  font-size: 0.9rem;
}

/* Botón Abrir */
.draft-btn-open {
  background: #2563eb;
  color: #fff;
}
.draft-btn-open:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(37, 99, 235, 0.35);
}
.btn-eliminar-formulario,
.btn-eliminar-def {
  background-color: #e74c3c;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* --- Papelera: modal más grande --- */
#trashModalUnique .modal-content {
  max-width: 960px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px 28px 28px;
  border-radius: 10px;
}

/* Título de la papelera */
#trashModalUnique h2,
#trashModalUnique .trash-modal-title {
  text-align: center;
  margin-bottom: 20px;
}

/* --- Grupo por plantilla --- */
.trash-group-unique {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  padding: 14px 18px 16px;
  margin-bottom: 18px;
  border: 1px solid #e5e7eb;
}

/* Header del grupo (nombre + botones) */
.trash-group-header-unique {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.trash-group-header-unique h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.trash-group-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Contenedor de respuestas */
.trash-responses-unique {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tarjeta de una respuesta */
.trash-response-unique {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.trash-response-info {
  flex: 1 1 280px;
  font-size: 0.88rem;
}

.trash-response-info p {
  margin: 2px 0;
}

/* Botones a la derecha */
.trash-response-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: flex-end;
}

/* --- Botones de papelera --- */
.btn-trash {
  border-radius: 6px;
  font-size: 0.85rem;
  padding: 6px 10px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-trash-primary {
  background: #10b981;
  color: #ffffff;
}

.btn-trash-primary:hover {
  background: #059669;
}

.btn-trash-danger {
  background: #ef4444;
  color: #ffffff;
}

.btn-trash-danger:hover {
  background: #dc2626;
}

.btn-trash-danger-outline {
  background: transparent;
  color: #ef4444;
  border: 1px solid #ef4444;
}

.btn-trash-danger-outline:hover {
  background: #fee2e2;
}
.btn-eliminar-formulario:hover,
.btn-eliminar-def:hover {
  opacity: 0.9;
}

/* Botón Eliminar */
.draft-btn-delete {
  background: #dc2626;
  color: #fff;
}
.draft-btn-delete:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(220, 38, 38, 0.35);
}

/* Cabecera y tabla */
#draftsModal h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  text-align: center;
}
#draftsTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
#draftsTable th,
#draftsTable td {
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}
#draftsTable th {
  background: #2f3e46;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.8rem;
}
#draftsTable tr:nth-child(even) {
  background-color: #f8f9fa;
}
#draftsTable tr:hover {
  background-color: #e9ecef;
}
/* Botón cerrar en la esquina */
#closeDraftsModalBtn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
#closeDraftsModalBtn:hover {
  background: #c0392b;
}
/* Botones “Abrir” y “🗑️” dentro de la tabla */
.open-draft-btn,
.delete-draft-btn {
  font-size: 0.85em;
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.open-draft-btn {
  background-color: #007bff;
  color: #fff;
}
.open-draft-btn:hover {
  background-color: #0056b3;
}
/* Controles de paginación */
#draftsPagination {
  margin-top: 12px;
  text-align: right;
}
#draftsPagination button {
  font-size: 0.85em;
  padding: 6px 12px;
  margin-left: 6px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
#draftsPagination button:disabled {
  background-color: #adb5bd;
  cursor: default;
}
#draftsPagination button:hover:not(:disabled) {
  background-color: #0056b3;
}
#draftsPagination span {
  margin: 0 8px;
  font-size: 0.9em;
  vertical-align: middle;
}
.delete-draft-btn{
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
.delete-draft-btn:hover{color:#e53935;}
/* ——— Refinamiento Sidebar (no rompe nada) ——— */
:root{
  --accent: #1abc9c;               /* color de acento */
  --item-default: #2f3d4e;         /* aseguro mismo tono que usas */
}

 /* Reset de enlaces sólo dentro de la sidebar */
.sidebar .sidebar-nav a,
.sidebar .sidebar-nav a:visited {
  color: inherit;
  text-decoration: none;
}
/* --- Fix título de la sidebar --- */
.sidebar .sidebar-header h2 {
  color: #fff !important;
}
/* ✅ base siempre visibles */
.save-draft-btn,
.send-form-button {
  display: block;
}
/* cuando el modal está abierto */
body.modal-open{
  overflow: hidden;
  height: 100%;
  overscroll-behavior: contain;
}
#modalFormulario{position:fixed;inset:0;display:none;align-items:center;justify-content:center;}
.modalFormularioContent > h2{
  margin: 0 36px 12px 0; /* deja espacio para el botón de cierre */
  flex: 0 0 auto;
}
/* Animación simple */
@keyframes fadeInDown {
from {
  opacity: 0;
  transform: translateY(-10px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

@media (max-width: 768px) {
.hamburger-btn {
  display: block !important;     /* Se muestra en pantallas <= 768px */
}

/* Ajustes de la sidebar en móvil: se oculta a la izquierda */
.sidebar {
  position: fixed;
  top: 0;
  left: -250px;        /* Fuera de la pantalla */
  transition: left 0.3s ease;
  width: 250px;
  height: 100vh;
  overflow-y: auto;
  z-index: 1000;
  scrollbar-width: thin;
}

/* Cuando tenga la clase .open, pasa a left: 0 */
.sidebar.open {
  left: 0;
}

/* Para que el main-content no se oculte en móvil */
.main-content {
  margin-left: 0; 
  width: 100%;
}
}
@media (max-width:768px){
  .app-container{
    grid-template-columns: 1fr !important;   /* nada de 270 px */
  }
}
/* Diseño responsive */
@media (max-width: 768px) {
.container1 {
    flex-direction: column;
}

.sidebar1 {
    border-right: none;
    border-bottom: 1px solid #ddd;
}
}
/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
.close-modal-btn {
  top: 5px; /* Ajuste más cerca del borde */
  right: 5px;
  width: 25px; /* Tamaño compacto */
  height: 25px;
  font-size: 16px; /* Tamaño de fuente reducido */
  line-height: 25px;
}
}

/* Media query para pantallas medianas */
@media (max-width: 1200px) {
.close-modal-btn {
  top: 10px; /* Espaciado consistente */
  right: 10px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
}
}

/* Forzar pantalla completa en móvil (usar *dvh* para iOS) */
@media (max-width: 768px) {
  .modal-content,
  .modalFormularioContent {        /* si usas esta variante */
    width: 100vw;
    height: 100dvh;                /* mejor que 100vh en iOS */
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding:
      calc(env(safe-area-inset-top, 0) + 12px)
      16px
      calc(env(safe-area-inset-bottom, 0) + 16px);
    overflow: hidden;              /* el scroll va en un contenedor interno */
  }

  /* Contenido interno con scroll */
.modal-content > .scroll-area,
  .modalFormularioContent > .scroll-area {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* ✅ en móvil, sólo comport. sticky */
@media (max-width: 640px) {
  .save-draft-btn,
  .send-form-button {
    position: sticky;
    bottom: 0;
    z-index: 3;
  }
}
/* ——— Modal “Agregar cliente” en móviles ——— */
@media (max-width: 600px) {
  #add-client-modal .modal-content{
    width: 420px;       /* casi a pantalla completa */
      max-width: 90vw;   /* sin tope de 500px */
      max-height: 80vh;    /* que no tape la barra del SO */
    padding: 14px;
    border-radius: 12px;
    overflow: auto;       /* scroll interno si se pasa */
  }

  /* botones a 100% y apilados */
  #add-client-modal button{
    display: block;
    width: 100%;
    margin: 6px 0 0 0;    /* separaciones verticales */
  }

  /* fuentes e inputs un poco más grandes para dedo */
  #add-client-modal label{ font-size: 14px; }
  #add-client-modal input[type="text"]{
    font-size: 16px;      /* evita zoom en iOS */
    padding: 10px 12px;
  }
}

/* si quieres “pantalla completa” en móviles muy chicos */
@media (max-width: 360px){
  #add-client-modal .modal-content{
    width: 92vw;
    max-width: 320px;
  }
}
/* Responsive: en pantallas pequeñas que se ponga todo en columna */
@media (max-width: 768px) {
  #trashModalUnique .modal-content {
    width: 95%;
    padding: 16px 14px 18px;
  }

  .trash-group-header-unique {
    flex-direction: column;
    align-items: flex-start;
  }

  .trash-response-actions {
    align-items: stretch;
  }
}