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

html{
  min-width:320px;
}

/* El atributo hidden debe ganar a cualquier clase con display propio
   (.btn usa inline-flex): sin esto, «Editar tarea» seguía visible en una
   tarea COMPLETADA (RF65) y los botones de exportar antes de generar el
   reporte (RF34, RF35). */
[hidden]{
  display:none !important;
}

body{
  background:var(--color-background);
  color:var(--color-text-primary);
  font-family:var(--font-family);
  font-size:var(--font-md);
  line-height:1.5;
}

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
}

button{
  cursor:pointer;
  font-family:inherit;
}

input,
select,
textarea{
  font-family:inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:2px;
}

/* Quien pide menos movimiento no recibe transiciones ni desplazamientos animados. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

h1,
.page-title{
  color:var(--color-text-primary);
  font-size:28px;
  line-height:1.2;
  font-weight:700;
}

h2,
.section-title{
  color:var(--color-text-primary);
  font-size:20px;
  line-height:1.3;
  font-weight:700;
}

h3,
.card-title{
  color:var(--color-text-primary);
  font-size:16px;
  line-height:1.35;
  font-weight:700;
}

.subtitle,
.page-subtitle,
.text-secondary{
  color:var(--color-text-secondary);
  font-size:14px;
}

.text-muted,
.help-text{
  color:var(--color-text-muted);
  font-size:13px;
}

.text-loading,
.empty-state{
  color:var(--color-text-secondary);
  padding:var(--spacing-5);
  text-align:center;
}

.mensaje{
  min-height:20px;
  margin-top:var(--spacing-3);
  font-size:14px;
  font-weight:600;
}

.mensaje.success{
  color:var(--color-success-strong);
}

.mensaje.error{
  color:var(--color-danger-strong);
}

.mensaje.warning{
  color:var(--color-warning-strong);
}

.mensaje.info{
  color:var(--color-info-strong);
}

.container{
  width:95%;
  max-width:1400px;
  margin:auto;
}