/* Inicio con módulos como íconos y pestañas de cada módulo
 * (js/app-inicio.js, js/lib/modulos.js). Usa los tokens del design system,
 * así sigue el tema elegido (Nova, oscuro, premium…). */

/* ── Inicio ── */
.inicio-wrap { max-width: 800px; margin: 0 auto; padding: 32px 0 48px; display: flex; flex-direction: column; gap: 40px; }
.inicio-cabecera { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.inicio-saludo { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ds-text); }
.inicio-sub { margin: 0; font-size: .95rem; color: var(--ds-text-secondary); }
.inicio-buscar {
  width: 100%; max-width: 560px; height: 52px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: var(--ds-card); border: 1.5px solid var(--ds-accent-border); border-radius: 14px;
  color: var(--ds-text-secondary); font: inherit; font-size: .95rem; cursor: text; text-align: left;
}
.inicio-buscar span { flex: 1; }
.inicio-buscar kbd { font: inherit; font-size: .75rem; border: 1px solid var(--ds-border); border-radius: 6px; padding: 2px 6px; }
.inicio-buscar:hover { border-color: var(--ds-accent); }
.inicio-buscar:focus-visible { outline: 3px solid var(--ds-accent-border); outline-offset: 2px; }

.inicio-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.inicio-mod {
  position: relative; min-height: 184px; box-sizing: border-box; padding: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: 18px;
  color: var(--ds-text); font: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.inicio-mod:hover { border-color: var(--ds-accent-border); box-shadow: 0 10px 28px rgba(15,23,42,.08); transform: translateY(-2px); }
.inicio-mod:focus-visible { outline: 3px solid var(--ds-accent-border); outline-offset: 2px; }
.inicio-ic {
  width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--ds-accent-soft); color: var(--ds-accent); font-size: 30px;
}
.inicio-mod.gris .inicio-ic { background: var(--ds-surface); color: var(--ds-text-secondary); }
.inicio-tit { font-size: .95rem; font-weight: 700; }
.inicio-desc { font-size: .75rem; line-height: 1.4; color: var(--ds-text-secondary); }
.inicio-badge {
  position: absolute; top: 14px; right: 14px; min-width: 24px; height: 24px; padding: 0 8px; box-sizing: border-box;
  border-radius: 12px; background: #DC2626; color: #FFFFFF; font-size: .7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 560px) {
  .inicio-wrap { padding: 8px 0 32px; gap: 24px; }
  .inicio-saludo { font-size: 1.6rem; }
  .inicio-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .inicio-mod { min-height: 150px; padding: 12px; }
  .inicio-ic { width: 48px; height: 48px; font-size: 24px; border-radius: 13px; }
  .inicio-buscar kbd { display: none; }
  .inicio-desc { display: none; }
  .inicio-mod { min-height: 120px; }
}

/* ── Pestañas del módulo (arriba de cada vista de un módulo agrupado) ── */
.mod-subtabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 8px 24px; background: var(--ds-card); border-bottom: 1px solid var(--ds-border);
}
.mod-subtabs-tit {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 12px;
  font-size: .78rem; font-weight: 700; color: var(--ds-text);
}
.mod-subtabs-tit .ti { color: var(--ds-accent); font-size: 1rem; }
.mod-subtab {
  background: transparent; border: none; border-radius: 8px; padding: 8px 14px; min-height: 36px;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--ds-text-secondary); cursor: pointer;
}
.mod-subtab:hover { background: var(--ds-surface); color: var(--ds-text); }
.mod-subtab.active { background: var(--ds-accent-soft); color: var(--ds-accent); }
.mod-subtab:focus-visible { outline: 3px solid var(--ds-accent-border); outline-offset: 1px; }
/* Vistas con relleno propio (view-scroll): la barra ocupa todo el ancho, arriba. */
.view-scroll > .mod-subtabs { margin: -28px -32px 20px; }
.view-scroll[style*="padding:24px 32px"] > .mod-subtabs { margin: -24px -32px 20px; }
.view-scroll[style*="padding:48px 56px"] > .mod-subtabs { margin: -48px -56px 24px; }
/* Vista a pantalla completa (Gestión documental): el iframe usa el resto. */
.view-flush.con-mod-subtabs > iframe { flex: 1; min-height: 0; height: auto !important; }
/* Plazos y Renovaciones ya son pestañas del módulo Contratos: su selector propio sobra. */
.con-mod-subtabs .ds-subtabs:has(#plazos-subtab-renov),
.con-mod-subtabs .ds-subtabs:has(#renov-subtab-plazos) { display: none; }

/* ── Contratos autorizados en el SGI (js/app-sgi-autorizados.js) ── */
.sgia-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 12px; }
.sgia-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.sgia-card.con-error { border-color: #FCA5A5; }
.sgia-card h3 { margin: 2px 0; font-size: .95rem; color: var(--ds-text); }
.sgia-top { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; font-weight: 700; color: var(--ds-text-secondary); }
.sgia-estado-sgi { background: #DCFCE7; color: #166534; border-radius: 999px; padding: 2px 8px; }
.sgia-meta { font-size: .78rem; color: var(--ds-text-secondary); margin: 0; }
.sgia-errores, .sgia-avisos { margin: 4px 0 0; padding-left: 18px; font-size: .78rem; }
.sgia-errores li { color: #B91C1C; } .sgia-avisos li { color: #92400E; }
.sgia-acciones { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sgia-ok, .sgia-aviso, .sgia-error, .sgia-vacio { font-size: .8rem; border-radius: 10px; padding: 10px 12px; }
.sgia-ok { background: #DCFCE7; color: #166534; } .sgia-aviso { background: #FEF3C7; color: #92400E; }
.sgia-error { background: #FEE2E2; color: #B91C1C; } .sgia-vacio { color: var(--ds-text-secondary); }
.sgia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sgia-campo { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 600; color: var(--ds-text-secondary); }
.sgia-campo input { font: inherit; font-size: .85rem; font-weight: 400; padding: 8px 10px; border: 1px solid var(--ds-border); border-radius: 8px; background: var(--ds-card); color: var(--ds-text); min-height: 38px; }