:root {
  --fondo: #f4f5f7; --panel: #ffffff; --borde: #dfe1e6; --texto: #1f2328; --suave: #5f6670; --acento: #2f5bd3;
  --ok: #1f8a4c; --alerta: #b7791f; --error: #c0392b; --pend: #7a5af8; --curso: #2f5bd3; --fin: #1f8a4c; --rech: #8a8f98;
  --sel: #eef2fd; --campo: #ffffff; --codigo: #fafbfc; --hover: #f8f9fb; --okfondo: #eef7f1; --errfondo: #fdeceb; --toast: #1f2328;
  color-scheme: light;
}
/* Tema oscuro (por defecto) */
:root[data-tema="oscuro"] {
  --fondo: #15171c; --panel: #1d2027; --borde: #30343d; --texto: #dfe2e8; --suave: #979ca8; --acento: #5b82f0;
  --ok: #4cc07e; --alerta: #d9a441; --error: #ef6b5e; --pend: #a38bff; --curso: #6f93f5; --fin: #4cc07e; --rech: #8a8f98;
  --sel: #252c3d; --campo: #161920; --codigo: #161920; --hover: #22252d; --okfondo: #1b3326; --errfondo: #3a2020; --toast: #2b2f38;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--texto); background: var(--fondo); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--borde); background: var(--panel); border-radius: 6px; padding: 6px 12px; }
button:hover { border-color: var(--acento); }
button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.peligro { color: var(--error); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { border: 1px solid var(--borde); border-radius: 6px; padding: 6px 8px; background: var(--campo); width: 100%; }
textarea { resize: vertical; min-height: 70px; }
label { display: block; font-size: 12px; color: var(--suave); margin: 8px 0 3px; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin: 18px 0 8px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: 12px; color: var(--suave); font-weight: 600; }
td.n, th.n { text-align: right; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; font: 13px/1.45 Consolas, "Courier New", monospace; background: var(--codigo); border: 1px solid var(--borde); border-radius: 6px; padding: 10px; max-height: 360px; overflow: auto; }

/* login */
.centro { min-height: 100%; display: flex; align-items: center; justify-content: center; }
.caja { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 24px; width: 340px; }
.caja h1 { font-size: 18px; margin: 0 0 4px; }
.caja p { color: var(--suave); margin: 0 0 12px; }
.caja button { width: 100%; margin-top: 14px; }
.msg-error { color: var(--error); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* cabecera */
header { display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 50px; background: var(--panel); border-bottom: 1px solid var(--borde); }
header .marca { font-weight: 700; }
nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; min-width: 0; }
nav button { border: 0; background: none; border-radius: 0; padding: 14px 12px; border-bottom: 2px solid transparent; color: var(--suave); white-space: nowrap; }
nav button.on { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
.estado-puente { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--okfondo); color: var(--ok); white-space: nowrap; }
.estado-puente.mal { background: var(--errfondo); color: var(--error); }
.usuario { font-size: 13px; color: var(--suave); white-space: nowrap; }

#vApp { height: 100%; display: flex; flex-direction: column; }
header { flex: 0 0 auto; }
main { flex: 1; min-height: 0; overflow: auto; }
.vista { padding: 16px; }
.vista.bandeja { display: grid; grid-template-columns: minmax(380px, 42%) 1fr; grid-template-rows: 100%; gap: 0; padding: 0; height: 100%; overflow: hidden; }

/* bandeja */
.lista { border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.filtros { padding: 10px; border-bottom: 1px solid var(--borde); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.filtros .ancho { grid-column: 1 / -1; }
.filtros input, .filtros select { padding: 5px 6px; font-size: 13px; }
.filtros .acciones { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--suave); }
.filtros .acciones span { flex: 1; }
.filas { overflow: auto; flex: 1; min-height: 0; }
.fila { padding: 9px 12px; border-bottom: 1px solid var(--borde); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.fila:hover { background: var(--hover); }
.fila.sel { background: var(--sel); }
.fila .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .s { font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila .d { font-size: 12px; color: var(--suave); text-align: right; white-space: nowrap; }
.vacio { padding: 30px; text-align: center; color: var(--suave); }

.chip { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--borde); color: var(--suave); margin-right: 4px; white-space: nowrap; }
.chip.Pendiente { color: var(--pend); border-color: var(--pend); }
.chip.En.curso, .chip.EnCurso { color: var(--curso); border-color: var(--curso); }
.chip.Finalizado { color: var(--fin); border-color: var(--fin); }
.chip.Rechazado { color: var(--rech); border-color: var(--rech); }
.chip.nueva { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.chip.warn { color: var(--alerta); border-color: var(--alerta); }

/* detalle */
.detalle { overflow: auto; padding: 16px 20px; min-height: 0; }
.detalle .cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.detalle .cab h2 { margin: 0; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin-top: 12px; }
.datos div small { display: block; font-size: 11px; color: var(--suave); }
.bloque { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 12px 14px; margin-top: 14px; }
.bloque h3 { margin-top: 0; }
.form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form2 .ancho { grid-column: 1 / -1; }
.botones { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.aviso { font-size: 12px; color: var(--suave); margin-top: 6px; }
.aviso.warn { color: var(--alerta); }
.msj { border-left: 3px solid var(--borde); padding: 6px 10px; margin: 8px 0; }
.msj.enviado { border-left-color: var(--acento); }
.msj.recibido { border-left-color: var(--alerta); }
.msj .meta { font-size: 12px; color: var(--suave); margin-bottom: 4px; }
.msj details summary { cursor: pointer; font-size: 12px; color: var(--acento); }
.nota { border-bottom: 1px solid var(--borde); padding: 6px 0; }
.nota .meta { font-size: 12px; color: var(--suave); }

/* métricas */
.rangos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.rangos button.on { background: var(--acento); color: #fff; border-color: var(--acento); }
.rangos input { width: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; }
.kpi small { display: block; color: var(--suave); font-size: 12px; }
.kpi b { font-size: 22px; }
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.barra { height: 8px; background: var(--acento); border-radius: 4px; min-width: 2px; }
td.b { width: 45%; }

/* tablas de administración */
.admin { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; }
.admin .bloque { margin-top: 0; }
.dias { display: flex; gap: 4px; flex-wrap: wrap; }
.dias label { display: inline-flex; gap: 3px; align-items: center; margin: 0; font-size: 13px; color: var(--texto); }
.dias input { width: auto; }
.inactivo { color: var(--rech); }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--toast); color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 13px; z-index: 9; max-width: 90%; }
.toast.error { background: var(--error); }

@media (max-width: 900px) {
  .vista.bandeja { grid-template-columns: 1fr; height: auto; }
  .lista { max-height: 50vh; }
  .admin { grid-template-columns: 1fr; }
}

#bTema { padding: 5px 9px; }
a { color: var(--acento); }

/* fuentes con color */
.chip.f-CAT { background: #f5c542; border-color: #f5c542; color: #3a2c00; }
.chip.f-Tienda { background: #3fb56b; border-color: #3fb56b; color: #06240f; }
.chip.f-Mesa { background: #5b82f0; border-color: #5b82f0; color: #fff; }
.chip.f-Interno { background: #a38bff; border-color: #a38bff; color: #1b0f45; }
.chip.f-Ticket { background: #3cc4c4; border-color: #3cc4c4; color: #062b2b; }
.chip.f-Otro { background: #8a8f98; border-color: #8a8f98; color: #fff; }

/* mis asignados */
.mios { padding: 8px 10px; border-bottom: 1px solid var(--borde); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.mios b { margin-right: 4px; }
.mios button { padding: 3px 10px; font-size: 12px; border-radius: 99px; }
.mios button.on { background: var(--acento); border-color: var(--acento); color: #fff; }

/* horario por día */
table.horario td { padding: 3px 4px; border: 0; }
table.horario input[type=time] { padding: 3px 6px; }
table.horario input[type=checkbox] { width: auto; }
table.horario .dia { width: 64px; white-space: nowrap; }
table.horario .dia label { white-space: nowrap; }

/* modal */
.modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 20px; width: min(460px, 92vw); }
.modal p { color: var(--suave); margin: 0 0 6px; }
.cc-ayuda { font-size: 12px; color: var(--suave); }

.mios .sep { width: 1px; height: 18px; background: var(--borde); margin: 0 4px; }

/* estado del puente */
.estado-puente.warn, .estado-puente.proc { background: color-mix(in srgb, var(--alerta) 18%, transparent); color: var(--alerta); }
.estado-puente { display: inline-flex; align-items: center; gap: 6px; }
.aviso-puente { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--borde); background: color-mix(in srgb, var(--alerta) 14%, transparent); color: var(--alerta); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aviso-puente.mal { background: var(--errfondo); color: var(--error); }
.aviso-puente div { flex-basis: 100%; }
.giro { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: giro .8s linear infinite; flex: 0 0 auto; }
@keyframes giro { to { transform: rotate(360deg); } }

.aviso-puente button { padding: 2px 10px; font-size: 12px; margin-left: auto; }

/* en línea */
.en-linea { font-size: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--borde); color: var(--suave); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.en-linea .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
/* ausencias */
.ausencia { display: grid; grid-template-columns: 1fr 1fr auto 1fr; gap: 6px; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--borde); }
.ausencia .aMotivo { grid-column: 1 / 4; }
.ausencia button { padding: 4px 8px; justify-self: end; }
#uAusAgregar { margin-top: 4px; font-size: 12px; }
.rangos .excel { margin-left: auto; }
code { background: var(--codigo); border: 1px solid var(--borde); border-radius: 4px; padding: 0 4px; font-size: 12px; }

.chip.urgente { background: var(--error); border-color: var(--error); color: #fff; font-weight: 700; }

.fila .mov{font-weight:600}

.aviso-resp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aviso-resp button{margin-left:auto}
.carga-excel{align-items:center;flex-wrap:wrap;margin:4px 0 8px}
.carga-excel .aviso{margin:0}
.cc-zona{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:6px 0 10px}
.cc-zona > span:first-child{font-size:.85em;opacity:.8}
.cc-zona .aviso{margin:0;flex-basis:100%}
.ancho-zona{grid-column:span 2}
.zona-op span{display:inline-flex;flex-direction:column;line-height:1.2}
.zona-op small{opacity:.7;font-size:.8em}
.zona-detalle{flex-basis:100%;font-size:.88em;max-height:220px;overflow:auto}
.zona-detalle > div{padding:2px 0}
.zona-detalle small{opacity:.7}

/* divisor entre lista y detalle */
.vista.bandeja { grid-template-columns: var(--ancho-lista, minmax(380px, 42%)) 6px 1fr; }
.divisor { cursor: col-resize; background: var(--borde); opacity: .5; transition: opacity .15s, background .15s; }
.divisor:hover, body.arrastrando .divisor { opacity: 1; background: var(--acento); }
body.arrastrando { cursor: col-resize; user-select: none; }
@media (max-width: 900px) { .divisor { display: none; } }

/* scorecard (opción A) */
.mios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; }
.mios .kpi { display: flex; flex-direction: column; align-items: flex-start; text-align: left; border-radius: 8px; border: 1px solid var(--borde); border-left: 4px solid var(--c); background: var(--hover); padding: 8px 10px; min-width: 0; }
.mios .kpi:hover, .mios .kpi.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; background: var(--sel); }
.mios .kpi .n { font-size: 24px; font-weight: 700; color: var(--c); line-height: 1; }
.mios .kpi .l { font-size: 12px; color: var(--texto); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mios .kpi .s { font-size: 11px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mios .kpi-limpiar { grid-column: 1 / -1; justify-self: start; font-size: 12px; padding: 2px 10px; border-radius: 99px; }

/* botón Hoy */
#bHoy.hoy { font-weight: 600; padding: 6px 14px; font-size: 14px; }
#bHoy.hoy.on { background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent); }

/* referencias */
.refs { max-width: 1000px; margin: 16px; }
.tabla-refs td { vertical-align: middle; }
.tabla-refs .rf-chip { width: 120px; }
.tabla-refs input.rfClave { margin-top: 4px; max-width: 140px; }
.tabla-refs textarea { min-height: 44px; }
.mios .kpi.on { color: var(--texto); }
.tabla-refs tr[data-i] td:nth-child(1) { width: 230px; white-space: nowrap; }
.tabla-refs tr[data-i] td:nth-child(2) { width: 150px; }
.tabla-refs tr[data-i] td:nth-child(4) { width: 80px; }
.tabla-refs input.rfClave { display: inline-block; width: 130px; margin: 0 0 0 6px; }
.tabla-refs textarea.rfDesc { min-height: 54px; }

/* filtros rápidos + contador */
.filtros .acciones #cuenta { font-size: 13px; color: var(--suave); }
.filtros .acciones #cuenta b { font-size: 20px; color: var(--texto); margin-right: 2px; }
.filtros .acciones #cuenta span { flex: none; }
.rapidos { display: inline-flex; flex: none !important; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.rapidos .rapido { border: 0; border-radius: 0; border-right: 1px solid var(--borde); font-weight: 600; padding: 6px 12px; font-size: 13px; background: var(--panel); }
.rapidos .rapido:last-child { border-right: 0; }
.rapidos .rapido b { display: inline-block; min-width: 22px; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: var(--hover); font-size: 12px; }
.rapidos .rapido.on { background: var(--acento); color: #fff; }
.rapidos .rapido.on b { background: rgba(255,255,255,.25); color: #fff; }
.filtros .acciones { flex-wrap: wrap; row-gap: 8px; }
.filtros .acciones #cuenta { flex: 1 1 100%; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; }
.filtros .acciones #cuenta span { overflow: hidden; text-overflow: ellipsis; }
.filtros .acciones .rapidos { margin-right: auto; }

/* ===== detalle del caso: opción B (conversación + barra lateral) ===== */
.detalle { padding: 0; display: flex; flex-direction: column; }
.c2-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--borde); background: var(--panel); position: sticky; top: 0; z-index: 2; }
.c2-cab h2 { margin: 0 0 6px; font-size: 17px; }
.c2-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.c2-chips .sub, .sub { color: var(--suave); font-size: 12px; }
.c2-acc { display: flex; gap: 8px; align-items: center; flex: none; }
.boton-link { display: inline-block; border: 1px solid var(--borde); border-radius: 6px; padding: 6px 12px; text-decoration: none; color: var(--texto); font-size: 13px; }
.boton-link:hover { border-color: var(--acento); }
.c2-franja { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 18px; background: color-mix(in srgb, var(--alerta) 18%, var(--panel)); border-bottom: 1px solid var(--borde); font-size: 13px; }
.c2-franja.gris { background: var(--hover); color: var(--suave); }
.c2-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 290px; flex: 1; min-height: 0; }
.c2-izq { padding: 14px 18px; min-width: 0; }
.c2-der { border-left: 1px solid var(--borde); background: var(--hover); padding: 14px 16px; font-size: 13px; }
.c2-tl .msj, .c2-tl .nota-tl { margin: 0 0 10px; }
.msj.original { border-left: 3px solid #f5c542; padding: 8px 12px; background: var(--codigo); border-radius: 0 8px 8px 0; }
.msj.original pre { margin: 6px 0 0; }
.nota-tl { background: color-mix(in srgb, var(--alerta) 12%, var(--panel)); border: 1px dashed color-mix(in srgb, var(--alerta) 60%, transparent); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.nota-tl .meta { font-size: 12px; color: var(--alerta); margin-bottom: 3px; }
.c2-comp { border: 1px solid var(--borde); border-radius: 10px; margin-top: 16px; background: var(--panel); overflow: hidden; }
.c2-comp-tabs { display: flex; border-bottom: 1px solid var(--borde); }
.c2-comp-tabs button { border: 0; border-radius: 0; background: transparent; padding: 9px 14px; color: var(--suave); border-bottom: 2px solid transparent; }
.c2-comp-tabs button.on { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
.c2-modo { padding: 10px 12px; }
.c2-modo label { margin: 4px 0; }
.c2-modo label input, .c2-modo label select { margin-top: 3px; }
.c2-fila { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; }
.c2-modo textarea { margin-top: 6px; min-height: 110px; }
.c2-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.c2-pie .dias { margin: 0; }
.c2-props label { margin: 0 0 10px; }
.c2-props label select, .c2-props label input:not([type=checkbox]) { margin-top: 3px; }
.c2-props button { width: 100%; margin: 4px 0 6px; }
.c2-sec { border-top: 1px solid var(--borde); padding-top: 10px; margin-top: 10px; }
.c2-props + .c2-sec { margin-top: 4px; }
.c2-sec h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.c2-dato { margin-bottom: 8px; }
.c2-dato small { display: block; font-size: 11px; color: var(--suave); }
.c2-sup { margin-bottom: 6px; }
.c2-hist { font-size: 12px; max-height: 200px; overflow: auto; }
.c2-hist div { padding: 3px 0; border-bottom: 1px dotted var(--borde); }
@media (max-width: 1250px) { .c2-cuerpo { grid-template-columns: 1fr; } .c2-der { border-left: 0; border-top: 1px solid var(--borde); } }

/* CC con selector */
.cc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 6px; padding: 5px 8px; background: var(--campo); margin-top: 8px; }
.cc-lbl { font-size: 12px; color: var(--suave); }
.cc-chips { display: contents; }
.cc-chip { background: var(--sel); border: 1px solid var(--acento); border-radius: 99px; padding: 1px 4px 1px 9px; font-size: 12px; }
.cc-chip b { cursor: pointer; margin-left: 4px; padding: 0 4px; color: var(--suave); }
.cc-chip b:hover { color: var(--error); }
.cc-pick select.cc-add { width: auto; border: 0; background: transparent; color: var(--acento); padding: 2px; }
.cc-pick input.cc-libre { flex: 1; min-width: 180px; border: 0; background: transparent; padding: 2px; }

/* vista En espera */
.esp-int { padding: 10px 12px; font-size: 12px; color: var(--suave); border-bottom: 1px solid var(--borde); }
.dias { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; color: #fff; }
.dias.verde { background: var(--ok); } .dias.amarillo { background: var(--alerta); } .dias.rojo { background: var(--error); }
.mios { grid-template-columns: repeat(5, 1fr); }
/* todo lo que sale de la casilla (desde la app o desde Gmail) va en azul; lo que llega, en amarillo */
.msj.enviado { border-left: 3px solid var(--acento) !important; background: color-mix(in srgb, var(--acento) 8%, var(--codigo)); border-radius: 0 8px 8px 0; padding: 8px 12px; }
.msj.recibido { border-left: 3px solid var(--alerta) !important; border-radius: 0 8px 8px 0; padding: 8px 12px; }
.msj.original.de-mesa { border-left-color: var(--acento) !important; background: color-mix(in srgb, var(--acento) 8%, var(--codigo)); }
.c2-tl-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin-bottom: 6px; }
.c2-plegar { display: block; width: 100%; text-align: left; margin: 4px 0 10px; padding: 9px 12px; border: 1px dashed var(--acento); border-radius: 8px; background: color-mix(in srgb, var(--acento) 8%, var(--panel)); color: var(--acento); font-weight: 600; }
.c2-plegar:hover { background: color-mix(in srgb, var(--acento) 16%, var(--panel)); }
.c2-viejos { border-left: 2px solid var(--borde); padding-left: 10px; margin-bottom: 6px; }
.msj.recibido.interno { border-left-color: var(--pend) !important; background: color-mix(in srgb, var(--pend) 7%, var(--codigo)); }
.esp-limpiar { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--texto); }
.esp-limpiar input { width: 60px; padding: 3px 6px; }
.esp-limpiar button { padding: 3px 10px; font-size: 12px; }
.guia-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.guia-cab h3 { margin: 0; }
.guia-cab span { display: flex; gap: 8px; }
.guia-pdf { width: 100%; height: 78vh; min-height: 520px; border: 1px solid var(--borde); border-radius: 8px; margin: 10px 0 6px; background: #fff; }
.vista#tab-referencias { overflow: auto; }

/* ---- v2: puente GitHub ---- */
.marca-v2 { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--alerta) 18%, transparent); color: var(--alerta); vertical-align: middle; }
button.estado-puente { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.panel-github { flex: 0 0 auto; padding: 12px 16px; border-bottom: 1px solid var(--borde); font-size: 13px; }
.panel-github .gh-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.panel-github .gh-bloque { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; }
.panel-github h3 { margin: 0 0 6px; font-size: 13px; }
.panel-github dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 0; }
.panel-github dt { color: var(--suave); }
.panel-github dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.panel-github dd.mal { color: var(--error); font-weight: 600; }
.panel-github dd.warn { color: var(--alerta); font-weight: 600; }
.panel-github dd.ok { color: var(--ok); font-weight: 600; }
.panel-github .gh-pie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; color: var(--suave); }
.panel-github .gh-pie button { padding: 2px 10px; font-size: 12px; }
.panel-github .gh-errores { margin-top: 8px; color: var(--error); white-space: pre-wrap; }

/* ---- v2: grupos de copia ---- */
.cc-chip-grupo { background: color-mix(in srgb, var(--alerta) 16%, transparent); font-weight: 600; }
.cc-pick select.cc-grupo { width: auto; max-width: 180px; border: 0; background: transparent; color: var(--acento); padding: 2px; }
#tab-grupos td.sub { max-width: 420px; font-size: 12px; }
#tab-grupos .acciones-fila { white-space: nowrap; }
#grEmails { width: 100%; font-family: inherit; }

/* ---- v2: menú que se acomoda en pantallas angostas (notebook) ---- */
header { height: auto; min-height: 50px; flex-wrap: wrap; row-gap: 0; }
@media (max-width: 1500px) {
  header .marca { margin-right: auto; }
  nav#tabs { order: 10; flex-basis: 100%; border-top: 1px solid var(--borde); margin: 0 -16px; padding: 0 8px; }
  nav button { padding: 10px 12px; }
}

/* ---- v2: guía en Referencias (solo lectura) ---- */
.guia2 { max-width: 1100px; }
.guia2 .bloque { margin-bottom: 16px; }
.guia2 h3 { margin-top: 0; }
.guia2 h4 { margin: 14px 0 6px; font-size: 13px; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.g-lead { margin: 0 0 12px; color: var(--suave); }
.g-reglas { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: regla; }
.g-reglas li { counter-increment: regla; display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.g-reglas li::before { content: counter(regla); width: 24px; height: 24px; border-radius: 50%; background: var(--acento); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.g-q b { display: block; }
.g-q small { color: var(--suave); }
.g-r { padding-left: 12px; border-left: 2px solid var(--acento); }
.g-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.g-card { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 14px; }
.g-card h4 { margin-top: 2px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--texto); }
.g-card p { margin: 6px 0; }
.g-ciclo { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.g-ciclo > div { flex: 1 1 160px; border: 1px solid var(--borde); border-radius: 8px; padding: 10px; }
.g-ciclo small { display: block; margin-top: 6px; color: var(--suave); }
.g-flecha { align-self: center; color: var(--suave); font-size: 18px; }
.g-lista { margin: 0; padding-left: 20px; }
.g-lista li { margin: 6px 0; }
.g-azul { color: var(--curso); } .g-amarillo { color: var(--alerta); } .g-violeta { color: var(--pend); }
@media (max-width: 760px) { .g-reglas li { grid-template-columns: 28px 1fr; } .g-r { grid-column: 2; } }
.guia2 .tabla-refs td.rf-chip { white-space: nowrap; width: 150px; }