/* ================================================================
   ruat.css — GAMS Sacaba / Sección accesos RUAT
   Incluir en functions.php junto con ruat.js
   ================================================================ */

/* ── Sección contenedor ──────────────────────────────────── */
#gams-ruat {
  background:    linear-gradient(180deg, var(--background-default) 0%, #e0f7fa 100%);
  padding:       36px 0;
  border-top:    1px solid var(--borde-suave);
  border-bottom: 1px solid var(--borde-suave);
}

.ruat-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   20px;
  flex-wrap:       wrap;
  gap:             10px;
}
.ruat-header-left h2 {
  font-weight:   700 !important;
  color:         var(--texto-default) !important;
  margin:        0 0 2px !important;
}
.ruat-header-left p {
  color:     var(--texto-suave);
  font-size: 0.85rem;
  margin:    0;
}
.ruat-header-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     #fff;
  border:         1px solid var(--borde-suave);
  border-radius:  99px;
  padding:        5px 14px 5px 8px;
  font-size:      0.78rem;
  font-weight:    600;
  color:          var(--texto-suave);
  text-decoration: none;
  transition:     border-color var(--transicion), box-shadow var(--transicion);
}
.ruat-header-badge:hover {
  border-color: var(--primary-main);
  box-shadow:   0 2px 8px rgba(0,0,0,0.08);
  text-decoration: none;
  color: var(--primary-main);
}
.ruat-header-badge img {
  height: 20px;
  width:  auto;
  display: inline-block;
}

/* ── Grid de tarjetas ────────────────────────────────────── */
.ruat-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   14px;
}

/* ── Tarjeta individual ──────────────────────────────────── */
.ruat-card {
  background:      var(--background-card);
  border:          1px solid var(--borde-suave);
  border-radius:   var(--radio-lg);
  padding:         20px 14px 16px;
  text-align:      center;
  cursor:          pointer;
  text-decoration: none;
  display:         block;
  transition:      border-color var(--transicion),
  box-shadow var(--transicion),
  transform var(--transicion);
  position:        relative;
}
.ruat-card:hover {
  border-color:    var(--primary-main);
  box-shadow:      0 4px 16px rgba(27,94,32,0.12);
  transform:       translateY(-2px);
  text-decoration: none;
}

/* Indicador "tiene sub-opciones" */
.ruat-card.has-modal::after {
  content:       '▾ ver opciones';
  position:      absolute;
  bottom:        8px;
  left:          50%;
  transform:     translateX(-50%);
  font-size:     0.65rem;
  font-weight:   700;
  color:         var(--primary-main);
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity:       0.7;
  white-space:   nowrap;
}
.ruat-card.has-modal { padding-bottom: 28px; }

/* ── Ícono — el círculo de fondo viene DENTRO del PNG,
   no se dibuja más por CSS (antes se duplicaba el círculo) ── */
.ruat-icon {
  width:         92px;
  height:        92px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        0 auto 12px;
  transition:    transform var(--transicion);
  flex-shrink:   0;
}
.ruat-card:hover .ruat-icon {
  transform: scale(1.05);
}
.ruat-icon img {
  width:  128px;
  height: 128px;
  object-fit: contain;
}

/* ── Título de la tarjeta ────────────────────────────────── */
.ruat-card-title {
  font-weight:  600;
  color:        var(--texto-default);
  font-size:    0.88rem;
  line-height:  1.3;
  margin:       0;
}
.ruat-card:hover .ruat-card-title { color: var(--texto-default); }

/* ── Modal de sub-opciones ───────────────────────────────── */
#ruat-modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.5);
  z-index:         9999;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}
#ruat-modal-overlay.open { display: flex; }

#ruat-modal {
  background:    var(--background-card);
  border-radius: var(--radio-lg);
  width:         100%;
  max-width:     480px;
  max-height:    88vh;
  overflow-y:    auto;
  box-shadow:    0 20px 60px rgba(0,0,0,0.25);
  animation:     ruatIn .18s ease;
}
@keyframes ruatIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

#ruat-modal-header {
  padding:       16px 20px;
  border-bottom: 1px solid var(--borde-suave);
  display:       flex;
  align-items:   center;
  gap:           14px;
  position:      sticky;
  top:           0;
  background:    var(--background-card);
  z-index:       1;
}
.ruat-modal-icon {
  width:         48px;
  height:        48px;
  border-radius: 50%;
  background:    #00838f;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}
.ruat-modal-icon svg { width: 26px; height: 26px; fill: #fff; }

#ruat-modal-header h3 {
  font-weight:   700 !important;
  color:         var(--texto-default) !important;
  margin:        0 !important;
  font-size:     1rem !important;
  flex:          1;
}
#ruat-modal-close {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  border:        none;
  background:    #f0f0f0;
  cursor:        pointer;
  font-size:     14px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background .15s;
  flex-shrink:   0;
}
#ruat-modal-close:hover { background: #ddd; }

#ruat-modal-body { padding: 12px 16px 20px; }

.ruat-modal-list {
  list-style: none;
  padding:    0;
  margin:     0;
}
.ruat-modal-list li { border-bottom: 1px solid var(--borde-suave); }
.ruat-modal-list li:last-child { border-bottom: none; }

.ruat-modal-list a {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         12px 8px;
  text-decoration: none;
  color:           var(--texto-default);
  font-size:       0.9rem;
  font-weight:     500;
  border-radius:   var(--radio);
  transition:      background var(--transicion), color var(--transicion), padding var(--transicion);
}
.ruat-modal-list a:hover {
  background:      #e0f7fa;
  color:           #006064;
  padding-left:    14px;
  text-decoration: none;
}
.ruat-modal-list a i {
  font-size:   1rem;
  color:       #00838f;
  flex-shrink: 0;
  width:       20px;
  text-align:  center;
}

/* Nota informativa en modal */
.ruat-modal-nota {
  margin:        12px 8px 0;
  padding:       10px 12px;
  background:    #f0f4f0;
  border-radius: var(--radio);
  border-left:   3px solid var(--color-acento);
  font-size:     0.78rem;
  color:         var(--texto-suave);
  line-height:   1.5;
}
.ruat-modal-nota strong { color: var(--primary-main); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .ruat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ruat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ruat-icon { width: 77px !important; height: 77px !important; }
  .ruat-icon img { width: 72px; height: 72px; !important}
  .ruat-card-title { font-size: 0.82rem; }
}