/* ============================================================
   components.css — Componentes del sistema de evaluación PI
   Sistema de Evaluación · Coordinación de Estudios · UAM Azcapotzalco
   ============================================================ */

/* ==========================================================
   1. HEADER (barra institucional + barra de app)
   ========================================================== */

/* Barra institucional UAM — franja superior en guinda */
.inst-bar {
  background: var(--bar-bg);
  padding: 6px var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.inst-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.inst-bar__logo {
  height: 26px;
  width: auto;
}

.inst-bar__name {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.80);
  line-height: var(--lh-snug);
}

/* Barra de navegación de la app — blanca con sombra */
.app-nav {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--bd-default);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.app-nav__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-nav__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--role-coordinador-tint);
  border: 1px solid var(--role-coordinador-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-nav__icon svg {
  width: 18px;
  height: 18px;
  color: var(--uam-guinda);
}

.app-nav__title {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: 1.2;
}

.app-nav__subtitle {
  font-size: var(--fs-caption);
  color: var(--fg-4);
  margin-top: 1px;
}

.app-nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Avatar de usuario */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--uam-guinda);
  color: #FFFFFF;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ==========================================================
   2. CARDS
   ========================================================== */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--bd-default);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card--sm {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.card--flat {
  box-shadow: none;
}

.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.card__title {
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  line-height: var(--lh-snug);
}

.card__desc {
  font-size: var(--fs-caption);
  color: var(--fg-4);
  margin-top: var(--space-1);
}

/* Card de estadística */
.stat-card {
  background: var(--bg-raised);
  border: 1px solid var(--bd-default);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-card__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-5);
}

.stat-card__value {
  font-size: 32px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-card__note {
  font-size: var(--fs-caption);
  color: var(--fg-4);
}

/* ==========================================================
   3. BOTONES
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Principal — coordinador (guinda) */
.btn--coordinador {
  background: var(--uam-guinda);
  color: #FFFFFF;
  box-shadow: var(--shadow-cta-coordinador);
  border-color: var(--uam-guinda);
}
.btn--coordinador:hover  {
  background: var(--uam-guinda-deep);
  border-color: var(--uam-guinda-deep);
}
.btn--coordinador:active { background: var(--uam-guinda-deep); }

/* Principal — asesor (azul) */
.btn--asesor {
  background: var(--role-asesor);
  color: #FFFFFF;
  box-shadow: var(--shadow-cta-asesor);
  border-color: var(--role-asesor);
}
.btn--asesor:hover  {
  background: var(--role-asesor-press);
  border-color: var(--role-asesor-press);
}
.btn--asesor:active { background: var(--role-asesor-press); }

/* Tint — fondo semitransparente */
.btn--tint-coordinador {
  background: var(--role-coordinador-tint);
  border-color: var(--role-coordinador-border);
  color: var(--uam-guinda);
}
.btn--tint-coordinador:hover { background: rgba(128, 0, 0, 0.14); }

.btn--tint-asesor {
  background: var(--role-asesor-tint);
  border-color: var(--role-asesor-border);
  color: var(--role-asesor);
}
.btn--tint-asesor:hover { background: rgba(37, 99, 235, 0.14); }

/* Secundario */
.btn--secondary {
  background: var(--bg-raised);
  border-color: var(--bd-strong);
  color: var(--fg-3);
}
.btn--secondary:hover {
  background: var(--bg-overlay);
  color: var(--fg-1);
}

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--fg-4);
  padding-inline: var(--space-2);
}
.btn--ghost:hover { color: var(--fg-1); background: var(--bg-overlay); }

/* Peligro */
.btn--danger {
  background: var(--danger-bg);
  border-color: var(--danger-bd);
  color: var(--danger-fg);
}
.btn--danger:hover { background: rgba(220, 38, 38, 0.14); }

