/* Agenda Corporativa COHERSA */
:root {
  /* Series de gráficas: paleta categórica validada; los colores de las empresas se distinguen entre sí, también con daltonismo */
  --serie-1: #2a78d6;   /* SPCA */
  --serie-2: #eb6834;   /* INCOMA */
  --serie-3: #1baf7a;   /* Go Logistic */
  --serie-4: #eda100;   /* TuRed */
  --serie-5: #e87ba4;   /* Reclut */
  --serie-6: #008300;
  --serie-7: #4a3aa7;
  --serie-8: #e34948;
  --serie-grupo: #0A2363; /* Grupo: azul de la marca */
  --acento: #2a78d6;
  --gris-serie: #A3ACBD;
  --gris-claro: #C9CDD6;
  --tinta-meta: #5F687B;
  --tinta-2: #4B5568;
  --rejilla: #E9EDF3;
  --eje: #C9D1E0;
  --etq: #5A6782;
  /* Escala secuencial (un solo tono, más oscuro = mejor) */
  --calor-1: #cde2fb; --calor-2: #9ec5f4; --calor-3: #5598e7; --calor-4: #256abf; --calor-5: #0d366b; --celda-vacia: #EEF1F6;
  /* Estados (siempre con ícono y texto) */
  --bueno: #0ca30c; --bueno-fondo: #E5F5E5; --bueno-texto: #0A6B0A;
  --alerta: #fab219; --alerta-fondo: #FFF3D1; --alerta-texto: #865600;
  --critico: #d03b3b; --critico-fondo: #FCE9E8; --critico-texto: #B42318;
  --neutro-fondo: #EEF1F6;
  --lateral: 264px;
}

/* La Agenda va en los colores de la marca con predominio del amarillo: menú amarillo, fondo crema y detalles en azul */
body.app { background: var(--fondo-agenda); }
:root { --fondo-agenda: #FFF9EB; --tinta-lateral: var(--azul); --tinta-lateral-suave: rgba(10, 35, 99, .78); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; }
.ico--12 { width: 12px; height: 12px; }
.ico--16 { width: 16px; height: 16px; }
.ico--24 { width: 24px; height: 24px; }
.saltar { position: fixed; left: 16px; top: -80px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--amarillo); color: var(--azul); font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
[hidden] { display: none !important; }
body.sin-scroll { overflow: hidden; }

/* ---------- Marco ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--lateral); display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--amarillo) 0%, #F7AE00 100%); color: var(--tinta-lateral);
}
.lateral :focus-visible { outline-color: var(--azul); }
.lateral__marca { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; }
.lateral__marca img { width: 30px; height: auto; }
.lateral__marca strong { display: block; font: 700 16px/1.1 var(--fuente-titulos); letter-spacing: .08em; color: var(--azul); }
.lateral__marca span { font-size: 12.5px; color: var(--tinta-lateral-suave); }
.lateral__cerrar { display: none; margin-left: auto; color: var(--azul); }
.lateral__nav { flex: 1; overflow-y: auto; padding: 4px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(10, 35, 99, .25) transparent; }
.lateral__grupo { margin: 18px 10px 6px; font: 700 11px/1 var(--fuente-titulos); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-lateral-suave); }
.lateral__nav a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 1px 0; border-radius: 10px;
  color: var(--azul); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background var(--transicion), color var(--transicion);
}
.lateral__nav a .ico { opacity: .9; }
.lateral__nav a:hover { background: rgba(10, 35, 99, .09); }
.lateral__nav a[aria-current] { background: var(--azul); color: var(--blanco); font-weight: 600; box-shadow: 0 6px 16px rgba(10, 35, 99, .22); }
.lateral__nav a[aria-current] .ico { color: var(--amarillo); opacity: 1; }
.lateral__cuenta { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 99px; background: var(--critico); color: var(--blanco); font-size: 11.5px; font-weight: 700; text-align: center; }
.lateral__pie { padding: 12px; border-top: 1px solid rgba(10, 35, 99, .15); }
.lateral__usuario { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--azul); text-decoration: none; }
.lateral__usuario:hover, .lateral__usuario[aria-current] { background: rgba(10, 35, 99, .09); }
.lateral__usuario > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.lateral__usuario strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral__usuario span span { font-size: 12px; color: var(--tinta-lateral-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral__usuario .avatar { --texto: var(--azul); }
.velo { position: fixed; inset: 0; z-index: 55; background: rgba(6, 23, 63, .45); backdrop-filter: blur(2px); }

.principal { margin-left: var(--lateral); min-height: 100vh; display: flex; flex-direction: column; }
.barra-superior {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 28px;
  background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(10px); border-bottom: 3px solid var(--amarillo);
}
.barra-superior__menu { display: none; }
.barra-superior__titulo { min-width: 0; }
.barra-superior__titulo h1 { font-size: 20px; color: var(--azul); }
.barra-superior__titulo p { font-size: 13px; color: var(--gris); }
.barra-superior__acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Con servidor: si los cambios ya se guardaron */
.estado-guardado { padding: 5px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--gris); white-space: nowrap; }
.estado-guardado--guardando { color: var(--azul); }
.estado-guardado--sin-conexion, .estado-guardado--error { background: var(--alerta-fondo); color: var(--alerta-texto); }
.estado-guardado--rechazado { background: var(--critico-fondo); color: var(--critico-texto); }
.etiqueta-demo { padding: 5px 10px; border-radius: 99px; background: var(--amarillo-50); border: 1px solid var(--amarillo-100); color: var(--alerta-texto); font-size: 12px; font-weight: 600; white-space: nowrap; }
.avisos-menu { position: relative; }
.burbuja { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--critico); color: var(--blanco); font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid var(--blanco); }
.panel-avisos {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; padding: 8px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra-l);
}
.panel-avisos__titulo { padding: 8px 10px; font: 600 12px/1 var(--fuente-titulos); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.panel-avisos ul { list-style: none; margin: 0; padding: 0; }
.panel-avisos__vacio { padding: 12px 10px; color: var(--gris); font-size: 14px; }
.aviso-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.aviso-item:hover { background: var(--fondo); }
.aviso-item .ico { width: 18px; height: 18px; margin-top: 1px; }
.aviso-item--critico .ico { color: var(--critico); }
.aviso-item--alerta .ico { color: var(--alerta-texto); }

.vista { flex: 1; width: 100%; max-width: 1480px; padding: 24px 28px 56px; outline: none; }
.pagina { display: grid; gap: 20px; min-width: 0; }
.pagina > * { min-width: 0; }
.pagina--angosta { max-width: 880px; }

/* ---------- Botones y controles ---------- */
.boton-icono {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--azul); transition: background var(--transicion);
}
.boton-icono:hover { background: var(--azul-50); }
.boton-icono--borde { background: var(--blanco); border: 1px solid var(--linea); }
.boton-icono:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.boton-icono .ico { width: 19px; height: 19px; }
/* En pantalla grande el menú siempre está a la vista: el botón para abrirlo y la × solo aparecen en celular y tableta */
.lateral__cerrar, .barra-superior__menu { display: none; }
.boton-texto {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 9px; background: none;
  color: var(--azul-700); font: 600 13.5px/1.2 var(--fuente); white-space: nowrap;
}
.boton-texto:hover { background: var(--azul-50); }
.boton--peligro { --b-fondo: var(--blanco); --b-texto: var(--critico-texto); --b-borde: #F2C4C0; }
.boton--peligro:hover { --b-fondo: var(--critico-fondo); box-shadow: none; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.enlace { display: inline-flex; align-items: center; gap: 4px; color: var(--azul-700); font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.enlace:hover { text-decoration: underline; }
.enlace--volver { margin-bottom: 10px; }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.filtros__accion { margin-left: auto; }
.filtros__texto { color: var(--gris); font-size: 14px; }
.segmentado { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--blanco); border: 1px solid var(--linea); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmentado::-webkit-scrollbar { display: none; }
.segmentado__op {
  padding: 7px 12px; border: 0; border-radius: 9px; background: none; color: var(--gris-700);
  font: 600 13.5px/1.2 var(--fuente); white-space: nowrap; transition: background var(--transicion), color var(--transicion);
}
.segmentado__op:hover { background: var(--fondo); color: var(--azul); }
.segmentado__op[aria-checked="true"] { background: var(--azul); color: var(--blanco); }
.seleccion {
  padding: 8px 32px 8px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230A2363' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
  appearance: none; font-size: 13.5px; font-weight: 500; color: var(--tinta); max-width: 100%;
}
.seleccion--chica { padding: 5px 28px 5px 10px; font-size: 13px; }
.navegador { display: inline-flex; align-items: center; gap: 8px; }
.navegador__etq { min-width: 120px; font: 600 15px/1.3 var(--fuente-titulos); color: var(--azul); text-align: center; }
.buscador { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); color: var(--gris); }
.buscador__entrada { width: 230px; padding: 8px 0; border: 0; outline: 0; background: none; font-size: 14px; }
.buscador:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-100); }

/* ---------- Tarjetas y bloques ---------- */
.tarjeta { min-width: 0; padding: 20px 22px; border: 1px solid var(--linea); border-radius: 16px; background: var(--blanco); }
.tarjeta--lista { padding: 0; overflow: hidden; }
.tarjeta__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tarjeta__titulo { display: flex; align-items: center; gap: 6px; font: 600 16px/1.3 var(--fuente-titulos); color: var(--tinta); }
.tarjeta__sub { margin-top: 3px; font-size: 13.5px; color: var(--gris); }
.tarjeta__acciones { display: flex; align-items: center; gap: 6px; flex: none; }
.bloque { display: grid; gap: 12px; min-width: 0; }
.bloque__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bloque__cab h2 { display: flex; align-items: center; gap: 6px; font-size: 17px; color: var(--azul); }
.bloque > .ver-mas { padding: 4px 0 0; border-top: 0; }
.bloque__nota { font: 500 14px var(--fuente); color: var(--gris); }
.rejilla { display: grid; gap: 20px; min-width: 0; align-items: start; }
.rejilla > * { min-width: 0; }
.rejilla--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rejilla--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.columna { display: grid; gap: 20px; align-content: start; min-width: 0; }
.rejilla-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.vacio { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; text-align: center; }
.vacio__icono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--azul-50); color: var(--azul); margin-bottom: 4px; }
.vacio__titulo { font-weight: 600; color: var(--tinta); }
.vacio__texto { font-size: 14px; color: var(--gris); }
.vacio-chico { padding: 10px 0; color: var(--gris); font-size: 14px; }
.subtitulo { margin: 18px 0 8px; font-size: 14.5px; color: var(--azul); }

