/* =====================================================================
   V05.2.0 · FASE 2 · SUPERBOTONES + SUBBOTONES
   SOLO CAPA VISUAL DE LA BOTONERA.
   Base: V05.1.0 FASE 1 aprobada.
   NO toca lógica, motores, contenidos, intro ni Subrayado Jurídico.
   ===================================================================== */

/* Paleta aprobada (+25% blanco) y derivados propios de cada familia */
.railGroupBoe{
  --f2-accent:#52E1DC; --f2-accent2:#27BDB7; --f2-deep:#073C3A;
  --f2-rgb:82,225,220;
}
.railGroupTrain{
  --f2-accent:#DC58D5; --f2-accent2:#B832B0; --f2-deep:#4B123F;
  --f2-rgb:220,88,213;
}
.railGroupPlan{
  --f2-accent:#E2B856; --f2-accent2:#BD8928; --f2-deep:#4C350B;
  --f2-rgb:226,184,86;
}
.railGroupMemory{
  --f2-accent:#FF57A8; --f2-accent2:#D82D81; --f2-deep:#51102F;
  --f2-rgb:255,87,168;
}
.railGroupSpace{
  --f2-accent:#9C61FF; --f2-accent2:#7040CC; --f2-deep:#281354;
  --f2-rgb:156,97,255;
}

/* ---------------------------------------------------------------------
   1 · SUPERBOTONES: botón-joya/cartel con identidad propia
   --------------------------------------------------------------------- */
.railGroup{
  position:relative!important;
  isolation:isolate!important;
  flex:0 0 auto!important;
  border:2px solid rgba(var(--f2-rgb),.46)!important;
  border-radius:20px!important;
  background:
    linear-gradient(145deg,rgba(var(--f2-rgb),.11),rgba(255,255,255,.018) 48%,rgba(0,0,0,.16)),
    #211a21!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 10px 22px rgba(7,4,7,.24),
    0 0 0 1px rgba(0,0,0,.18)!important;
  overflow:hidden!important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.railGroup::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 0%,rgba(var(--f2-rgb),.22),transparent 34%),
    linear-gradient(105deg,transparent 0 28%,rgba(255,255,255,.055) 39%,transparent 51%);
  opacity:.9;
}
.railGroup:hover{
  border-color:rgba(var(--f2-rgb),.68)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 13px 28px rgba(7,4,7,.29),
    0 0 18px rgba(var(--f2-rgb),.10)!important;
}
.railGroup[open]{
  border-color:rgba(var(--f2-rgb),.74)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 15px 32px rgba(7,4,7,.32),
    0 0 23px rgba(var(--f2-rgb),.14)!important;
}

.railGroupSummary{
  position:relative!important;
  z-index:1!important;
  min-height:76px!important;
  grid-template-columns:46px minmax(0,1fr) 18px!important;
  gap:10px!important;
  padding:10px 11px 10px 10px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),transparent 35%),
    linear-gradient(112deg,rgba(var(--f2-rgb),.31),rgba(var(--f2-rgb),.13) 48%,rgba(8,6,9,.08) 80%)!important;
  border:0!important;
  cursor:pointer!important;
  transition:background .18s ease,filter .18s ease!important;
}
.railGroupSummary::before{
  content:"";
  position:absolute;
  left:10px;right:31px;top:5px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.46),rgba(var(--f2-rgb),.26),transparent 86%);
  border-radius:999px;
  pointer-events:none;
}
.railGroupSummary:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.105),transparent 38%),
    linear-gradient(112deg,rgba(var(--f2-rgb),.40),rgba(var(--f2-rgb),.17) 50%,rgba(8,6,9,.07) 82%)!important;
}
.railGroupSummary::after{
  color:var(--f2-accent)!important;
  font-size:15px!important;
  text-shadow:0 0 10px rgba(var(--f2-rgb),.68)!important;
}

