/*
  GOTOCHECK - COMPATIBILITY CSS
  Mapeo de clases antiguas a nuevas para mantener compatibilidad
  Fecha: Octubre 2025
  ⚠️ TEMPORAL - Eliminar cuando se actualicen todos los templates
*/

/* === MAPEO DE CLASES NAVBAR === */
/* Mapeo directo de clases antiguas a nuevas */
.gotocheck-navbar,
.navbar.gotocheck-navbar {
  background: var(--gc-white);
  border-bottom: 1px solid var(--gc-gray-200);
  box-shadow: var(--gc-shadow-sm);
  padding: var(--gc-space-4) 0;
}

.gotocheck-nav-link,
.gc-nav-link {
  display: flex;
  align-items: center;
  gap: var(--gc-space-2);
  padding: var(--gc-space-3) var(--gc-space-4);
  color: var(--gc-gray-600);
  text-decoration: none;
  border-radius: var(--gc-radius);
  transition: var(--gc-transition-fast);
  font-weight: 500;
}

.gotocheck-nav-link:hover,
.gotocheck-nav-link.active,
.gc-nav-link:hover,
.gc-nav-link.active {
  color: var(--gc-primary-dark);
  background-color: rgba(230, 194, 0, 0.1);
  text-decoration: none;
}

/* === MAPEO DE ICONOS === */
.gotocheck-icon,
.gc-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
}

.gotocheck-icon-sm,
.gc-icon-sm {
  width: 0.875em;
  height: 0.875em;
}

.gotocheck-icon-lg,
.gc-icon-lg {
  width: 1.25em;
  height: 1.25em;
}

.gotocheck-icon-connected,
.gc-icon-connected {
  color: var(--gc-success);
}

.gotocheck-icon-disconnected,
.gc-icon-disconnected {
  color: var(--gc-gray-400);
}

/* === MAPEO DE BADGES === */
.gotocheck-badge,
.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gc-space-1);
  padding: var(--gc-space-1) var(--gc-space-3);
  font-size: var(--gc-font-size-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--gc-white);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--gc-radius-full);
}

.gotocheck-badge-primary,
.gc-badge-primary {
  color: var(--gc-gray-900);
  background: var(--gc-gradient-primary);
}

.gotocheck-badge-warning,
.gc-badge-warning {
  color: var(--gc-gray-900);
  background: var(--gc-warning);
}

.gotocheck-badge-success,
.gc-badge-success {
  background: var(--gc-success);
}

/* === MAPEO DE ALERTS === */
/*
 * UNA SOLA CAJA PARA TODO EL PROGRAMA (20-sep-2026).
 *
 * Aquí hay 270 cajas escritas como `alert alert-info` de Bootstrap repartidas
 * por 116 plantillas. Reescribirlas una a una es una tarde de trabajo y un
 * montón de riesgo (`.gc-alert` es flex; `.alert` es bloque: cambiar la clase
 * de una caja con varios hijos los pone en fila y revienta la pantalla).
 *
 * Así que la caja de Bootstrap SE VISTE, no se sustituye: `.alert` toma aquí la
 * forma de la casa —radio 16 px, el mismo aire que una tarjeta, borde de 1 px— y
 * `.gc-alert` es exactamente la misma caja más la fila icono + texto + cerrar.
 * Una plantilla nueva escribe `gc-alert`; las 270 viejas ya se ven igual sin
 * tocarlas.
 *
 * Ojo con los colores: hasta hoy `.alert-info` se pintaba de un azul
 * `rgba(59,130,246)` que NO está en la paleta —el «azul feísimo»—. El info de
 * la casa es mostaza (`--gc-info` #E6C200) y el success es azul marino
 * (`--gc-success` #1E3A8A, que es azul y no verde: está en DISENO_PANEL.md §4).
 */
.alert,
.gotocheck-alert,
.gc-alert {
  position: relative;
  padding: var(--gc-space-4) var(--gc-space-5);
  margin-bottom: var(--gc-space-4);
  border: 1px solid transparent;
  border-radius: var(--gc-radius-lg);
  font-size: var(--gc-font-size-sm);
  line-height: 1.5;
}

/* `.gc-alert` = la misma caja, en fila: icono · texto · cerrar. */
.gotocheck-alert,
.gc-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--gc-space-3);
}

/* El título de dentro no necesita el tamaño de un H5 suelto. */
.alert h4, .alert h5, .alert h6,
.gc-alert h4, .gc-alert h5, .gc-alert h6 {
  font-size: var(--gc-font-size-base);
  font-weight: 600;
  margin-bottom: var(--gc-space-2);
}