/* ---------- Insignias, chips y avatares ---------- */
.insignia {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 99px; white-space: nowrap;
  font: 600 12.5px/1.2 var(--fuente);
}
.insignia--chica { padding: 3px 8px 3px 6px; font-size: 12px; }
.insignia--bueno { background: var(--bueno-fondo); color: var(--bueno-texto); }
.insignia--bueno .ico { color: var(--bueno); }
.insignia--alerta { background: var(--alerta-fondo); color: var(--alerta-texto); }
.insignia--critico { background: var(--critico-fondo); color: var(--critico-texto); }
.insignia--neutro { background: var(--neutro-fondo); color: var(--gris-700); }
.chip-empresa { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gris-700); white-space: nowrap; }
.chip-empresa__punto, .punto-empresa { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.pildora { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--fondo); border: 1px solid var(--linea); font-size: 12px; font-weight: 600; color: var(--gris-700); white-space: nowrap; }
.pildora--acento { background: var(--azul-50); border-color: var(--azul-100); color: var(--azul); }
.avatar {
  --tam: 36px; display: inline-grid; place-items: center; flex: none; width: var(--tam); height: var(--tam); border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--azul)) 16%, white); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c, var(--azul)) 55%, white);
  color: var(--azul); font: 700 calc(var(--tam) * .38)/1 var(--fuente); letter-spacing: .02em;
}
.avatar--xs { --tam: 22px; } .avatar--s { --tam: 26px; } .avatar--m { --tam: 36px; } .avatar--l { --tam: 52px; }
.avatar--vacio { --c: var(--gris-claro); }
.responsable { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gris-700); min-width: 0; }
.responsable > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Medidor (avance contra meta) ---------- */
.medidor { --pista: #DCE6F7; --relleno: var(--acento); position: relative; height: 8px; border-radius: 99px; background: var(--pista); flex: 1; min-width: 60px; }
.medidor__relleno { height: 100%; border-radius: 99px; background: var(--relleno); transition: width 600ms cubic-bezier(.2, .7, .2, 1); }
.medidor__esperado { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--tinta); }
.medidor--bueno { --pista: #DDF1DD; --relleno: var(--bueno); }
.medidor--alerta { --pista: #FFEDBF; --relleno: var(--alerta); }
.medidor--critico { --pista: #F8DCDA; --relleno: var(--critico); }

/* ---------- Tarjeta de indicador ---------- */
.tarjeta-kpi {
  display: grid; gap: 8px; align-content: start; width: 100%; padding: 16px 18px; border: 1px solid var(--linea); border-radius: 16px;
  background: var(--blanco); color: inherit; font: inherit; text-align: left; transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
button.tarjeta-kpi:hover { border-color: var(--azul-100); box-shadow: var(--sombra); transform: translateY(-2px); }
.tarjeta-kpi__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tarjeta-kpi__nombre { font-size: 14px; font-weight: 600; color: var(--tinta-2); line-height: 1.3; }
.tarjeta-kpi__fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.tarjeta-kpi__valor { font: 700 28px/1.05 var(--fuente); color: var(--tinta); letter-spacing: -0.01em; white-space: nowrap; }
.tarjeta-kpi__meta { font-size: 12.5px; color: var(--gris); }
.tarjeta-kpi__proy { color: var(--tinta-2); font-weight: 600; }
.tarjeta-kpi .medidor { margin: 2px 0; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--gris-700); white-space: nowrap; }
.delta--bien { color: var(--bueno-texto); }
.delta--mal { color: var(--critico-texto); }
.delta__ref { font-weight: 400; color: var(--gris); }
.mini { display: block; flex: none; }
.mini__linea { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mini__punto { stroke: var(--blanco); stroke-width: 1.5; }

/* ---------- Gráficas ---------- */
.tarjeta-grafica { display: flex; flex-direction: column; }
.grafica { width: 100%; min-height: 120px; }
.grafica__lienzo { width: 100%; border-radius: 8px; }
.grafica__lienzo:focus-within { outline: 2px solid var(--azul); outline-offset: 4px; }
.grafica__svg { display: block; overflow: visible; font-family: var(--fuente); }
.linea-rejilla { stroke: var(--rejilla); stroke-width: 1; }
.linea-base { stroke: var(--eje); stroke-width: 1; }
.linea-meta-100 { stroke: var(--tinta); stroke-width: 1.5; }
.etq-eje { fill: var(--etq); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.etq-eje--fuerte { fill: var(--tinta); font-weight: 700; }
.serie { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.serie--meta { stroke-width: 1.6; stroke-dasharray: 5 4; }
.serie--proyeccion { stroke-dasharray: 1.5 4.5; stroke-width: 2.4; }
.serie--tenue { stroke-width: 2; }
.area { opacity: .1; }
.punto { stroke: var(--blanco); stroke-width: 2; }
.guia { stroke: #9AA6BC; stroke-width: 1; }
.capa { fill: transparent; cursor: crosshair; outline: none; }
.barra--tenue { opacity: .45; }
.marca-meta { stroke: var(--tinta-meta); stroke-width: 2.2; stroke-linecap: round; }
.resalte { fill: rgba(10, 35, 99, .05); }
.pista { fill: #EDF0F5; }
.marca-esperado { stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; }
.etq-fila { fill: var(--tinta); font-size: 13px; font-weight: 500; }
.etq-valor { fill: var(--tinta); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fila-avance { outline: none; }
.fila-avance__fondo { fill: transparent; }
.fila-avance.es-clic { cursor: pointer; }
.fila-avance.es-clic:hover .fila-avance__fondo, .fila-avance:focus-visible .fila-avance__fondo { fill: var(--fondo); }
.fila-avance:focus-visible .fila-avance__fondo { stroke: var(--azul); stroke-width: 2; }
.celda { stroke: none; }
.celda:hover { stroke: var(--tinta); stroke-width: 1.5; }
.celda--1 { fill: var(--calor-1); } .celda--2 { fill: var(--calor-2); } .celda--3 { fill: var(--calor-3); } .celda--4 { fill: var(--calor-4); } .celda--5 { fill: var(--calor-5); }
.celda--vacia { fill: var(--celda-vacia); }
.celda__num { fill: var(--tinta-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.celda__num--claro { fill: var(--blanco); }
.celda--futura { fill: var(--blanco); stroke: var(--linea); stroke-width: 1; }
.celda__num--futura { fill: var(--gris-claro); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 10px; padding: 0; list-style: none; font-size: 13px; color: var(--gris-700); }
.leyenda li { display: inline-flex; align-items: center; gap: 7px; }
.leyenda__clave { display: inline-block; flex: none; }
.leyenda__clave--barra { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.leyenda__clave--linea { width: 18px; height: 3px; border-radius: 2px; background: var(--c); }
.leyenda__clave--meta { width: 18px; border-top: 2px dashed var(--c); }
.leyenda__clave--proyeccion { width: 18px; border-top: 3px dotted var(--c); }
.tip {
  position: fixed; z-index: 1000; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: #0E1730; color: var(--blanco);
  font-size: 13px; line-height: 1.35; box-shadow: 0 12px 30px rgba(6, 23, 63, .3); pointer-events: none; opacity: 0; transition: opacity 120ms;
}
.tip.visible { opacity: 1; }
.tip__titulo { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.tip__fila { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.tip__clave { flex: none; display: inline-block; }
.tip__clave--linea { width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.tip__clave--barra { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.tip__clave--meta { width: 14px; border-top: 2px dashed rgba(255, 255, 255, .7); }
.tip__valor { font-variant-numeric: tabular-nums; }
.tip__etq { color: rgba(255, 255, 255, .72); }

/* ---------- Tablas ---------- */
.tabla-envoltura { width: 100%; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
.tabla thead th { padding-top: 6px; font: 600 11.5px/1.2 var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.tabla tbody th { font-weight: 500; }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla tbody tr[tabindex] { cursor: pointer; }
.tabla tbody tr[tabindex]:hover { background: #F8FAFD; }
.tabla tbody tr[tabindex]:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; box-shadow: none; }
.tabla .a-der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla--semaforo td, .tabla--semaforo th { padding-top: 12px; padding-bottom: 12px; }
.tabla--compacta th, .tabla--compacta td { padding-left: 6px; padding-right: 6px; font-size: 13.5px; }
.tabla--compacta th:first-child, .tabla--compacta td:first-child { padding-left: 0; }
.tabla--compacta th:last-child, .tabla--compacta td:last-child { padding-right: 0; }
.celda-kpi { display: flex; align-items: center; gap: 10px; }
.celda-kpi > span:last-child { display: grid; line-height: 1.3; }
.celda-kpi small { font-size: 12px; color: var(--gris); }
.celda-avance { display: flex; align-items: center; gap: 10px; min-width: 150px; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.celda-avance .medidor { max-width: 110px; }

/* ---------- Lectura del periodo ---------- */
.lectura__lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lectura__item { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.lectura__icono { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--neutro-fondo); color: var(--gris-700); }
.lectura__item--bueno .lectura__icono { background: var(--bueno-fondo); color: var(--bueno-texto); }
.lectura__item--alerta .lectura__icono { background: var(--alerta-fondo); color: var(--alerta-texto); }
.lectura__item--critico .lectura__icono { background: var(--critico-fondo); color: var(--critico-texto); }
.lectura__item--acento .lectura__icono { background: var(--azul-50); color: var(--azul); }

/* ---------- Inicio ---------- */
.bienvenida {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; padding: 26px 28px; border-radius: 20px; color: var(--blanco);
  background: radial-gradient(600px 300px at 100% 0%, rgba(254, 184, 1, .22), transparent 60%), linear-gradient(120deg, var(--azul) 0%, var(--azul-700) 100%);
}
.bienvenida::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 240px; height: 255px; background: url(../../assets/img/marca/logo-ch-blanco.png) center / contain no-repeat; opacity: .06; pointer-events: none; }
.bienvenida__fecha { font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.bienvenida h2 { margin-top: 4px; font-size: clamp(24px, 3vw, 30px); }
.bienvenida__lema { margin-top: 6px; color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.bienvenida__reloj { display: grid; justify-items: end; align-content: center; text-align: right; }
.bienvenida__hora { font: 700 34px/1 var(--fuente); letter-spacing: -0.01em; }
.bienvenida__reloj span { margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.bienvenida__resumen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; position: relative; z-index: 1; }
.resumen-item {
  display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 14px; border-radius: 12px; color: var(--blanco); text-decoration: none; font-size: 13.5px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); transition: background var(--transicion);
}
.resumen-item:hover { background: rgba(255, 255, 255, .16); }
.resumen-item strong { font: 700 22px/1 var(--fuente); }
.resumen-item__icono { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .12); }
.resumen-item__icono .ico { width: 18px; height: 18px; }
.resumen-item--critico .resumen-item__icono { background: rgba(208, 59, 59, .9); }
.resumen-item--alerta .resumen-item__icono { background: rgba(250, 178, 25, .95); color: var(--azul-900); }
.alcances { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.alcances > li + li { border-top: 1px solid var(--linea); }
.alcance { display: grid; gap: 7px; padding: 12px 4px; color: inherit; text-decoration: none; border-radius: 10px; }
.alcance:hover { background: #FAFBFD; }
.alcance__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.alcance__titulo { font-size: 14.5px; font-weight: 600; color: var(--tinta); line-height: 1.35; }
.alcance__fila { display: flex; align-items: center; gap: 12px; }
.alcance__pct { min-width: 44px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.alcance__detalle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; color: var(--gris); }
.agenda-mini { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.agenda-mini__item { display: grid; grid-template-columns: 74px 1fr; gap: 2px 10px; padding: 9px 10px; border-radius: 10px; border-left: 3px solid var(--linea); }
.agenda-mini__item.es-reunion { border-left-color: var(--serie-1); background: #F5F9FF; }
.agenda-mini__item.es-ahora { background: var(--amarillo-50); border-left-color: var(--amarillo); }
/* Lo que ya pasó se ve apagado, pero con texto que se sigue leyendo bien (sin transparencia) */
.agenda-mini__item.es-pasado { background: var(--fondo); border-left-color: var(--gris-300); }
.agenda-mini__item.es-pasado .agenda-mini__titulo { color: var(--gris-700); font-weight: 500; }
.agenda-mini__hora { grid-row: span 2; font-size: 12.5px; font-weight: 600; color: var(--gris-700); font-variant-numeric: tabular-nums; }
.agenda-mini__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.agenda-mini__tipo { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--gris); }
.lista-simple { display: grid; margin: 0; padding: 0; list-style: none; }
.lista-simple__item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); }
.lista-simple__item:first-child { border-top: 0; }
.lista-simple__texto { display: grid; gap: 3px; flex: 1; min-width: 0; color: var(--tinta); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.35; }
a.lista-simple__texto:hover { color: var(--azul-700); }
.lista-simple__texto small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 400; color: var(--gris); }
/* Solicitudes de acceso: en pantallas angostas los botones bajan debajo del texto */
.solicitud { flex-wrap: wrap; }
.solicitud .lista-simple__texto { flex-basis: 220px; }
.solicitud .grupo-botones { margin-left: auto; }
.lista-simple__valor { font-size: 14px; white-space: nowrap; }
/* Lo que va a la derecha de cada fila ocupa siempre el mismo ancho, para que las filas queden parejas */
.lista-simple__item > .prioridad { flex: none; min-width: 66px; justify-content: center; }
.lista-simple__ranura { flex: none; min-width: 72px; text-align: right; }
.indicador-tono { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; }
.indicador-tono--critico { background: var(--critico-fondo); color: var(--critico-texto); }
.indicador-tono--alerta { background: var(--alerta-fondo); color: var(--alerta-texto); }
.marcar {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 2px solid var(--gris-300); border-radius: 50%;
  background: var(--blanco); color: transparent; transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.marcar:hover { border-color: var(--bueno); color: var(--bueno); }
.marcar.es-marcada { border-color: var(--bueno); background: var(--bueno); color: var(--blanco); }
.fecha-limite { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fecha-limite--hoy { color: var(--alerta-texto); font-weight: 700; }
.fecha-limite--atrasada { color: var(--critico-texto); font-weight: 700; }
.prioridad { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.prioridad::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.prioridad--alta { background: var(--critico-fondo); color: var(--critico-texto); }
.prioridad--media { background: var(--alerta-fondo); color: var(--alerta-texto); }
.prioridad--baja { background: var(--azul-50); color: var(--azul-700); }

/* ---------- Cifras ---------- */
.resumen-estados, .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.cifra { display: grid; gap: 5px; align-content: start; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco); }
.cifra__etq { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.cifra strong { font: 700 24px/1.15 var(--fuente); color: var(--tinta); }
.cifra .insignia { justify-self: start; }
.cifra__nota { font-size: 12.5px; color: var(--gris); }
.cifra--grande { grid-column: span 2; }
.cifra--bueno .cifra__etq .ico { color: var(--bueno); }
.cifra--alerta .cifra__etq .ico { color: var(--alerta-texto); }
.cifra--critico .cifra__etq .ico { color: var(--critico); }

/* ---------- Objetivos ---------- */
.rejilla-objetivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.objetivo { display: grid; gap: 10px; align-content: start; }
.objetivo__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.objetivo__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.objetivo__titulo { font: 600 16px/1.35 var(--fuente-titulos); }
.objetivo__titulo a { color: var(--tinta); text-decoration: none; }
.objetivo__titulo a:hover { color: var(--azul-700); text-decoration: underline; }
.objetivo__avance { display: flex; align-items: center; gap: 12px; }
.objetivo__avance strong { min-width: 46px; text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
.objetivo__cifras { font-size: 13.5px; color: var(--tinta-2); font-weight: 600; }
.objetivo__cifras span { font-weight: 400; color: var(--gris); }
.objetivo__medicion { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gris); }
.objetivo__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.objetivo__acciones { display: flex; align-items: center; gap: 2px; }
.objetivo__relacion { font-size: 12.5px; color: var(--gris); }
.objetivo__relacion a { color: var(--azul-700); text-decoration: none; }
.objetivo__relacion a:hover { text-decoration: underline; }
.arbol, .arbol__hijos { margin: 0; padding: 0; list-style: none; }
.arbol__hijos { margin-left: 18px; padding-left: 14px; border-left: 2px solid var(--linea); }
.arbol__fila {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 170px auto; align-items: center; gap: 12px; padding: 9px 10px; margin: 2px 0;
  border-radius: 10px; color: inherit; text-decoration: none;
}
.arbol__fila:hover { background: var(--fondo); }
.arbol__hz { justify-self: start; padding: 3px 9px; border-radius: 99px; background: var(--azul-50); color: var(--azul); font-size: 11.5px; font-weight: 700; }
.arbol__titulo { display: grid; gap: 2px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.arbol__titulo small { font-size: 12px; font-weight: 400; color: var(--gris); }
.arbol__avance { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.detalle-objetivo { border-left: 4px solid var(--amarillo); }
.migas { margin-bottom: 6px; font-size: 12.5px; color: var(--gris); }
.migas a { color: var(--azul-700); text-decoration: none; }
.detalle-objetivo__titulo { font-size: 22px; color: var(--azul); }
.detalle-objetivo__cuerpo { display: grid; gap: 14px; }
.detalle-objetivo__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.detalle-objetivo__cifras .cifra strong { font-size: 18px; }
.detalle-objetivo__desc { color: var(--tinta-2); }
.historial { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--tinta-2); }

/* ---------- Ficha de indicador ---------- */
.ficha__cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ficha__chips { display: flex; gap: 8px; align-items: center; }
.ficha__titulo { margin-top: 8px; font-size: 24px; color: var(--azul); }
.ficha__desc { margin-top: 4px; color: var(--gris); max-width: 60em; }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--linea); }
.ficha__datos dt { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.ficha__datos dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--tinta); }
.ficha__datos--lista { grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; border: 0; }
.ficha__datos--lista > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--linea); }
.ficha__datos--lista > div:first-child { border-top: 0; }
.ficha__datos--lista dd { margin: 0; text-align: right; }

/* ---------- Mi día: línea de tiempo ---------- */
.linea-tiempo { --px: 1.45px; position: relative; height: calc((var(--fin) - var(--inicio)) * var(--px) + 10px); margin: 8px 0 0 62px; }
.linea-tiempo__hora { position: absolute; left: -62px; right: 0; top: calc((var(--m) - var(--inicio)) * var(--px)); border-top: 1px solid var(--rejilla); }
.linea-tiempo__hora span { position: absolute; left: 0; top: -9px; width: 54px; font-size: 11.5px; color: var(--etq); text-align: right; font-variant-numeric: tabular-nums; }
.linea-tiempo__ahora { position: absolute; z-index: 3; left: -8px; right: 0; top: calc((var(--m) - var(--inicio)) * var(--px)); border-top: 2px solid var(--critico); pointer-events: none; }
.linea-tiempo__ahora::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--critico); }
.linea-tiempo__ahora span { position: absolute; right: 0; top: -20px; padding: 1px 7px; border-radius: 99px; background: var(--critico); color: var(--blanco); font-size: 11px; font-weight: 700; }
.evento {
  --borde: var(--serie-1); --fondo-ev: #EEF4FD;
  position: absolute; z-index: 2; left: 8px; right: 0; top: calc((var(--m) - var(--inicio)) * var(--px) + 1px); height: calc(var(--d) * var(--px) - 3px);
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; overflow: hidden; border-radius: 10px; border-left: 4px solid var(--borde); background: var(--fondo-ev);
}
.evento--reunion { --borde: var(--serie-1); --fondo-ev: #EAF2FD; }
.evento--profundo { --borde: var(--azul); --fondo-ev: #EDF1F9; }
.evento--administracion { --borde: var(--serie-7); --fondo-ev: #F1EFFA; }
.evento--seguimiento { --borde: var(--serie-3); --fondo-ev: #E7F6F0; }
.evento--descanso { --borde: var(--gris-claro); --fondo-ev: #F4F5F7; }
.evento--creatividad { --borde: var(--serie-2); --fondo-ev: #FDEFE9; }
.evento.es-hecho { --borde: var(--gris-300); --fondo-ev: #F4F5F7; }
.evento.es-hecho strong { text-decoration: line-through; color: var(--gris-700); }
.evento.es-choque { box-shadow: inset 0 0 0 1.5px var(--critico); }
.evento__principal { display: grid; gap: 1px; align-content: start; flex: 1; min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; }
.evento__principal strong { font-size: 13.5px; line-height: 1.3; color: var(--tinta); }
.evento__hora { font-size: 11.5px; color: var(--gris-700); }
.evento__personas { display: flex; align-items: center; margin-top: 4px; font-size: 11.5px; color: var(--gris); }
.evento__personas .avatar { margin-right: -5px; box-shadow: 0 0 0 2px var(--fondo-ev), inset 0 0 0 1.5px color-mix(in srgb, var(--c, var(--azul)) 55%, white); }
.evento__estado { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--blanco); font-size: 11.5px; font-weight: 700; color: var(--azul); }
.evento__unirse { flex: none; min-height: 32px; padding: 5px 12px; font-size: 12.5px; }
.evento__check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 0; border: 2px solid var(--gris-300); border-radius: 50%; background: var(--blanco); color: transparent; }
.evento__check[aria-pressed="true"] { background: var(--bueno); border-color: var(--bueno); color: var(--blanco); }
.evento__check:hover { border-color: var(--bueno); }
.evento.es-corto { align-items: center; padding-top: 3px; padding-bottom: 3px; }
.evento.es-corto .evento__principal { display: flex; align-items: baseline; gap: 8px; }
.evento.es-corto .evento__hora { flex: none; }
.evento.es-corto .evento__principal strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evento.es-corto .evento__personas { display: none; }
.evento__choque { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: 99px; background: var(--critico-fondo); color: var(--critico-texto); font-size: 11px; font-weight: 700; }

/* ---------- Tareas ---------- */
.tareas { margin: 0; padding: 0; list-style: none; }
.tarea { --cols: 24px minmax(0, 1fr) 76px 150px 140px; display: grid; grid-template-columns: var(--cols); align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--linea); }
/* Columnas fijas: prioridad, estado y fecha quedan alineadas fila por fila */
.tarea > .prioridad { justify-self: start; }
.tarea > .seleccion { width: 100%; }
.tarea--cab { padding-top: 9px; padding-bottom: 9px; }
.tarea.tarea--cab:hover { background: var(--fondo); }
.tarea:last-child { border-bottom: 0; }
.tarea:hover { background: #FAFBFD; }
.tarea.es-atrasada { box-shadow: inset 3px 0 0 var(--critico); }
.tarea__cuerpo { display: grid; gap: 5px; min-width: 0; }
.tarea__titulo { padding: 0; border: 0; background: none; color: var(--tinta); font: 600 14.5px/1.35 var(--fuente); text-align: left; }
.tarea__titulo:hover { color: var(--azul-700); text-decoration: underline; }
.tarea.es-entregada .tarea__titulo { color: var(--gris); text-decoration: line-through; }
.tarea__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--gris); }
.tarea__meta .responsable { font-size: 12.5px; }
.tarea__objetivo { display: inline-flex; align-items: center; gap: 5px; color: var(--azul-700); text-decoration: none; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarea__objetivo:hover { text-decoration: underline; }

/* ---------- Perspectivas y biblioteca de indicadores ---------- */
.tarjeta-kpi__perspectiva { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.chip-perspectiva { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--neutro-fondo); color: var(--gris-700); }
.chip-perspectiva::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.chip-perspectiva--financiero { background: #E8F0FB; color: #1C4F91; }
.chip-perspectiva--clientes { background: #FDEEE7; color: #9A3D14; }
.chip-perspectiva--operacion { background: #E5F5EE; color: #0F6B4A; }
.chip-perspectiva--tiempos { background: #EEEBFA; color: #3E2F94; }
.subtitulo-perspectiva { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 0; font: 500 14px/1.4 var(--fuente); color: var(--gris-700); }
.guia-kpi { border-left: 4px solid var(--amarillo); }
.guia-kpi__lista { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 20px; color: var(--tinta-2); font-size: 14.5px; }
.rejilla-biblioteca { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ficha-biblioteca { display: grid; gap: 10px; align-content: start; transition: border-color var(--transicion), box-shadow var(--transicion); }
.ficha-biblioteca.es-activa { border-color: var(--azul-100); box-shadow: inset 4px 0 0 var(--azul); }
.ficha-biblioteca__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ficha-biblioteca h4 { margin: 0; font: 600 15.5px/1.35 var(--fuente-titulos); }
.ficha-biblioteca h4 a { color: var(--tinta); text-decoration: none; }
.ficha-biblioteca h4 a:hover { color: var(--azul-700); text-decoration: underline; }
.ficha-biblioteca__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ficha-biblioteca__uso { display: grid; justify-items: center; gap: 4px; flex: none; font-size: 11.5px; font-weight: 600; color: var(--gris); cursor: pointer; }
.ficha-biblioteca__desc { font-size: 14px; color: var(--tinta-2); }
.ficha-biblioteca__datos { display: grid; gap: 8px; margin: 0; }
.ficha-biblioteca__datos dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.ficha-biblioteca__datos dd { margin: 2px 0 0; font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; }
.ficha-biblioteca__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.ficha-biblioteca__etq { font-size: 12.5px; font-weight: 600; color: var(--gris); }
.interruptor { position: relative; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 99px; background: var(--gris-300); transition: background var(--transicion); }
.interruptor__perilla { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--transicion); }
.interruptor[aria-checked="true"] { background: var(--bueno); }
.interruptor[aria-checked="true"] .interruptor__perilla { transform: translateX(18px); }
.ficha__porque { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--amarillo-50); color: var(--tinta-2); font-size: 14.5px; }
.ficha__porque .ico { margin-top: 3px; color: var(--alerta-texto); }
.ficha__datos dd small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--gris); }
.pildora--aviso { background: var(--alerta-fondo); border-color: #FBE3A6; color: var(--alerta-texto); }

/* ---------- Equipo y configuración ---------- */
.persona__kpis { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.persona__kpis a { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); text-decoration: none; }
.persona__kpis a:hover { color: var(--azul-700); text-decoration: underline; }
.persona__mas, .persona__vacio { font-size: 12.5px; color: var(--gris); }
.campo__titulo { font: 600 13px/1.3 var(--fuente-titulos); color: var(--azul); }
.asignar-kpis { display: grid; gap: 10px; margin-top: 6px; }
.casillas--kpi { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.casillas--kpi legend { display: inline-flex; align-items: center; gap: 4px; }
.casilla__texto { display: grid; line-height: 1.3; }
.casilla__texto small { font-size: 11.5px; color: var(--gris); }
.rejilla-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.persona { display: grid; gap: 12px; align-content: start; }
.persona__cab { display: flex; align-items: center; gap: 12px; }
.persona__cab h3 { font-size: 16px; color: var(--tinta); }
.persona__cab p { font-size: 13.5px; color: var(--gris); }
.persona__editar { margin-left: auto; }
.persona--invitada { border-style: dashed; background: var(--fondo); }
.persona__acciones { margin-top: auto; }
.historial > summary { cursor: pointer; list-style: none; }
.historial > summary::-webkit-details-marker { display: none; }
.historial > summary .tarjeta__titulo::after { content: "▾"; margin-left: 8px; color: var(--gris); font-size: 13px; }
.historial[open] > summary { margin-bottom: 4px; }
.persona__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.persona__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.persona__datos dt { font-size: 12px; color: var(--gris); }
.persona__datos dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; }
.persona__datos dd .fecha-limite { font-size: 12px; }
.persona__avance { display: grid; gap: 6px; font-size: 13px; color: var(--gris-700); }
.persona__contacto { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.persona__contacto a { display: inline-flex; align-items: center; gap: 6px; color: var(--azul-700); text-decoration: none; }
.formulario-tarjeta { display: grid; gap: 14px; }
.formulario-tarjeta .tarjeta__cab { margin-bottom: 0; }
.formulario-tarjeta__pie { display: flex; justify-content: flex-end; }
.perfil__cab { display: flex; align-items: center; gap: 14px; }
.perfil__cab p { font-size: 13.5px; color: var(--gris); }

/* ---------- Formularios y modal ---------- */
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font: 600 13px/1.3 var(--fuente-titulos); color: var(--azul); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--gris-300); border-radius: 10px; background: var(--blanco); font-size: 15px; color: var(--tinta);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo select { appearance: none; padding-right: 34px; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230A2363' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-100); }
.campo__ayuda { font-size: 12.5px; color: var(--gris); }
.campos-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 10px; margin: 0; padding: 10px 12px 12px; border: 1.5px solid var(--linea); border-radius: 12px; }
.casillas legend { padding: 0 6px; font: 600 13px var(--fuente-titulos); color: var(--azul); }
.casilla { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 14px; cursor: pointer; }
.casilla input { width: 17px; height: 17px; accent-color: var(--azul); }
.modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 18px; background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-l); }
.modal--l { width: min(760px, calc(100vw - 24px)); }
.modal::backdrop { background: rgba(6, 23, 63, .5); backdrop-filter: blur(2px); }
.modal__form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.modal__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--linea); }
.modal__cab h2 { font-size: 18px; color: var(--azul); }
.modal__cuerpo { display: grid; grid-auto-rows: max-content; align-content: start; gap: 14px; padding: 18px 22px; overflow-y: auto; }
.modal__cuerpo > .segmentado { justify-self: start; }
.modal__ayuda { font-size: 13.5px; color: var(--gris); }
.modal__error { color: var(--critico-texto); font-size: 13.5px; font-weight: 600; }
.modal__error:empty { display: none; }
.modal__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--linea); background: var(--fondo); border-radius: 0 0 18px 18px; }
.modal__peligro { margin-right: auto; }

/* ---------- Reporte mensual ---------- */
.reporte { display: grid; gap: 22px; padding: 28px 30px; }
.reporte__cab { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 3px solid var(--amarillo); }
.reporte__logo { flex: none; width: 44px; height: auto; }
.reporte__titulos { flex: 1; min-width: 0; }
.reporte__marca { font: 600 12px/1.2 var(--fuente-titulos); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.reporte__cab h2 { margin-top: 4px; font-size: 24px; color: var(--azul); }
.reporte__periodo { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--tinta-2); }
.reporte__preparado { font-size: 12.5px; color: var(--gris); text-align: right; }
.reporte__cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.reporte__cifra { border-top: 4px solid var(--c, var(--linea)); }
.reporte__cifra--bueno { --c: var(--bueno); }
.reporte__cifra--alerta { --c: var(--alerta); }
.reporte__cifra--critico { --c: var(--critico); }
.reporte__cifra--acento { --c: var(--acento); }
.reporte__lectura { padding: 16px 18px; border-radius: 14px; background: var(--azul-50); }
.reporte__lectura ul { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--tinta-2); }
.reporte__seccion { display: grid; gap: 10px; }
.reporte__subtitulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; color: var(--azul); }
.reporte__nota { font: 400 13.5px var(--fuente); color: var(--gris); }
.tabla--reporte th, .tabla--reporte td { padding: 8px 10px; font-size: 13.5px; }
.reporte__kpi { display: grid; gap: 2px; min-width: 190px; font-weight: 600; color: var(--tinta); }
.reporte__kpi small { font-size: 12px; font-weight: 400; color: var(--gris); }
.reporte__avance { display: grid; justify-items: end; gap: 4px; min-width: 110px; }
.reporte__avance .medidor { width: 100%; }
.reporte__malo { color: var(--critico-texto); font-weight: 700; }
.reporte__col-tendencia { width: 112px; }
.reporte__pie { padding-top: 14px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--gris); }
@media (max-width: 900px) {
  .reporte__cifras { grid-template-columns: 1fr 1fr; }
  .reporte__col-tendencia { display: none; }
}
@media (max-width: 640px) {
  .reporte { padding: 18px 16px; }
  .reporte__cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; }
  .reporte__logo { width: 36px; }
  .reporte__cab h2 { font-size: 20px; }
  .reporte__preparado { grid-column: 1 / -1; text-align: left; }
}
/* Al imprimir o guardar en PDF solo sale el reporte, en hoja carta */
@media print {
  @page { size: letter; margin: 12mm 11mm; }
  body.app { background: #fff; }
  .lateral, .barra-superior, .barra-inferior, .velo, .avisos, .saltar, .reporte-filtros, .intro { display: none !important; }
  .principal { margin-left: 0; min-height: 0; }
  .vista { max-width: none; padding: 0; }
  .reporte { gap: 14px; padding: 0; border: 0; }
  .reporte__cifras { grid-template-columns: repeat(4, 1fr); }
  .reporte__col-tendencia { display: table-cell !important; }
  .reporte__cifras, .reporte__lectura, .tabla--reporte tr { break-inside: avoid; }
  .reporte__subtitulo { break-after: avoid; }
  .tabla--reporte th, .tabla--reporte td { padding: 5px 6px; font-size: 10.5px; }
  .reporte__kpi small { font-size: 9.5px; }
  .tabla-envoltura { overflow: visible !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Alertas por correo ---------- */
.alertas-config { display: grid; gap: 16px; }
.alertas-config__grupo { display: grid; gap: 8px; }
.alertas-config__titulo { display: grid; gap: 2px; font: 600 14.5px/1.3 var(--fuente-titulos); color: var(--azul); }
.alertas-config__titulo span { font: 400 12.5px/1.4 var(--fuente); color: var(--gris); }
.alertas-config__lista { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--linea); border-radius: 12px; }
.alertas-config__lista li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; border-top: 1px solid var(--linea); }
.alertas-config__lista li:first-child { border-top: 0; }
.alertas-config__texto { display: grid; gap: 2px; min-width: 0; }
.alertas-config__texto strong { font-size: 14px; font-weight: 600; }
.alertas-config__texto small { font-size: 12.5px; color: var(--gris); }
.alertas-config__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--azul-50); font-size: 14px; color: var(--tinta-2); }
/* Vista previa del correo */
.correo-marco { padding: 14px; border-radius: 14px; background: var(--fondo); }
.correo { overflow: hidden; border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco); box-shadow: var(--sombra-s); }
.correo__cab { display: grid; gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.correo__cab p > span:first-child { display: inline-block; width: 64px; color: var(--gris); }
.correo__asunto { font-weight: 700; }
.correo__adjunto { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 8px; background: var(--fondo); }
.correo__cuerpo { display: grid; gap: 12px; padding: 0 20px 20px; font-size: 14.5px; }
.correo__marca { display: flex; align-items: center; gap: 8px; margin: 0 -20px 6px; padding: 12px 20px; background: var(--azul); color: var(--blanco); font: 700 13px/1 var(--fuente-titulos); letter-spacing: .06em; }
.correo__seccion h4 { margin-bottom: 6px; font-size: 14.5px; color: var(--azul); }
.correo__seccion ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.correo__item { display: grid; gap: 2px; padding: 8px 12px; border-left: 4px solid var(--gris-300); border-radius: 6px; background: var(--fondo); }
.correo__item--critico { border-left-color: var(--critico); }
.correo__item--alerta { border-left-color: var(--alerta); }
.correo__item strong { font-size: 14px; font-weight: 600; }
.correo__item span { font-size: 12.5px; color: var(--gris); }
.correo__boton { display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--amarillo); color: var(--azul); font: 700 14px var(--fuente-titulos); }
.correo__pie { padding-top: 12px; border-top: 1px solid var(--linea); font-size: 12px; color: var(--gris); }
.correo__nota { padding: 10px 16px; border-top: 1px dashed var(--linea); background: var(--alerta-fondo); color: var(--alerta-texto); font-size: 13px; }

/* ---------- Importar desde Excel ---------- */
.pasos-importar { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos-importar > li { position: relative; display: grid; gap: 8px; padding-left: 42px; counter-increment: paso; }
.pasos-importar > li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--amarillo); color: var(--azul); font: 700 14px/1 var(--fuente-titulos);
}
.pasos-importar > li > .boton { justify-self: start; }
.pasos-importar__titulo { font: 600 15px/1.3 var(--fuente-titulos); color: var(--azul); }
.archivo { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 2px dashed var(--gris-300); border-radius: 12px; background: var(--fondo); color: var(--azul); font-weight: 600; cursor: pointer; transition: border-color var(--transicion), background var(--transicion); }
.archivo:hover, .archivo:focus-within { border-color: var(--azul); background: var(--azul-50); }
.archivo__entrada { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.archivo__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importar__vista { display: grid; gap: 10px; }
.importar__vista:empty { display: none; }
.importar__resumen { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bueno-texto); }
.importar__leyendo { color: var(--gris); font-size: 14px; }
.importar__error { color: var(--critico-texto); font-size: 14px; font-weight: 600; }
.importar__avisos { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--alerta-fondo); list-style: none; font-size: 13px; color: var(--alerta-texto); }
.importar__avisos li { display: flex; gap: 8px; align-items: flex-start; }
.importar__avisos .ico { flex: none; margin-top: 1px; }

/* ---------- Listas con columnas alineadas (Reuniones, Proyectos, Seguimientos y Documentos) ----------
   Cada fila usa la misma plantilla de columnas que su encabezado, así todo queda parejo fila por fila. */
.tarjeta--lista > .tarjeta__cab { padding: 16px 18px 0; margin-bottom: 12px; }
.lista-filas { margin: 0; padding: 0; list-style: none; }
.fila-lista, .lista-cab { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 14px; padding: 12px 18px; }
.fila-lista { border-bottom: 1px solid var(--linea); transition: background var(--transicion); }
.lista-filas > li:last-child { border-bottom: 0; }
.ver-mas { display: flex; justify-content: center; padding: 14px 18px; border-top: 1px solid var(--linea); }
.fila-lista > * { min-width: 0; }
.fila-lista:hover { background: #FAFBFD; }
.fila-lista.es-atrasada { box-shadow: inset 3px 0 0 var(--critico); }
.lista-cab { padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--linea); background: var(--fondo); font: 600 11.5px/1.2 var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.fila-lista__principal { display: grid; gap: 5px; min-width: 0; }
.fila-lista__titulo { justify-self: start; max-width: 100%; padding: 0; border: 0; background: none; color: var(--tinta); font: 600 14.5px/1.35 var(--fuente); text-align: left; text-decoration: none; }
.fila-lista__titulo:hover { color: var(--azul-700); text-decoration: underline; }
.fila-lista__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--gris); }
.fila-lista__meta > span, .fila-lista__meta > a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.fila-lista__meta a { color: var(--azul-700); text-decoration: none; }
.fila-lista__meta a:hover { text-decoration: underline; }
.fila-lista.es-pasada .fila-lista__titulo { color: var(--gris-700); }
.lista-filas__dia { padding: 8px 18px; border-bottom: 1px solid var(--linea); background: var(--fondo); font: 600 13px/1.3 var(--fuente-titulos); color: var(--azul); }
.lista-filas__dia.es-hoy { background: var(--amarillo-50); }
.fila-lista .responsable { font-size: 13px; }
.acciones-contacto, .acciones-fila { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.acciones-contacto .boton-icono, .acciones-fila .boton-icono { width: 30px; height: 30px; }
.boton-icono.es-desactivado { opacity: .35; cursor: not-allowed; }
.fila-lista > .insignia { justify-self: start; }
.acciones-contacto .boton-icono .ico, .acciones-fila .boton-icono .ico { width: 17px; height: 17px; }
.reunion-fila { --cols: 108px minmax(0, 1fr) 150px 118px 104px; }
.proyecto-fila { --cols: minmax(0, 1.5fr) 176px 124px minmax(170px, .9fr) 136px; }
.seguimiento-fila { --cols: minmax(0, 1fr) 160px 168px 136px 136px; }
.documento-fila { --cols: minmax(0, 1.7fr) 108px minmax(0, 1fr) 136px 72px 118px; }
.seguimiento-fila .seleccion { width: 100%; }
.insignia--acento { background: var(--azul-50); color: var(--azul); }
.insignia--apagado { background: transparent; color: var(--gris); box-shadow: inset 0 0 0 1px var(--linea); }
.pildora--mini { padding: 1px 7px; font-size: 11px; }
.pildora--boton { cursor: pointer; font-family: var(--fuente); }
.pildora--boton:hover { border-color: var(--azul); }

/* ---------- Reuniones ---------- */
.reunion-fila__hora { display: grid; font-size: 13px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.reunion-fila__hora small { font-size: 12px; font-weight: 400; color: var(--gris); }
.reunion-fila.es-ahora { box-shadow: inset 3px 0 0 var(--amarillo); }
.reunion-fila.es-elegida { background: var(--azul-50); box-shadow: inset 3px 0 0 var(--azul); }
.reunion-fila.es-pasada .reunion-fila__hora { color: var(--gris-700); }
.personas-mini { display: inline-flex; align-items: center; min-width: 0; }
.personas-mini .avatar { margin-right: -6px; box-shadow: 0 0 0 2px var(--blanco), inset 0 0 0 1.5px color-mix(in srgb, var(--c, var(--azul)) 55%, white); }
.personas-mini__n { margin-left: 12px; font-size: 12.5px; font-weight: 600; color: var(--gris-700); white-space: nowrap; }
.boton-unirse { justify-self: start; min-height: 34px; padding: 6px 12px; font-size: 13px; }
.acta { border-left: 4px solid var(--amarillo); }
.acta__etiqueta { font: 600 11.5px/1.2 var(--fuente-titulos); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.acta__titulo { margin-top: 4px; font-size: 21px; color: var(--azul); }
.acta__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; }
.acta__columna { display: grid; gap: 18px; align-content: start; min-width: 0; }
.acta__dato { display: grid; gap: 8px; }
.acta__subtitulo { font: 600 14.5px/1.3 var(--fuente-titulos); color: var(--azul); }
.acta__subtitulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.acta__guardado { font-size: 12.5px; font-weight: 600; color: var(--bueno-texto); }
.acta__personas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acta__personas li { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--linea); border-radius: 99px; font-size: 13px; }
.acta__personas li > span:last-child { display: grid; line-height: 1.2; }
.acta__personas small { font-size: 11.5px; color: var(--gris); }
.acta__temas { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: 14px; color: var(--tinta-2); }
.acta__relacion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.acta__notas { width: 100%; min-height: 230px; padding: 12px 14px; border: 1.5px solid var(--gris-300); border-radius: 12px; background: #FFFDF7; color: var(--tinta); font: 15px/1.55 var(--fuente); resize: vertical; }
.acta__notas:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-100); }
.acta__acuerdos { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.acuerdos { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--linea); border-radius: 12px; }
.acuerdo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--linea); }
.acuerdo:first-child { border-top: 0; }
.acuerdo__cuerpo { display: grid; gap: 4px; min-width: 0; }
.acuerdo__texto { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.acuerdo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.acuerdo__meta .responsable { font-size: 12.5px; }
.acuerdo__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.acuerdo-nuevo, .hito-nuevo { display: grid; grid-template-columns: minmax(0, 1fr) 190px 156px auto; gap: 8px; }
.hito-nuevo { grid-template-columns: minmax(0, 1fr) auto; margin-top: 4px; }
.hito-nuevo input[name="titulo"] { grid-column: 1 / -1; }
.acuerdo-nuevo input, .acuerdo-nuevo select, .hito-nuevo input {
  width: 100%; padding: 8px 10px; border: 1.5px solid var(--gris-300); border-radius: 10px; background: var(--blanco); color: var(--tinta); font-size: 14px;
}
.acuerdo-nuevo select { appearance: none; padding-right: 30px; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230A2363' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") right 9px center / 13px no-repeat; }
.acuerdo-nuevo :focus, .hito-nuevo :focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-100); }

/* ---------- Proyectos ---------- */
.estado-proyecto { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: 99px; background: var(--neutro-fondo); color: var(--gris-700); font-size: 12px; font-weight: 700; white-space: nowrap; }
.estado-proyecto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-proyecto--en-curso { background: var(--azul-50); color: var(--azul); }
.estado-proyecto--revision { background: #EEEBFA; color: #3E2F94; }
.estado-proyecto--terminado { background: var(--bueno-fondo); color: var(--bueno-texto); }
.estado-proyecto--pausado { color: var(--gris); }
.avance-proyecto { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-width: 0; }
.avance-proyecto__pct { min-width: 38px; font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.avance-proyecto .salud { grid-column: 1 / -1; }
.salud { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.salud--bueno { color: var(--bueno-texto); }
.salud--alerta { color: var(--alerta-texto); }
.salud--critico { color: var(--critico-texto); }
.salud--neutro { color: var(--gris); }
.fecha-final { display: grid; font-size: 13.5px; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.fecha-final small { font-size: 12px; font-weight: 400; color: var(--gris); }
.fecha-final.fecha-limite--atrasada small { color: var(--critico-texto); font-weight: 600; }
.cifra .cifra__texto { font-size: 18px; }
a.cifra__nota { color: var(--azul-700); text-decoration: none; }
a.cifra__nota:hover { text-decoration: underline; }
.detalle-proyecto, .detalle-seguimiento { display: grid; gap: 16px; border-left: 4px solid var(--amarillo); }
.detalle-proyecto > .tarjeta__cab, .detalle-seguimiento > .tarjeta__cab { margin-bottom: 0; }
.detalle__titulo { font-size: 22px; color: var(--azul); }
.detalle-proyecto__medidor { display: grid; gap: 6px; }
.detalle-proyecto__medidor .medidor { height: 10px; }
.detalle-proyecto__partes { gap: 16px; }
.subtarjeta { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 14px; background: #FCFDFE; }
.subtarjeta__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.subtarjeta__cab h3 { font: 600 15px/1.3 var(--fuente-titulos); color: var(--azul); }
.lista-simple__boton { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.lista-simple__boton:hover { color: var(--azul-700); }
.lista-simple__texto.es-hecho { color: var(--gris); text-decoration: line-through; }
.lista-simple .archivo-icono { width: 28px; height: 32px; font-size: 8.5px; }
.icono-tipo { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); }
.icono-tipo--reunion { --c: var(--serie-1); }
.icono-tipo--seguimiento { --c: var(--serie-3); }
/* Cronograma */
.cronograma { --nombre: 260px; }
.cronograma__escala { display: grid; grid-template-columns: var(--nombre) minmax(0, 1fr); border-bottom: 1px solid var(--linea); }
.cronograma__meses { position: relative; height: 26px; }
.cronograma__meses span { position: absolute; top: 4px; padding-left: 5px; border-left: 1px solid var(--eje); font-size: 11.5px; font-weight: 600; color: var(--etq); white-space: nowrap; }
.cronograma__filas { margin: 0; padding: 0; list-style: none; }
.cronograma__fila { display: grid; grid-template-columns: var(--nombre) minmax(0, 1fr); align-items: center; min-height: 54px; border-bottom: 1px solid var(--linea); }
.cronograma__fila:last-child { border-bottom: 0; }
.cronograma__nombre { display: grid; gap: 2px; min-width: 0; padding: 8px 14px 8px 0; color: var(--tinta); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.cronograma__nombre:hover { color: var(--azul-700); }
.cronograma__nombre small { font-size: 12px; font-weight: 400; color: var(--gris); }
.cronograma__pista { position: relative; align-self: stretch; min-height: 54px; }
.cronograma__pista::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--hoy); width: 2px; margin-left: -1px; background: var(--critico); }
.cronograma__barra { position: absolute; top: 50%; height: 16px; margin-top: -8px; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--c) 30%, white); }
.cronograma__avance { display: block; height: 100%; background: var(--c); }
.cronograma__hito, .cronograma__clave-hito { width: 11px; height: 11px; border: 2px solid var(--tinta-2); background: var(--blanco); transform: rotate(45deg); }
.cronograma__hito { position: absolute; top: 50%; z-index: 2; margin: -5.5px 0 0 -5.5px; }
.cronograma__clave-hito { display: inline-block; }
.cronograma__hito.es-hecho, .cronograma__clave-hito.es-hecho { background: var(--tinta-2); }

/* ---------- Seguimientos ---------- */
.contacto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contacto-asunto { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.contacto-asunto > .avatar { margin-top: 2px; }
.contacto-asunto__persona { font-size: 13px; color: var(--gris-700); }
.contacto-asunto__persona strong { font-weight: 600; color: var(--tinta); }
.contacto__texto { display: grid; gap: 2px; min-width: 0; }
.contacto__texto strong, .contacto__texto small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.contacto__texto strong { font-size: 14px; color: var(--tinta); }
.contacto__texto small { font-size: 12.5px; color: var(--gris); }
.contacto__texto .pildora { justify-self: start; }
.contacto--grande { gap: 14px; }
.avatar--contacto { --c: var(--gris-serie); background: var(--fondo); color: var(--gris-700); }
.detalle__asunto { font: 600 16px/1.4 var(--fuente-titulos); color: var(--tinta); }
.detalle-seguimiento .ficha__datos { margin-top: 0; }
.detalle__acciones { align-items: center; }
.historial-contactos { display: grid; margin: 0; padding: 0; list-style: none; }
.historial-contactos li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.historial-contactos li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--linea); }
.historial-contactos li:last-child::before { display: none; }
.historial-contactos__icono { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--azul-50); color: var(--azul); }
.historial-contactos__cab { font-size: 12.5px; color: var(--gris); }
.historial-contactos__cab strong { color: var(--tinta); }
.historial-contactos li p + p { margin-top: 2px; font-size: 14px; color: var(--tinta-2); }

/* ---------- Documentos ---------- */
.documento { display: flex; align-items: center; gap: 12px; min-width: 0; }
.archivo-icono { display: grid; place-items: center; flex: none; width: 38px; height: 44px; border-radius: 6px 12px 6px 6px; background: var(--c, #5F687B); color: var(--blanco); font: 700 10px/1 var(--fuente); letter-spacing: .02em; }
.archivo-icono--pdf { --c: #C2362F; }
.archivo-icono--word { --c: #2B579A; }
.archivo-icono--excel { --c: #1D7044; }
.archivo-icono--ppt { --c: #B83B1A; }
.archivo-icono--imagen { --c: #6B4FBB; }
.archivo-icono--zip, .archivo-icono--texto, .archivo-icono--otro { --c: #5F687B; }
.etiqueta-doc { padding: 1px 8px; border: 1px solid var(--linea); border-radius: 6px; background: var(--fondo); font-size: 11.5px; font-weight: 600; color: var(--gris-700); }
.documento-fila__tipo { font-size: 13.5px; color: var(--tinta-2); }
.documento-fila__proyecto, .documento-fila__subido { display: grid; gap: 2px; min-width: 0; font-size: 13.5px; color: var(--tinta-2); }
.documento-fila__proyecto a { overflow: hidden; color: var(--azul-700); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.documento-fila__proyecto a:hover { text-decoration: underline; }
.documento-fila__proyecto small, .documento-fila__subido small { display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 12px; color: var(--gris); text-overflow: ellipsis; white-space: nowrap; }
.documento-fila__tamano { font-size: 13px; color: var(--gris-700); text-align: right; font-variant-numeric: tabular-nums; }
.zona-soltar { position: relative; }
.zona-soltar__aviso { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; align-content: center; gap: 8px; border: 2px dashed var(--azul); border-radius: 16px; background: rgba(238, 242, 250, .95); color: var(--azul); font-weight: 700; }
.zona-soltar.es-arrastre .zona-soltar__aviso { display: grid; }
.archivo--zona { flex-direction: column; justify-content: center; min-height: 112px; text-align: center; }
.archivo.es-arrastre { border-color: var(--azul); background: var(--azul-50); }
.subida__lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.subida__lista:empty { display: none; }
.subida__lista li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.subida__lista .archivo-icono { width: 28px; height: 32px; font-size: 8.5px; }
.subida__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subida__lista small { color: var(--gris); }
.filtro-activo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border-radius: 12px; background: var(--azul-50); color: var(--azul); font-size: 14px; font-weight: 600; }
.versiones { border: 1px solid var(--linea); border-radius: 12px; padding: 0 12px; }

/* ---------- Calendario ---------- */
.tipos-cal { display: flex; flex-wrap: wrap; gap: 8px; }
.tipo-cal { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border: 1px solid var(--linea); border-radius: 99px; background: var(--blanco); color: var(--tinta-2); font: 600 13px/1.2 var(--fuente); transition: opacity var(--transicion), background var(--transicion); }
.tipo-cal:hover { border-color: var(--azul-100); }
.tipo-cal__clave { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: var(--blanco); }
.tipo-cal__n { min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--fondo); color: var(--gris-700); font-size: 12px; text-align: center; }
.tipo-cal[aria-pressed="false"] { background: transparent; color: var(--gris); }
.tipo-cal[aria-pressed="false"] .tipo-cal__clave { background: transparent; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
.rejilla--cal { grid-template-columns: minmax(0, 1fr); }
/* El panel del día va a la derecha solo en pantallas anchas; en laptops va debajo, en dos columnas, para que el calendario se lea bien */
.rejilla--cal > .columna { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (min-width: 1600px) {
  .rejilla--cal { grid-template-columns: minmax(0, 1fr) 340px; }
  .rejilla--cal > .columna { grid-template-columns: minmax(0, 1fr); }
}
.cal-mes__cab { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--linea); background: var(--fondo); }
.cal-mes__cab span { padding: 9px 10px; font: 600 11.5px/1 var(--fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.cal-mes__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dia { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 122px; padding: 6px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-dia.es-finde { background: #FBFCFE; }
.cal-dia.es-fuera { background: var(--fondo); }
.cal-dia.es-fuera .cal-dia__num { color: var(--gris); font-weight: 500; }
.cal-dia.es-elegido { box-shadow: inset 0 0 0 2px var(--azul); }
.cal-dia__cab { display: flex; align-items: center; justify-content: space-between; }
.cal-dia__num { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 99px; background: none; color: var(--tinta); font: 600 13.5px/1 var(--fuente); }
.cal-dia__num:hover { background: var(--azul-50); }
.cal-dia.es-hoy .cal-dia__num { background: var(--amarillo); color: var(--azul); font-weight: 700; }
.cal-dia__mas { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--azul); opacity: 0; transition: opacity var(--transicion), background var(--transicion); }
.cal-dia:hover .cal-dia__mas, .cal-col:hover .cal-dia__mas, .cal-dia__mas:focus-visible, .cal-dia.es-elegido .cal-dia__mas, .cal-col.es-elegido .cal-dia__mas { opacity: 1; }
.cal-dia__mas:hover { background: var(--azul-50); }
@media (hover: none) { .cal-dia__mas { opacity: 1; } }
.cal-dia__items { display: grid; gap: 3px; min-width: 0; }
.cal-item { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; min-height: 24px; padding: 3px 6px; border: 0; border-left: 3px solid var(--c); border-radius: 6px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--tinta); font: 500 12px/1.3 var(--fuente); text-align: left; }
.cal-item:hover { background: color-mix(in srgb, var(--c) 22%, white); }
.cal-item .ico { flex: none; color: var(--c); }
.cal-item__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item__hora { flex: none; font-weight: 700; color: var(--gris-700); font-variant-numeric: tabular-nums; }
.cal-item.es-hecho .cal-item__texto { color: var(--gris); text-decoration: line-through; }
.cal-item.es-atrasado { box-shadow: inset 0 0 0 1px var(--critico); }
.cal-item.es-atrasado .ico { color: var(--critico); }
.cal-dia__extra { align-self: start; min-height: 24px; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--azul-700); font: 600 12px var(--fuente); }
.cal-dia__extra:hover { background: var(--azul-50); }
.cal-dia__puntos { display: none; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 380px; padding: 8px; border-right: 1px solid var(--linea); }
.cal-col:last-child { border-right: 0; }
.cal-col.es-elegido { box-shadow: inset 0 0 0 2px var(--azul); }
.cal-col__cab { display: flex; align-items: center; justify-content: space-between; }
.cal-col__dia { display: grid; justify-items: start; padding: 3px 8px; border: 0; border-radius: 10px; background: none; color: var(--tinta); text-align: left; }
.cal-col__dia:hover { background: var(--azul-50); }
.cal-col__dia small { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.cal-col__dia strong { font: 700 20px/1.1 var(--fuente); }
.cal-col.es-hoy .cal-col__dia { background: var(--amarillo); color: var(--azul); }
.cal-col.es-hoy .cal-col__dia small { color: var(--azul); }
.cal-col__items { display: grid; gap: 4px; }
.cal-col__items .cal-item { align-items: flex-start; }
.cal-col__items .cal-item .ico { margin-top: 2px; }
.cal-col__items .cal-item__texto { white-space: normal; }
.cal-col__vacio { padding: 4px 8px; font-size: 12.5px; color: var(--gris); }
.agenda-dia { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.agenda-dia__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 9px 8px; border-left: 3px solid var(--c); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--c) 5%, white); }
.agenda-dia__item.es-hecho { border-left-color: var(--gris-300); background: var(--fondo); }
.agenda-dia__item.es-hecho .agenda-dia__titulo { color: var(--gris-700); text-decoration: line-through; }
.agenda-dia__item.es-hecho .agenda-dia__titulo .ico { color: var(--gris); }
.agenda-dia__hora { display: grid; align-content: start; font-size: 12.5px; font-weight: 700; color: var(--gris-700); font-variant-numeric: tabular-nums; }
.agenda-dia__hora small { font-weight: 400; color: var(--gris); }
.agenda-dia__cuerpo { display: grid; gap: 4px; min-width: 0; }
.agenda-dia__titulo { display: flex; align-items: flex-start; gap: 6px; padding: 0; border: 0; background: none; color: var(--tinta); font: 600 14px/1.35 var(--fuente); text-align: left; }
.agenda-dia__titulo .ico { flex: none; margin-top: 2px; color: var(--c); }
.agenda-dia__titulo:hover { color: var(--azul-700); }
.agenda-dia__meta, .agenda-dia__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--gris); }
.proximos { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.proximo { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; }
.proximo:hover { background: var(--fondo); }
.proximo__fecha { flex: none; min-width: 56px; padding: 4px 6px; border-left: 3px solid var(--c); border-radius: 6px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--tinta); font: 700 12px/1.3 var(--fuente); text-align: center; }
.proximo__texto { display: grid; gap: 2px; min-width: 0; }
.proximo__texto strong { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--tinta); }
.proximo__texto small { font-size: 12px; color: var(--gris); }
/* Elegir qué agregar */
.opciones { display: grid; gap: 8px; }
.opcion { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--blanco); color: var(--tinta); font: inherit; text-align: left; transition: border-color var(--transicion), background var(--transicion); }
.opcion:hover, .opcion:focus-visible { border-color: var(--azul); background: var(--azul-50); }
.opcion__icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c, var(--azul)) 14%, white); color: var(--c, var(--azul)); }
.opcion__texto { display: grid; flex: 1; gap: 2px; }
.opcion__texto strong { font-size: 15px; }
.opcion__texto small { font-size: 13px; color: var(--gris); }
.opcion > .ico:last-child { color: var(--gris); }
/* Eventos en Mi día e Inicio */
.evento--evento { --borde: var(--serie-5); --fondo-ev: #FCEFF5; }
.todo-el-dia { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.todo-el-dia .cal-item { width: auto; padding: 5px 10px; font-size: 13px; }
.agenda-mini__item.es-evento { border-left-color: var(--serie-5); }
.agenda-mini__titulo a { color: inherit; text-decoration: none; }
.agenda-mini__titulo a:hover { color: var(--azul-700); text-decoration: underline; }
.tarea__adjuntos { display: inline-flex; align-items: center; gap: 4px; color: var(--azul-700); font-weight: 600; text-decoration: none; }
.tarea__adjuntos:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .lista-cab { display: none; }
  .fila-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; }
  .fila-lista > .fila-lista__principal, .fila-lista > .contacto-asunto, .fila-lista > .documento, .fila-lista > .avance-proyecto { flex: 1 1 100%; }
  .reunion-fila__hora { display: flex; flex: 1 1 100%; gap: 6px; }
  .acciones-contacto, .acciones-fila { margin-left: auto; }
  .acta__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .acuerdo { grid-template-columns: minmax(0, 1fr); }
  .acuerdo__acciones { justify-content: flex-start; }
  .acuerdo-nuevo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acuerdo-nuevo input[name="texto"] { grid-column: 1 / -1; }
  .cronograma { --nombre: 190px; }
}
@media (max-width: 640px) {
  .cal-dia { align-items: center; min-height: 56px; padding: 4px 2px; }
  .cal-dia__cab { justify-content: center; }
  .cal-dia__mas, .cal-dia__items { display: none; }
  .cal-dia__puntos { display: flex; justify-content: center; gap: 3px; }
  .cal-dia__puntos span { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
  .cal-mes__cab span { padding: 8px 2px; font-size: 10.5px; text-align: center; }
  .cal-semana { grid-template-columns: minmax(0, 1fr); }
  .cal-col { min-height: 0; border-right: 0; border-bottom: 1px solid var(--linea); }
  .cal-col:last-child { border-bottom: 0; }
  .cal-col .cal-dia__mas { display: grid; opacity: 1; }
  .cronograma__escala, .cronograma__fila { grid-template-columns: minmax(0, 1fr); }
  .cronograma__esquina { display: none; }
  .cronograma__nombre { padding: 10px 0 2px; }
  .cronograma__pista { min-height: 30px; }
  .detalle__titulo, .acta__titulo { font-size: 19px; }
}

/* ---------- Avisos flotantes ---------- */
.avisos { position: fixed; left: 50%; bottom: 22px; z-index: 1100; display: grid; gap: 8px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); }
.aviso { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px; background: #0E1730; color: var(--blanco); font-size: 14px; box-shadow: 0 14px 34px rgba(6, 23, 63, .3); animation: entraAviso 220ms ease; transition: opacity 220ms, transform 220ms; }
.aviso.saliendo { opacity: 0; transform: translateY(8px); }
.aviso--critico { background: var(--critico-texto); }
.aviso__accion { padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--amarillo); font-weight: 700; }
.aviso__accion:hover { background: rgba(255, 255, 255, .1); }
@keyframes entraAviso { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Barra inferior (celular) ---------- */
.barra-inferior { display: none; }

/* ---------- Pantalla de acceso ---------- */
body.acceso { background: var(--fondo-agenda); }
.acceso__marco { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.acceso__marca {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 40px; padding: 44px 56px; color: var(--azul);
  background: radial-gradient(700px 420px at 90% 0%, rgba(255, 255, 255, .32), transparent 62%), linear-gradient(150deg, var(--amarillo) 0%, #F2A900 100%);
}
.acceso__marca::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(10, 35, 99, .1) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); pointer-events: none; }
.acceso__marca::after { content: ""; position: absolute; right: -90px; bottom: -110px; width: 380px; height: 404px; background: url(../../assets/img/marca/logo-ch-azul.svg) center / contain no-repeat; opacity: .07; }
.acceso__logo { position: relative; display: inline-flex; align-items: center; gap: 12px; color: var(--azul); text-decoration: none; font: 700 20px/1 var(--fuente-titulos); letter-spacing: .08em; }
.acceso__logo img { width: 34px; height: auto; }
.acceso__texto { position: relative; margin: auto 0; max-width: 520px; }
.acceso__etiqueta { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 600 13px/1 var(--fuente-titulos); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.acceso__etiqueta::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--azul); }
.acceso h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
.acceso__puntos { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.acceso__puntos li { display: flex; align-items: center; gap: 14px; color: var(--azul); font-size: 16px; }
.acceso__puntos .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(10, 35, 99, .1); color: var(--azul); }
.acceso__pie { position: relative; font-size: 13px; color: var(--tinta-lateral-suave); }
.acceso__panel { display: grid; place-items: center; padding: 32px 20px; }
.acceso__tarjeta { display: grid; gap: 12px; width: min(440px, 100%); padding: 32px; border-radius: 24px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.acceso__tarjeta h2 { font-size: 26px; color: var(--azul); }
.acceso__ayuda { font-size: 14px; color: var(--gris-700); }
.acceso__microsoft { --b-fondo: var(--blanco); --b-texto: #2F2F2F; --b-borde: #8C8C8C; width: 100%; border-radius: 12px; font-family: "Segoe UI", var(--fuente); font-weight: 600; }
.acceso__microsoft:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.acceso__nota { font-size: 12.5px; color: var(--gris); }
.acceso__separador { display: flex; align-items: center; gap: 12px; margin: 8px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.acceso__separador::before, .acceso__separador::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.acceso__perfiles { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.perfil {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--blanco);
  color: inherit; font: inherit; text-align: left; transition: border-color var(--transicion), background var(--transicion);
}
.perfil:hover { border-color: var(--azul); background: var(--azul-50); }
.perfil__texto { display: grid; min-width: 0; }
.perfil__texto strong { font-size: 14.5px; }
.perfil__texto span { font-size: 12.5px; color: var(--gris); }
.perfil__flecha { margin-left: auto; color: var(--azul); font-weight: 700; }
.acceso__volver { justify-self: start; margin-top: 4px; color: var(--gris-700); font-size: 13.5px; text-decoration: none; }
.acceso__volver:hover { color: var(--azul); text-decoration: underline; }
/* Entrada con servidor: Microsoft, código por correo e invitaciones */
.acceso__bloque, .acceso__form { display: grid; gap: 12px; }
.acceso__mensaje { padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.acceso__mensaje--aviso { background: var(--alerta-fondo); color: var(--alerta-texto); }
.acceso__mensaje--critico { background: var(--critico-fondo); color: var(--critico-texto); }
.acceso__enlace { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--azul); font: 600 13.5px var(--fuente); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.acceso__enlace:hover { color: var(--azul-700); }
.acceso__saludo { font-size: 17px; color: var(--tinta); }
.boton[aria-busy="true"] { opacity: .7; cursor: progress; }
.boton:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* Aceptar términos y privacidad: dos casillas separadas */
.acceso__marco--uno { grid-template-columns: 1fr; }
.acceso__casillas { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--fondo); border: 1px solid var(--linea); }
.acceso__casilla { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--tinta); cursor: pointer; }
.acceso__casilla input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--azul); cursor: pointer; }
.acceso__casilla a { color: var(--azul); font-weight: 600; }
.acceso__pie a { color: inherit; }
.acceso__pie a:hover { color: var(--azul); }
.acceso__solicitar { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--gris-700); }
.acceso__listo { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--bueno-fondo); color: var(--bueno-texto); }
.acceso__listo .acceso__ayuda { color: var(--bueno-texto); }
.acceso__prueba { padding: 10px 12px; border: 1.5px dashed var(--amarillo); border-radius: 12px; background: var(--amarillo-50); font-size: 13px; }
.acceso__prueba summary { cursor: pointer; font-weight: 600; color: var(--alerta-texto); }
.acceso__prueba[open] summary { margin-bottom: 8px; }
.bandeja__correo { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--amarillo-100); font-size: 12.5px; color: var(--tinta-2); }
.bandeja__cab { display: grid; }
.bandeja__cab span { color: var(--gris); }
.bandeja__correo a { justify-self: start; color: var(--azul); font-weight: 600; }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1180px) {
  .rejilla--2-1, .rejilla--1-1, .rejilla--cal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .lateral { transform: translateX(-100%); transition: transform 260ms cubic-bezier(.2, .7, .2, 1); box-shadow: 20px 0 60px rgba(6, 23, 63, .3); }
  .lateral.abierto { transform: none; }
  .lateral__cerrar { display: inline-grid; }
  .principal { margin-left: 0; }
  .barra-superior { padding: 8px 16px; min-height: 60px; }
  .barra-superior__menu { display: inline-grid; }
  .vista { padding: 18px 16px 96px; }
  .barra-inferior {
    position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--linea);
  }
  .barra-inferior a, .barra-inferior button {
    display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 10px; background: none;
    color: var(--gris); font: 600 11px/1.1 var(--fuente); text-decoration: none;
  }
  .barra-inferior a[aria-current] { color: var(--azul); background: var(--amarillo); }
  .barra-inferior .ico { width: 22px; height: 22px; }
  .acceso__marco { grid-template-columns: 1fr; }
  .acceso__marca { padding: 28px 24px 32px; gap: 24px; }
  .acceso__puntos { margin-top: 20px; }
}
@media (max-width: 640px) {
  .etiqueta-demo { display: none; }
  /* En celular solo se avisa cuando algo no se pudo guardar */
  .estado-guardado--listo, .estado-guardado--guardando { display: none; }
  .estado-guardado { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
  .barra-superior__titulo h1 { font-size: 18px; }
  .tarjeta { padding: 16px; border-radius: 14px; }
  .tarjeta--lista { padding: 0; }
  .filtros { gap: 8px; }
  .filtros__accion { margin-left: 0; }
  .filtros > .segmentado { width: 100%; }
  .navegador { width: 100%; justify-content: space-between; }
  .navegador__etq { flex: 1; min-width: 0; font-size: 14px; }
  .buscador { width: 100%; }
  .buscador__entrada { width: 100%; }
  .rejilla-kpi { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
  .tarjeta-kpi { padding: 13px 14px; gap: 6px; }
  .tarjeta-kpi__valor { font-size: 22px; }
  .tarjeta-kpi .mini { display: none; }
  .tarjeta-kpi__cab .insignia { display: none; }
  .bienvenida { grid-template-columns: 1fr; padding: 22px 18px; }
  .bienvenida__reloj { justify-items: start; text-align: left; }
  .bienvenida__resumen { grid-template-columns: 1fr 1fr; }
  .resumen-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cifra--grande { grid-column: 1 / -1; }
  .resumen-estados, .cifras { grid-template-columns: 1fr 1fr; }
  .rejilla-objetivos, .rejilla-personas { grid-template-columns: 1fr; }
  .arbol__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .arbol__hz { grid-column: 1 / -1; }
  .arbol__avance { grid-column: 1 / -1; order: 3; }
  .arbol__hijos { margin-left: 6px; padding-left: 10px; }
  .tarea { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 12px 14px; }
  .tarea > .prioridad, .tarea > .seleccion, .tarea > .fecha-limite { grid-column: 2; justify-self: start; }
  .tarea > .prioridad { margin-top: 2px; }
  .linea-tiempo { margin-left: 50px; }
  .linea-tiempo__hora { left: -50px; }
  .linea-tiempo__hora span { width: 44px; font-size: 10.5px; }
  .evento__estado { display: none; }
  .acceso h1 { font-size: 26px; }
  .acceso__puntos li { font-size: 14.5px; }
  .acceso__tarjeta { padding: 24px 20px; }
  .avisos { bottom: 84px; }
  .tabla th, .tabla td { padding: 9px 10px; }
}