/* Icono convertido en medallón/joya */
.groupIcon{
  position:relative!important;
  width:44px!important;height:44px!important;
  border-radius:14px!important;
  display:grid!important;place-items:center!important;
  font-size:21px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,.48),transparent 18%),
    linear-gradient(145deg,color-mix(in srgb,var(--f2-accent) 88%,white 12%),var(--f2-accent2) 55%,var(--f2-deep))!important;
  border:1px solid rgba(255,255,255,.36)!important;
  outline:1px solid rgba(var(--f2-rgb),.44)!important;
  outline-offset:2px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -7px 14px rgba(0,0,0,.18),
    0 8px 18px rgba(0,0,0,.26),
    0 0 16px rgba(var(--f2-rgb),.22)!important;
  filter:saturate(1.06)!important;
}
.railGroup[open] .groupIcon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -7px 14px rgba(0,0,0,.17),
    0 8px 18px rgba(0,0,0,.28),
    0 0 20px rgba(var(--f2-rgb),.32)!important;
}
.groupCopy{gap:4px!important;}
.groupCopy b{
  color:#fff!important;
  font-size:13.5px!important;
  line-height:1.05!important;
  letter-spacing:.075em!important;
  font-weight:950!important;
  text-shadow:0 1px 1px rgba(0,0,0,.40)!important;
}
.groupCopy em{
  color:color-mix(in srgb,var(--f2-accent) 45%,white 55%)!important;
  font-size:10px!important;
  line-height:1.15!important;
  letter-spacing:.035em!important;
  font-weight:850!important;
  text-shadow:0 1px 1px rgba(0,0,0,.30)!important;
}

/* ---------------------------------------------------------------------
   2 · PANEL INTERIOR: misma familia del superbloque, no "botón de gestoría"
   --------------------------------------------------------------------- */
.railGroupPanel{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  gap:6px!important;
  padding:8px!important;
  border-top:1px solid rgba(var(--f2-rgb),.28)!important;
  background:
    linear-gradient(180deg,rgba(var(--f2-rgb),.075),rgba(6,5,7,.12)),
    rgba(21,17,22,.64)!important;
  box-shadow:inset 0 9px 18px rgba(0,0,0,.10)!important;
}

.railGroupPanel .railItem{
  position:relative!important;
  min-height:40px!important;
  grid-template-columns:31px minmax(0,1fr)!important;
  gap:7px!important;
  padding:6px 9px!important;
  border:1px solid rgba(var(--f2-rgb),.19)!important;
  border-radius:12px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    rgba(var(--f2-rgb),.055)!important;
  color:#f7f1f5!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 4px 10px rgba(0,0,0,.12)!important;
  transform:none!important;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease!important;
}
.railGroupPanel .railItem span{
  width:27px!important;height:27px!important;
  display:grid!important;place-items:center!important;
  border-radius:9px!important;
  font-size:15px!important;
  color:#fff!important;
  background:linear-gradient(145deg,rgba(var(--f2-rgb),.36),rgba(var(--f2-rgb),.13))!important;
  border:1px solid rgba(var(--f2-rgb),.32)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 8px rgba(0,0,0,.15)!important;
}
.railGroupPanel .railItem b{
  color:#f9f5f8!important;
  font-size:11.8px!important;
  line-height:1.12!important;
  font-weight:850!important;
  letter-spacing:.005em!important;
}
.railGroupPanel .railItem:hover{
  transform:translateX(2px)!important;
  border-color:rgba(var(--f2-rgb),.46)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
    rgba(var(--f2-rgb),.14)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 7px 15px rgba(0,0,0,.18),
    0 0 12px rgba(var(--f2-rgb),.08)!important;
}
.railGroupPanel .railItem:hover span{
  background:linear-gradient(145deg,rgba(var(--f2-rgb),.52),rgba(var(--f2-rgb),.20))!important;
}

/* ACTIVO: inequívoco y siempre dentro de la familia cromática del superbloque */
.railGroupPanel .railItem.isActive,
.railGroupPanel .railItem[aria-current="true"]{
  border-color:rgba(255,255,255,.36)!important;
  background:
    radial-gradient(circle at 10% 15%,rgba(255,255,255,.22),transparent 24%),
    linear-gradient(118deg,var(--f2-accent2),var(--f2-accent) 52%,color-mix(in srgb,var(--f2-accent) 60%,var(--f2-deep) 40%))!important;
  color:#fff!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 8px 18px rgba(var(--f2-rgb),.24),
    0 0 14px rgba(var(--f2-rgb),.13)!important;
}
.railGroupPanel .railItem.isActive span,
.railGroupPanel .railItem[aria-current="true"] span{
  color:#fff!important;
  background:rgba(24,12,22,.22)!important;
  border-color:rgba(255,255,255,.32)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.19)!important;
}
.railGroupPanel .railItem.isActive b,
.railGroupPanel .railItem[aria-current="true"] b{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.28)!important;}

