:root {
    --teal: #0fc1a7;
    --teal-dark: #0a8f7b;
    --teal-soft: #e0f7f4;
    --navy: #32373c;
    --navy-soft: #515151;
    --fondo: #f4f7f7;
    --superficie: #ffffff;
    --borde: #dbe6e4;
    --texto: #22282b;
    --texto-tenue: #6b7573;
    --verde: #2e9e6b;
    --ambar: #b8790a;
    --rojo: #c0392b;
    --sombra: 0 1px 2px rgba(20,40,38,0.06), 0 8px 24px -14px rgba(20,40,38,0.20);
    --radio: 12px;
  }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
  }

  a { color: var(--teal-dark); }

  .app-shell { display: flex; min-height: 100vh; }

  .sidebar {
    width: 232px; flex: none;
    background: var(--navy);
    color: #eef3f2;
    display: flex; flex-direction: column;
    padding: 20px 16px;
  }
  .sidebar .brand { padding: 4px 6px 20px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 16px; }
  .sidebar .brand img { max-width: 100%; height: auto; filter: brightness(0) invert(1); opacity: 0.95; }

  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 9px;
    color: #cfe0dd; text-decoration: none;
    font-size: 0.92rem; font-weight: 500;
    cursor: pointer; margin-bottom: 4px;
    border: none; background: none; width: 100%; text-align: left;
  }
  .nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
  .nav-item.is-active { background: var(--teal); color: #fff; }

  .sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; color: #9fb0ad; }
  .sidebar-footer .rol-badge { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 0.72rem; }

  .main { flex: 1; min-width: 0; padding: 26px 32px 60px; max-width: 1180px; }

  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px; gap: 12px; flex-wrap: wrap;
  }
  .topbar h1 { font-size: 1.32rem; margin: 0; color: var(--navy); }
  .topbar p.sub { margin: 2px 0 0; color: var(--texto-tenue); font-size: 0.88rem; }

  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 9px; border: 1px solid transparent;
    font-size: 0.88rem; font-weight: 600; cursor: pointer;
    font-family: inherit;
  }
  .btn-primary { background: var(--teal); color: #fff; }
  .btn-primary:hover { background: var(--teal-dark); }
  .btn-secondary { background: var(--superficie); color: var(--navy); border-color: var(--borde); }
  .btn-secondary:hover { background: #eef3f2; }
  .btn-danger { background: #fdecea; color: var(--rojo); border-color: #f3cfca; }
  .btn-sm { padding: 6px 11px; font-size: 0.8rem; }
  .btn:disabled { opacity: 0.55; cursor: not-allowed; }

  .card {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px 20px;
    margin-bottom: 18px;
  }

  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
  .stat-card {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 16px 18px; box-shadow: var(--sombra);
  }
  .stat-card .label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-tenue); font-weight: 600; }
  .stat-card .valor { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-top: 4px; }
  .stat-card .nota { font-size: 0.78rem; color: var(--texto-tenue); margin-top: 4px; }
  .stat-card.acento-teal { border-left: 4px solid var(--teal); }
  .stat-card.acento-ambar { border-left: 4px solid var(--ambar); }
  .stat-card.acento-rojo { border-left: 4px solid var(--rojo); }
  .stat-card.acento-verde { border-left: 4px solid var(--verde); }

  .tabs-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--borde); padding-bottom: 0; }
  .tab-pill {
    padding: 9px 14px; border-radius: 8px 8px 0 0; border: none; background: none;
    font-size: 0.86rem; font-weight: 600; color: var(--texto-tenue); cursor: pointer;
    border-bottom: 2px solid transparent; font-family: inherit;
  }
  .tab-pill.is-active { color: var(--teal-dark); border-bottom: 2px solid var(--teal); }

  table.tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
  table.tabla th {
    text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--borde);
    color: var(--texto-tenue); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em;
    position: sticky; top: 0; background: var(--superficie);
  }
  table.tabla td { padding: 9px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
  table.tabla tr:hover td { background: #f7fbfa; }
  .tabla-wrap { overflow-x: auto; }

  .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
  .badge-verde { background: #e3f5ec; color: var(--verde); }
  .badge-ambar { background: #faf0dc; color: var(--ambar); }
  .badge-rojo { background: #fbe3e0; color: var(--rojo); }
  .badge-gris { background: #eef1f1; color: var(--texto-tenue); }
  .badge-teal { background: var(--teal-soft); color: var(--teal-dark); }

  .help { color: var(--texto-tenue); font-size: 0.82rem; margin: 0; }
  .hidden { display: none !important; }

  .input, select.input, textarea.input {
    width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--borde);
    font-size: 0.88rem; font-family: inherit; background: var(--superficie); color: var(--texto);
  }
  .input:focus, select.input:focus, textarea.input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
  label.label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--navy-soft); margin-bottom: 4px; }
  .campo { margin-bottom: 14px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

  .filtros-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-end; }
  .filtros-row .campo { margin-bottom: 0; min-width: 160px; flex: 1; }

  /* ---- modal ---- */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(30,40,38,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; padding: 20px;
  }
  .modal-box {
    background: var(--superficie); border-radius: var(--radio); width: 100%; max-width: 560px;
    max-height: 90vh; overflow-y: auto; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  }
  .modal-box h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--navy); }
  .modal-box .modal-sub { margin: 0 0 18px; color: var(--texto-tenue); font-size: 0.84rem; }
  .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

  /* ---- login ---- */
  .login-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--navy) 0%, #1f2426 100%);
    padding: 20px;
  }
  .login-card {
    background: var(--superficie); border-radius: 16px; padding: 34px 32px 28px;
    width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    text-align: center;
  }
  .login-card img.logo { max-width: 220px; margin: 0 auto 22px; display: block; }
  .login-card h1 { font-size: 1.05rem; color: var(--navy); margin: 0 0 20px; font-weight: 600; }
  .login-card .campo { text-align: left; }
  .login-error { color: var(--rojo); font-size: 0.84rem; margin: 10px 0 0; min-height: 1.2em; }

  .empty-state { padding: 30px 10px; text-align: center; color: var(--texto-tenue); font-size: 0.9rem; }

  /* ---- responsive: celular / tablet ----
     IMPORTANTE: este bloque va DESPUÉS de las reglas normales de arriba a
     propósito -- un media query que aparece ANTES en el archivo pierde
     contra una regla normal de igual especificidad más abajo, así que el
     responsive no tendría ningún efecto si quedara al principio. */
  @media (max-width: 860px) {
    .app-shell { flex-direction: column; min-height: 0; }

    .sidebar {
      width: 100%; flex-direction: row; align-items: center;
      gap: 4px; padding: 10px 12px; overflow-x: auto;
    }
    .sidebar .brand { padding: 0 10px 0 0; margin: 0 8px 0 0; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.12); flex: none; }
    .sidebar .brand img { max-height: 26px; width: auto; }
    .nav-item { white-space: nowrap; width: auto; margin-bottom: 0; padding: 8px 10px; font-size: 0.82rem; }

    .sidebar-footer {
      margin: 0 0 0 auto; padding: 0 0 0 10px; border-top: none; border-left: 1px solid rgba(255,255,255,0.12);
      flex: none; display: flex; align-items: center;
    }
    .sidebar-footer #sbNombre, .sidebar-footer .rol-badge { display: none; }
    .sidebar-footer div { margin-top: 0 !important; }

    .main { padding: 16px 14px 40px; }
    .topbar { flex-direction: column; align-items: flex-start; }
    .topbar .btn { width: 100%; justify-content: center; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card .valor { font-size: 1.2rem; }

    .filtros-row { flex-direction: column; align-items: stretch; }
    .filtros-row .campo { min-width: 0; }

    table.tabla { font-size: 0.8rem; }
    table.tabla th, table.tabla td { padding: 7px 8px; }

    .modal-box { padding: 18px 16px; max-width: 100%; }
  }

  @media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    .login-card { padding: 26px 20px 22px; }
    .modal-overlay { padding: 10px; }
    .grid-2 { gap: 10px; }
  }

  /* Un usuario tocando con el dedo necesita blancos de toque más grandes
     que un mouse -- los botones y filas de nav no deberían quedar por
     debajo de ~40px de alto en pantallas táctiles. */
  @media (pointer: coarse) {
    .btn, .nav-item, select.input, .input { min-height: 40px; }
    table.tabla td .btn-sm { min-height: 34px; }
  }