/* ========================================
   OVERLAY DEL MODAL - Fondo oscuro fullscreen
   ======================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* ✅ OCULTO POR DEFECTO */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.modal-overlay.active {
  display: flex; /* ✅ VISIBLE SOLO CON .active */
}

/* ========================================
   CONTENEDOR DEL MODAL
   ======================================== */
.modal-container {
  background: var(--card-background);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-md);
  max-width: 320px; /* Ancho reducido */
  width: 100%;
  transform: scale(0.9);
  transition: transform 0.2s ease;
  border: 1px solid var(--card-border);
  overflow: visible; /* Asegurar que no corte contenido */
}

.modal-overlay.active .modal-container {
  transform: scale(1);
}

/* ========================================
   HEADER DEL MODAL
   ======================================== */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px 16px 30px; /* +10px lateral */
  border-bottom: 1px solid var(--border-primary);
}

.modal-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.2s ease;
  border-radius: 2px;
}

.modal-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.modal-close-btn svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   BODY DEL MODAL
   ======================================== */
.modal-body {
  padding: 20px 30px; /* +10px lateral */
}

/* Mensaje de descripción opcional */
.modal-description {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 20px 0;
  line-height: 1.4;
}

/* Espaciado entre campos en modal */
.modal-body .form-field {
  margin-bottom: 5px;
}

.modal-body .form-field:last-child {
  margin-bottom: 0;
}

/* Ajuste para .notas-field dentro del modal - Sobrescribir flex */
.modal-body .notas-field {
  position: relative; /* Mantener para el ícono de resize y error */
  display: block; /* Cambiar de flex a block */
  width: 100%; /* Ocupar todo el ancho */
  min-width: 0; /* Resetear min-width */
  flex: none; /* Desactivar flex */
  padding-top: 6px; /* Mantener padding para label */
  padding-bottom: 3px;
  min-height: 142px; /* ⚠️ IMPORTANTE: Mantener altura mínima para posicionar el resize icon correctamente */
}

/* Textarea dentro del modal - Ajustar altura */
.modal-body .form-textarea {
  min-height: 133px; /* Altura calculada: 142px - 6px - 3px */
}

/* Input con icono (para contraseña) - Ajuste específico para modal */
.modal-input-with-icon {
  position: relative;
}

.modal-input-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s ease;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.modal-input-icon:hover {
  color: var(--text-primary);
}

.modal-input-icon svg {
  width: 16px;
  height: 16px;
}

/* Input con icono - Ajustar padding derecho */
.modal-input-with-icon .form-field-input {
  padding-right: 32px;
}

/* ========================================
   VALIDACIÓN DE ERRORES - Diseño Figma
   ⚠️ REUTILIZA PATRÓN DEL CANDADITO (.icon-locked)
   ======================================== */

/* Input con error - Borde rojo */
.form-field-input.has-error,
.form-field-select.has-error,
.form-field-date.has-error {
  border: 2px solid #a40f16 !important;
  padding: 2px 15px 1px 7px !important; /* Compensar borde de 2px */
}

/* Textarea con error - Borde rojo */
.form-textarea.has-error {
  border: 2px solid #a40f16 !important;
  padding: 7px 15px 6px 7px !important; /* Compensar borde de 2px (1px + 1px) */
}

/* Label con error - Texto rojo */
.form-field-label.has-error {
  color: #a40f16 !important;
}

/* Label de textarea con error - Texto rojo */
.form-textarea-label.has-error {
  color: #a40f16 !important;
}

/* Icono de error - MISMO PATRÓN QUE .icon-locked */
.icon-error {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: none; /* Oculto por defecto */
}