/* ---------------------------------------------------------------------
   3 · ESTADOS VISUALES NORMALIZADOS
   Se dejan preparados sin cambiar la lógica actual. Pueden activarse con
   clase o data-state cuando un módulo ya disponga de ese estado.
   --------------------------------------------------------------------- */
.railGroupPanel .railItem:is(.is-warning,.isWarning,[data-state="warning"],[data-state="aviso"]){
  --f2-state:#F29A55;
  border-color:color-mix(in srgb,var(--f2-state) 62%,var(--f2-accent) 38%)!important;
  box-shadow:inset 3px 0 0 var(--f2-state),0 5px 12px rgba(0,0,0,.15)!important;
}
.railGroupPanel .railItem:is(.is-danger,.isDanger,[data-state="danger"],[data-state="peligro"]){
  --f2-state:#E84D73;
  border-color:color-mix(in srgb,var(--f2-state) 68%,var(--f2-accent) 32%)!important;
  box-shadow:inset 3px 0 0 var(--f2-state),0 5px 12px rgba(0,0,0,.15)!important;
}
.railGroupPanel .railItem:is(.is-success,.isSuccess,[data-state="success"],[data-state="exito"]){
  --f2-state:#55C98A;
  border-color:color-mix(in srgb,var(--f2-state) 66%,var(--f2-accent) 34%)!important;
  box-shadow:inset 3px 0 0 var(--f2-state),0 5px 12px rgba(0,0,0,.15)!important;
}
.railGroupPanel .railItem:is(.is-review,.isReview,[data-state="review"],[data-state="revision"]){
  --f2-state:#B58AF2;
  border-color:color-mix(in srgb,var(--f2-state) 56%,var(--f2-accent) 44%)!important;
  box-shadow:inset 3px 0 0 var(--f2-state),0 5px 12px rgba(0,0,0,.15)!important;
}

/* Badge existente: más integrado en la joyería visual, sin alterar su lógica */
.reviewDueBadge{
  right:7px!important;top:7px!important;
  min-width:22px!important;height:22px!important;
  padding:0 6px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  background:linear-gradient(145deg,#ff6db3,#d9247b)!important;
  color:#fff!important;
  box-shadow:0 4px 11px rgba(216,36,123,.36),inset 0 1px 0 rgba(255,255,255,.36)!important;
}

/* Focus accesible y visible sin romper la estética */
.railGroupSummary:focus-visible,
.railGroupPanel .railItem:focus-visible{
  outline:3px solid color-mix(in srgb,var(--f2-accent) 72%,white 28%)!important;
  outline-offset:2px!important;
}

/* ---------------------------------------------------------------------
   4 · iPad / táctil: misma familia y objetivos táctiles amplios
   --------------------------------------------------------------------- */
@media (pointer:coarse){
  .railGroupSummary{min-height:76px!important;}
  .railGroupPanel .railItem{min-height:44px!important;padding:7px 9px!important;}
  .railGroupPanel .railItem:hover{transform:none!important;}
}
@media (pointer:coarse) and (min-width:901px) and (max-width:1366px){
  .railGroup{border-radius:17px!important;}
  .railGroupSummary{
    min-height:70px!important;
    grid-template-columns:40px minmax(0,1fr) 16px!important;
    gap:8px!important;
    padding:8px!important;
  }
  .groupIcon{width:38px!important;height:38px!important;border-radius:12px!important;font-size:18px!important;}
  .groupCopy b{font-size:12.2px!important;}
  .groupCopy em{font-size:9.2px!important;}
  .railGroupPanel{gap:5px!important;padding:7px!important;}
  .railGroupPanel .railItem{min-height:42px!important;grid-template-columns:29px minmax(0,1fr)!important;padding:6px 8px!important;}
  .railGroupPanel .railItem span{width:25px!important;height:25px!important;font-size:14px!important;}
  .railGroupPanel .railItem b{font-size:11px!important;}
}
@media (pointer:coarse) and (max-width:900px){
  .railGroup{border-radius:18px!important;}
  .railGroupSummary{min-height:72px!important;}
  .railGroupPanel .railItem{min-height:46px!important;}
}