fix: corregido clases css #13587"

app/assets/stylesheets/application.scss

@@ -294,12 +294,6 @@ svg {
   padding:7px 15px 2px;
 }
 
-.custom-control-design {
-  border: 1px solid magenta;
-  padding:2px 15px 0px;
-  margin-bottom: -1px;
-}
-
 .custom-control-label {
   font-weight: bold;
 }
@@ -308,20 +302,8 @@ svg {
   display: none;
 }
 
-.designlist {
+.max-height {
   max-height: 500px;
-  overflow-y: auto;
-}
-
-.designpreview {
-  border-left: 1px solid cyan;
-  border-right: 1px dashed cyan;
-}
-
-.designs {
-  .design {
-    margin-top: 1rem;
-  }
 }
 
 .radio-toolbar {
@@ -546,6 +528,14 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
     border-color: var(--#{$color}) !important;
   }
 
+  .border-dashed { 
+    border-style: dashed !important;
+  }
+
+  .border-solid {
+    border-style: solid !important;
+  }
+
   .hover-bg-#{$color} {
     &:hover {
       background-color: var(--#{$color});

app/views/sites/_designs_desktop.haml

@@ -1,10 +1,10 @@
 = form_for site, html: { class: form_class(site) } do |f|
   -# Desktop view with 3 columns and radio_buttons
   .row.designs.d-none.d-lg-flex
-    .col-md-4.designlist
+    .col-md-4.max-height.overflow-auto
       %h2.pb-3= t('.selector')
       - @designs.each do |design|
-        .col.d-flex.flex-column.custom-control-design
+        .col.d-flex.flex-column.pl-2.mb-n1.border-magenta.border-solid
           %div
             = f.radio_button :design_id, design.id,
               checked: design.id == site.design_id,
@@ -15,15 +15,16 @@
           .flex-fill.f-3
             = sanitize_markdown design.description,
               tags: %w[p a strong em]
-    .col-md-6.designpreview
-      %h2.text-center.pb-3= t('.preview')
-      .embed-responsive.embed-responsive-1by1
-        %iframe.embed-responsive-item{allowfullscreen: "", src: "/placeholder.png"}
+    .col-md-6.border-0.border-lg-right.border-dashed.border-cyan
+      .border-lg-left.border-cyan
+        %h2.text-center.pb-3= t('.preview')
+        .embed-responsive.embed-responsive-1by1
+          %iframe.embed-responsive-item{allowfullscreen: "", src: "/placeholder.png"}
     .col-md-2
       %h2.pb-3= t('.characteristics')
       %div
-      %p.design 1. Es gratis
-      %p.design 2. Sofware libre - Licencia GPL
-      %p.design 3. Compatible con la web distribuida
+      %p 1. Es gratis
+      %p 2. Sofware libre - Licencia GPL
+      %p 3. Compatible con la web distribuida
       %br 
       %a.btn.btn-primary.btn-lg.mt-4{role: "button", href: ""}= t('.source_code') 

app/views/sites/_designs_mobile.haml

@@ -4,7 +4,7 @@
     .col 
       %h1.pb-3.text-center.font-weight-bolder= t('.selector')
       - @designs.each do |design|
-        %details.styled.custom-control-design
+        %details.styled.pl-2.mb-n1.border-magenta.border-solid
           %summary
             %h5.font-weight-bolder.pt-2 - #{design.name}  
             .pb-2 #{design.description}
@@ -14,7 +14,7 @@
               %iframe.embed-responsive-item{allowfullscreen: "", src: "/placeholder.png"}
           .col
             %h5.text-center.font-weight-bolder.pb-3= t('.characteristics')
-            - characteris = design.characteristics.split(".")
-            - characteris.each_with_index do |charact, index|
-              %h5.design #{index + 1}. #{charact}
+            - characteristics = design.characteristics.split(".")
+            - characteristics.each_with_index do |characteristic, index|
+              %h5 #{index + 1}. #{characteristic}
             %a.btn.btn-primary.btn-lg.btn-block.mt-4{role: "button", href: design.url}= t('.source_code')