/* Mostrar icono de error usando background-image (como candadito) */
.form-field .icon-error,
.notas-field .icon-error {
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00013 1C9.8564 1.00003 11.6367 1.73735 12.9494 3.0498C14.2621 4.36256 15.0001 6.14348 15.0001 8C15.0001 9.38435 14.5895 10.7376 13.8204 11.8887C13.0513 13.0398 11.9579 13.937 10.6788 14.4668C9.39976 14.9966 7.99179 15.1353 6.63392 14.8652C5.27627 14.5951 4.02878 13.929 3.04994 12.9502C2.07097 11.9712 1.40499 10.7231 1.1349 9.36523C0.864899 8.00755 1.00267 6.60021 1.53236 5.32129C2.06217 4.04221 2.96032 2.94886 4.11146 2.17969C5.26253 1.41066 6.61579 1 8.00013 1ZM10.296 2.45703C9.19967 2.00291 7.99312 1.88372 6.82923 2.11523C5.66543 2.34677 4.59603 2.91875 3.75697 3.75781C2.91817 4.59678 2.34688 5.66555 2.11537 6.8291C1.88386 7.99298 2.00304 9.19955 2.45716 10.2959C2.91127 11.3922 3.6795 12.33 4.66615 12.9893C5.65284 13.6485 6.81344 14 8.00013 14C9.59138 14 11.1171 13.3674 12.2423 12.2422C13.3675 11.117 14.0001 9.59127 14.0001 8C14.0001 6.81335 13.6477 5.65367 12.9884 4.66699C12.3291 3.68031 11.3924 2.91116 10.296 2.45703ZM8.00013 11C8.19902 11 8.38977 11.0791 8.53041 11.2197C8.67104 11.3604 8.75013 11.5511 8.75013 11.75C8.75013 11.8983 8.70656 12.0437 8.62416 12.167C8.54174 12.2903 8.42429 12.3866 8.28724 12.4434C8.1502 12.5001 7.99913 12.5143 7.85365 12.4854C7.70823 12.4564 7.57471 12.3851 7.46986 12.2803C7.36502 12.1754 7.29375 12.0419 7.26478 11.8965C7.23584 11.751 7.25002 11.5999 7.30677 11.4629C7.36354 11.3258 7.4598 11.2084 7.58314 11.126C7.70647 11.0436 7.8518 11 8.00013 11ZM8.50013 9.5H7.50013V4H8.50013V9.5Z" fill="%23A40F16"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Mensaje de error debajo del campo */
.form-field-error-message {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: #a40f16;
  margin-top: 2px;
  margin-bottom: 0;
  display: none;
  line-height: 1.4;
}

/* Cuando hay error, ocultar el icono de mostrar/ocultar contraseña */
.modal-input-with-icon .form-field-input.has-error ~ .modal-input-icon {
  display: none;
}

/* ========================================
   MENSAJE DE ERROR
   ======================================== */
.modal-error-message {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: var(--red-status);
  margin-top: 6px;
  display: none;
}

.modal-error-message.active {
  display: block;
}

/* ========================================
   FOOTER DEL MODAL
   ======================================== */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Alinear botones a la derecha */
  gap: 10px; /* Espacio entre botones */
  padding: 16px 30px 20px 30px; /* +10px lateral y 20px inferior */
  border-top: 1px solid var(--border-primary);
}

/* Ajustar tamaño de botones para modal de autenticación angosto */
.modal-footer .btn {
  min-width: 110px; /* Reducido de 140px para ajustar al modal estrecho */
}

.modal-footer .btn,
.modal-footer .btn-outline-red,
.modal-footer .btn-outline-green,
.modal-footer .btn-outline-black,
.modal-footer .btn-success {
  min-width: 110px;
  height: 30px;
  min-height: 30px;
  padding: 4px 12px;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */
@media (max-width: 480px) {
  .modal-overlay {
    padding: 10px;
  }

  .modal-container {
    max-width: 100%;
  }

  .modal-header {
    padding: 15px 15px 12px 15px;
  }

  .modal-title {
    font-size: 14px;
  }

  .modal-body {
    padding: 15px;
  }

  .modal-footer {
    padding: 12px 15px 15px 15px;
    flex-direction: column-reverse;
  }

  .modal-footer .btn,
  .modal-footer .btn-outline-red,
  .modal-footer .btn-outline-green,
  .modal-footer .btn-outline-black,
  .modal-footer .btn-success {
    width: 100%;
    max-width: 100%;
  }
}

/* ========================================
   MODAL LOG - Estilos específicos
   ID: log-search
   ======================================== */

/* Modal LOG - Contenedor más ancho */
#log-search .modal-container {
  max-width: 900px;
}

/* Modal LOG - Header con campo de búsqueda alineado a la derecha */
#log-search .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#log-search .modal-title {
  flex: 0 0 auto;
}

/* Contenedor del campo de búsqueda y botón cerrar */
#log-search .modal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

#log-search .form-field {
  margin: 0;
  width: 300px;
  position: relative;
}

