/* ============================================================
   APP.CSS — Sistema de Tesis · Estilos principales
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primario:    #1a3c6e;
  --primario-h:  #142f58;
  --acento:      #e8a020;
  --fondo:       #f0f4f8;
  --blanco:      #ffffff;
  --texto:       #1e293b;
  --texto-m:     #64748b;
  --borde:       #e2e8f0;
  --error:       #dc2626;
  --exito:       #16a34a;
  --radio:       10px;
  --sombra:      0 2px 12px rgba(0,0,0,.08);
}

body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--fondo); color: var(--texto); font-size: 15px; line-height: 1.6; }

/* ── PANTALLA CENTRADA (login) ─────────────────────────────── */
.pantalla-centrada { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }

.login-card { background:var(--blanco); border-radius:16px; box-shadow:var(--sombra); padding:2.5rem 2rem; width:100%; max-width:420px; }
.login-logo { text-align:center; margin-bottom:2rem; }
.login-logo h1 { font-size:1.5rem; color:var(--primario); }
.login-logo p  { color:var(--texto-m); font-size:.9rem; }

/* ── FORMULARIOS ───────────────────────────────────────────── */
.campo { margin-bottom:1.1rem; position:relative; }
.campo label { display:block; font-size:.85rem; font-weight:600; color:var(--texto-m); margin-bottom:.4rem; }
.campo input, .campo select, .campo textarea {
  width:100%; padding:.65rem .9rem; border:1.5px solid var(--borde);
  border-radius:var(--radio); font-size:.95rem; background:var(--blanco);
  transition:border-color .2s; outline:none;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color:var(--primario); }
.toggle-pass { position:absolute; right:.8rem; bottom:.65rem; cursor:pointer; font-size:1rem; color:var(--texto-m); }

