/* ============================================================
   Panel Trámites — 16 MORA Y ACUERDOS (admin-mora.jsx) · zip #5 · tanda 4, 5-oct-2026
   Medidas y colores del dibujo (`Tramites v2.dc.html` #t16), con las variables de la cáscara (admin-cascara.css) y
   del panel; archivo aparte a propósito (como admin-ministerio.css): el <style> del index es lo que lo hace crecer
   (tope 12a). Prefijo `mo-`, con `.cs-main` delante para ganarle a los estilos del index, que cargan después.
   ⛔ Sin modo oscuro (el panel no lo tiene; se decide en el #6).
   ============================================================ */
.cs-main .mo { --mo-beige: #F4F1EA; --mo-rojo-f: #FBEDEA; --mo-rojo: #A43F33; --mo-ambar-f: #F5EBD3; --mo-ambar: #7A5A08;
  --mo-gris-f: #ECE9E0; --mo-verde-f: #E7EEEB; }

/* ---------- cabecera: título · «Saldos del contable · actualizados hace N min · Actualizar» · Por recuperar · pestañas ---------- */
.cs-main .mo-cab { align-items: flex-start; flex-wrap: wrap; gap: 14px 18px; margin-bottom: 18px; }
.cs-main .mo-cab__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.cs-main .mo-cab__sub.vieja { color: var(--mo-ambar); font-weight: 600; }
.cs-main .mo-cab__der { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.cs-main .mo-recuperar { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--cs-borde); border-radius: 12px; padding: 8px 16px; min-width: 150px; }
.cs-main .mo-recuperar span { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gris); }
.cs-main .mo-recuperar b { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--cs-riel); white-space: nowrap; }
.cs-main .mo-pest { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--cs-borde); border-radius: 12px; }
.cs-main .mo-pest button { border: 0; background: transparent; border-radius: 9px; padding: 9px 14px; min-height: 40px; font-family: var(--font-display);
  font-size: 13px; font-weight: 700; color: var(--cs-tinta); cursor: pointer; white-space: nowrap; }
