/* ══════════════════════════════════════════════════════════════
   KORA Visión IA · estilos compartidos de las páginas (prefijo kv-)
   Mismo lenguaje visual que el Panel: tarjetas blancas, bordes lila,
   esquinas de 16 px, morado #6D28D9 y naranja #F97316 como acentos.
   ══════════════════════════════════════════════════════════════ */

.kv-page { padding: 28px 28px 40px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; color: #1E1033; }
.kv-page * { box-sizing: border-box; }

/* Encabezado de página */
.kv-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.kv-top h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.3px; }
.kv-top p { margin: 4px 0 0; font-size: 14px; color: #6B5E80; }
.kv-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Botones */
.kv-btn { height: 40px; padding: 0 16px; border: 1px solid #DCD3EA; border-radius: 11px; background: #fff; color: #1E1033; font: inherit; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.kv-btn:hover { border-color: #A78BFA; background: #FBFAFE; }
.kv-btn:disabled { opacity: .5; cursor: default; }
.kv-btn:focus-visible, .kv-pri:focus-visible { outline: 2px solid #7C3AED; outline-offset: 2px; }
.kv-btn svg { flex-shrink: 0; }
.kv-pri { height: 40px; padding: 0 18px; border: 0; border-radius: 11px; background: #6D28D9; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.kv-pri:hover { background: #5B21B6; }
.kv-pri:disabled { opacity: .55; cursor: default; }
.kv-excel { color: #166534; border-color: #BBE5C8; }
.kv-excel:hover { background: #F0FBF3; border-color: #4ADE80; }
.kv-icono { width: 40px; padding: 0; }

/* Segmentado (periodo, vista) */
.kv-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: #EDE8F5; }
.kv-seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: #6B5E80; cursor: pointer; white-space: nowrap; }
.kv-seg button.kv-on { background: #fff; color: #1E1033; font-weight: 700; box-shadow: 0 1px 3px rgba(30,16,51,.12); }

/* Indicadores chicos */
.kv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kv-kpi { justify-content: flex-start; background: #fff; border: 1px solid #ECE6F5; border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: inherit; }
button.kv-kpi { cursor: pointer; }
button.kv-kpi:hover { border-color: #C4B5FD; }
.kv-kpi.kv-on { border-color: #7C3AED; box-shadow: 0 0 0 3px #EDE4FC; }
.kv-kpi-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.kv-kpi b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.kv-kpi span { font-size: 12.5px; color: #6B5E80; }

/* Tarjetas */
.kv-card { background: #fff; border: 1px solid #ECE6F5; border-radius: 16px; overflow: hidden; }
.kv-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #F1ECF8; }
.kv-card-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.kv-vacio { padding: 48px 22px; text-align: center; font-size: 14px; color: #6B5E80; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kv-vacio svg { color: #C4B5FD; }
.kv-vacio b { color: #1E1033; font-size: 15px; }

/* Filtros */
.kv-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #F1ECF8; }
.kv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kv-field label { font-size: 12px; font-weight: 700; color: #5B4F6E; }
.kv-select, .kv-input { height: 40px; padding: 0 12px; border: 1px solid #DCD3EA; border-radius: 10px; background: #fff; font: inherit; font-size: 13.5px; color: #1E1033; min-width: 0; }
.kv-select { padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5E80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.kv-select:focus, .kv-input:focus { outline: none; border-color: #7C3AED; box-shadow: 0 0 0 3px #EDE4FC; }
.kv-buscar { position: relative; }
.kv-buscar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8E82A3; pointer-events: none; }
.kv-buscar .kv-input { padding-left: 36px; width: 260px; max-width: 100%; }

/* Chips */
.kv-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: #F1F0F4; color: #5B4F6E; }
.kv-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kv-t-caida { background: #FEE2E2; color: #B91C1C; }
.kv-t-casco { background: #FFEDD5; color: #9A3412; }
.kv-t-otro { background: #EDE9FE; color: #5B21B6; }
.kv-e0 { background: #FEF3C7; color: #92400E; }
.kv-e1 { background: #EDE9FE; color: #5B21B6; }
.kv-e2 { background: #DCFCE7; color: #166534; }
.kv-e3 { background: #F1F0F4; color: #5B4F6E; }
.kv-ok { background: #DCFCE7; color: #166534; }
.kv-warn { background: #FEF3C7; color: #92400E; }
.kv-off { background: #F1F0F4; color: #5B4F6E; }

/* Tabla */
.kv-tabla-box { overflow-x: auto; }
.kv-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kv-tabla th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B5E80; padding: 12px 16px; background: #FBFAFE; border-bottom: 1px solid #ECE6F5; white-space: nowrap; }
.kv-tabla td { padding: 12px 16px; border-bottom: 1px solid #F3EFFA; vertical-align: middle; white-space: nowrap; }
.kv-tabla tbody tr { cursor: pointer; transition: background .1s; }
.kv-tabla tbody tr:hover td { background: #FBFAFE; }
.kv-tabla tbody tr:last-child td { border-bottom: 0; }
.kv-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.kv-mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #5B4F6E; }
.kv-sub { display: block; font-size: 12px; color: #6B5E80; margin-top: 2px; }

/* Pie con paginación */
.kv-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid #F1ECF8; font-size: 13px; color: #5B4F6E; }

/* Paneles laterales (alta / edición) */
.kv-velo { position: fixed; inset: 0; z-index: 1300; background: rgba(26,11,46,.45); display: flex; justify-content: flex-end; }
.kv-panel { width: min(600px, 100%); height: 100%; background: #fff; box-shadow: -12px 0 30px rgba(26,11,46,.18); display: flex; flex-direction: column; font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; color: #1E1033; }
.kv-panel.kv-ancho { width: min(980px, 100%); }
.kv-panel-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid #F1ECF8; }
.kv-panel-h h2 { margin: 0; font-size: 19px; font-weight: 800; }
.kv-panel-h p { margin: 4px 0 0; font-size: 13px; color: #6B5E80; }
.kv-panel-b { flex: 1; overflow-y: auto; padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.kv-panel-f { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 22px; border-top: 1px solid #F1ECF8; }
.kv-x { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #F3EFFA; color: #5B4F6E; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kv-x:hover { background: #EDE4FC; }
.kv-sec { display: flex; flex-direction: column; gap: 10px; }
.kv-sec > h3 { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B5E80; }
.kv-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.kv-ayuda { font-size: 12px; color: #6B5E80; }
.kv-aviso { padding: 12px 14px; border-radius: 12px; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 13px; }
.kv-secreto { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: #1A0B2E; color: #FDE68A; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; word-break: break-all; }
.kv-secreto span { flex: 1; }
.kv-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.kv-op { height: 34px; padding: 0 12px; border: 1px solid #DCD3EA; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: #5B4F6E; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kv-op:hover { border-color: #A78BFA; }
.kv-op[aria-pressed="true"] { background: #F1EAFD; border-color: #7C3AED; color: #5B21B6; }
.kv-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; }
.kv-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: #6D28D9; flex-shrink: 0; }
.kv-check small { display: block; font-size: 12px; color: #6B5E80; }
.kv-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.kv-dato { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.kv-dato span { font-size: 11.5px; color: #6B5E80; }

@media (max-width: 640px) {
    .kv-page { padding: 18px 14px 32px; }
    .kv-top h1 { font-size: 22px; }
    .kv-filtros .kv-field { flex: 1 1 140px; }
    .kv-buscar, .kv-buscar .kv-input { width: 100%; }
    .kv-fila { grid-template-columns: minmax(0, 1fr); }
    .kv-tarjetas { grid-template-columns: minmax(0, 1fr); }
}

/* El enfoque automático al cambiar de página (FocusOnNavigate) no debe dibujar un recuadro en el título */
h1:focus, h1:focus-visible { outline: none; }