/* Estilos propios del módulo Tableros (se cargan después de estilo.css). */

.etiqueta.info { background: #e5effb; color: #1a4e8a; }
.etiqueta.vencida { background: #fdecea; color: var(--rojo); font-weight: 600; }
.etiqueta.atiempo { background: #e6f4ec; color: var(--verde); }

/* Barra de filtros / segmentos */
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.6rem 0 1rem; }
.segmentos { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.segmentos a { padding: 0.35rem 0.9rem; border-radius: 999px; text-decoration: none; font-size: 0.85rem;
               color: var(--azul); background: var(--azul-claro); font-weight: 600; }
.segmentos a.activo { background: var(--azul); color: #fff; }

/* Tabla de tareas y scorecard */
.tabla-tareas td .nombre { font-weight: 600; color: var(--texto); }
.tabla-tareas td .descripcion { color: var(--gris); font-size: 0.85rem; }
.tabla-tareas tr.urgente td:first-child { border-left: 3px solid var(--rojo); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.centro { text-align: center; }

/* Barra de cumplimiento */
.barra-cumpl { position: relative; height: 1.1rem; border-radius: 999px; background: #edf1f6; overflow: hidden; min-width: 90px; }
.barra-cumpl > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px;
                      background: linear-gradient(90deg, #2f9e5e, #1d7a46); }
.barra-cumpl.media > span { background: linear-gradient(90deg, #e9a100, #c98a00); }
.barra-cumpl.baja > span  { background: linear-gradient(90deg, #d6584a, var(--rojo)); }
.barra-cumpl b { position: relative; z-index: 1; font-size: 0.72rem; color: #11321f; padding-left: 0.5rem; line-height: 1.1rem; }

/* Días de la semana como casillas */
.dias-semana { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dias-semana label { display: inline-flex; align-items: center; gap: 0.3rem; background: #fff; border: 1px solid var(--borde);
                     border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.85rem; }

/* Zona de peligro (cancelar / desactivar) */
.zona-peligro { border: 1px solid var(--rojo); border-radius: 10px; padding: 1rem; margin-top: 1.5rem; }
.zona-peligro h2 { color: var(--rojo); margin-top: 0; font-size: 1rem; }
button.peligro { background: var(--rojo); color: #fff; }
button.peligro::before { display: none; }

/* Bitácora */
.bitacora { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--borde); }
.bitacora li { position: relative; padding: 0.4rem 0 0.4rem 1.2rem; }
.bitacora li::before { content: ""; position: absolute; left: -5px; top: 0.75rem; width: 8px; height: 8px;
                       border-radius: 50%; background: var(--azul); }
.bitacora .cuando { color: var(--gris); font-size: 0.8rem; }
.bitacora .coment { color: var(--texto); font-size: 0.9rem; background: #f6f8fb; border-radius: 6px; padding: 0.3rem 0.5rem; margin-top: 0.2rem; }

/* Lista de datos clave/valor */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem 1.2rem; margin: 1rem 0; }
.datos div { display: flex; flex-direction: column; }
.datos dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gris); }
.datos dd { margin: 0.1rem 0 0; font-weight: 600; }
.acciones-validar { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-top: 1rem; }
.acciones-validar form { margin: 0; max-width: 360px; }

/* Formularios en rejilla */
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.4rem 1.2rem; }
fieldset.cond { border: 1px solid var(--borde); border-radius: 10px; margin: 0.8rem 0; padding: 0.8rem 1rem; }
fieldset.cond legend { font-size: 0.82rem; color: var(--gris); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0.4rem; }