/* ═══════════════════════════════════════════════════════
   MediRecord — Administración: Ingresos y ventanas de cobro
   (Las animaciones se apagan solas con «reducir movimiento».)
═══════════════════════════════════════════════════════ */
:root { --ing-1: #2563eb; --ing-2: #818cf8; --ing-3: #94a3b8; --ing-ease: cubic-bezier(.2, .8, .2, 1); }
@keyframes ingSube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#sec-ingresos { animation: ingSube .4s var(--ing-ease) both; }

.ing-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.ing-cab h2 { font-size: 1.5rem; }
.ing-cab p { margin: .2rem 0 0; }

/* Tarjetas de totales */
.ing-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.ing-kpi { position: relative; overflow: hidden; border-radius: 18px; padding: 1.15rem 1.25rem 1rem; color: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .14); animation: ingSube .55s var(--ing-ease) both; transition: transform .25s var(--ing-ease), box-shadow .25s; }
.ing-kpi:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 23, 42, .2); }
.ing-kpi:nth-child(2) { animation-delay: .07s; } .ing-kpi:nth-child(3) { animation-delay: .14s; } .ing-kpi:nth-child(4) { animation-delay: .21s; }
.ing-kpi.a { background: linear-gradient(135deg, #2563eb, #4f46e5); }
.ing-kpi.b { background: linear-gradient(135deg, #0891b2, #2563eb); }
.ing-kpi.c { background: linear-gradient(135deg, #7c3aed, #db2777); }
.ing-kpi.d { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.ing-kpi::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ing-kpi small { display: block; font-weight: 700; opacity: .92; letter-spacing: .02em; }
.ing-n { display: block; font: 800 clamp(1.9rem, 4vw, 2.4rem)/1.15 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: .15rem 0; }
.ing-d { display: inline-block; font-weight: 800; font-size: .85rem; background: rgba(255, 255, 255, .22); padding: .12rem .6rem; border-radius: 99px; }
.ing-d.baja { background: rgba(0, 0, 0, .22); }
.ing-kpi em { display: block; font-style: normal; opacity: .85; font-size: .85rem; margin-top: .35rem; }
.ing-spark { display: block; width: 100%; height: 34px; margin-top: .55rem; overflow: visible; }
.ing-spark .ar { fill: rgba(255, 255, 255, .18); stroke: none; }
.ing-spark .ln { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ingTrazo 1.2s .3s var(--ing-ease) forwards; }
@keyframes ingTrazo { to { stroke-dashoffset: 0; } }
.ing-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .28); margin-top: .85rem; overflow: hidden; }
.ing-bar i { display: block; height: 100%; width: var(--w); background: #fff; border-radius: 99px; animation: ingLlena 1s .3s var(--ing-ease) both; transform-origin: 0 50%; }
@keyframes ingLlena { from { transform: scaleX(0); } }

.ing-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin: 1rem 0; }
.ing-m { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; box-shadow: var(--sombra); animation: ingSube .5s .25s var(--ing-ease) both; transition: border-color .2s, transform .2s; }
.ing-m:hover { border-color: var(--primary-300); transform: translateY(-2px); }
.ing-m small { display: block; color: var(--ink-soft); font-weight: 600; font-size: .82rem; }
.ing-m b { display: block; font: 800 1.35rem var(--f-titulo); }
.ing-m em { font-style: normal; color: var(--ink-soft); font-size: .82rem; }

/* Tarjetas con gráficas */
.ing-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: var(--sombra); animation: ingSube .5s .3s var(--ing-ease) both; min-width: 0; }
.ing-card h3 { font-size: 1.1rem; }
.ing-grid2, .ing-grid3 { display: grid; gap: 1rem; margin-bottom: 1rem; }
.ing-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ing-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ing-cobrar, #ing-pagos, .ing-cob { margin-bottom: 1rem; }
.ing-ch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.ing-leyenda { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .78rem; color: var(--ink-soft); font-weight: 600; }
.ing-leyenda i, .ing-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; }
.c1 { background: var(--ing-1); } .c2 { background: var(--ing-2); } .c3 { background: var(--ing-3); }
.ing-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.ing-seg button { background: #fff; border: 0; padding: .25rem .8rem; font-weight: 600; font-size: .85rem; color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s; }
.ing-seg button.on { background: var(--primary); color: #fff; }
.ing-sub { margin: 0 0 .2rem; color: var(--ink-soft); font-size: .9rem; }

.ing-chart { position: relative; }
.ing-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ing-chart .g { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.ing-chart .ey, .ing-chart .ex { fill: var(--ink-soft); font-size: 11px; font-family: var(--f-texto); }
.ing-chart .mes.act .ex { fill: var(--ink); font-weight: 800; }
.ing-chart .hit, .ing-chart .hit-l { fill: transparent; cursor: crosshair; }
.ing-chart .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: ingBarra .8s calc(var(--i, 0) * 50ms) var(--ing-ease) both; transition: opacity .15s, filter .15s; }
.ing-chart .mes .bar { animation-delay: calc(var(--i) * 50ms); }
.ing-chart .bar.c1 { fill: var(--ing-1); } .ing-chart .bar.c2 { fill: var(--ing-2); } .ing-chart .bar.c3 { fill: var(--ing-3); }
.ing-chart .mes:hover .hit, .ing-chart .mes.hov .hit { fill: rgba(37, 99, 235, .07); }
.ing-chart:has(.mes.hov) .mes:not(.hov) .bar { opacity: .5; }
@keyframes ingBarra { from { transform: scaleY(0); } }
.ing-chart .area { fill: url(#gArea); stroke: none; animation: ingFade 1s .5s ease both; }
.ing-chart .ln { fill: none; stroke: var(--ing-1); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ingTrazo 1.4s var(--ing-ease) forwards; }
.ing-chart .pt { fill: #fff; stroke: var(--ing-1); stroke-width: 2; animation: ingFade .6s 1s ease both; }
.ing-chart .cruz { stroke: var(--ing-1); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.ing-chart .foco { fill: var(--ing-1); stroke: #fff; stroke-width: 2.5; pointer-events: none; }
@keyframes ingFade { from { opacity: 0; } }
.ing-tip { position: absolute; z-index: 5; pointer-events: none; background: #0f172a; color: #fff; border-radius: 10px; padding: .55rem .75rem; font-size: .82rem; line-height: 1.4; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); display: grid; gap: .1rem; min-width: 150px; }
.ing-tip[hidden] { display: none; }
.ing-tip b::first-letter { text-transform: uppercase; }
.ing-tip .t { font: 800 1.15rem var(--f-titulo); }
.ing-sin { text-align: center; color: var(--ink-soft); margin: .6rem 0 0; }
.ing-sin.chico { padding: 1.25rem .5rem; }

/* Dona */
.ing-dona { display: grid; gap: .9rem; justify-items: center; }
.ing-dona-g { position: relative; width: 150px; height: 150px; }
.ing-dona-g svg { width: 100%; height: 100%; }
.ing-dona .fondo { fill: none; stroke: var(--paper); stroke-width: 22; }
.ing-dona .seg { fill: none; stroke-width: 22; stroke-dasharray: var(--len) var(--c); animation: ingSeg 1s var(--ing-ease) both; transition: stroke-width .2s, opacity .2s; cursor: pointer; }
@keyframes ingSeg { from { stroke-dasharray: 0 var(--c); } }
.ing-dona.foco .seg:not(.on) { opacity: .35; }
.ing-dona .seg.on { stroke-width: 27; }
.ing-dona-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.ing-dona-c small { color: var(--ink-soft); font-size: .75rem; font-weight: 600; }
.ing-dona-c b { font: 800 1.05rem var(--f-titulo); }
.ing-dona ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .1rem; }
.ing-dona li { display: grid; grid-template-columns: 12px 1fr auto 40px; align-items: center; gap: .5rem; font-size: .88rem; padding: .25rem .35rem; border-radius: 8px; cursor: default; transition: background .15s; }
.ing-dona li:hover, .ing-dona li.on { background: var(--primary-light); }
.ing-dona li i { width: 10px; height: 10px; border-radius: 3px; }
.ing-dona li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-dona li em { font-style: normal; color: var(--ink-soft); text-align: right; font-size: .8rem; }

/* Mejores clientes */
.ing-top { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .65rem; }
.ing-top .t { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: .5rem; font-size: .92rem; }
.ing-top .n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-100); color: var(--primary-dark); font-weight: 800; font-size: .75rem; }
.ing-top li:first-child .n { background: #fde68a; color: #92400e; }
.ing-top .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ing-top .b { height: 7px; background: var(--paper); border-radius: 99px; margin-top: .25rem; overflow: hidden; }
.ing-top .b i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #60a5fa, var(--ing-1)); animation: ingLlena .9s calc(var(--i) * 90ms + .2s) var(--ing-ease) both; transform-origin: 0 50%; }

/* Por cobrar */
.ing-cobrar { list-style: none; margin: 0; padding: 0; }
.ing-cobrar li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .75rem .25rem; border-bottom: 1px solid var(--line); animation: ingSube .4s calc(var(--i) * 40ms) var(--ing-ease) both; }
.ing-cobrar li:last-child { border-bottom: 0; }
.ing-cobrar .in { flex: 1 1 240px; min-width: 0; }
.ing-cobrar .in small { display: block; color: var(--ink-soft); }
.ing-cobrar strong { font: 800 1.1rem var(--f-titulo); }

/* Tabla */
.ing-filtros { display: grid; grid-template-columns: minmax(180px, 1.6fr) repeat(3, minmax(140px, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.ing-tabla { overflow-x: auto; }
.ing-tabla table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ing-tabla th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: .5rem .6rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
.ing-tabla td { padding: .65rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ing-tabla tbody tr { animation: ingSube .35s calc(var(--i) * 25ms) var(--ing-ease) both; transition: background .15s; }
.ing-tabla tbody tr:hover { background: var(--primary-light); }
.ing-tabla .der { text-align: right; }
.ing-est { display: inline-block; font-weight: 700; font-size: .75rem; padding: .1rem .55rem; border-radius: 99px; white-space: nowrap; }
.ing-est.ok { background: var(--ok-bg); color: var(--ok); } .ing-est.warn { background: var(--warn-bg); color: var(--warn); }
.ing-est.bad { background: var(--bad-bg); color: var(--bad); } .ing-est.gris { background: #e2e8f0; color: #475569; }
.ing-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .8rem; font-size: .9rem; }
.ing-pag { display: flex; align-items: center; gap: .6rem; }

.ing-cob .chk { margin: .6rem 0; }
.ing-cob-f { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.ing-cob-f input { width: 90px; }

.ing-esq { display: grid; gap: 1rem; }
.ing-esq div { height: 130px; border-radius: 16px; background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%); background-size: 200% 100%; animation: ingBrilla 1.3s linear infinite; }
@keyframes ingBrilla { to { background-position: -200% 0; } }

/* ═══════════ Ventanas de cobro (nuevo cliente, cobro, pago manual) ═══════════ */
.cb input[type=number], .cb input[type=date] { width: 100%; min-height: 42px; padding: .5rem .75rem; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; }
.cb input[type=number]:focus, .cb input[type=date]:focus { border-color: var(--primary); outline: 3px solid var(--primary-100); }
.cb-plan { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; }
.cb-stepper > div { display: inline-flex; align-items: center; gap: .35rem; }
.cb-et { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.cb-stepper input { width: 70px !important; text-align: center; font-weight: 800; font-size: 1.1rem; -moz-appearance: textfield; }
.cb-stepper input::-webkit-outer-spin-button, .cb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cb-mm { width: 42px; height: 42px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: all .15s var(--ing-ease); }
.cb-mm:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: scale(1.08); }
.cb-mm:active { transform: scale(.92); }
.cb-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin-left: auto; }
.cb-seg button { position: relative; z-index: 1; background: none; border: 0; padding: .55rem 1rem; font-weight: 700; cursor: pointer; border-radius: 9px; color: var(--ink-soft); transition: color .25s; white-space: nowrap; }
.cb-seg button.on { color: #fff; }
.cb-seg button em { font-style: normal; font-size: .72rem; opacity: .85; margin-left: .25rem; }
.cb-seg i { position: absolute; z-index: 0; left: 3px; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 9px; background: var(--primary); box-shadow: 0 4px 10px rgba(37, 99, 235, .35); transition: transform .35s var(--ing-ease); }
.cb-seg.der i { transform: translateX(100%); }
.cb-din { position: relative; }
.cb-din span { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); font-weight: 700; }
.cb-din input { padding-left: 1.7rem !important; font-weight: 700; }
.cb-sug { display: block; color: var(--warn); font-weight: 600; }
.cb-sug a { color: var(--primary-dark); font-weight: 700; }
.cb-nota { margin: .3rem 0 0; }
.cb-resumen { background: linear-gradient(135deg, #eff6ff, #eef2ff); border: 1px solid var(--primary-200); border-radius: 14px; padding: .8rem 1.1rem; display: grid; gap: .35rem; margin-top: 1rem; }
.cb-resumen div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cb-resumen span { color: var(--ink-soft); font-weight: 600; }
.cb-resumen b { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.cb-resumen .tot { border-top: 2px dashed var(--primary-200); padding-top: .5rem; margin-top: .2rem; }
.cb-resumen .tot span { color: var(--ink); font-weight: 800; }
.cb-resumen .tot b { font: 800 1.7rem var(--f-titulo); color: var(--primary-dark); }
.cb-pm-det { background: var(--primary-light); border: 1px solid var(--primary-200); border-radius: 10px; padding: .55rem .8rem; margin-top: .5rem; }

.cb-ok { text-align: center; }
.cb-check { width: 96px; height: 96px; margin: 0 auto .4rem; }
.cb-check circle { fill: var(--ok-bg); stroke: #15803d; stroke-width: 3; transform-origin: center; animation: ingPop .5s var(--ing-ease); }
.cb-check path { fill: none; stroke: #15803d; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: ingTrazo60 .6s .35s ease forwards; }
@keyframes ingPop { from { opacity: 0; transform: scale(.6); } }
@keyframes ingTrazo60 { to { stroke-dashoffset: 0; } }
.cb-ok-n { margin: .2rem 0 1rem; font-size: 1.1rem; }
.cb-lbl { margin: .8rem 0 .3rem; font-weight: 700; color: var(--ink-soft); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.cb-id { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; background: var(--paper); border: 2px dashed var(--primary-300); border-radius: 14px; padding: .8rem; animation: ingSube .5s .4s var(--ing-ease) both; }
.cb-id code { font: 800 1.05rem ui-monospace, Consolas, monospace; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; color: var(--primary-dark); }
.cb-id.chico { border-style: solid; border-color: var(--line); }
.cb-id.chico code { font-size: .95rem; color: var(--ink); }
.cb-det { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0 .6rem; }
.cb-det div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .55rem; }
.cb-det dt { color: var(--ink-soft); font-size: .78rem; font-weight: 600; }
.cb-det dd { margin: 0; font: 800 1.05rem var(--f-titulo); }
.cb-det .tot { background: var(--primary); border-color: var(--primary); }
.cb-det .tot dt, .cb-det .tot dd { color: #fff; }
.cb-acc { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .8rem; }
.cb-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 1000; overflow: hidden; }
.cb-confeti i { position: absolute; top: -14px; width: 9px; height: 15px; border-radius: 2px; opacity: 0; animation: cbCae var(--d) var(--t) cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes cbCae { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 1; transform: translateY(105vh) translateX(var(--x)) rotate(var(--r)); } }

/* Tarjetas de consultorio: datos de cobro */
.co-cobro { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; font-size: .9rem; }
.co-cobro b { font-family: var(--f-titulo); }
.co-cobro .debe { color: var(--bad); font-weight: 800; }
.co-cobro .ok { color: var(--ok); font-weight: 700; }

@media (max-width: 900px) { .ing-grid2, .ing-grid3 { grid-template-columns: 1fr; } .ing-filtros { grid-template-columns: 1fr 1fr; } .ing-filtros input { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .cb-seg { margin-left: 0; width: 100%; }
  .cb-det { grid-template-columns: 1fr; }
  .ing-tabla table, .ing-tabla tbody, .ing-tabla tr, .ing-tabla td { display: block; width: 100%; }
  .ing-tabla thead { display: none; }
  .ing-tabla tr { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .8rem; margin-bottom: .6rem; }
  .ing-tabla td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .25rem 0; text-align: right; }
  .ing-tabla td::before { content: attr(data-l); color: var(--ink-soft); font-weight: 600; text-align: left; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  #sec-ingresos *, .cb *, .cb-confeti i, .ing-kpi, .ing-m, .ing-card { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cb-confeti { display: none; }
  .ing-chart .ln, .ing-spark .ln { stroke-dashoffset: 0; }
}

/* ═══ Ajustes para celular ═══ */
@media (max-width: 640px) {
  .ing-filtros { grid-template-columns: minmax(0, 1fr); }
  .ing-filtros select, .ing-filtros input { min-height: 44px; font-size: 16px; width: 100%; }
  .ing-tabla td .ing-est { align-self: center; flex: none; }
  .ing-seg button { padding: .5rem .85rem; min-height: 38px; }
  .ing-ch { flex-wrap: wrap; gap: .5rem; }
  /* las gráficas se leen mejor a tamaño real: se desplazan de lado */
  .ing-chart { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .ing-chart svg { min-width: 620px; }
  .ing-chart .ey, .ing-chart .ex { font-size: 12.5px; }
  .ing-pie { flex-direction: column; align-items: flex-start; }
  .ing-pag { width: 100%; justify-content: space-between; }
  .ing-pag .btn { min-height: 40px; }
  .ing-cob-f input { width: 90px; min-height: 40px; }
  .ing-cobrar li .btn { min-height: 40px; }
}