#log-search .form-field input {
  padding-right: 36px; /* Espacio para el icono */
}

/* Icono de búsqueda */
#log-search .search-icon {
  position: absolute;
  right: 10px;
  top: 13px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
}

/* Icono de búsqueda en dark mode */
.dark #log-search .search-icon svg path {
  fill: #f4f4f4;
}

/* Modal LOG - Body */
#log-search .modal-body {
  padding: 20px;
}

/* Modal LOG - Tabla */
#log-search .tabla-maestro {
  table-layout: fixed;
  width: 100%;
}

/* Responsive - Modal LOG en mobile */
@media (max-width: 768px) {
  #log-search .modal-container {
    max-width: 95vw;
  }

  #log-search .tabla-contenedor {
    overflow-x: auto;
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  #log-search .modal-container {
    max-width: 100%;
  }

  #log-search .modal-body {
    padding: 15px;
  }

  #log-search .tabla-contenedor {
    max-height: 250px;
  }
}

/* ========================================
   MODAL PROGRESS - Estilos específicos (REUTILIZABLE)
   ID: modal-log-pm
   ======================================== */

/* Modal PROGRESS - Contenedor más ancho */
#modal-log-pm .modal-container {
  max-width: 900px;
}

/* Modal PROGRESS - Header con campo de búsqueda alineado a la derecha */
#modal-log-pm .modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto;
  align-items: center;
  column-gap: 12px;
}

#modal-log-pm .modal-title {
  flex: 0 0 auto;
}

#modal-log-pm .modal-search-slot {
  min-width: 0;
  justify-self: end;
  width: 100%;
  max-width: 300px;
}

#modal-log-pm .omega-table-search-field {
  width: 100%;
  margin-left: 0;
}

/* Modal PROGRESS - Body */
#modal-log-pm .modal-body {
  padding: 20px;
}

/* Modal PROGRESS - Tabla */
#modal-log-pm .tabla-maestro {
  table-layout: fixed;
  width: 100%;
}

#modal-log-pm .progress-table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#modal-log-pm .progress-log-table {
  min-width: 0;
  width: 100%;
}

#modal-log-pm .progress-log-table--orders .progress-orders-col-date {
  width: 160px;
}

#modal-log-pm .progress-log-table--orders .progress-orders-col-field {
  width: 100px;
}

#modal-log-pm .progress-log-table--orders .progress-orders-col-flex {
  width: auto;
}

#modal-log-pm .progress-log-table--orders th:nth-child(1),
#modal-log-pm .progress-log-table--orders td:nth-child(1) {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
}

#modal-log-pm .progress-log-table--orders th:nth-child(2),
#modal-log-pm .progress-log-table--orders td:nth-child(2) {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

#modal-log-pm .progress-log-table--orders th:nth-child(n + 3),
#modal-log-pm .progress-log-table--orders td:nth-child(n + 3) {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Responsive - Modal PROGRESS en mobile */
@media (max-width: 768px) {
  #modal-log-pm .modal-container {
    max-width: 95vw;
  }

  #modal-log-pm .modal-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title close"
      "search search";
    row-gap: 12px;
  }

  #modal-log-pm .modal-title {
    grid-area: title;
    min-width: 0;
  }

  #modal-log-pm .modal-search-slot {
    grid-area: search;
    max-width: none;
  }

  #modal-log-pm .omega-table-search-field {
    width: 100%;
  }

  #modal-log-pm .modal-close-btn {
    grid-area: close;
    justify-self: end;
    align-self: start;
  }

  #modal-log-pm .progress-table-wrapper {
    max-height: 300px;
  }

  #modal-log-pm .progress-log-table {
    min-width: 860px;
    width: max-content;
  }
}

@media (max-width: 480px) {
  #modal-log-pm .modal-container {
    max-width: 100%;
  }

  #modal-log-pm .modal-body {
    padding: 15px;
  }

  #modal-log-pm .modal-header {
    padding: 16px 15px 12px 15px;
  }

  #modal-log-pm .modal-close-btn {
    flex: 0 0 auto;
  }

  #modal-log-pm .progress-table-wrapper {
    max-height: 250px;
  }

  #modal-log-pm .progress-log-table {
    min-width: 720px;
  }

  #modal-log-pm .progress-log-table--orders {
    min-width: 860px;
  }
}