/* Oficina Virtual Yavegas — mismo lenguaje visual que el formulario de PQR */
.yov{
  --yov-navy:#0E3F6E;
  --yov-blue:#1B87DC;
  --yov-blue-dark:#0E6BB8;
  --yov-border:#DCE6F0;
  --yov-gray:#6B7A8C;
  --yov-ok:#1E8E5A;
  --yov-bad:#C0392B;
  font-family:inherit;
  color:var(--yov-navy);
}

/* ---------- formulario ---------- */
.yov-row{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.yov-field{flex:1 1 calc(50% - 9px);min-width:220px;display:flex;flex-direction:column}
.yov-field.yov-full{flex:1 1 100%}
.yov-field label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--yov-navy);margin-bottom:7px}
.yov-field label b{color:var(--yov-bad);font-weight:700}
.yov input[type=text],.yov input[type=email],.yov select{
  width:100%;border:1.5px solid var(--yov-border);border-radius:9px;padding:13px 15px;
  font-size:14.5px;color:var(--yov-navy);background:#fff;font-family:inherit;
  transition:border-color .15s ease,box-shadow .15s ease}
.yov input:focus,.yov select:focus{outline:none;border-color:var(--yov-blue);
  box-shadow:0 0 0 3px rgba(27,135,220,.14)}
.yov ::placeholder{color:#9BA9B8}
.yov select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3F6E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}

.yov-acepta{margin:4px 0 20px}
.yov-check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.6;
  color:var(--yov-gray);cursor:pointer}
.yov-check input{margin-top:3px;width:17px;height:17px;accent-color:var(--yov-blue);flex:0 0 17px}