/* Tamaños */
.btn--sm {
  padding: 5px var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
.btn--sm svg { width: 14px; height: 14px; }

.btn--lg {
  padding: 13px var(--space-6);
  font-size: var(--fs-subtitle);
}
.btn--lg svg { width: 20px; height: 20px; }

.btn--full { width: 100%; }

/* ==========================================================
   4. BADGES Y CHIPS
   ========================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  line-height: 1.4;
  white-space: nowrap;
}

.badge--pendiente {
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-bd);
  color: var(--neutral-fg);
}

.badge--revision {
  background: var(--info-bg);
  border: 1px solid var(--info-bd);
  color: var(--info-fg);
}

.badge--aprobado {
  background: var(--success-bg);
  border: 1px solid var(--success-bd);
  color: var(--success-fg);
}

.badge--reprobado {
  background: var(--danger-bg);
  border: 1px solid var(--danger-bd);
  color: var(--danger-fg);
}

.badge--concluido {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.18);
  color: #7C3AED;
}

/* Dot indicador */
.badge__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.badge--revision .badge__dot {
  animation: pulse-soft 1.6s ease-in-out infinite;
}

/* ==========================================================
   5. INPUTS Y FORMULARIOS
   ========================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}

.form-label--required::after {
  content: ' *';
  color: var(--danger-fg);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--bd-default);
  border-radius: var(--radius-lg);
  padding: 10px var(--space-3);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  transition: var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--fg-5);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--bd-strong);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(128, 0, 0, 0.40);
  box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.08);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-select {
  cursor: pointer;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.form-hint {
  font-size: var(--fs-caption);
  color: var(--fg-5);
}

.form-error {
  font-size: var(--fs-caption);
  color: var(--danger-fg);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Zona de subida de archivo */
.upload-zone {
  border: 1.5px dashed var(--bd-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  background: var(--bg-base);
}

.upload-zone:hover {
  border-color: var(--uam-guinda);
  background: var(--role-coordinador-tint);
}

.upload-zone--active {
  border-color: var(--role-asesor);
  background: var(--role-asesor-tint);
}

.upload-zone__icon {
  width: 36px;
  height: 36px;
  color: var(--fg-5);
}

.upload-zone__label {
  font-size: var(--fs-body);
  color: var(--fg-3);
}

.upload-zone__label strong {
  color: var(--role-asesor);
}

.upload-zone__hint {
  font-size: var(--fs-caption);
  color: var(--fg-5);
}

/* ==========================================================
   6. TABLA
   ========================================================== */

.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--bd-default);
  border-radius: var(--radius-xl);
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.table thead {
  background: var(--bg-base);
  border-bottom: 1px solid var(--bd-default);
}

.table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-5);
  white-space: nowrap;
}

.table td {
  padding: var(--space-3) var(--space-4);
  color: var(--fg-2);
  border-bottom: 1px solid var(--bd-subtle);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover td {
  background: var(--bg-base);
}

.table__empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--fg-5);
}

/* ==========================================================
   7. ALERTAS
   ========================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

.alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert--success { background: var(--success-bg); border-color: var(--success-bd); color: var(--success-fg); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning-bd); color: var(--warning-fg); }
.alert--danger  { background: var(--danger-bg);  border-color: var(--danger-bd);  color: var(--danger-fg);  }
.alert--info    { background: var(--info-bg);    border-color: var(--info-bd);    color: var(--info-fg);    }

.alert__title { font-weight: var(--fw-semibold); margin-bottom: 2px; }
.alert__body  { font-size: var(--fs-caption); opacity: 0.85; }

/* ==========================================================
   8. TABS / NAVEGACIÓN INTERNA
   ========================================================== */

/* Tabs compactos */
.tabs {
  display: inline-flex;
  background: var(--bg-base);
  border: 1px solid var(--bd-default);
  border-radius: var(--radius-lg);
  padding: 3px;
  gap: 2px;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--fg-4);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.tab svg { width: 15px; height: 15px; flex-shrink: 0; }

.tab:hover { color: var(--fg-2); background: var(--bg-overlay); }

.tab.active {
  background: var(--uam-guinda);
  color: #FFFFFF;
  font-weight: var(--fw-semibold);
}

/* Tabs de página (underline) */
.page-tabs {
  display: flex;
  border-bottom: 1px solid var(--bd-default);
  gap: 0;
}

.page-tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--fg-4);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.page-tab:hover { color: var(--fg-2); }

.page-tab.active {
  color: var(--uam-guinda);
  border-bottom-color: var(--uam-guinda);
  font-weight: var(--fw-semibold);
}

/* ==========================================================
   9. ETIQUETAS TIPOGRÁFICAS
   ========================================================== */

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--uam-guinda);
}

.section-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
}

.section-desc {
  font-size: var(--fs-body);
  color: var(--fg-4);
  margin-top: var(--space-1);
}

/* ==========================================================
   10. ROL DOT / ÍCONO DE ROL
   ========================================================== */

.role-dot {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.role-dot svg { width: 16px; height: 16px; }

.role-dot--coordinador {
  background: var(--role-coordinador-tint);
  color: var(--uam-guinda);
  border: 1px solid var(--role-coordinador-border);
}

.role-dot--asesor {
  background: var(--role-asesor-tint);
  color: var(--role-asesor);
  border: 1px solid var(--role-asesor-border);
}

/* ==========================================================
   11. SPINNER / LOADING
   ========================================================== */

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--bd-default);
  border-top-color: var(--uam-guinda);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner--lg { width: 32px; height: 32px; border-width: 3px; }

.page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 200px;
  color: var(--fg-4);
  font-size: var(--fs-body);
}

/* ==========================================================
   12. UTILIDADES DE LAYOUT
   ========================================================== */

.stack   { display: flex; flex-direction: column; }
.stack-1 { gap: var(--space-1); }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-6 { gap: var(--space-6); }
.stack-8 { gap: var(--space-8); }

.row   { display: flex; align-items: center; }
.row-2 { gap: var(--space-2); }
.row-3 { gap: var(--space-3); }
.row-4 { gap: var(--space-4); }
.row-6 { gap: var(--space-6); }

.between { justify-content: space-between; }
.center  { align-items: center; justify-content: center; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}