.alert > *:last-child,
.gc-alert > div > *:last-child {
  margin-bottom: 0;
}

/* Éxito — azul marino de la casa */
.alert-success,
.gotocheck-alert-success,
.gc-alert-success {
  color: var(--gc-success-dark) !important;
  background-color: rgba(30, 58, 138, 0.08) !important;
  border-color: rgba(30, 58, 138, 0.25) !important;
}

/* Error — rojo */
.alert-danger,
.alert-error,
.gotocheck-alert-error,
.gc-alert-error,
.gc-alert-danger {
  color: var(--gc-error-dark) !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

/* Aviso — ámbar */
.alert-warning,
.gotocheck-alert-warning,
.gc-alert-warning {
  color: var(--gc-warning-dark) !important;
  background-color: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
}

/* Información — mostaza, la firma del panel. NO azul. */
.alert-info,
.alert-primary,
.gotocheck-alert-info,
.gc-alert-info {
  color: var(--gc-gray-800) !important;
  background-color: rgba(230, 194, 0, 0.10) !important;
  border-color: rgba(230, 194, 0, 0.35) !important;
}

/* Neutra — para las cajas que solo agrupan texto */
.alert-light,
.alert-secondary,
.alert-dark,
.gc-alert-light,
.gc-alert-secondary {
  color: var(--gc-gray-700) !important;
  background-color: var(--gc-gray-50, #F9FAFB) !important;
  border-color: var(--gc-gray-200) !important;
}

/* Iconos dentro de las alertas: del color de la caja, no del suyo propio. */
.alert .gc-icon,
.alert .gotocheck-icon,
.gc-alert .gc-icon,
.gc-alert .gotocheck-icon {
  color: inherit !important;
  opacity: 0.85;
  flex-shrink: 0;
}

/* La X de cerrar: la nuestra y la de Bootstrap, con el mismo sitio. */
.gc-alert-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.45;
  color: inherit;
  align-self: flex-start;
}

.gc-alert-close:hover {
  opacity: 1;
}

.alert-dismissible {
  padding-right: var(--gc-space-10, 2.5rem);
}

/* === MAPEO DE CARDS === */
.gotocheck-card,
.gc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--gc-white);
  background-clip: border-box;
  border: 1px solid var(--gc-gray-200);
  border-radius: var(--gc-radius-lg);
  box-shadow: var(--gc-shadow-sm);
  transition: var(--gc-transition);
}

.gotocheck-card:hover,
.gc-card:hover {
  box-shadow: var(--gc-shadow-md);
  transform: translateY(-2px);
}

/* === MAPEO DE BOTONES === */
.btn-gotocheck,
.gc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gc-space-2);
  padding: var(--gc-space-3) var(--gc-space-6);
  font-size: var(--gc-font-size-sm);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--gc-radius);
  transition: var(--gc-transition-fast);
  min-height: 2.5rem;
  color: var(--gc-gray-900);
  background: var(--gc-gradient-primary);
  border-color: var(--gc-primary);
  box-shadow: var(--gc-shadow-sm);
}

.btn-gotocheck:hover,
.gc-btn-primary:hover {
  background: var(--gc-primary-dark);
  border-color: var(--gc-primary-darker);
  box-shadow: var(--gc-shadow);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--gc-gray-900);
}

.btn-gotocheck-outline,
.gc-btn-outline-primary {
  color: var(--gc-primary-dark);
  background: transparent;
  border-color: var(--gc-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gc-space-2);
  padding: var(--gc-space-3) var(--gc-space-6);
  font-size: var(--gc-font-size-sm);
  font-weight: 500;
  border-radius: var(--gc-radius);
  transition: var(--gc-transition-fast);
  text-decoration: none;
}

.btn-gotocheck-outline:hover,
.gc-btn-outline-primary:hover {
  color: var(--gc-gray-900);
  background: var(--gc-primary);
  border-color: var(--gc-primary-dark);
  text-decoration: none;
}

/* === MAPEO DE TABLAS === */
.gotocheck-table,
.gc-table {
  width: 100%;
  margin-bottom: var(--gc-space-4);
  color: var(--gc-gray-700);
  background-color: var(--gc-white);
  border-collapse: collapse;
  border-radius: var(--gc-radius-lg);
  overflow: hidden;
  box-shadow: var(--gc-shadow-sm);
}

.gotocheck-table th,
.gotocheck-table td,
.gc-table th,
.gc-table td {
  padding: var(--gc-space-4) var(--gc-space-5);
  text-align: left;
  border-bottom: 1px solid var(--gc-gray-200);
}

