/* src/ui/estilos/bloques.css
 *
 * Bloques del "lenguaje de producto" de app-referencia.html que la app aún no tenía:
 * contadores en cuadrícula, pantalla de aviso legal de página completa, botón de
 * inicio, botón "Aceptar y continuar", disparador del glosario, historial de
 * evaluaciones y la cuadrícula del nuevo Panel de cumplimiento. Los átomos que ya
 * existían con nombre propio (`.colapsable`, `.tabla-limpia`, `.result-banner`,
 * `.disclaimer`) se reutilizan tal cual — no se duplican aquí.
 */

/* ========== CONTADORES EN CUADRÍCULA ========== */
.counters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.counter-box {
  text-align: center;
  padding: var(--space-4);
  background: var(--color-panel-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.counter-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text-light);
}
.counter-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-primary);
}
.counter-value.critico { color: var(--color-critico); }
.counter-value.en_proceso { color: var(--color-en-proceso); }
.counter-value.conforme { color: var(--color-conforme); }

@media (min-width: 601px) and (max-width: 767px) {
  .counters-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .counters-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ========== BOTÓN DE INICIO (fuera de la tablist) ========== */
.btn-home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 1.25rem;
  background: var(--color-text);
  color: white;
  border: none;
  border-radius: 50px;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
  flex-shrink: 0;
}
.btn-home:hover { background: black; transform: translateY(-2px); }
.btn-home:active { transform: scale(0.97); }

.tab-nav-envoltorio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: white;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-sm);
}
.tab-nav-envoltorio .tab-nav {
  position: static;
  box-shadow: none;
  padding: 0;
  flex: 1;
  justify-content: flex-start;
}

/* ========== BOTÓN "ACEPTAR Y CONTINUAR" (gate de aviso legal) ========== */
.btn-accept-full {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent);
  color: var(--color-text);
  border: none;
  border-radius: 9999px;
  padding: 1rem;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-accept-full:hover { background: var(--color-accent-dark); color: white; }
.btn-accept-full:active { transform: scale(0.99); }

/* ========== PANTALLA DE AVISO LEGAL (gate de página completa) ========== */
.disclaimer-screen {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}
.disclaimer-screen-inner {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}
.disclaimer-screen-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--space-2);
}
.disclaimer-screen-subtitle {
  font-size: 0.9rem;
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: var(--space-6);
}
.disclaimer-screen-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-light);
  margin-bottom: var(--space-3);
}
.disclaimer-screen-box {
  background: var(--color-warning-bg);
  border: 2px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  color: var(--color-disclaimer-text);
  font-size: 0.9rem;
  line-height: 1.6;
}
.disclaimer-screen-box-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-disclaimer-title);
  margin-bottom: var(--space-2);
}
.disclaimer-screen-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ========== GLOSARIO ========== */
.glosario-trigger-envoltorio {
  max-width: 640px;
  margin: 0 auto var(--space-6);
  padding: 0 var(--space-4);
  text-align: center;
}
.glosario-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.75rem;
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  font-weight: 800;
  font-size: 0.95rem;
  border: 2px solid var(--color-primary);
  border-radius: 50px;
  cursor: pointer;
  font-family: var(--font-primary);
  transition: all 0.3s;
}
.glosario-trigger:hover { background: var(--color-primary); color: white; transform: translateY(-2px); }
.glosario-buscador { margin-bottom: var(--space-4); }
.glosario-grupo + .glosario-grupo { margin-top: var(--space-5); }
.glosario-grupo h4 { color: var(--color-primary); font-size: 0.95rem; margin-bottom: var(--space-3); }
.glosario-termino { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.glosario-termino:last-child { border-bottom: none; }
.glosario-termino-cabecera { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.glosario-termino-nombre { font-weight: 700; color: var(--color-text); }
.glosario-termino-sigla { font-size: 0.78rem; color: var(--color-text-light); }
.glosario-termino-def {
  font-size: 0.88rem;
  color: var(--color-text-light);
  margin-top: 0.25rem;
  line-height: 1.55;
  text-align: justify;
  hyphens: auto;
}
.glosario-termino-cita { font-style: italic; font-size: 0.78rem; color: var(--color-text-light); margin-top: 0.25rem; }
.glosario-sin-resultados { color: var(--color-text-light); font-style: italic; padding: var(--space-4) 0; }

/* ========== HISTORIAL DE EVALUACIONES ========== */
.historial-lista { display: flex; flex-direction: column; gap: var(--space-3); }
.historial-vacio { color: var(--color-text-light); text-align: center; padding: var(--space-5) 0; }
.historial-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-panel-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.historial-item-info { display: flex; flex-direction: column; gap: 0.15rem; }
.historial-item-etiqueta { font-weight: 700; font-size: 0.9rem; }
.historial-item-fecha { font-size: 0.78rem; color: var(--color-text-light); }
.historial-item-acciones { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ========== PANEL DE CUMPLIMIENTO ========== */
.panel-estado-global {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.panel-dimensiones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
}
.panel-prioridades { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.panel-prioridad-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: white;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.panel-prioridad-item:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.panel-prioridad-item.alta { border-left-color: var(--color-alto); }
.panel-prioridad-item.media { border-left-color: var(--color-medio); }
.panel-prioridad-item.baja { border-left-color: var(--color-bajo); }
.panel-prioridad-sistema { font-size: 0.72rem; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.3px; }
.panel-prioridad-texto { font-size: 0.9rem; font-weight: 600; margin-top: 0.15rem; }
.panel-prioridad-cita { font-size: 0.78rem; color: var(--color-primary-light); margin-top: 0.15rem; }

@media (max-width: 600px) {
  .panel-estado-global { flex-direction: column; text-align: center; }
  .panel-prioridad-item { flex-direction: column; }
}