/* Pagos a EPS (T19). Estilos del mockup aprobado, limitados a la sección. */
#seccion-pagos-eps {  --menu:#1a2742; --fondo:#F4F5F7; --linea:#E7E9EE; --fila-alterna:#F8F9FB; --tinta:#0F172A; --tinta-2:#475467; --tinta-3:#667085;
  --apagado-fondo:#EEF0F3; --marca:#3B5BFD; --marca-suave:#ECF0FF; --marca-tinta:#2A3FC4;
  --bien:#15803D; --bien-fondo:#DCFCE7; --atencion:#B45309; --atencion-fondo:#FEF3C7; --problema:#B91C1C; --problema-fondo:#FEE2E2;
  --fuente:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;  }
#seccion-pagos-eps .encab { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
#seccion-pagos-eps .sub { color:var(--tinta-3); margin:0; }
#seccion-pagos-eps h2 { font-size:15px; font-weight:600; margin:0; }
#seccion-pagos-eps .btn { font:inherit; font-weight:600; font-size:13.5px; padding:8px 14px; border-radius:10px; border:1px solid var(--linea); background:#fff; color:var(--tinta); cursor:pointer; text-decoration:none; display:inline-block; white-space:nowrap; }
#seccion-pagos-eps .btn.prim { background:var(--marca); border-color:var(--marca); color:#fff; }
#seccion-pagos-eps .btn:focus-visible, #seccion-pagos-eps input:focus-visible, #seccion-pagos-eps select:focus-visible, #seccion-pagos-eps button:focus-visible { outline:3px solid var(--marca-suave); outline-offset:1px; }
#seccion-pagos-eps .regla { background:#fff; border:1px solid var(--linea); border-left:3px solid var(--marca); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--tinta-2); margin-bottom:16px; }
#seccion-pagos-eps .regla b { color:var(--tinta); font-weight:600; }
#seccion-pagos-eps .regla p { margin:0; }
#seccion-pagos-eps .regla p + p { margin-top:6px; }
#seccion-pagos-eps .tarjeta { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:18px; margin-bottom:16px; min-width:0; }
#seccion-pagos-eps .cab { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
#seccion-pagos-eps .cab small { font-size:12.5px; color:var(--tinta-3); }
#seccion-pagos-eps .nota { font-size:12.5px; color:var(--tinta-3); margin:10px 0 0; }
#seccion-pagos-eps .pildoras { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px; }
#seccion-pagos-eps .pildoras button { font:inherit; font-size:13px; padding:6px 12px; border-radius:999px; border:1px solid transparent; background:none; color:var(--tinta-2); cursor:pointer; }
#seccion-pagos-eps .pildoras button[aria-pressed="true"] { background:var(--menu); color:#fff; }
#seccion-pagos-eps .cod { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; }
#seccion-pagos-eps .tabla-wrap { border:1px solid var(--linea); border-radius:10px; overflow:hidden; }
#seccion-pagos-eps table.t { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:13px; font-variant-numeric:tabular-nums; }
#seccion-pagos-eps .t th, #seccion-pagos-eps .t td { padding:9px 10px; border-bottom:1px solid var(--linea); text-align:left; vertical-align:middle; overflow-wrap:anywhere; }
#seccion-pagos-eps .t tbody tr:last-child td { border-bottom:0; }
#seccion-pagos-eps .t thead th { font-size:12px; font-weight:500; color:var(--tinta-3); }
#seccion-pagos-eps .t .num { text-align:right; white-space:nowrap; overflow-wrap:normal; }
#seccion-pagos-eps .t tr.fila { cursor:pointer; }
#seccion-pagos-eps .t tr.fila.sel td { background:var(--marca-suave); }
#seccion-pagos-eps .t tr.grupo td { background:var(--fila-alterna); font-weight:600; }
#seccion-pagos-eps .t .ejemplo { font-size:11.5px; color:var(--tinta-3); font-weight:400; display:block; }
#seccion-pagos-eps col.l-cod { width:200px; }
#seccion-pagos-eps col.l-fec { width:66px; }
#seccion-pagos-eps col.l-ag { width:80px; }
#seccion-pagos-eps col.l-ban { width:92px; }
#seccion-pagos-eps col.l-mon { width:124px; }
#seccion-pagos-eps col.l-est { width:148px; }
#seccion-pagos-eps col.c-cua { width:128px; }
#seccion-pagos-eps col.c-qui { width:150px; }
#seccion-pagos-eps .etq { display:inline-block; min-width:124px; text-align:center; font-size:12px; font-weight:500; padding:3px 8px; border-radius:999px; background:var(--apagado-fondo); color:var(--tinta-2); white-space:nowrap; }
#seccion-pagos-eps .etq.bien { background:var(--bien-fondo); color:var(--bien); }
#seccion-pagos-eps .etq.atencion { background:var(--atencion-fondo); color:var(--atencion); }
#seccion-pagos-eps .etq.problema { background:var(--problema-fondo); color:var(--problema); }
#seccion-pagos-eps .solo-cel { display:none; }
#seccion-pagos-eps .pasos { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; margin:0 0 14px; padding:0; list-style:none; }
#seccion-pagos-eps .pasos li { position:relative; padding:0 10px 0 0; font-size:13px; min-width:0; }
#seccion-pagos-eps .pasos i { display:block; height:6px; border-radius:999px; background:var(--apagado-fondo); margin-bottom:8px; }
#seccion-pagos-eps .pasos li.ok i { background:var(--marca); }
#seccion-pagos-eps .pasos li.fin i { background:var(--bien); }
#seccion-pagos-eps .pasos b { display:block; font-weight:600; }
#seccion-pagos-eps .pasos span { display:block; font-size:12px; color:var(--tinta-3); font-variant-numeric:tabular-nums; }
#seccion-pagos-eps .datos { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 14px; margin:0 0 14px; }
#seccion-pagos-eps .datos div { min-width:0; }
#seccion-pagos-eps .datos dt { font-size:12px; color:var(--tinta-3); }
#seccion-pagos-eps .datos dd { margin:0; font-weight:500; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#seccion-pagos-eps .dos { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:start; }
#seccion-pagos-eps .seccion-det { margin-top:14px; }
#seccion-pagos-eps .seccion-det h3 { font-size:13px; font-weight:600; margin:0 0 8px; }
#seccion-pagos-eps .adj { display:flex; flex-wrap:wrap; gap:6px; }
#seccion-pagos-eps .adj span { font-size:12.5px; padding:5px 9px; border:1px solid var(--linea); border-radius:8px; background:var(--fila-alterna); overflow-wrap:anywhere; min-width:0; }
#seccion-pagos-eps .campo { display:block; min-width:0; }
#seccion-pagos-eps .campo span { display:block; font-size:12px; color:var(--tinta-3); margin-bottom:3px; }
#seccion-pagos-eps input[type=text], #seccion-pagos-eps select { font:inherit; font-size:13.5px; width:100%; padding:7px 9px; border:1px solid var(--linea); border-radius:8px; background:#fff; color:var(--tinta); min-width:0; }
#seccion-pagos-eps .rejilla { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:10px; }
#seccion-pagos-eps .comprob { border:1px solid var(--linea); border-radius:10px; padding:12px; margin-bottom:10px; }
#seccion-pagos-eps .comprob h3 { font-size:13px; font-weight:600; margin:0 0 10px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; overflow-wrap:anywhere; }
#seccion-pagos-eps .comprob h3 small { font-weight:400; color:var(--tinta-3); }
#seccion-pagos-eps .falta input { border-color:var(--atencion); background:#FFFBEB; }
#seccion-pagos-eps .falta span { color:var(--atencion); font-weight:600; }
#seccion-pagos-eps .subir { border:1.5px dashed var(--linea); border-radius:10px; padding:16px; text-align:center; color:var(--tinta-2); margin-bottom:12px; font-size:13px; }
#seccion-pagos-eps .lineas { display:grid; grid-template-columns:150px 170px minmax(0,1fr); gap:8px 10px; align-items:end; margin-bottom:8px; }
#seccion-pagos-eps .cuadre { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:10px; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; background:var(--bien-fondo); color:var(--bien); margin-top:10px; }
#seccion-pagos-eps .cuadre.mal { background:var(--problema-fondo); color:var(--problema); }
#seccion-pagos-eps .opcion { display:flex; gap:8px; align-items:flex-start; padding:7px 0; font-size:13.5px; }
#seccion-pagos-eps .opcion input { margin-top:3px; flex:none; }
#seccion-pagos-eps .opcion small { color:var(--tinta-3); display:block; font-size:12px; }
#seccion-pagos-eps .acciones { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
#seccion-pagos-eps .acciones p { margin:0; font-size:12.5px; color:var(--tinta-2); flex:1 1 240px; }
#seccion-pagos-eps .msg { margin-top:10px; font-size:13px; color:var(--tinta-2); background:var(--fila-alterna); border-radius:8px; padding:8px 10px; }
#seccion-pagos-eps { font-family:var(--fuente); color:var(--tinta); font-size:14px; line-height:1.4; max-width:1280px; }
#seccion-pagos-eps *, #seccion-pagos-eps *::before { box-sizing:border-box; }
#seccion-pagos-eps h1 { font-size:24px; font-weight:600; margin:0 0 4px; }
#seccion-pagos-eps .modo { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:13px; }
#seccion-pagos-eps .modo p { margin:0; flex:1 1 280px; }
#seccion-pagos-eps .modo.prueba { background:var(--atencion-fondo); color:var(--atencion); }
#seccion-pagos-eps .modo.real { background:var(--problema-fondo); color:var(--problema); }
#seccion-pagos-eps .aviso { border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:13px; background:var(--problema-fondo); color:var(--problema); }
#seccion-pagos-eps .aviso.suave { background:var(--atencion-fondo); color:var(--atencion); }
#seccion-pagos-eps .subir label { display:block; cursor:pointer; } #seccion-pagos-eps .subir input { display:block; margin:8px auto 0; max-width:100%; }
#seccion-pagos-eps .quitar { font:inherit; font-size:12.5px; border:0; background:none; color:var(--tinta-3); cursor:pointer; text-decoration:underline; }
#seccion-pagos-eps iframe.previa { width:100%; height:560px; border:1px solid var(--linea); border-radius:10px; background:#F1F3F6; }
#seccion-pagos-eps pre.plano { white-space:pre-wrap; overflow-wrap:anywhere; margin:10px 0 0; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--fila-alterna); border:1px solid var(--linea); border-radius:10px; padding:14px; }
#seccion-pagos-eps .cabmail { font-size:13px; margin:0 0 12px; display:grid; grid-template-columns:62px minmax(0,1fr); gap:3px 8px; } #seccion-pagos-eps .cabmail dt { color:var(--tinta-3); } #seccion-pagos-eps .cabmail dd { margin:0; overflow-wrap:anywhere; }
#seccion-pagos-eps .t .prueba-tag { display:block; font-size:11.5px; color:var(--atencion); font-weight:500; }
#seccion-pagos-eps input[type=email] { font:inherit; font-size:13.5px; width:100%; padding:7px 9px; border:1px solid var(--linea); border-radius:8px; }
@media (max-width:760px) {
  #seccion-pagos-eps .tarjeta { padding:14px; }
  #seccion-pagos-eps .sec { display:none; }
  #seccion-pagos-eps .solo-cel { display:block; margin-top:5px; }
  #seccion-pagos-eps col.l-cod { width:auto; }
  #seccion-pagos-eps col.l-mon { width:118px; }
  #seccion-pagos-eps col.c-cua { width:92px; }
  #seccion-pagos-eps col.c-qui { width:0; }
  #seccion-pagos-eps .dos { grid-template-columns:minmax(0,1fr); gap:0; }
  #seccion-pagos-eps .pasos { grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 0; }
  #seccion-pagos-eps .datos { grid-template-columns:repeat(2, minmax(0,1fr)); }
  #seccion-pagos-eps .rejilla { grid-template-columns:repeat(2, minmax(0,1fr)); }
  #seccion-pagos-eps .lineas { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
  #seccion-pagos-eps .lineas .campo.nada { display:none; }
  #seccion-pagos-eps .acciones .btn { flex:1 1 auto; text-align:center; }
  #seccion-pagos-eps h1 { font-size:21px; } #seccion-pagos-eps iframe.previa { height:480px; }
}