/* ── BOTONES ───────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--primario); color:#fff; border:none; border-radius:var(--radio);
  padding:.65rem 1.4rem; font-size:.95rem; font-weight:600; cursor:pointer;
  text-decoration:none; transition:background .2s, transform .1s;
}
.btn-primary:hover  { background:var(--primario-h); }
.btn-primary:active { transform:scale(.98); }
.btn-primary[type=submit] { width:100%; margin-top:.5rem; }

.btn-secundario {
  display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; color:var(--primario); border:1.5px solid var(--primario);
  border-radius:var(--radio); padding:.6rem 1.2rem; font-size:.9rem; font-weight:600;
  cursor:pointer; text-decoration:none; transition:background .2s;
}
.btn-secundario:hover { background:#f0f4f8; }
.btn-sm { padding:.4rem .9rem; font-size:.85rem; }
.btn-salir { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:8px; padding:.35rem .9rem; cursor:pointer; font-size:.85rem; }
.btn-salir:hover { background:rgba(255,255,255,.1); }

.link-recuperar { display:block; text-align:center; margin-top:1rem; font-size:.85rem; color:var(--texto-m); }

/* ── ALERTAS ───────────────────────────────────────────────── */
.alerta-error { background:#fef2f2; border:1px solid #fecaca; color:var(--error); border-radius:8px; padding:.6rem .9rem; font-size:.88rem; margin-top:.5rem; }

/* ── NAVBAR ────────────────────────────────────────────────── */
.navbar { background:var(--primario); color:#fff; padding:.8rem 2rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.nav-marca { font-size:1.15rem; font-weight:700; }
.nav-usuario { display:flex; align-items:center; gap:.8rem; font-size:.9rem; }

/* ── BADGES ────────────────────────────────────────────────── */
.badge-rol { padding:.2rem .7rem; border-radius:20px; font-size:.75rem; font-weight:700; background:rgba(255,255,255,.2); }
.rol-admin     { background:#7c3aed22; color:#7c3aed; }
.rol-asesor    { background:#0369a122; color:#0369a1; }
.rol-revisor   { background:#92400e22; color:#92400e; }
.rol-estudiante{ background:#16a34a22; color:#16a34a; }

.badge-estado  { padding:.2rem .7rem; border-radius:20px; font-size:.75rem; font-weight:700; }
.estado-borrador    .badge-estado { background:#f1f5f9; color:#64748b; }
.estado-en_revision .badge-estado { background:#dbeafe; color:#1d4ed8; }
.estado-observado   .badge-estado { background:#fef9c3; color:#a16207; }
.estado-aprobado    .badge-estado { background:#dcfce7; color:#15803d; }
.estado-sustentado  .badge-estado { background:#f3e8ff; color:#7e22ce; }

/* ── CONTENIDO ─────────────────────────────────────────────── */
.contenido { max-width:1100px; margin:0 auto; padding:2rem 1.5rem; }
.bienvenida { margin-bottom:2rem; }
.bienvenida h2 { font-size:1.5rem; color:var(--primario); }
.bienvenida p  { color:var(--texto-m); }

/* ── SECCIÓN HEADER ────────────────────────────────────────── */
.seccion-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.seccion-header h3 { font-size:1.1rem; font-weight:700; color:var(--texto); }

/* ── GRID DE TESIS ─────────────────────────────────────────── */
.grid-tesis { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.2rem; }

.tarjeta-tesis { background:var(--blanco); border-radius:14px; border:1.5px solid var(--borde); padding:1.3rem; box-shadow:var(--sombra); transition:box-shadow .2s, transform .2s; }
.tarjeta-tesis:hover { box-shadow:0 6px 20px rgba(0,0,0,.12); transform:translateY(-2px); }

.tesis-header  { display:flex; gap:.6rem; align-items:center; margin-bottom:.8rem; }
.tesis-titulo  { font-size:1rem; font-weight:700; color:var(--primario); margin-bottom:.4rem; line-height:1.4; }
.tesis-programa{ font-size:.83rem; color:var(--texto-m); margin-bottom:.3rem; }
.tesis-asesor  { font-size:.82rem; color:var(--texto-m); font-style:italic; }
.tesis-nivel   { font-size:.75rem; background:#f0f4f8; color:var(--texto-m); border-radius:20px; padding:.15rem .6rem; }

/* ── BARRA DE AVANCE ───────────────────────────────────────── */
.barra-avance  { margin:.9rem 0 .8rem; }
.barra-avance span { font-size:.78rem; color:var(--texto-m); display:block; margin-bottom:.3rem; }
.barra-relleno { height:6px; background:var(--primario); border-radius:3px; transition:width .4s; }
.barra-avance  { background:#e2e8f0; border-radius:3px; height:6px; }
.barra-relleno { height:6px; background:linear-gradient(90deg, var(--primario), var(--acento)); border-radius:3px; }

.tesis-acciones { display:flex; gap:.6rem; margin-top:.8rem; }

/* ── GRID ADMIN ────────────────────────────────────────────── */
.grid-accesos { display:flex; gap:1rem; flex-wrap:wrap; }
.tarjeta-acceso { background:var(--blanco); border:1.5px solid var(--borde); border-radius:12px; padding:1rem 1.5rem; text-decoration:none; color:var(--primario); font-weight:600; transition:background .2s; }
.tarjeta-acceso:hover { background:#f0f4f8; }

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:200; padding:1rem; }
.modal-caja { background:var(--blanco); border-radius:16px; padding:2rem; width:100%; max-width:480px; box-shadow:0 8px 40px rgba(0,0,0,.2); }
.modal-caja h3 { margin-bottom:1.4rem; color:var(--primario); }
.modal-botones { display:flex; gap:.8rem; justify-content:flex-end; margin-top:1.2rem; }

/* ── ESTADOS VACÍO / CARGANDO ──────────────────────────────── */
.vacio, .cargando { color:var(--texto-m); font-size:.92rem; padding:2rem; text-align:center; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .navbar { padding:.7rem 1rem; }
  .contenido { padding:1.2rem 1rem; }
  .grid-tesis { grid-template-columns:1fr; }
  .modal-caja { padding:1.4rem; }
}

/* Link al perfil en navbar */
.nav-perfil-link {
  color: #fff; text-decoration: none; cursor: pointer;
  padding: .2rem .5rem; border-radius: 6px;
  transition: background .15s;
}
.nav-perfil-link:hover { background: rgba(255,255,255,.15); }