@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    
    body { font-family: 'Inter', sans-serif; background-color: #f7f7f9; color: #1f2937; } /*Fondo más claro, texto más oscuro*/
    
    .type-button {
      display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px;
      border: 1px solid #e5e7eb; border-radius: 8px; background-color: white; color: #4b5563; 
      font-size: 0.875rem; font-weight: 500; transition: all 0.2s; cursor: pointer;
    }
    .type-button:hover { background-color: #f3f4f6; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transform: translateY(-1px); } 
    
    .type-button.active { border-color: #06b6d4; background-color: #e0f7fa; color: #0e7490; box-shadow: 0 2px 5px rgba(6, 182, 212, 0.2); } 
    .type-button.active svg path{ stroke: #0e7490 !important; } 

    .design-tab {
      padding: 8px 16px; cursor: pointer; font-weight: 500; color: #6b7280; border-bottom: 2px solid transparent;
    }
    .design-tab.active {
      /* Ajustamos el color activo para que "Shape & Color" sea el predeterminado */
      color: #06b6d4; border-bottom-color: #06b6d4; /* Usamos cian para el Shape */
    }

    .custom-input {
      background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px;
      width: 100%; outline: none; transition: border-color 0.2s;
    }
    .custom-input:focus { border-color: #10b981; background: white; }

    .ad-placeholder {
        background-color: #e5e7eb; color: #6b7280; border: 1px dashed #d1d5db; display: flex;
        align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; text-align: center;
    }
    
    #btn-generate-download.active {
        background-color: #10b981;
        cursor: pointer;
    }
    #btn-generate-download.active:hover {
        background-color: #059669;
    }
    
    /* --- ESTILOS PARA LOGO --- */
    .logo-icon-select {
        width: 44px; height: 44px; border: 1px solid #e5e7eb; border-radius: 8px;
        display: flex; align-items: center; justify-content: center; cursor: pointer;
        transition: all 0.2s;
    }
    .logo-icon-select:hover { background-color: #f3f4f6; }
    .logo-icon-select.active { border-color: #10b981; background-color: #ecfdf5; }
    
    .qr-logo-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 25%;
        max-height: 25%;
        z-index: 10;
        pointer-events: none;
        border-radius: 8px; 
        background-color: white; 
        padding: 5px; 
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        display: none; 
    }
    
/* =====================================================
   ESTILOS DE MARCO (ELIMINADOS)
   ===================================================== */

/* --- NUEVAS CLASES PARA EL TEXTO PERSONALIZADO --- */

/* Clase base para los elementos de texto (Arriba/Abajo) */
.qr-custom-text-element {
    position: absolute !important; /* Asegura el posicionamiento sobre otros elementos */
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #000000;
    padding: 2px 10px;
    z-index: 50 !important; /* Aumenta el z-index para que esté sobre el canvas */
    pointer-events: none; 
    /* Fondo blanco semi-transparente para mayor legibilidad sobre el QR */
    background-color: rgba(255, 255, 255, 0.9); 
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Posición Arriba */
.qr-custom-text-element#qr-custom-text-top {
    top: 0px !important; 
    left: 0;
}

/* Posición Abajo */
.qr-custom-text-element#qr-custom-text-bottom {
    bottom: 0px !important; 
    left: 0;
    border-radius: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Marco que activa el espacio extra para el texto */
/* Aplicado al contenedor principal #qr-preview-container */
.qr-frame-custom-text {
  /* Añade un padding extra para el texto arriba y abajo.
     El padding interno se ajusta en la función JS para compensar el espacio visual del texto. */
  padding: 35px 10px !important; 
  border: 2px solid #06b6d4 !important;
  border-radius: 8px !important;
  background: white;
}