/* AQ-Flow — estilo adaptado del prototipo de diseño (prototipo/AQFLOW-prototipo-local).
   Solo se han portado los componentes usados por vistas con datos reales;
   las secciones puramente decorativas del prototipo (check score, tarjetas
   de disciplina, biblioteca/entregas/equipo) no se han incluido. */

:root {
  --ink:#17211f; --muted:#68736f; --line:#e4e9e6; --paper:#f5f7f5; --white:#fff;
  --mint:#bcead5; --mint-deep:#2c775f; --acid:#d7f25a; --danger:#c84a42; --amber:#d49a3a;
}
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}
a { color: inherit; }

/* Layout con sidebar fija */
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 224px; background: #17211f; color: #eef3ef;
  padding: 25px 16px 18px; display: flex; flex-direction: column; z-index: 5;
}
.brand { display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:.08em; font-size:15px; padding:0 8px 28px; text-decoration:none; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; background:var(--acid); color:#17211f; border-radius:4px; font-size:12px; font-weight:700; }
.brand small { display:block; color:#83918c; font-size:9px; letter-spacing:.16em; margin-top:3px; }
.sidebar nav { display:flex; flex-direction:column; gap:4px; }
.sidebar nav a, .sidebar .nav-btn {
  border:0; background:transparent; color:#aeb9b5; text-align:left; border-radius:5px;
  padding:10px 11px; display:flex; gap:12px; align-items:center; font:inherit; text-decoration:none;
  cursor:pointer; transition:.15s; width:100%; min-width:0;
}
.sidebar nav a span.ic, .sidebar .nav-btn span.ic { width:18px; flex:0 0 18px; text-align:center; font-size:16px; }
.sidebar nav a span.label {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar nav a:hover, .sidebar nav a.active { color:#fff; background:#2b3834; }
.sidebar nav a.active { box-shadow: inset 3px 0 var(--acid); }
.sidebar .nav-break { margin-top:22px; border-top:1px solid #2e3b37; padding-top:18px; }
.sidebar-section-label {
  color:#80908a; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 8px 11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar-foot { margin-top:auto; border-top:1px solid #2e3b37; padding:18px 5px 0; display:flex; align-items:center; gap:9px; }
.sidebar-foot .who { display:flex; flex-direction:column; font-size:11px; min-width:0; overflow:hidden; }
.sidebar-foot .who span { color:#80908a; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { width:30px; height:30px; flex:0 0 30px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:600; background:#3a4944; color:#eef3ef; }
.sidebar form { margin:0; }
.sidebar .logout-btn { border:0; background:transparent; color:#80908a; cursor:pointer; font:inherit; font-size:11px; padding:0; }
.sidebar .logout-btn:hover { color:#fff; }

.app-main { margin-left:224px; width:calc(100% - 224px); min-width:0; }
.topbar {
  height:56px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center;
  padding:0 30px; gap:12px; position:sticky; top:0; z-index:4;
}
.breadcrumb { display:flex; gap:10px; font-size:12px; min-width:0; overflow:hidden; }
.breadcrumb span, .breadcrumb i { color:#8a9591; font-style:normal; flex:0 0 auto; }
.breadcrumb strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

main { padding:30px 34px 44px; max-width:1500px; margin:0 auto; }

/* Cabecera de vista */
.project-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; }
.project-head > div:first-child { min-width:0; flex:1 1 260px; }
.eyebrow { font-size:9px; letter-spacing:.15em; font-weight:600; color:#6c7773; text-transform:uppercase; }
.project-head h1 { font-size:26px; line-height:1.15; margin:8px 0 5px; letter-spacing:-.03em; font-weight:500; overflow-wrap:break-word; word-break:break-word; }
.project-head p { color:var(--muted); margin:0; overflow-wrap:break-word; }
.head-actions { display:flex; gap:9px; flex-wrap:wrap; }

/* Visualizador de cabecera (páginas, comentarios, desgloses manuales) */
.stats-bar { display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start; }
.stats-bar .stat { display:flex; flex-direction:column; min-width:64px; }
.stats-bar .stat strong { font-size:22px; font-weight:500; }
.stats-bar .stat span { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.stat-breakdown { display:flex; flex-direction:column; gap:5px; min-width:150px; }
.stat-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.pill-row { display:flex; gap:6px; flex-wrap:wrap; }
.pill { font-size:10px; background:#eef2ef; border-radius:10px; padding:3px 8px; color:#455049; white-space:nowrap; }

.btn { height:36px; border-radius:4px; border:1px solid transparent; padding:0 15px; font:inherit; font-weight:500; cursor:pointer; }
.btn.secondary { background:#fff; border-color:#dce2df; color:var(--ink); }
.btn.primary { background:#23302c; color:#fff; }
.btn.dark { background:#17211f; color:#fff; }
.btn:hover { opacity:.9; }
a.btn { display:inline-flex; align-items:center; text-decoration:none; }

.section-title { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
.section-title h2 { font-size:17px; margin:0 0 4px; font-weight:500; letter-spacing:-.02em; }
.section-title p { font-size:11px; color:var(--muted); margin:0; }
.section-title.compact { align-items:center; }

.tabs { background:#f1f4f2; border-radius:4px; padding:3px; display:inline-flex; }
.tabs a { border:0; background:transparent; font:inherit; font-size:11px; padding:6px 10px; border-radius:3px; color:#78837f; cursor:pointer; text-decoration:none; }
.tabs a.active { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(24,34,32,.08); }

.card, .section {
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:18px; margin-bottom:1.5rem;
}
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:14px; margin-bottom:16px; align-items:start; }
@media (max-width: 1100px) { .content-grid { grid-template-columns:1fr; } .activity-panel { display:none; } }

/* Tabla de slides */
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; margin-top:.5rem; }
th, td { text-align:left; padding:.55rem .75rem; border-bottom:1px solid #edf0ee; font-size:12.5px; vertical-align:top; }
th { font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:#7b8581; font-weight:600; }
.col-body { min-width:320px; max-width:520px; white-space:pre-wrap; }
td.recently-changed { color:var(--danger); font-weight:600; }
.change-flag { color:var(--danger); font-size:9px; vertical-align:middle; margin-right:4px; }

.status { font-size:10px; padding:4px 9px; border-radius:10px; text-align:center; display:inline-block; white-space:nowrap; }
.status.ok { background:#e6f2ec; color:#2b7259; }
.status.pending { background:#fff0d7; color:#966220; }

.panel-footer { border-top:1px solid #edf0ee; padding-top:13px; margin-top:7px; display:flex; justify-content:space-between; color:#7c8782; font-size:11px; }
.panel-footer b { color:var(--ink); }

/* Actividad */
.activity-panel h2 { font-size:15px; }
.activity-list > div { display:flex; gap:10px; padding:12px 0; border-top:1px solid #edf0ee; }
.activity-list > div:first-child { border-top:0; padding-top:0; }
.activity-list p { margin:0; font-size:11px; line-height:1.45; color:#69746f; }
.activity-list strong { color:var(--ink); font-weight:500; }
.activity-list small { display:block; margin-top:3px; color:#9aa39f; }

/* Historial de versiones */
.version-list > div { display:grid; grid-template-columns:14px 1fr 130px; align-items:center; border-top:1px solid #edf0ee; padding:12px 4px; gap:8px; }
.version-list > div:first-child { border-top:0; }
.version-dot { width:8px; height:8px; background:#4a806f; border-radius:50%; }
.version-list strong { font-size:12px; }
.version-list small { color:#89938f; }

.empty-state { padding:20px 4px; color:#74807b; font-size:12px; }

/* Formularios */
form.inline { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.75rem; }
label { font-size:.75rem; opacity:.75; }
input, select, textarea, button {
  padding:.45rem .6rem; font:inherit; border-radius:4px; border:1px solid var(--line);
}
textarea { font-family:inherit; }
button { cursor:pointer; }
.row { display:flex; gap:1.25rem; align-items:flex-start; flex-wrap:wrap; }
.muted { opacity:.65; font-size:.85rem; color:var(--muted); }
.error { color: var(--danger); font-size:.9rem; }
details > summary { cursor:pointer; font-weight:600; margin-bottom:.5rem; font-size:12.5px; }

/* Login */
.login-shell {
  min-height:100vh; display:flex; align-items:center; justify-content:center; background:#17211f;
}
.login-card {
  background:#fff; border-radius:10px; padding:44px 40px; max-width:380px; width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.35); text-align:center;
}
.login-card .brand-mark { margin:0 auto 18px; }
.login-card h1 { font-size:20px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px; }
.login-card p { color:var(--muted); font-size:13px; margin:0 0 26px; }
.login-card .btn.primary { width:100%; }

/* Navegador de Drive */
.drive-list { list-style:none; padding:0; margin:0; }
.drive-list li { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.6rem 0; border-bottom:1px solid #edf0ee; flex-wrap:wrap; }
.drive-list li:last-child { border-bottom:0; }
.drive-list a, .drive-list span { text-decoration:none; overflow-wrap:break-word; word-break:break-word; min-width:0; }

@media (max-width: 760px) {
  .sidebar { width:62px; padding:20px 9px; }
  .brand > span:last-child,
  .sidebar nav a span.label,
  .sidebar .nav-btn span.label,
  .sidebar-section-label { display:none !important; }
  .brand { padding-left:5px; }
  .sidebar nav a { justify-content:center; padding:11px; }
  .app-main { margin-left:62px; width:calc(100% - 62px); }
  .topbar { padding:0 16px; }
  main { padding:20px 16px; }
  .sidebar-foot .who { display:none; }
}

/* Red de seguridad extra: nunca dejar que ningún texto suelto del sidebar
   se salga de su ancho, pase lo que pase con las reglas de arriba. */
.sidebar, .sidebar * { max-width: 100%; }
.sidebar nav a, .sidebar .nav-btn { overflow: hidden; }