.gotocheck-table th,
.gc-table th {
  font-weight: 600;
  color: var(--gc-gray-900);
  background-color: var(--gc-gray-50);
}

.gotocheck-table tbody tr:hover,
.gc-table tbody tr:hover {
  background-color: var(--gc-gray-50);
}

/* === MAPEO DE LISTAS MOBILE === */
.list-mobile,
.gc-list-mobile {
  background: var(--gc-white);
  border: 1px solid var(--gc-gray-200);
  border-radius: var(--gc-radius-lg);
  box-shadow: var(--gc-shadow-sm);
  overflow: hidden;
}

.list-mobile-item,
.gc-list-mobile-item {
  display: flex;
  align-items: center;
  gap: var(--gc-space-4);
  padding: var(--gc-space-4);
  border-bottom: 1px solid var(--gc-gray-100);
  transition: var(--gc-transition-fast);
  cursor: pointer;
}

.list-mobile-item:last-child,
.gc-list-mobile-item:last-child {
  border-bottom: none;
}

.list-mobile-item:hover,
.gc-list-mobile-item:hover {
  background-color: var(--gc-gray-50);
}

.list-mobile-icon,
.gc-list-mobile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--gc-radius-lg);
  background: var(--gc-gray-100);
  color: var(--gc-gray-600);
  flex-shrink: 0;
}

.list-mobile-content,
.gc-list-mobile-content {
  flex: 1;
  min-width: 0;
}

.list-mobile-title,
.gc-list-mobile-title {
  font-weight: 600;
  color: var(--gc-gray-900);
  margin-bottom: var(--gc-space-1);
  line-height: 1.4;
}

.list-mobile-subtitle,
.gc-list-mobile-subtitle {
  font-size: var(--gc-font-size-sm);
  color: var(--gc-gray-600);
  line-height: 1.3;
}

/* === UTILIDADES DE DISPLAY === */
.desktop-only,
.gc-desktop-only {
  display: block;
}

.mobile-only,
.gc-mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .desktop-only,
  .gc-desktop-only {
    display: none !important;
  }
  
  .mobile-only,
  .gc-mobile-only {
    display: block !important;
  }
}

/* === CLASES TOUCH === */
.touch-row {
  cursor: pointer;
  transition: var(--gc-transition-fast);
}

.touch-row:hover {
  background-color: var(--gc-gray-50);
}

/* === COMPATIBILIDAD ESPECÍFICA === */
.property-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--gc-radius-lg);
  background: var(--gc-gray-100);
  transition: var(--gc-transition-fast);
}

.gear-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--gc-gray-500);
  border-radius: var(--gc-radius);
  transition: var(--gc-transition-fast);
  text-decoration: none;
}

.gear-link:hover {
  color: var(--gc-primary-dark);
  background: rgba(230, 194, 0, 0.1);
  transform: rotate(90deg);
  text-decoration: none;
}

.gear-svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* === GOTOCHECK FORM SYSTEM === */
.gotocheck-form-container {
  display: flex;
  flex-direction: column;
  gap: var(--gc-space-6);
}

.gotocheck-card-body {
  padding: var(--gc-space-6);
}

.gotocheck-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gc-space-4);
  margin-bottom: var(--gc-space-5);
}

.gotocheck-form-row:last-child {
  margin-bottom: 0;
}

.gotocheck-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--gc-space-2);
}

.gotocheck-form-label {
  font-size: var(--gc-font-size-sm);
  font-weight: 500;
  color: var(--gc-gray-700);
}

.gotocheck-form-input {
  padding: var(--gc-space-3);
  border: 1px solid var(--gc-gray-300);
  border-radius: var(--gc-radius);
  font-size: var(--gc-font-size-base);
  line-height: 1.5;
  transition: var(--gc-transition-fast);
}

.gotocheck-form-input:focus {
  outline: none;
  border-color: var(--gc-primary);
  box-shadow: 0 0 0 3px rgba(230, 194, 0, 0.1);
}

.gotocheck-form-input-disabled {
  background-color: var(--gc-gray-50) !important;
  color: var(--gc-gray-500) !important;
  cursor: not-allowed;
  opacity: 0.8;
}

.gotocheck-form-help {
  font-size: var(--gc-font-size-xs);
  color: var(--gc-gray-500);
}

.gotocheck-form-actions {
  display: flex;
  gap: var(--gc-space-3);
  padding-top: var(--gc-space-4);
}

/* Responsive */
@media (max-width: 768px) {
  .gotocheck-form-row {
    grid-template-columns: 1fr;
  }
}