diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index a24af4c8..cdf97b5b 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -561,24 +561,28 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 // details styles
 
 .details {
-	summary {
+	& > summary {
 		list-style: none;
-		cursor: default;
-		position: relative;
+		cursor: pointer;
+
+    .hide-when-open {
+      display: inline;
+    }
+
+    .show-when-open {
+      display: none;
+    }
   }
-	summary::after {
-    content: '▶';
-		font-size: 1.8rem;
-		position: absolute;
-		left: 97%;
-		bottom: 3%;
-		transform: rotate(180deg);
-	}
+
   &[open] {
 		& > summary {
-			&::after {
-				transform: rotate(90deg);
-			}
+      .hide-when-open {
+        display: none;
+      }
+
+      .show-when-open {
+        display: inline;
+      }
 		}
 	}
-} 
+}
diff --git a/app/views/layouts/_details.haml b/app/views/layouts/_details.haml
index 3260bfcb..a21f46c1 100644
--- a/app/views/layouts/_details.haml
+++ b/app/views/layouts/_details.haml
@@ -4,8 +4,13 @@
   @param :id [String] El ID opcional sirve para mantener el historial de
   cuál estaba abierto y recuperarlo al cargar la página
   @param :summary [String] El resumen
+  @param :summary_class [String] Clases para el summary
+
+- local_assigns[:summary_class] ||= 'h3'
 
 %details.details.py-2{ id: local_assigns[:id], data: { controller: 'details', action: 'toggle->details#store' } }
-  %summary
-    %h3.py-2.pr-2= summary
+  %summary.d-flex.flex-row.align-items-center.justify-content-between{ class: local_assigns[:summary_class] }
+    %span= summary
+    %span.hide-when-open ▶
+    %span.show-when-open ▼
   = yield