DataScope26/WEB

1.field-error {2  display: block;3  color: #e53e3e;4  font-size: 0.75rem;5  margin-top: 0.25rem;6}7 8.plan-selection-content {9  padding: 3rem;10  display: flex;11  flex-direction: column;12  height: 100%;13  animation: fadeIn 0.8s ease forwards;14}15 16.plan-selection-header { 17  margin-bottom: 2rem;18  display: flex;19  flex-direction: column;20  gap: 0.5rem;21}22 23.step-back-button {24  align-self: flex-start;25  background: none;26  padding: 0.5rem 0.5rem 0.5rem 0;27}28 29.step-back-button:hover {30  transform: translateX(-0.375rem);31}32 33.plan-selection-subtitle {34  color: var(--green);35  font-size: 0.875rem;36  font-weight: 600;37  letter-spacing: 0.0625rem;38  text-transform: uppercase;39  margin-bottom: 0.5rem;40}41 42.plan-selection-title {43  font-family: 'Roboto', sans-serif;44  font-size: 2rem;45  color: var(--color-text);46  margin: 0;47}48 49/* Alerta Plan Preseleccionado */50.preselected-alert {51  background: var(--surface-2);52  border-left: 0.25rem solid var(--green);53  padding: 1.25rem;54  border-radius: 0.5rem;55  margin-bottom: 2rem;56  display: flex;57  align-items: center;58  justify-content: space-between;59}60 61.preselected-alert h4 { margin: 0 0 0.5rem 0; color: var(--color-text); font-size: 1.125rem; }62.preselected-alert p { margin: 0; color: var(--muted); }63.alert-actions { display: flex; gap: 0.75rem; }64 65/* Grid de Planes */66.accordion-plans-grid {67  display: flex;68  gap: 1rem;69  overflow-x: auto;70  padding-bottom: 0.625rem;71  min-height: 0;72}73 74.accordion-plan-card {75  flex: 1;76  min-width: 13.75rem;77  background: var(--surface);78  border: 0.125rem solid var(--color-border);79  border-radius: 0.75rem;80  padding: 1.5rem;81  cursor: pointer;82  transition: all 0.2s ease;83  display: flex;84  flex-direction: column;85}86 87.accordion-plan-card:hover { border-color: var(--color-accent-60); }88.accordion-plan-card.selected {89  border-color: var(--green);90  background: rgba(46, 232, 138, 0.05);91}92 93.accordion-plan-card h3 { margin: 0 0 0.75rem 0; color: var(--color-text); font-size: 1rem; }94 95.plan-price-display {96  display: flex;97  align-items: baseline;98  margin-bottom: 1rem;99  padding-bottom: 1rem;100  border-bottom: 0.0625rem solid var(--color-border-soft);101}102 103.price-amount { font-size: 1.75rem; font-weight: 800; color: var(--color-text); }104.price-period { color: var(--muted); margin-left: 0.25rem; font-size: 0.875rem; }105 106.plan-features-list {107  list-style: none;108  margin: 0;109  padding: 0;110  display: flex;111  flex-direction: column;112  gap: 0.5rem;113  overflow-y: auto;114  max-height: min(12.5rem, 24vh); /* Mantiene el paso dentro del viewport */115}116 117.plan-features-list li {118  display: flex;119  align-items: flex-start;120  gap: 0.5rem;121  color: #d4d4d4;122  font-size: 0.75rem;123}124 125html[data-theme='light'] .plan-features-list li {126  color: #6b7280;127}128 129.feature-check { color: #2ee88a; font-weight: bold; }130 131/* Botones */132.plan-selection-actions {133  margin-top: auto;134  display: flex;135  justify-content: flex-end;136  padding-top: 1.5rem;137  padding-bottom: 0.25rem;138  border-top: 0.0625rem solid var(--color-border-soft);139}140 141.btn-solid {142  padding: 0.875rem 2rem;143  font-size: 1rem;144}145 146.btn-outline {147  background: transparent;148  color: var(--muted);149  border: 0.0625rem solid var(--color-border);150  padding: 0.875rem 2rem;151  font-size: 1rem;152}153 154.btn-outline:hover { background: var(--surface-2); color: var(--color-text); }155 156@media (max-width: 48rem) {157  .plan-selection-content {158    padding: 1.5rem;159  }160 161  .accordion-plans-grid {162    flex-direction: column;   /* apila las tarjetas verticalmente */163    overflow-x: hidden;       /* mata el scroll lateral */164    overflow-y: visible;165  }166 167  .accordion-plan-card {168    min-width: 0;             /* anula el min-width: 13.75rem que forzaba el ancho */169    width: 100%;170  }171 172  .plan-features-list {173    max-height: none;         /* en vertical no hace falta limitar alto con scroll interno */174  }175 176  .preselected-alert {177    flex-direction: column;178    align-items: flex-start;179    gap: 1rem;180  }181 182  .alert-actions {183    width: 100%;184  }185 186  .alert-actions button {187    flex: 1;188  }189}