/* ---------- botones ---------- */
.yov-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.yov-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--yov-blue);color:#fff;border:0;border-radius:999px;padding:14px 30px;
  font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;font-family:inherit;line-height:1;
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.yov-btn:hover{background:var(--yov-blue-dark);color:#fff;transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(14,63,110,.18)}
.yov-btn[disabled]{opacity:.55;cursor:wait;transform:none;box-shadow:none}
.yov-btn-ghost{background:#fff;color:var(--yov-navy);border:1.5px solid var(--yov-border)}
.yov-btn-ghost:hover{background:#F4F8FC;color:var(--yov-navy);border-color:var(--yov-blue)}

/* ---------- mensajes ---------- */
.yov-msg{margin-top:16px;font-size:13.5px;line-height:1.55;border-radius:9px;padding:0;
  border:0;display:none}
.yov-msg.is-on{display:block;padding:13px 16px;border-width:1.5px;border-style:solid}
.yov-msg.is-error{background:#FDECEA;border-color:#F5C6CB;color:var(--yov-bad)}
.yov-msg.is-ok{background:#E8F6EF;border-color:#BFE5D3;color:var(--yov-ok)}

/* ---------- resultado ---------- */
.yov-result{margin-top:26px;border:1.5px solid var(--yov-border);border-radius:16px;
  background:#fff;overflow:hidden;box-shadow:0 10px 30px rgba(14,63,110,.07)}
.yov-result-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:22px 26px;
  background:linear-gradient(90deg,#17497F 0%,#1A62AC 52%,#1E7AD0 100%);color:#fff}
.yov-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;opacity:.85;margin-bottom:5px}
.yov-num{margin:0;font-size:26px;font-weight:800;line-height:1.1;color:#fff}
.yov-estado{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);white-space:nowrap}
.yov-estado.is-pagada{background:rgba(30,142,90,.95);border-color:transparent}
.yov-estado.is-pendiente{background:rgba(255,255,255,.95);color:#17497F;border-color:transparent}

.yov-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;padding:0}
.yov-datos > div{padding:16px 26px;border-bottom:1px solid var(--yov-border)}
.yov-datos > div:nth-child(odd){border-right:1px solid var(--yov-border)}
.yov-datos dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--yov-gray);margin:0 0 5px}
.yov-datos dd{margin:0;font-size:15.5px;font-weight:600;color:var(--yov-navy);word-break:break-word}

.yov-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:20px 26px;background:#F4F8FC}
.yov-total span{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--yov-gray)}
.yov-total strong{font-size:30px;font-weight:800;color:var(--yov-navy);line-height:1}

.yov-actions-result{padding:20px 26px;justify-content:flex-start}
.yov-nota{margin:0;padding:0 26px 22px;font-size:13px;line-height:1.6;color:var(--yov-gray)}

.yov-result-simple{padding:30px 26px;text-align:center}
.yov-result-simple .yov-eyebrow{color:var(--yov-gray)}
.yov-num-xl{font-size:42px;letter-spacing:.02em;color:var(--yov-navy);
  font-variant-numeric:tabular-nums}
.yov-result-simple .yov-num{color:var(--yov-navy)}
.yov-result-simple .yov-nota{padding:12px 0 0}

/* ---------- móvil ---------- */
@media(max-width:600px){
  .yov-field{flex:1 1 100%}
  .yov-actions{justify-content:stretch}
  .yov-actions .yov-btn{width:100%}
  .yov-datos{grid-template-columns:1fr}
  .yov-datos > div:nth-child(odd){border-right:0}
  .yov-num-xl{font-size:34px}
  .yov-total{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- v1.1 ---------- */
.yov textarea{width:100%;border:1.5px solid var(--yov-border);border-radius:9px;padding:13px 15px;
  font-size:14.5px;color:var(--yov-navy);background:#fff;font-family:inherit;resize:vertical;min-height:110px;
  transition:border-color .15s ease,box-shadow .15s ease}
.yov textarea:focus{outline:none;border-color:var(--yov-blue);box-shadow:0 0 0 3px rgba(27,135,220,.14)}
.yov input[type=file]{width:100%;border:1.5px dashed var(--yov-border);border-radius:9px;padding:13px 15px;
  font-size:14px;color:var(--yov-gray);background:#FAFCFE;font-family:inherit;cursor:pointer}
.yov input[type=file]:hover{border-color:var(--yov-blue)}
.yov-field small{color:var(--yov-gray);font-size:12px;margin-top:6px}

.yov-desc{padding:16px 26px;font-size:14.5px;line-height:1.6;color:var(--yov-navy);
  border-bottom:1px solid var(--yov-border)}
.yov-desc:empty{display:none}

/* tablas */
.yov-tabla-wrap{padding:20px 26px 24px}
.yov-tabla-tit{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--yov-gray)}
.yov-tabla-scroll{overflow-x:auto;border:1px solid var(--yov-border);border-radius:11px}
.yov-tabla{width:100%;border-collapse:collapse;font-size:14px;min-width:520px;background:#fff}
.yov-tabla th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--yov-gray);padding:12px 14px;background:#F4F8FC;border-bottom:1px solid var(--yov-border);white-space:nowrap}
.yov-tabla td{padding:12px 14px;border-bottom:1px solid var(--yov-border);color:var(--yov-navy);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.yov-tabla tbody tr:last-child td{border-bottom:0}
.yov-tabla tbody tr:hover td{background:#F8FBFE}

/* estadísticas */
.yov-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--yov-border);
  border-bottom:1px solid var(--yov-border)}
.yov-stats > div{background:#fff;padding:18px 20px}
.yov-stats span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--yov-gray);margin-bottom:6px}
.yov-stats strong{font-size:22px;font-weight:800;color:var(--yov-navy);font-variant-numeric:tabular-nums}

/* gráfico */
.yov-fig{margin:0;padding:22px 26px 10px}
.yov-fig figcaption{font-size:13px;color:var(--yov-gray);margin-bottom:16px;line-height:1.5}
.yov-chart svg{display:block;width:100%;height:auto;overflow:visible}
.yov-bar{fill:var(--yov-blue);transition:fill .15s ease}
.yov-bar:hover{fill:#0E6BB8}
.yov-grid{stroke:var(--yov-border);stroke-width:1}
.yov-axis-txt{fill:var(--yov-gray);font-size:11px;font-family:inherit}
.yov-bar-lbl{fill:var(--yov-navy);font-size:11px;font-weight:700;font-family:inherit;
  font-variant-numeric:tabular-nums}

/* última lectura */
.yov-lectura{display:flex;gap:28px;align-items:center;flex-wrap:wrap;padding:30px 26px}
.yov-lectura > div{flex:1 1 260px}
.yov-medidor{margin:0;flex:0 1 300px}
.yov-medidor img{display:block;width:100%;height:auto;border-radius:11px;border:1px solid var(--yov-border)}
.yov-medidor figcaption{font-size:12px;color:var(--yov-gray);margin-top:8px;text-align:center}

@media(max-width:700px){
  .yov-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yov-tabla-wrap,.yov-fig,.yov-lectura,.yov-desc{padding-left:18px;padding-right:18px}
}