/* ============================================================================
   theme.css — Sistema de diseño de terminatutesis.online
   ----------------------------------------------------------------------------
   Fuente única de verdad para colores y componentes compartidos entre páginas.
   La paleta canónica es la de ser-mentor.html (dark navy + teal).

   - Tokens: variables CSS en :root. Cualquier página o componente nuevo debe
     leer de acá, nunca hardcodear hex.
   - Los colores de Tailwind (brand-bg, brand-teal, ...) se definen en
     /js/tailwind.theme.js leyendo ESTOS mismos valores. Si cambiás un color,
     cambialo en ambos archivos (son la misma tabla).
   - Los overrides para la SPA compilada de index.html viven en
     /css/spa-dark.css (capa aparte: se borra cuando se rebuildee el React).
   ============================================================================ */

:root {
  /* --- Superficies --- */
  --tt-bg:      #0a1628;  /* fondo de página */
  --tt-card:    #0f1f3a;  /* tarjetas / paneles */
  --tt-card-2:  #1a2f4a;  /* inputs, superficies elevadas */
  --tt-border:  #2a4060;  /* bordes de inputs */
  --tt-line:    rgba(255, 255, 255, .10); /* separadores y bordes suaves */

  /* --- Marca --- */
  --tt-teal:    #18b3ab;  /* acento principal */
  --tt-teal-2:  #159a93;  /* acento hover/presionado */
  --tt-teal-tint: rgba(24, 179, 171, .08);  /* fondos teñidos de acento */
  --tt-teal-ring: rgba(24, 179, 171, .25);  /* anillo de foco */

  /* --- Texto --- */
  --tt-ink:     #ffffff;  /* títulos y texto fuerte */
  --tt-body:    #cbd5e1;  /* texto de lectura (slate-300) */
  --tt-muted:   #94a3b8;  /* texto secundario (slate-400) */
  --tt-faint:   #6b7d99;  /* placeholders */

  /* --- Estado --- */
  --tt-danger:  #ef4444;

  /* --- Tipografía --- */
  --tt-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Base --- */
body {
  font-family: var(--tt-font-sans);
  background-color: var(--tt-bg);
  color: var(--tt-ink);
}

h1, h2, h3 { text-wrap: balance; }

/* ============================================================================
   Header del sitio (navbar unificado)
   ----------------------------------------------------------------------------
   Réplica dark del navbar de la SPA de index.html (mismos links y CTA).
   El markup lo inyecta /js/header.js en el placeholder #tt-header de cada
   página estática; si cambiás un link, cambialo en ese archivo.
   ============================================================================ */

.tt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 22, 40, .95); /* --tt-bg al 95%, como el navbar de la SPA */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--tt-line);
}
.tt-header-nav {
  max-width: 80rem;
  margin-inline: auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tt-header-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tt-ink);
  text-decoration: none;
}
.tt-header-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .5rem;
  background: linear-gradient(to bottom right, var(--tt-teal), var(--tt-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
}
.tt-header-links {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) {
  .tt-header-links { display: flex; }
}
.tt-header-links a {
  color: var(--tt-body);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}
.tt-header-links a:hover { color: var(--tt-teal); }
.tt-header-links a.is-active { color: var(--tt-teal); font-weight: 600; }
.tt-header-links a.tt-header-cta {
  padding: .5rem 1.25rem;
  background: var(--tt-teal);
  color: #fff;
  border-radius: .5rem;
  transition: background-color .15s;
}
.tt-header-links a.tt-header-cta:hover { background: var(--tt-teal-2); color: #fff; }

/* ============================================================================
   Formularios
   ============================================================================ */

.form-input, .form-select, .form-textarea {
  background: var(--tt-card-2);
  border: 1px solid var(--tt-border);
  border-radius: .5rem;
  padding: .65rem .85rem;
  color: var(--tt-ink);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--tt-teal);
  box-shadow: 0 0 0 3px var(--tt-teal-ring);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--tt-faint); }

.label {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--tt-body);
  margin-bottom: .4rem;
}
.req::after { content: " *"; color: var(--tt-danger); }

/* Subida de archivos (ser-mentor) */
.file-upload-label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem;
  background: var(--tt-card-2);
  border: 1.5px dashed var(--tt-border);
  border-radius: .5rem;
  padding: 1.2rem;
  cursor: pointer;
  transition: border-color .15s;
  color: var(--tt-faint);
  font-size: .85rem;
  text-align: center;
}
.file-upload-label:hover { border-color: var(--tt-teal); color: var(--tt-teal); }
.file-upload-label.has-file {
  border-color: var(--tt-teal);
  color: var(--tt-teal);
  background: var(--tt-teal-tint);
}
input[type="file"] { display: none; }

/* ============================================================================
   Piezas de UI
   ============================================================================ */

/* Etiquetas pequeñas (directorio de mentores) */
.chip {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 500;
}

/* Placeholder de carga */
.skeleton { animation: tt-pulse 1.5s ease-in-out infinite; }
@keyframes tt-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: .6; }
}

/* ============================================================================
   Texto legal (privacidad, términos)
   ============================================================================ */

.prose-legal h2 { color: var(--tt-ink); font-weight: 600; font-size: 1.25rem; margin-top: 2.25rem; margin-bottom: .75rem; }
.prose-legal h3 { color: var(--tt-ink); font-weight: 600; font-size: 1.05rem; margin-top: 1.5rem; margin-bottom: .5rem; }
.prose-legal p  { color: var(--tt-body); line-height: 1.65; margin-bottom: .85rem; text-wrap: pretty; }
.prose-legal ul { color: var(--tt-body); line-height: 1.65; margin: .5rem 0 1rem 1.25rem; }
.prose-legal ul li { list-style: disc; margin-bottom: .35rem; }
.prose-legal ol { color: var(--tt-body); line-height: 1.65; margin: .5rem 0 1rem 1.5rem; }
.prose-legal ol li { list-style: decimal; margin-bottom: .35rem; }
.prose-legal strong { color: var(--tt-ink); }
.prose-legal a { color: var(--tt-teal); }
.prose-legal a:hover { text-decoration: underline; }

/* Tablas de datos (privacidad) */
.data-table { width: 100%; margin: .5rem 0 1.25rem; border-collapse: collapse; }
.data-table th, .data-table td {
  border: 1px solid var(--tt-line);
  padding: .55rem .7rem;
  text-align: left;
  font-size: .875rem;
  vertical-align: top;
}
.data-table th { background: var(--tt-teal-tint); color: var(--tt-ink); font-weight: 600; }
.data-table td { color: var(--tt-body); }