.cs-main .mo-pest button.on { background: var(--cs-riel); color: #fff; }
.cs-main .mo-pest button:focus-visible { outline: 2px solid var(--cs-verde); outline-offset: 1px; }
.cs-main .mo-tel { display: none; }
.cs-main .mo-enlace { border: 0; background: none; padding: 0; color: var(--cs-verde); font-family: var(--font-display); font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cs-main .mo-enlace:hover { text-decoration: underline; }
.cs-main .mo-enlace:disabled { color: var(--cs-gris); cursor: default; text-decoration: none; }

/* ---------- dos columnas: la lista y, al lado, la fila abierta ---------- */
.cs-main .mo-cols { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 16px; align-items: start; }
@media (min-width: 1440px) { .cs-main .mo-cols { grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; } }
.cs-main .mo-cols.sola { grid-template-columns: minmax(0, 1fr); }
.cs-main .mo-lado { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin;
  background: #fff; border: 1px solid var(--cs-borde); border-radius: 16px; padding: 20px; }

/* ---------- la lista: una tarjeta con las 4 bandas ---------- */
.cs-main .mo-caja { background: #fff; border: 1px solid var(--cs-borde); border-radius: 14px; overflow: hidden; }
.cs-main .mo-banda + .mo-banda { border-top: 1px solid var(--cs-borde); }
.cs-main .mo-banda__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--mo-beige); }
.cs-main .mo-banda__h h2 { margin: 0; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #6B6455; }
.cs-main .mo-banda__h span { font-size: 12.5px; color: var(--cs-gris); text-align: right; }
.cs-main .mo-banda.sin_gestion .mo-banda__h { background: var(--mo-rojo-f); }
.cs-main .mo-banda.sin_gestion .mo-banda__h h2, .cs-main .mo-banda.sin_gestion .mo-banda__h span { color: var(--mo-rojo); }

.cs-main .mo-fila { border-top: 1px solid var(--cs-borde); }
.cs-main .mo-fila__l { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto 92px; align-items: center; gap: 10px;
  padding: 14px 16px; cursor: pointer; transition: background var(--dur-2, 0.15s); }
.cs-main .mo-fila__l:hover { background: #FCFBF8; }
.cs-main .mo-fila__l:focus-visible { outline: 2px solid var(--cs-verde); outline-offset: -2px; }
.cs-main .mo-fila.sel .mo-fila__l { background: #FAF8F3; box-shadow: inset 3px 0 0 var(--cs-verde); }
.cs-main .mo-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--mo-gris-f); color: var(--cs-riel); display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em; flex: none; }
.cs-main .mo-avatar.grande { width: 44px; height: 44px; font-size: 14px; }
.cs-main .mo-quien { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-main .mo-quien strong { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--cs-riel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-main .mo-quien > span { font-size: 12px; color: var(--cs-gris); line-height: 1.4; }
.cs-main .mo-monto { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--cs-riel); white-space: nowrap; text-align: right; }
.cs-main .mo-chip { justify-self: start; display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border-radius: 999px; font-family: var(--font-display);
  font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 11/800 como el dibujo (barrido 5-oct) */
.cs-main .mo-chip.red { background: var(--mo-rojo-f); color: var(--mo-rojo); }
.cs-main .mo-chip.amber { background: var(--mo-ambar-f); color: var(--mo-ambar); }
.cs-main .mo-chip.green { background: var(--mo-verde-f); color: var(--cs-riel); }
.cs-main .mo-chip.gray { background: var(--mo-gris-f); color: #6B6455; }
.cs-main .mo-fila__acc { display: flex; justify-content: flex-end; }
.cs-main .mo-fila__acc .a-btn { width: 100%; justify-content: center; padding: 9px 12px; font-size: 13px; }
.cs-main .mo a.a-btn { text-decoration: none; }
.cs-main .mo-vigilar { width: 100%; text-align: center; font-size: 13px; color: var(--cs-gris); }
.cs-main .mo-fila.tenue .mo-quien strong, .cs-main .mo-fila.tenue .mo-monto { color: #6B6455; }
.cs-main .mo-fila.tenue .mo-avatar { opacity: 0.75; }
.cs-main .mo-mas { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--cs-borde); background: #FCFBF8; font-size: 13px; color: var(--cs-gris); }
.cs-main .mo-mas .mo-enlace { margin-left: auto; }
.cs-main .mo-aviso { display: flex; align-items: center; gap: 7px; margin: 0 18px 12px; padding: 8px 12px; border-radius: 9px; background: var(--mo-rojo-f);
  color: var(--mo-rojo); font-size: 13px; font-weight: 600; }

/* ---------- la fila abierta ---------- */
.cs-main .mo-det { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cs-main .mo-volver { align-self: flex-start; }
.cs-main .mo-det__cab { display: flex; align-items: center; gap: 12px; }
.cs-main .mo-det__cab strong { font-size: 16px; }
.cs-main .mo-saldo { display: flex; flex-direction: column; gap: 6px; background: var(--mo-beige); border-radius: 12px; padding: 12px 16px; }
.cs-main .mo-saldo__r { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gris); }
.cs-main .mo-saldo.vieja .mo-saldo__r { color: var(--mo-ambar); }
.cs-main .mo-saldo__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.cs-main .mo-saldo__v b { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--cs-riel); white-space: nowrap; }
.cs-main .mo-saldo__v span { font-size: 12.5px; color: var(--cs-gris); }
.cs-main .mo-saldo__no { font-size: 13.5px; color: #6B6455; }
.cs-main .mo-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-main .mo-contacto .a-btn { justify-content: center; gap: 8px; min-height: 46px; font-size: 14px; }
.cs-main .mo-contacto .a-btn.ghost svg { color: var(--cs-verde); }
.cs-main .mo-det .mo-aviso { margin: 0; }
.cs-main .mo-que { display: flex; flex-direction: column; gap: 8px; }
.cs-main .mo-que__h { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--mo-verde-f);
  font-size: 13px; color: #44514C; line-height: 1.45; }
.cs-main .mo-que__punto { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 3px; background: var(--cs-verde); }
.cs-main .mo-que__acc { display: flex; justify-content: flex-end; }
.cs-main .mo-texto { width: 100%; box-sizing: border-box; border: 1px solid var(--cs-borde); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px;
  color: var(--cs-tinta); background: #fff; resize: vertical; }
.cs-main .mo-texto:focus { outline: none; border-color: var(--cs-verde); box-shadow: 0 0 0 3px rgba(60, 126, 103, 0.15); }

.cs-main .mo-pacto { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--cs-borde); }
.cs-main .mo-pacto h3 { margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--cs-riel); }
.cs-main .mo-pacto.gerencia h3 { color: #6B6455; }
.cs-main .mo-pacto__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-main .mo-pacto__campos.uno { grid-template-columns: 1fr; }
.cs-main .mo-pacto__monto { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 10px 14px; border-radius: 10px; background: var(--mo-beige);
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--cs-riel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-main .mo-pacto__fecha { min-height: 44px; box-sizing: border-box; width: 100%; padding: 9px 12px; border: 1px solid var(--cs-borde); border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--cs-tinta); background: #fff; }
.cs-main .mo-pacto__fecha:focus { outline: none; border-color: var(--cs-verde); box-shadow: 0 0 0 3px rgba(60, 126, 103, 0.15); }
.cs-main .mo-ayuda { margin: 0; font-size: 12px; color: var(--cs-gris); line-height: 1.5; text-wrap: pretty; }
.cs-main .mo-ayuda.fuerte { font-size: 13.5px; color: var(--cs-tinta); }
.cs-main .mo-pacto__acc { display: flex; gap: 10px; }
.cs-main .mo-boton { flex: 1; justify-content: center; min-height: 46px; font-size: 14px; white-space: normal; text-align: center; }
.cs-main .mo-pacto .a-btn.primary.mo-boton { background: var(--cs-verde); }
.cs-main .mo-pacto .a-btn.primary.mo-boton:hover:not(:disabled) { background: #33705B; }
.cs-main .mo-nada { margin: 0; padding-top: 14px; border-top: 1px solid var(--cs-borde); font-size: 13px; color: var(--cs-gris); }
.cs-main .mo-error { margin: 0; color: var(--mo-rojo); font-size: 13px; font-weight: 600; }

.cs-main .mo-conv { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--cs-borde); }
.cs-main .mo-conv h3 { margin: 0; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-gris); }
.cs-main .mo-conv .mo-nada { padding: 0; border: 0; }
.cs-main .mo-conv__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-main .mo-linea { display: flex; gap: 10px; }
.cs-main .mo-linea__ic { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--mo-verde-f); color: var(--cs-verde); display: inline-flex; align-items: center; justify-content: center; }
.cs-main .mo-linea.sistema .mo-linea__ic { background: var(--mo-gris-f); color: #6B6455; }
.cs-main .mo-linea.roja .mo-linea__ic { background: var(--mo-rojo-f); color: var(--mo-rojo); }
.cs-main .mo-linea__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-main .mo-linea__h { font-size: 12px; color: var(--cs-gris); }
.cs-main .mo-linea__n { font-size: 13.5px; color: var(--cs-tinta); line-height: 1.45; overflow-wrap: anywhere; }
.cs-main .mo-linea__que { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cs-main .mo-linea__que .mo-texto { flex: 1 1 150px; padding: 7px 10px; }
.cs-main .mo-anotar { align-self: flex-start; }
.cs-main .mo-form { display: flex; flex-direction: column; gap: 6px; }
.cs-main .mo-lab { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--cs-riel); }
.cs-main .mo-lab span { font-weight: 400; color: var(--cs-gris); }
.cs-main .mo-form__acc { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Hoy (admin-hoy.jsx, grupo 6): «Llamar» es un enlace (abre el marcador) y su aviso si no quedó anotada ---------- */
.cs-main .hoy-fila__acc a.a-btn { text-decoration: none; }
.cs-main .hoy-fila__aviso { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px;
  background: #FBEDEA; color: #A43F33; font-size: 13px; font-weight: 600; }

/* ---------- 861–1100 px: una columna (la fila abierta reemplaza a la lista, con «Volver a la lista») ---------- */
@media (max-width: 1100px) {
  .cs-main .mo-cols { grid-template-columns: minmax(0, 1fr); }
  .cs-main .mo--detalle .mo-det { max-width: 640px; }
}

/* ---------- teléfono (≤ 860 px): la barra verde dice el título; filas apiladas con la acción al ancho ---------- */
@media (max-width: 860px) {
  .cs-main .mo-web { display: none; }
  .cs-main .mo-tel { display: inline; }
  .cs-main .mo-cab h1 { display: none; }
  /* la cáscara esconde la cabecera de la página cuando hay barra verde (el título ya está en ella); la de 16 lleva la
     hora de los saldos, «Por recuperar» y las pestañas, así que se queda (sin su título) */
  body.cs-top-propia .cs-main .cs-cab.mo-cab { display: flex; }
  .cs-main .mo-cab { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
  .cs-main .mo-cab__der { flex-direction: column; align-items: stretch; gap: 10px; }
  .cs-main .mo-recuperar { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .cs-main .mo-pest { display: grid; grid-template-columns: 1fr 1fr; }
  .cs-main .mo-pest button { min-height: 44px; padding: 8px 6px; }
  .cs-main .mo-banda__h { flex-wrap: wrap; padding: 10px 14px; }
  .cs-main .mo-banda__h span { text-align: left; }
  .cs-main .mo-fila__l { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px 14px; }
  .cs-main .mo-chip { grid-column: 2 / -1; }
  .cs-main .mo-fila__acc { grid-column: 1 / -1; }
  .cs-main .mo-fila__acc .a-btn, .cs-main .mo-vigilar { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .cs-main .mo-aviso { margin: 0 14px 12px; }
  .cs-main .mo-volver { display: none; }
  .cs-main .mo-det__cab { display: none; }
  .cs-main .mo-saldo { background: #fff; border: 1px solid var(--cs-borde); }
  .cs-main .mo-contacto .a-btn { min-height: 52px; font-size: 15px; }
  .cs-main .mo-pacto { background: #fff; border: 1px solid var(--cs-borde); border-radius: 12px; padding: 14px 16px; }
  .cs-main .mo-pacto__acc.cs-pie-fijo { margin: 0; }
  .cs-main .mo-pacto__acc .a-btn { min-height: 52px; }
  .cs-main .mo-nada { border: 0; padding-top: 0; }
}