/* ============================================================
   CiberGantt — Reset, tipografía base y utilidades
   ============================================================ */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  background: var(--cg-bg);
  color: var(--cg-text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--cg-blue); text-decoration: none; }
a:hover { color: var(--cg-orange); }

::selection { background: var(--cg-orange); color: #fff; }

/* Barras de desplazamiento */
::-webkit-scrollbar { width: var(--cg-scrollbar); height: var(--cg-scrollbar); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--cg-bord2);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--cg-t3); background-clip: content-box; }

/* Contenedor que desplaza sin mostrar barra (rueda y teclado siguen activos) */
.cg-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.cg-noscroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

:focus-visible { outline: 2px solid var(--cg-orange); outline-offset: 2px; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--cg-blue); width: 14px; height: 14px; cursor: pointer; }
input[type="range"] { accent-color: var(--cg-orange); }

/* ---- Utilidades ---- */
/* Iconos duotono sobre un relleno de color de marca.
   Los tonos globales (navy + naranja) desaparecen sobre estos fondos, así
   que el trazo principal sigue al color del texto y el segundo tono pasa a
   ser un velo del mismo color. */
.cg-btn--primary i,
.cg-selbar__go i,
.cg-composer button i,
.cg-toast i {
  --fa-primary-color: currentColor;
  --fa-primary-opacity: 1;
  --fa-secondary-color: currentColor;
  --fa-secondary-opacity: .45;
}

.cg-spacer { flex: 1; }
.cg-nowrap { white-space: nowrap; }
.cg-col { display: flex; flex-direction: column; }

/* Avatar circular con iniciales */
.cg-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 9.5px;
}
.cg-avatar--sm { width: 20px; height: 20px; font-size: 8.5px; }
.cg-avatar--md { width: 26px; height: 26px; font-size: 10px; }
.cg-avatar--lg { width: 34px; height: 34px; font-size: 12px; }
.cg-avatar-stack .cg-avatar { margin-left: -6px; border: 2px solid var(--cg-surface); }
.cg-avatar-stack { display: flex; }

/* Barra de progreso */
.cg-meter {
  height: 5px;
  border-radius: 3px;
  background: var(--cg-surface3);
  overflow: hidden;
  flex: none;
}
.cg-meter > i { display: block; height: 100%; }
.cg-meter--wide { width: 100%; height: 8px; border-radius: 4px; }

/* Etiqueta de estado */
.cg-pill {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cg-pill--done { background: var(--cg-ok-s); color: var(--cg-ok); }
.cg-pill--overdue { background: var(--cg-warn-s); color: var(--cg-warn); }
.cg-pill--doing { background: var(--cg-blue-s); color: var(--cg-blue); }
.cg-pill--todo { background: var(--cg-surface3); color: var(--cg-t2); }

/* Tablas de las vistas secundarias */
.cg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cg-table th {
  text-align: left;
  padding: 10px 14px;
  color: var(--cg-t2);
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 700;
}
.cg-table thead tr { background: var(--cg-surface2); }
.cg-table--sticky thead tr { position: sticky; top: 0; z-index: 2; }
.cg-table--ruled thead th { border-bottom: 2px solid var(--cg-border); }
.cg-table td { padding: 10px 14px; border-bottom: 1px solid var(--cg-border); }
.cg-table th.is-sortable { cursor: pointer; }
.cg-table th.is-sortable:hover { color: var(--cg-blue); }
.cg-table tbody tr.is-clickable { cursor: pointer; }
.cg-table tbody tr.is-clickable:hover { background: var(--cg-surface2); }

/* Tarjeta genérica */
.cg-card {
  background: var(--cg-surface);
  border: 1px solid var(--cg-border);
  border-radius: 12px;
  padding: 16px;
}

.cg-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--cg-t3);
  font-size: 13px;
  text-wrap: pretty;
}

/* Al imprimir sólo queda el contenido: el menú ofrece
   "Imprimir / Exportar PDF", así que la navegación se retira. */
@media print {
  .cg-noprint { display: none !important; }
  body { overflow: visible; }
  .cg-app { position: static; }
  .cg-view { display: none; }
  .cg-view.is-active { display: block; height: auto; overflow: visible; }
}

@keyframes cg-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}