/* =========================================================
   Páginas de cámaras (prefijo cm-)
   /gps/camaras-vehiculares · /gps/retransmision · /camaras · /camaras/mantenimiento
   ========================================================= */

/* Hero visual */
.cm-hero-vis{position:relative}
.cm-hero-vis .cm-fc{animation:floaty 6s ease-in-out infinite}
.cm-hero-vis .cm-fc:nth-of-type(2){animation-delay:-3s}
@media (max-width:560px){.cm-hero-vis .cm-fc{display:none}}
.cm-sticky{position:sticky;top:140px}
@media (max-width:900px){.cm-sticky{position:static}}

/* ---------- MDVR mosaic ---------- */
.cm-mdvr-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#061233}
.cm-mdvr-grid > div{border-radius:6px;overflow:hidden;aspect-ratio:5/3}
.cm-mdvr-grid svg{width:100%;height:100%}
.cm-mdvr-bar{display:flex;flex-wrap:wrap;gap:6px 16px;padding:9px 14px;background:#0B1A3E;border-top:1px solid rgba(120,170,240,.14);font-family:var(--f-mono);font-size:10.5px;color:#C9D6EC}
.cm-mdvr-bar span{display:inline-flex;align-items:center;gap:6px}
.cm-mdvr-bar svg{width:13px;height:13px;color:var(--cyan)}
.cm-mdvr-bar .ok{color:#19C37D;margin-left:auto}
.cm-mdvr-bar .ok svg{color:#19C37D}

/* ---------- Truck diagram ---------- */
.cm-diagram{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);background:#0A1838;border:1px solid rgba(120,170,240,.18)}
.cm-diagram svg{width:100%;height:auto}
.cm-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:14px;flex:none;color:#fff;background:var(--navy);border:2px solid var(--cyan)}
.cm-num--ok{border-color:var(--ok)}
.cm-num--warn{border-color:var(--warn)}
.cm-pos .checks li{font-size:14px}

/* ---------- Devices ---------- */
.cm-devs{gap:14px}
.cm-dev-card{align-items:flex-start;gap:6px;padding:16px}
.cm-dev{width:100%;aspect-ratio:5/4;border-radius:12px;background:radial-gradient(circle at 50% 40%,#fff,#EDF3FA);border:1px solid var(--line-2);display:grid;place-items:center;padding:10px;margin-bottom:6px}
.cm-dev svg{max-height:100%;width:auto;max-width:86%}
.cm-dev-card strong{font-size:15px}

/* Multi-camera options */
.cm-opt{gap:12px}
.cm-opt-media{position:relative;border-radius:12px;background:linear-gradient(180deg,#EEF4FB,#F9FBFE);border:1px solid var(--line-2);padding:22px 18px 8px;aspect-ratio:16/8;display:grid;place-items:end center}
.cm-opt-media svg{width:88%;height:auto;max-height:100%}
.cm-ch{position:absolute;top:10px;left:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.cm-ch b{color:var(--blue);font-size:13px}
.cm-opt--feat{border-color:#9CC3F2;box-shadow:var(--sh-2)}
.cm-opt--feat .cm-opt-media{background:linear-gradient(180deg,#E0EEFF,#F4F9FF)}

/* ---------- Events (dark) ---------- */
.cm-events{background:#0A1838;border:1px solid rgba(120,170,240,.22);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-3)}
.cm-events-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 4px 8px;border-bottom:1px solid rgba(120,170,240,.14);flex-wrap:wrap}
.cm-events-head strong{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#fff}
.cm-events-head svg{width:16px;height:16px;color:var(--cyan)}
.cm-evt{display:grid;grid-template-columns:112px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(120,170,240,.1);transition:border-color .2s,background .2s}
.cm-evt:hover{border-color:rgba(0,200,248,.4);background:rgba(0,155,255,.06)}
.cm-evt-thumb{border-radius:8px;overflow:hidden;aspect-ratio:5/3}
.cm-evt-thumb svg{width:100%;height:100%}
.cm-evt-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.cm-evt-body b{color:#fff;font-size:14px}
.cm-evt-body .xs{color:var(--on-dark-muted);font-family:var(--f-mono)}
.cm-evt-body .mono{color:var(--cyan)}
.cm-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;background:var(--ok)}
.cm-dot--warn{background:var(--warn)}
.cm-dot--err{background:var(--err)}
.cm-dot--info{background:var(--electric)}
@media (max-width:480px){.cm-evt{grid-template-columns:84px 1fr auto;gap:10px}}

/* ---------- Phone app ---------- */
.cm-phone-wrap{position:relative}
.cm-app{flex:1;display:flex;flex-direction:column;gap:8px;padding:6px 10px 10px;min-height:0}
.cm-app-top{display:flex;justify-content:space-between;align-items:center;gap:6px;color:#fff;font-size:13px}
.cm-app-top .chip{padding:3px 8px;font-size:9px}
.cm-app-main{border-radius:10px;overflow:hidden;aspect-ratio:5/3}
.cm-app-main svg{width:100%;height:100%}
.cm-app-main--grid{aspect-ratio:auto}
.cm-app-main--grid > div{border-radius:10px!important;padding:3px!important}
.cm-app-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.cm-app-grid > svg,.cm-app-more{border-radius:8px;overflow:hidden;aspect-ratio:5/3;width:100%}
.cm-app-more{display:grid;place-items:center;align-content:center;gap:2px;background:#12295F;color:#C9D6EC;font-size:9.5px;font-weight:700}
.cm-app-more svg{width:16px;height:16px;color:var(--cyan)}
.cm-app-alerts{display:flex;flex-direction:column;gap:5px}
.cm-app-alerts div{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;background:#10224C;color:#E8F0FB;font-size:10.5px}
.cm-app-alerts svg{width:13px;height:13px;color:var(--warn);flex:none}
.cm-app-alerts em{margin-left:auto;font-style:normal;font-family:var(--f-mono);color:#8DA2C4;font-size:9.5px}
.cm-app-bar{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding-top:8px;border-top:1px solid rgba(120,170,240,.14)}
.cm-app-bar span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:#9FB2CF}
.cm-app-bar svg{width:15px;height:15px;color:var(--cyan)}

/* ---------- Retransmission ---------- */
.cm-relay-frame{background:#0A1838}
.cm-relay-big{max-width:980px;margin-inline:auto;background:#0A1838}
.cm-svc{gap:12px}
.cm-svc .tag{align-self:flex-start}
.cm-log-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(120,170,240,.14)}
.cm-log-kpis div{background:#0B1A3E;padding:10px 12px;min-width:0}
.cm-log-kpis span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#8DA2C4}
.cm-log-kpis b{display:block;font-size:16px;color:#fff;margin-top:2px}
.cm-log-kpis b.ok{color:#19C37D}
.cm-log-rows{display:flex;flex-direction:column;padding:6px 8px}
.cm-log-rows > div{display:grid;grid-template-columns:1fr 1fr 1.2fr .9fr;gap:8px;padding:8px 6px;border-bottom:1px solid rgba(120,170,240,.08);font-family:var(--f-mono);font-size:11px;color:#C9D6EC;align-items:center}
.cm-log-rows > div:last-child{border-bottom:0}
.cm-log-rows .cm-log-h{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#7F93B5}
.cm-st{justify-self:start;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:700}
.cm-st--ok{background:rgba(25,195,125,.14);color:#4BE0A0}
.cm-st--warn{background:rgba(255,159,28,.15);color:#FFC46B}
.cm-st--err{background:rgba(230,57,70,.16);color:#FF8A93}
@media (max-width:480px){.cm-log-rows > div{grid-template-columns:.9fr 1fr .8fr;font-size:10px}.cm-log-rows > div > span:nth-child(3){display:none}}

.cm-checklist{gap:0;padding:8px 20px}
.cm-check-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-2)}
.cm-check-row:last-child{border-bottom:0}
.cm-check-row strong{display:block;font-size:15px}
.cm-check-row span{font-size:13.5px;color:var(--muted);line-height:1.45}
.cm-check-box{width:24px;height:24px;border-radius:7px;background:var(--ok);color:#fff;display:grid;place-items:center}
.cm-check-box svg{width:15px;height:15px}
.cm-docs{gap:10px}
.cm-doc-row{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--bg);font-size:14px}
.cm-doc-row span:first-child{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cm-doc-row b{min-width:0;overflow-wrap:anywhere}
.cm-progress{height:6px;border-radius:4px;background:var(--line-2);overflow:hidden;margin-top:4px}
.cm-progress i{display:block;height:100%;background:var(--grad-brand)}

.cm-fields code{font-family:var(--f-mono);font-size:13px;background:#EAF2FE;color:var(--blue);padding:2px 7px;border-radius:5px}
.cm-fields td.mono{font-size:13px;color:var(--navy)}
.cm-code{background:#0A1838;border-radius:var(--r-lg);border:1px solid rgba(120,170,240,.22);box-shadow:var(--sh-2);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.cm-code-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#081330;border-bottom:1px solid rgba(120,170,240,.14);font-family:var(--f-mono);font-size:11px;color:#7F93B5}
.cm-code-bar .dots{display:flex;gap:6px}
.cm-code-bar .dots i{width:9px;height:9px;border-radius:50%;background:#2A3B63;display:block}
.cm-code-bar .dots i:first-child{background:#E63946}.cm-code-bar .dots i:nth-child(2){background:#FF9F1C}.cm-code-bar .dots i:nth-child(3){background:#19C37D}
.cm-code-bar .demo-badge{margin-left:auto;background:rgba(255,159,28,.16);color:#FFC46B}
.cm-code pre{margin:0;padding:20px 22px;font-family:var(--f-mono);font-size:13.5px;line-height:1.75;color:#C9D6EC;overflow-x:auto;flex:1}
.cm-code .k{color:#7FE3FF}.cm-code .s{color:#4BE0A0}.cm-code .n{color:#FFC46B}
.cm-code-foot{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid rgba(120,170,240,.14);font-size:12px;color:#8DA2C4}
.cm-code-foot svg{width:15px;height:15px;color:var(--cyan);flex:none}

/* ---------- Tabs (/camaras) ---------- */
.cm-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px;margin-bottom:20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1)}
.cm-tabs::-webkit-scrollbar{display:none}
.cm-tab{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:10px;border:0;background:transparent;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap;flex:1 0 auto;justify-content:center;transition:background .2s,color .2s}
.cm-tab svg{width:18px;height:18px}
.cm-tab:hover{color:var(--ink);background:var(--bg)}
.cm-tab[aria-selected="true"]{background:var(--navy);color:#fff;box-shadow:0 8px 18px -10px rgba(11,31,77,.8)}
.cm-tab[aria-selected="true"] svg{color:var(--cyan)}
.cm-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
.cm-panel[hidden]{display:none}
.cm-panel.cm-in{animation:pageIn .4s ease both}
.cm-panel-vis{background:radial-gradient(circle at 50% 38%,#fff 0,#EDF3FA 70%);border-right:1px solid var(--line-2);padding:24px;display:flex;flex-direction:column;gap:18px;position:relative}
.cm-panel-vis .tag{align-self:flex-start}
.cm-panel-dev{flex:1;display:grid;place-items:center;min-height:220px}
.cm-panel-dev svg{width:min(340px,90%);height:auto}
.cm-fn{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cm-fn span{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;min-width:0}
.cm-fn svg{width:15px;height:15px;color:var(--ok);flex:none}
.cm-panel-body{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:16px;min-width:0}
.cm-panel-body .fb-num{font-family:var(--f-mono);font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.12em}
.cm-qa h4{display:flex;align-items:center;gap:8px;font-size:13px;font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.cm-qa h4 svg{width:16px;height:16px;color:var(--blue)}
.cm-qa p{color:var(--muted);font-size:15px}
.cm-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cm-3col > div{background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:14px}
.cm-3col h5{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:12px;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.cm-3col h5 svg{width:14px;height:14px;color:var(--blue)}
.cm-3col li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.45;margin-top:5px}
.cm-3col li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:2px;background:var(--electric)}
@media (max-width:980px){.cm-panel{grid-template-columns:1fr}.cm-panel-vis{border-right:0;border-bottom:1px solid var(--line-2)}.cm-panel-dev{min-height:160px}}
@media (max-width:620px){.cm-3col{grid-template-columns:1fr}.cm-fn{grid-template-columns:1fr 1fr}.cm-tab{padding:10px 12px;font-size:13px}}
@media (max-width:380px){.cm-fn{grid-template-columns:1fr}}

.cm-acc-card{flex-direction:row;align-items:center;gap:14px;padding:16px}
.cm-acc-dev{width:84px;height:68px;flex:none;border-radius:10px;background:radial-gradient(circle at 50% 40%,#fff,#EDF3FA);border:1px solid var(--line-2);display:grid;place-items:center;padding:4px}
.cm-acc-dev svg{max-width:100%;max-height:100%}
.cm-acc-card p{font-size:13.5px;margin-top:4px}

/* Environments */
.cm-envs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.cm-env{gap:12px}
.cm-env--lg{grid-row:span 2}
.cm-env-feed{border-radius:12px;overflow:hidden;aspect-ratio:5/3;border:1px solid rgba(0,200,248,.2)}
.cm-env-feed svg{width:100%;height:100%}
.cm-env--lg .cm-env-feed{aspect-ratio:4/3}
@media (max-width:980px){.cm-envs{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-env--lg{grid-row:auto;grid-column:1/-1}.cm-env--lg .cm-env-feed{aspect-ratio:16/7}}
@media (max-width:620px){.cm-envs{grid-template-columns:1fr}.cm-env--lg .cm-env-feed{aspect-ratio:5/3}}

/* Before / after */
.cm-ba-card{gap:12px}
.cm-ba-after{background:var(--ok)!important}
.cm-ba-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cm-ba-row svg{width:16px;height:16px;color:var(--muted)}
.cm-ba-card .ba{grid-template-columns:1fr 1fr}

/* ---------- Mantenimiento ---------- */
.cm-svc-sm{gap:10px;padding:18px}
.cm-svc-sm p{font-size:13.5px;line-height:1.5}
.cm-svc-sm h3{font-size:16px}
.cm-plans{align-items:stretch}
.cm-plan{gap:16px;padding:clamp(22px,2.4vw,30px)}
.cm-plan-key{color:var(--blue);letter-spacing:.12em;text-transform:uppercase}
.cm-plan-inc{border-top:1px dashed var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.cm-plan-inc > span{color:var(--muted);letter-spacing:.12em}
.cm-plan--feat{background:var(--grad-dark);color:var(--on-dark);border-color:transparent;box-shadow:var(--sh-3)}
.cm-plan--feat p{color:var(--on-dark-muted)}
.cm-plan--feat .checks li{color:var(--on-dark)}
.cm-plan--feat .cm-plan-key{color:var(--cyan)}
.cm-plan--feat .cm-plan-inc{border-color:var(--dark-line)}
.cm-plan--feat .cm-plan-inc > span{color:var(--on-dark-muted)}
.cm-plan-badge{position:absolute;top:-12px;right:22px;background:var(--grad-brand);color:#fff;font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.cm-plan .btn{white-space:normal;text-align:center}

.cm-report{background:#fff;color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:clamp(16px,2.2vw,24px);display:flex;flex-direction:column;gap:14px;min-width:0;position:relative}
.cm-report::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--grad-brand)}
.cm-report-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cm-report-head strong{display:block;font-size:16px;margin-top:2px}
.cm-report-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cm-report-meta div{background:var(--bg);border-radius:8px;padding:8px 10px;min-width:0}
.cm-report-meta span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cm-report-meta b{font-size:12.5px;overflow-wrap:anywhere}
.cm-report-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cm-report-table th{text-align:left;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 6px;border-bottom:1px solid var(--line)}
.cm-report-table td{padding:7px 6px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.cm-report-table td:first-child{font-weight:700;font-family:var(--f-mono);font-size:11.5px}
.cm-report-table .tag{font-size:10.5px;padding:3px 7px;white-space:nowrap}
.cm-report-foot{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;align-items:end}
.cm-report-foot p{font-size:12.5px;color:var(--muted);margin-top:4px}
.cm-sign{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cm-sign span{border-top:1px dashed #B8CCE3;padding-top:6px;font-family:var(--f-mono);font-size:9.5px;color:var(--muted);text-align:center}
@media (max-width:620px){.cm-report-meta{grid-template-columns:1fr 1fr}.cm-report-foot{grid-template-columns:1fr}.cm-report-table th:nth-child(3),.cm-report-table td:nth-child(3){display:none}}

.cm-sym td:first-child{white-space:nowrap}
.cm-sym-s{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:15px}
.cm-sym-fix{display:flex;gap:8px;align-items:flex-start}
.cm-sym-fix svg{flex:none;margin-top:2px}
.cm-sym td:nth-child(2){color:var(--muted)}

/* ---------- Ajustes ---------- */
.equipment-section{background:var(--bg)}
.equipment-section .equipment-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1);min-width:0}
.equipment-section .equipment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.equipment-card__top{display:flex;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line-2)}.equipment-card__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--blue-soft);color:var(--blue);flex:none}.equipment-card__icon svg{width:22px;height:22px}.equipment-card h3{margin:0;font-size:20px}.equipment-card__top span:not(.equipment-card__icon){display:block;color:var(--muted);font-size:12px;margin-top:3px}.equipment-card__body{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:16px}.equipment-card__body strong{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.equipment-card__body p{margin:6px 0 0;font-size:14px;line-height:1.55}
@media (max-width:680px){.equipment-section .equipment-grid{grid-template-columns:1fr}.equipment-card__body{grid-template-columns:1fr;gap:10px}}
.demo-badge > svg{width:13px;height:13px;flex:none}
[data-form] .form-ok[hidden]{display:none}
.cm-fields{min-width:0}
.cm-fields th,.cm-fields td{padding:12px 14px}
.cm-hero-vis > .frame{border:1px solid rgba(120,170,240,.25)}
.cm-env--lg .cm-env-feed{aspect-ratio:5/3}
@media (min-width:981px){.cm-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.cm-diagram{overflow-x:auto;scrollbar-width:thin}.cm-diagram svg{min-width:620px}}
@media (max-width:980px){.cm-env--lg{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cm-env--lg > :not(.cm-env-feed){grid-column:1/-1}.cm-env--lg .cm-env-feed{aspect-ratio:5/3}}
@media (max-width:620px){.cm-env--lg{display:flex}.cm-env--lg .cm-env-feed + .cm-env-feed{display:none}}