/* Página de agencias (g-*). Encima de app.css, home.css y precios.css. */
.g-heroe h1 { font-size: clamp(2.1rem, 3.6vw, 3.1rem) }
@media (min-width: 981px) { .g-heroe h1 { white-space: normal } }
.g-botones { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px }
.g-botones .k-btn { margin-top: 0 }

/* panel del héroe */
.g-dash { font-size: .76rem }
.k-dash-lat .g-cont { font-style: normal; margin-left: auto; background: #EF4444; color: #fff; font: 700 .62rem var(--sans); padding: 1px 6px; border-radius: 8px }
.g-anadir { background: var(--azul) }
.g-dash-tit { margin: 4px 0 14px }
.g-dash-tit b { display: block; font-size: 1.1rem; color: var(--marino) }
.g-dash-tit small { color: #64748B }
.g-dash-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px }
.g-dash-cifras div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; border: 1px solid #E9EEF6; border-radius: 10px; padding: 11px 12px; background: #FBFCFE }
.g-dash-cifras i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: #CBD5E1 no-repeat center/12px }
.g-dash-cifras .ok i { background-color: #22C55E; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4L16 6' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.g-dash-cifras .mal { background: #FEF2F2; border-color: #FBD5D5 }
.g-dash-cifras .mal i { background-color: #EF4444; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v6M10 14.5v.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") }
.g-dash-cifras b { font-size: 1.25rem; color: var(--marino); font-variant-numeric: tabular-nums; line-height: 1.1 }
.g-dash-cifras small { color: #64748B; font-size: .7rem }
.g-dash { grid-template-columns: 128px minmax(0, 1fr) }
.g-tabla { table-layout: fixed; font-size: .72rem }
.g-tabla th, .g-tabla td { padding: 8px 6px; overflow: hidden; text-overflow: ellipsis }
.g-tabla th:nth-child(1) { width: 27% } .g-tabla th:nth-child(2) { width: 17% } .g-tabla th:nth-child(3) { width: 20% }
.g-tabla th:nth-child(4) { width: 18% } .g-tabla th:nth-child(5) { width: 18% }
.g-tabla td:nth-child(2) { color: #64748B }
.g-tabla td:last-child { color: #15803D }
.g-ok, .g-mal { display: inline-flex; align-items: center; gap: 5px }
.g-ok::before, .g-mal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22C55E }
.g-mal { color: #B91C1C; font-weight: 600 }
.g-mal::before { background: #EF4444; animation: h-latir-rojo 1.4s ease-out infinite }
.g-fila-mal td { background: #FFF7F7 }
.g-rojo { color: #B91C1C !important; font-weight: 600 }
.g-naranja { color: #9A4A00 }
.g-verde { color: #15803D }
@media (max-width: 560px) { .g-tabla th:nth-child(2), .g-tabla td:nth-child(2) { display: none } .g-dash-cifras b { font-size: 1rem } }
.g-flota { right: -10px; bottom: -6px; border-color: #FBD5D5 }
.g-flota small { display: block; color: #64748B }
.g-rojo-fondo { background: #EF4444 }
@keyframes h-latir-rojo { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55) } 100% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0) } }

/* iconos: 6 columnas */
.g-iconos { grid-template-columns: repeat(6, minmax(0, 1fr)) }
@media (max-width: 1000px) { .g-iconos { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 480px) { .g-iconos { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* panel diseñado para agencias */
.g-panel-rej { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center }
@media (max-width: 980px) { .g-panel-rej { grid-template-columns: minmax(0, 1fr) } }
.g-lista { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; color: #1E293B }
.g-lista li { padding-left: 28px; position: relative }
.g-lista li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4L16 6' fill='none' stroke='%230B5FFF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.g-widgets { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px }
@media (max-width: 600px) { .g-widgets { grid-template-columns: minmax(0, 1fr) } }
.g-w { background: #fff; border: 1px solid #E6ECF5; border-radius: 14px; padding: 18px; box-shadow: 0 24px 50px -36px rgba(10, 31, 68, .45); min-width: 0 }
.g-inc-w { grid-column: 1 / -1 }
.g-w-tit { display: block; font-size: .88rem; color: var(--marino); margin-bottom: 12px }
.g-w-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.g-chip-az { background: #EEF4FF; color: var(--azul); font: 600 .7rem var(--sans); padding: 3px 8px; border-radius: 10px; margin-bottom: 12px }
.g-donut-rej { display: flex; align-items: center; gap: 18px }
.g-donut { width: 120px; height: 120px; flex: none; transform: rotate(-90deg) }
.g-donut circle { fill: none; stroke-width: 12 }
.g-donut .base { stroke: #EEF2F7 }
.g-donut .ok { stroke: #16A34A; stroke-linecap: butt; animation: g-dona 1.6s cubic-bezier(.3, .6, .2, 1) both }
.g-donut .mal { stroke: #EF4444 }
@keyframes g-dona { from { stroke-dasharray: 0 100 } }
.g-donut text { transform: rotate(90deg); transform-origin: 60px 60px; text-anchor: middle; font: 800 26px var(--sans); fill: var(--marino) }
.g-donut text.peq { font: 500 12px var(--sans); fill: #64748B }
.g-donut-rej ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .82rem; color: #334155 }
.g-donut-rej li { display: flex; align-items: center; gap: 8px }
.g-donut-rej i { width: 10px; height: 10px; border-radius: 50%; background: #CBD5E1 }
.g-donut-rej i.ok { background: #16A34A } .g-donut-rej i.mal { background: #EF4444 }
.g-ms { display: flex; align-items: center; gap: 10px; margin-bottom: 6px }
.g-ms b { font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; color: var(--marino) }
.g-baja { background: #DCFCE7; color: #166534; font: 700 .72rem var(--sans); padding: 2px 7px; border-radius: 8px }
.g-graf { width: 100%; height: 70px; display: block }
.g-graf .area { fill: url(#g-area) }
.g-graf .linea { fill: none; stroke: var(--azul); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 100; animation: h-dibuja 2s cubic-bezier(.3, .6, .2, 1) .2s both }
@keyframes h-dibuja { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }
.g-dias { display: flex; justify-content: space-between; font-size: .66rem; color: #64748B; margin-top: 4px }
.g-ver { font-size: .78rem; font-weight: 600; color: var(--azul); margin-bottom: 12px }
.g-inc { list-style: none; margin: 0; padding: 0 }
.g-inc li { display: grid; grid-template-columns: 12px minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #F0F3F8; font-size: .82rem }
.g-inc li:first-child { border-top: 0 }
.g-inc i { width: 10px; height: 10px; border-radius: 50%; background: #CBD5E1 }
.g-inc i.mal { background: #EF4444 } .g-inc i.av { background: #F59E0B } .g-inc i.ok { background: #16A34A }
.g-inc b { color: var(--marino); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.g-inc small { color: #64748B; font-size: .74rem; white-space: nowrap }
@media (max-width: 560px) { .g-inc li { grid-template-columns: 12px minmax(0, 1fr); } .g-inc span, .g-inc small { grid-column: 2 } }

/* planes */
.g-planes-rej { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center }
@media (max-width: 1000px) { .g-planes-rej { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .g-planes-rej > div:first-child { grid-column: 1 / -1 } }
@media (max-width: 640px) { .g-planes-rej { grid-template-columns: minmax(0, 1fr) } }
.g-periodo { margin-top: 10px; justify-content: flex-start }
.g-hasta { margin: -8px 0 16px; font-size: .88rem; color: #52627A }

/* CTA final */
.g-final-btn { min-height: 52px; padding: 0 28px; font-size: 1rem; margin-top: 4px }
.k-final h2 span { color: #4D8DFF }

@media (prefers-reduced-motion: reduce) { .g-mal::before, .g-donut .ok, .g-graf .linea { animation: none } }
