/* --- OIRS v2 (aislado) ----------------------------------------------- */
/* Aplica SOLO dentro de .oirs-v2, no interfiere con estilos antiguos. */

.oirs-v2 {
    --bg: #ffffff;
    --text: #1f2a37;
    --muted: #6b7280;
    --primary: #0f70b7;
    --primary-600: #0a5d98;
    --border: #e5e7eb;
    --surface: #f8fafc;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

.oirs-v2 .tit_pag {
    background: linear-gradient(0deg, #f6f6fa, #fff);
    border: 1px solid var(--border);
    color: var(--primary);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 18px;
    margin: 10px 0 16px;
}

/* Contenedor principal */
.oirs-v2.contenido {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    width: 95%;
}

/* Helpers layout */
.oirs-v2 .stack { display: grid; gap: 12px; }
.oirs-v2 .row { display: flex; gap: 12px; align-items: center; }

/* Tablas “clásicas” mejoradas */
.oirs-v2 table.tabla {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}
.oirs-v2 table.tabla th,
.oirs-v2 table.tabla td {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
}
.oirs-v2 table.tabla th {
    background: #f3f4f6;
    font-weight: 600;
    color: #0f70b7;
}
.oirs-v2 table.tabla .bg1 { background: #f8fafc; }
.oirs-v2 table.tabla .bg2 { background: #f3f4f6; }
.oirs-v2 table.tabla .bg3 { background: #eef2f7; }

/* Inputs */
.oirs-v2 input[type="text"],
.oirs-v2 input[type="password"],
.oirs-v2 input[type="email"],
.oirs-v2 select,
.oirs-v2 textarea {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    outline: none;

}


/* Botones */
.oirs-v2 .boton2,
.oirs-v2 input[type="submit"],
.oirs-v2 input[type="button"],
.oirs-v2 button {
    background: var(--primary);
    border: 1px solid var(--primary-600);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.oirs-v2 .boton2:hover,
.oirs-v2 input[type="submit"]:hover,
.oirs-v2 input[type="button"]:hover,
.oirs-v2 button:hover {
    background: var(--primary-600);
}

/* Tarjeta de confirmación */
.oirs-v2 .card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 16px;
}
.oirs-v2 .card .title { font-size: 16px; color: var(--primary); font-weight: 700; margin-bottom: 8px; }
.oirs-v2 .muted { color: var(--muted); }

/* Avisos */
.oirs-v2 .notice {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #991b1b;
    border-radius: 10px;
    padding: 10px 12px;
}

/* Responsive suave (sin tocar layout viejo) */
@media (max-width: 768px) {
    .oirs-v2 .row { flex-direction: column; align-items: stretch; }
    .oirs-v2 .contenido { padding: 12px; }
    .oirs-v2 table.tabla { font-size: 13px; }
}
/* Ajusta ancho y respira el contenido heredado sin tocar lógica ni tablas */
.oirs-v2 .contenido,
.oirs-v2 .detalle { width:100% !important; border-left:none; border-right:none; padding:0; }
.oirs-v2 .tabla { width:100%; border-radius:8px; overflow:hidden; }
.oirs-v2 .tabla td, .oirs-v2 .tabla th { padding:10px 12px; }
.oirs-v2 .bg1 { background:#fafbfe; }
/* Ensancha inputs de texto más usados sin romper tamaños legacy */
.oirs-v2 #par_direccion { width: 100%; max-width: 640px; }
.oirs-v2 #par_email, .oirs-v2 #par_email2 { width: 260px; }
.oirs-v2 #par_apaterno, .oirs-v2 #par_amaterno, .oirs-v2 #par_nombres { width: 220px; }

/* En móviles, que los selects no se desborden */
@media (max-width: 768px) {
    .oirs-v2 select.TEXTazulSN, .oirs-v2 input.TEXTazul2SN { width: 100%; max-width: 100%; }
}

/* Mejor foco accesible */
.oirs-v2 input[type="text"],
.oirs-v2 input[type="email"],
.oirs-v2 input[type="password"],
.oirs-v2 select,
.oirs-v2 textarea {
    transition: box-shadow .15s, border-color .15s;
}
.oirs-v2 input:focus,
.oirs-v2 select:focus,
.oirs-v2 textarea:focus {
    border-color: #0f70b7;
    box-shadow: 0 0 0 3px rgba(15,112,183,.15);
}
/* ====== UI Moderna (sin romper legacy) ====== */
.oirs-v2 .section-header {
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.oirs-v2 .section-header h3 { margin:0; font-size:16px; color:var(--primary); font-weight:700; }
.oirs-v2 .section-header .step-badge {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:999px; background:#e0f2fe; color:#0369a1; font-weight:700;
}

/* Grilla de formulario (solo wrappers, inputs siguen con IDs/names originales) */
.oirs-v2 .form-grid { display:grid; gap:12px; grid-template-columns: 1fr; }
.oirs-v2 .form-grid { display:grid; gap:12px; grid-template-columns: 1fr; }
@media (min-width: 768px) {        /* antes tenías 900px */
    .oirs-v2 .form-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
    .oirs-v2 #tbl_datpers .rpc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
.oirs-v2 .form-item { display:flex; flex-direction:column; gap:6px; }
.oirs-v2 .input-row { display:flex; align-items:center; gap:8px; }
.oirs-v2 .input-row i { opacity:.6; }

/* Mini ayudas */
.oirs-v2 .help { font-size:12px; color:#64748b; margin-top:6px; }

/* Badge de contador */
.oirs-v2 .counter-badge input {
    border-radius:10px; background:#f8fafc; border:1px solid var(--border);
    padding:4px 8px; font-weight:600; width:56px; text-align:center;
}

/* Botón principal moderno */
.oirs-v2 .btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg,#0f70b7,#0a5d98);
    border:1px solid #0a5d98; color:#fff; padding:10px 16px;
    border-radius:10px; font-weight:700; cursor:pointer;
}
.oirs-v2 .btn-primary:hover { filter:brightness(1.05); }

/* Enlaces de acción */
.oirs-v2 a.link { color:#0f70b7; text-decoration:underline; }

/* Ajustes visuales de la tabla de datos personales */
.oirs-v2 #tbl_datpers td:first-child { width: 220px; }
/* ===== Refinamiento visual y responsive sin romper IDs/JS ===== */

/* 0) Evitar overflow lateral en móvil (la franja blanca) */
html, body { overflow-x: hidden; }
.oirs-v2 { max-width: 100%; }
.oirs-v2 .tabla,
.oirs-v2 .card { max-width: 100%; }

/* 1) Inputs legibles: ancho 100%, borde visible y foco claro */

.oirs-v2 input[type="password"],
.oirs-v2 input[type="email"],
.oirs-v2 select
 {

    max-width: 100%;
    background: #fff;
    border: 1px solid #cbd5e1;   /* más contraste */
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.4;
}
/* Estilo base para input text (sin width forzado) */
.oirs-v2 textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.4;
    /* sin width:100% */
}
.oirs-v2 input[type="text"]::placeholder,
.oirs-v2 input[type="email"]::placeholder,
.oirs-v2 textarea::placeholder { color: #94a3b8; }

/* foco accesible */
.oirs-v2 input:focus,
.oirs-v2 select:focus,
.oirs-v2 textarea:focus {
    outline: none;
    border-color: #0f70b7;
    box-shadow: 0 0 0 3px rgba(15,112,183,.15);
}

/* 2) Compactar la tabla de "Datos personales" y alinear mejor */
.oirs-v2 table.tabla { table-layout: fixed; }   /* evita saltos y scroll lateral */
.oirs-v2 table.tabla td,
.oirs-v2 table.tabla th { padding: 10px 12px; }

/* Columna de etiquetas un poco más angosta en desktop */
@media (min-width: 1024px) {
    .oirs-v2 #tbl_datpers td.bg1 { width: 220px; }  /* etiqueta */
}

/* 3) Excepciones de ancho para campos cortos (RUT) */
.oirs-v2 #par_rut_usuario { width: 369px; }
.oirs-v2 #par_digverut    { width: 50px;  }

/* 4) Íconos dentro de fila (cuando existen) no empujen demasiado */
.oirs-v2 .input-row { display: flex; align-items: center; gap: 8px; }
.oirs-v2 .input-row i { opacity: .7; }

/* 5) Texto de ayuda más compacto */
.oirs-v2 .help { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* 6) El área de email confirmación en una sola línea en ancho grande */
@media (min-width: 768px) {
    .oirs-v2 #tbl_datpers .grid { grid-template-columns: 1fr 1fr; }
}

/* 7) Evitar que algo “rompa” el ancho */
.oirs-v2 img,
.oirs-v2 table,
.oirs-v2 textarea { max-width: 100%; }
/* --- Forzar estilo de inputs legacy dentro de la tabla --- */
.oirs-v2 table.tabla input.TEXTazul2SN,
.oirs-v2 table.tabla input[type="text"],
.oirs-v2 table.tabla input[type="email"],
.oirs-v2 table.tabla input[type="password"],
.oirs-v2 table.tabla select.TEXTazulSN,
.oirs-v2 table.tabla select,
.oirs-v2 table.tabla textarea.TEXTazul2SN,
.oirs-v2 table.tabla textarea {

    max-width: 100% !important;
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;       /* borde visible */
    border-radius: 8px !important;
    padding: 8px 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* foco claro */
.oirs-v2 table.tabla input:focus,
.oirs-v2 table.tabla select:focus,
.oirs-v2 table.tabla textarea:focus {
    outline: none !important;
    border-color: #0f70b7 !important;
    box-shadow: 0 0 0 3px rgba(15,112,183,.15) !important;
}

/* RUT/DV cortos */
.oirs-v2 #par_rut_usuario { width: 369px !important; }
.oirs-v2 #par_digverut    { width: 50px  !important; }

/* Reducir aire en filas */
.oirs-v2 table.tabla td, .oirs-v2 table.tabla th { padding: 8px 10px; }

/* Evitar overflow lateral en móvil */
html, body { overflow-x: hidden; }
/* ===== Layout compacto y control de anchos ===== */

/* Inputs en tabla: borde visible y ancho fluido */
.oirs-v2 table.tabla input.TEXTazul2SN,
.oirs-v2 table.tabla input[type="text"],
.oirs-v2 table.tabla input[type="email"],
.oirs-v2 table.tabla input[type="password"],
.oirs-v2 table.tabla select.TEXTazulSN,
.oirs-v2 table.tabla select,
.oirs-v2 table.tabla textarea.TEXTazul2SN,
.oirs-v2 table.tabla textarea {

    max-width: 100% !important;
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}
.oirs-v2 table.tabla input:focus,
.oirs-v2 table.tabla select:focus,
.oirs-v2 table.tabla textarea:focus {
    outline: none !important;
    border-color: #0f70b7 !important;
    box-shadow: 0 0 0 3px rgba(15,112,183,.15) !important;
}

/* Compactar filas y fijar layout de tabla */
.oirs-v2 table.tabla { table-layout: fixed; }
.oirs-v2 table.tabla td, .oirs-v2 table.tabla th { padding: 8px 10px; }

/* Select SEXO no ocupa todo el ancho cuando comparte fila */
.oirs-v2 select[name="par_psexoper"] { max-width: 260px; }

/* RUT y DV cortos */
.oirs-v2 #par_rut_usuario { width: 369px !important; }
.oirs-v2 #par_digverut    { width: 50px  !important; }

/* Evitar overflow lateral en móvil */
html, body { overflow-x: hidden; }
/* Utilidades de ancho para selects/inputs en cabecera */
.oirs-v2 .fit-sm { max-width: 260px; width: 100%; }
.oirs-v2 .fit-md { max-width: 420px; width: 100%; }
.oirs-v2 .fit-lg { max-width: 640px; width: 100%; }
.oirs-v2 .fit-xl { max-width: 720px; width: 100%; }


/* Caja centrada más angosta para formularios cortos */
.oirs-v2 .form-narrow { max-width: 720px; margin: 0 auto; }

/* Botón contorno para el toggle */
.oirs-v2 .btn-outline{
    background:#fff; color:#0f70b7; border:1px solid #0f70b7;
    padding:8px 12px; border-radius:8px; font-weight:600; cursor:pointer;
}
.oirs-v2 .btn-outline:hover{ background:#f0f9ff; }

/* Anchuras útiles (ya tienes fit-sm/md/lg; sumo 2 más para campos cortos) */
.oirs-v2 .fit-xs  { max-width:160px; width:100%; }
.oirs-v2 .fit-xxs { max-width:60px;  width:100%; }

/* Alineación vertical consistente en filas con iconos/texto */
.oirs-v2 .row { display:flex; gap:12px; align-items:center; }

/* Inputs de una línea con altura mínima coherente (no afecta textareas) */
.oirs-v2 input[type="text"],
.oirs-v2 input[type="email"],
.oirs-v2 input[type="password"],
.oirs-v2 select { min-height:38px; }

/* En pantallas pequeñas, una sola columna (ya lo maneja Tailwind, refuerzo) */
@media (max-width: 767px){
    .oirs-v2 .form-narrow { padding:12px; }
}
/* ====== UI Moderna (sin romper legacy) ====== */
.oirs-v2 .section-header {
    display: grid;
    grid-template-columns: 24px 1fr;  /* badge | texto */
    grid-template-rows: auto auto;    /* h3 arriba, p abajo */
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
    margin-bottom: 10px;
}

.oirs-v2 .section-header .step-badge {
    grid-column: 1;
    grid-row: 1 / span 2;             /* ocupa ambas filas */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 700;
}

.oirs-v2 .section-header h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 16px;
    color: var(--primary);
    font-weight: 700;
}

.oirs-v2 .section-header p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    color: var(--muted);
}
/* Ensanchar los selects de Tipo y Sede */
.oirs-v2 select[name="par_poirs_tiposoli"],
.oirs-v2 select[name="par_kcodsede"] {
    max-width: 400px; /* puedes probar 560 o 600 si quieres aún más ancho */
    width: 100%;
}
/* Reducir la separación entre las 2 columnas del Paso 1 */
.oirs-v2 .card:first-of-type .form-grid {
    gap: 6px; /* estaba en 12px */
}
/* Layout moderno del paso 2 */
.oirs-v2 .modern-form { display: grid; gap: 14px; }
.oirs-v2 .field label { display:block; font-weight:600; margin-bottom:6px; }
.oirs-v2 .help { font-size:12px; color:#64748b; margin-top:4px; }
.oirs-v2 .input-row { display:flex; align-items:center; gap:8px; }

/* Que inputs y selects legacy ocupen ancho completo */
.oirs-v2 input.TEXTazul2SN,
.oirs-v2 select.TEXTazulSN,
.oirs-v2 textarea.TEXTazul2SN { width:100%; max-width:100%; }

/* Evitar que los selects de región/prov/comuna “empujen” el layout */
.oirs-v2 .rpc-grid select { min-width:0; }
/* Mantén inputs al 100% por defecto, pero NO dentro del bloque del RUT */
.oirs-v2 input.TEXTazul2SN,
.oirs-v2 select.TEXTazulSN,
.oirs-v2 textarea.TEXTazul2SN { width: 100%; max-width: 100%; }

/* Excepción específica para el bloque RUT */
.oirs-v2 .rut-row input.TEXTazul2SN { width: auto; max-width: none; }
.oirs-v2 .rut-row .rut-num { width: 12ch; }   /* 8 dígitos cómodos */
.oirs-v2 .rut-row .rut-dv  { width: 3ch; text-align: center; }
/* === OIRS v2 – Afinado visual contundente (overrides) ================== */

/* 0) Contenedor centrado y tarjetas con más jerarquía */
.oirs-v2 .form-narrow { max-width: 980px; margin: 0 auto; }
.oirs-v2 .card {
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(2,6,23,.05);
}

/* 1) Tipos y encabezados */
.oirs-v2 .tit_pag { font-size: 20px; border-radius: 12px; }
.oirs-v2 .section-header { margin-bottom: 14px; }
.oirs-v2 .section-header h3 { font-size: 18px; }
.oirs-v2 .muted { color: #64748b; }

/* 2) Ritmo vertical y labels */
.oirs-v2 .field { margin-bottom: 14px; }
.oirs-v2 .field > label { display:block; font-weight: 700; margin-bottom: 6px; }
.oirs-v2 .field label.sub { display:block; font-size:12px; color:#6b7280; font-weight:600; margin-bottom:4px; }

/* 3) Inputs/Selects pulidos (borde, foco, altura consistente) */
.oirs-v2 input[type="text"],
.oirs-v2 input[type="email"],
.oirs-v2 input[type="password"],
.oirs-v2 select,
.oirs-v2 textarea {
    background:#fff;
    border:1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    line-height: 1.4;
    min-height: 40px;
    box-sizing: border-box;
}
.oirs-v2 input:focus, .oirs-v2 select:focus, .oirs-v2 textarea:focus {
    outline:none;
    border-color:#0f70b7;
    box-shadow:0 0 0 3px rgba(15,112,183,.15);
}
.oirs-v2 input::placeholder, .oirs-v2 textarea::placeholder { color:#94a3b8; }

/* 4) Fila con ícono no empuja; mantiene aire justo */
.oirs-v2 .input-row { display:flex; align-items:center; gap:8px; }
.oirs-v2 .input-row i { opacity:.55; }

/* 5) Anchos útiles (coherentes en cabecera y email) */
.oirs-v2 .fit-xxs{max-width:80px;width:100%;}
.oirs-v2 .fit-xs {max-width:160px;width:100%;}
.oirs-v2 .fit-sm {max-width:260px;width:100%;}
.oirs-v2 .fit-md {max-width:420px;width:100%;}
.oirs-v2 .fit-lg {max-width:560px;width:100%;}

/* 6) Selecciones principales más anchas */
.oirs-v2 select[name="par_poirs_tiposoli"],
.oirs-v2 select[name="par_kcodsede"] { max-width: 560px; }

/* 7) RUT/DV compactos y siempre visibles */
.oirs-v2 .rut-row input.TEXTazul2SN { width:auto; max-width:none; }
.oirs-v2 .rut-row .rut-num { width: 12ch; }
.oirs-v2 .rut-row .rut-dv  { width: 3ch; text-align:center; }

/* 8) Región/Provincia/Comuna: que no rompan el layout */
.oirs-v2 .rpc-grid select { min-width:0; }

/* 9) Radios y ayuditas */
.oirs-v2 .help { font-size:12px; color:#64748b; margin-top:4px; }

/* 10) Contadores con look de “badge” */
.oirs-v2 .counter-badge input{
    border-radius: 10px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    padding:4px 8px;
    font-weight:700;
    width:60px;
    text-align:center;
}

/* 11) Ajustes de la tabla (adjuntos y legacy) — compacta y limpia */
.oirs-v2 table.tabla { table-layout: fixed; border-radius: 12px; }
.oirs-v2 table.tabla td, .oirs-v2 table.tabla th { padding: 10px 12px; }
.oirs-v2 table.tabla input.TEXTazul2SN,
.oirs-v2 table.tabla select.TEXTazulSN,
.oirs-v2 table.tabla textarea.TEXTazul2SN {
    border:1px solid #cbd5e1 !important;
    border-radius:10px !important;
    padding:10px 12px !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

/* 12) Responsive fino (sin saltos raros) */
@media (max-width: 768px){
    .oirs-v2 .form-narrow { padding: 0 10px; }
    .oirs-v2 .form-grid { grid-template-columns: 1fr !important; }
}
/* === Bordes nítidos y foco claro ====================================== */
.oirs-v2 {
    --field-border: #8da2b8;      /* más contraste que #cbd5e1 */
    --field-border-hover: #6282a3;
    --field-border-focus: #0f70b7; /* tu primario */
    --field-bg: #ffffff;
    --field-ring: rgba(15,112,183,.18);
}

/* Inputs/ selects/ textareas (incluyendo clases legacy) */
.oirs-v2 input[type="text"],
.oirs-v2 input[type="email"],
.oirs-v2 input[type="password"],
.oirs-v2 select,
.oirs-v2 textarea,
.oirs-v2 input.TEXTazul2SN,
.oirs-v2 select.TEXTazulSN,
.oirs-v2 textarea.TEXTazul2SN {
    background: var(--field-bg) !important;
    border: 1.5px solid var(--field-border) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    min-height: 40px;
    line-height: 1.4;
    box-sizing: border-box !important;
}

/* Hover y foco bien evidentes */
.oirs-v2 input:hover,
.oirs-v2 select:hover,
.oirs-v2 textarea:hover {
    border-color: var(--field-border-hover) !important;
}

.oirs-v2 input:focus,
.oirs-v2 select:focus,
.oirs-v2 textarea:focus {
    outline: none !important;
    border-color: var(--field-border-focus) !important;
    box-shadow: 0 0 0 3px var(--field-ring) !important;
}

/* Placeholders un poco más visibles pero suaves */
.oirs-v2 input::placeholder,
.oirs-v2 textarea::placeholder {
    color: #8ea3b7;
}

/* RUT cortito y DV centrado (se mantiene tu layout) */
.oirs-v2 .rut-row .rut-num { width: 12ch; }
.oirs-v2 .rut-row .rut-dv  { width: 3ch; text-align: center; }
/* ====== Grid de 2 columnas con labels arriba ====== */
.oirs-v2 .grid-2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .oirs-v2 .grid-2 { grid-template-columns: 1fr 1fr; } }
.oirs-v2 .field label { display:block; font-weight:600; margin-bottom:6px; }

/* ====== Anchos útiles para inputs/selects ====== */
.oirs-v2 .fit-xxs { max-width: 80px;  width:100%; }
.oirs-v2 .fit-xs  { max-width: 160px; width:100%; }
.oirs-v2 .fit-sm  { max-width: 260px; width:100%; }
.oirs-v2 .fit-md  { max-width: 420px; width:100%; }
.oirs-v2 .fit-lg  { max-width: 640px; width:100%; }

/* Si algún estilo heredado aún pone width:100% a TODOS los selects,
   fuerza la prioridad en los que quieras ajustar. */
.oirs-v2 select.fit-xxs,
.oirs-v2 select.fit-xs,
.oirs-v2 select.fit-sm,
.oirs-v2 select.fit-md,
.oirs-v2 select.fit-lg { width: 100% !important; }

/* Si usas TEXTazulSN en selects y te "aplana" los anchos, vuelve a forzar: */
.oirs-v2 select.TEXTazulSN.fit-sm { max-width:260px !important; }
.oirs-v2 select.TEXTazulSN.fit-md { max-width:420px !important; }
.oirs-v2 select.TEXTazulSN.fit-lg { max-width:640px !important; }

/* Bordes visibles y foco (por si algo lo pisa) */
.oirs-v2 input[type="text"],
.oirs-v2 input[type="email"],
.oirs-v2 input[type="password"],
.oirs-v2 select,
.oirs-v2 textarea {
    background: var(--field-bg, #fff) !important;
    border: 1.5px solid var(--field-border, #b6c6d6) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    min-height: 40px;
    line-height: 1.4;
    box-sizing: border-box !important;
}
.oirs-v2 input:focus, .oirs-v2 select:focus, .oirs-v2 textarea:focus {
    outline: none;
    border-color: #0f70b7 !important;
    box-shadow: 0 0 0 3px rgba(15,112,183,.15) !important;
}
/* Indenta todo lo que está debajo del encabezado de cada paso */
.oirs-v2 .card > :not(.section-header){
    margin-left: 8px;
    padding-left: 18px;
    border-radius: 8px 0 0 8px;
}
@media (max-width: 768px){
    .oirs-v2 .card > :not(.section-header){
        margin-left: 0;
        padding-left: 12px;
        border-left-width: 3px;
    }
}
/* ----- Footer dentro de cada paso (card) ----- */
.oirs-v2 .step-actions{
    display:flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Botón secundario (Anterior) */
.oirs-v2 .btn-secondary{
    background:#fff;
    border:1px solid #cbd5e1;
    color:#334155;
    padding:10px 16px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
}
.oirs-v2 .btn-secondary:hover{ background:#f8fafc; }

/* Botón éxito (Enviar) */
.oirs-v2 .btn-success{
    background: linear-gradient(135deg,#10b981,#059669);
    border:1px solid #059669;
    color:#fff;
    padding:10px 16px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
}
.oirs-v2 .btn-success:hover{ filter:brightness(1.05); }

/* Indent visual suave dentro del Paso 2 (lo rojo que querías mover a la derecha) */
.oirs-v2 .modern-pad-l{
    border-left: 3px solid #e5e7eb;
    padding-left: 12px;
    margin-left: 8px;
}
@media (min-width:768px){
    .oirs-v2 .modern-pad-l{ padding-left:16px; margin-left:12px; }
}
/* === Utilidades de ancho (colócalas al FINAL del CSS) === */
.oirs-v2 .fit-xxs { max-width:140px !important; width:100% !important; }
.oirs-v2 .fit-xs  { max-width:200px !important; width:100% !important; }
.oirs-v2 .fit-sm  { max-width:260px !important; width:100% !important; }
.oirs-v2 .fit-md  { max-width:360px !important; width:100% !important; }
.oirs-v2 .fit-lg  { max-width:480px !important; width:100% !important; }
/* (opcional) que respeten auto si lo necesitas */
.oirs-v2 .fit-auto { width:auto !important; max-width:none !important; }

/* ===== Wizard con header integrado ===== */
.oirs-v2 .wizard-card{
    padding: 0;                  /* el padding va en .wizard-body */
    overflow: hidden;            /* redondeo limpio */
}

.oirs-v2 .wizard-header{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(0deg, #f6f6fa, #fff);
    border-bottom: 1px solid var(--border);
    color: var(--primary);
    font-weight: 700;
    font-size: 18px;
}

.oirs-v2 .wizard-header i{ opacity: .85; }

.oirs-v2 .wizard-body{
    padding: 16px;               /* interior del card: acá viven los pasos */
}

/* Los pasos ya no son cards individuales */
.oirs-v2 .form-step{
    background: transparent;
    border: 0;
    padding: 0;
}

/* Opcional: separador sutil entre secciones dentro del paso */
.oirs-v2 .form-step + .form-step{
    margin-top: 0; /* no se usa porque solo hay un step visible */
}
/* Ícono junto al label (no al input) */
.oirs-v2 .field > label.label-row{
    display:inline-flex; align-items:center; gap:6px;
}
.oirs-v2 .field > label.label-row i{ opacity:.75; }

/* Label con icono a la izquierda del texto */
.oirs-v2 .label-row{
    display: inline-flex;         /* ícono y texto en una línea */
    align-items: center;          /* centrado vertical */
    gap: 8px;                     /* espacio entre ícono y texto */
    margin-bottom: 6px;           /* aire entre label e input (evita que "se suba") */
    line-height: 1.25;
}
.oirs-v2 .label-row i{ opacity:.75; }

/* asegúrate que los inputs empiecen en nueva línea bajo el label */
.oirs-v2 .field input.TEXTazul2SN,
.oirs-v2 .field select.TEXTazulSN,
.oirs-v2 .field textarea.TEXTazul2SN{
    display:block;
}
.oirs-v2 .req{ color:#dc2626; font-weight:700; }
/* en oirs-v2.css */
.oirs-v2 .label-row{ display:flex; align-items:center; gap:8px; }
.oirs-v2 .label-row i{ color: var(--primary); opacity:.85; font-size:18px; }
.oirs-v2 .req{ color:#dc2626; font-weight:700; }

/* Flecha personalizada para los <select> de .oirs-v2  */
.oirs-v2 select,
.oirs-v2 select.TEXTazulSN {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* no uses 'background:' aquí para no resetear la imagen */
    background-color: #fff !important;

    /* volvemos a poner la flecha y forzamos prioridad */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;  /* mueve la flecha ajustando '16px' */
    background-size: 16px 16px !important;

    padding-right: 44px !important; /* espacio para que el texto no tape la flecha */
}

/* Oculta la flecha de IE/legacy */
.oirs-v2 select::-ms-expand { display: none; }
.chip-counter{
    display:inline-block;
    padding:.15rem .5rem;
    border:1px solid #cbd5e1;
    border-radius:9999px;
    font-size:.85rem;
    line-height:1.2;
}
.chip-counter.warn{ border-color:#f59e0b; color:#b45309; }
.chip-counter.over{ border-color:#ef4444; color:#b91c1c; }
/* ====== Caja "Adjuntar Archivos" ====== */
#dv_adjuntos{
    border:1px solid #cfd8e3;        /* mismo gris que usas en inputs */
    border-radius:12px;
    background:#fff;
    padding:12px;
    margin-top:12px;
}

/* Título "Adjuntar Archivos (Opcional)" */
#dv_adjuntos > label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#334155;
}

/* Tabla interna limpia y fluida */
#tblAdjuntos{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}

#tblAdjuntos td{
    padding:12px;
    vertical-align:middle;
    border-top:1px solid #eef2f7;    /* separador suave entre filas */
}

/* primera fila sin borde superior */
#tblAdjuntos tr:first-child td{ border-top:none; }

/* Columna "Adjunto X:" fija y sin romper */
#tblAdjuntos td:first-child{
    width:160px;
    white-space:nowrap;
    font-weight:600;
    color:#334155;
}

/* Última columna (acciones / alineación derecha) */
#tblAdjuntos td:last-child{
    width:1%;
    text-align:right;
    white-space:nowrap;
}

/* Input file con botón más prolijo (solo CSS, sin JS) */
#tblAdjuntos input[type="file"]{
    font-size:.95rem;
}
#tblAdjuntos input[type="file"]::file-selector-button{
    padding:.4rem .75rem;
    border:1px solid #cfd8e3;
    border-radius:8px;
    background:#f8fafc;
    cursor:pointer;
}
#tblAdjuntos input[type="file"]:hover::file-selector-button{
    background:#f1f5f9;
}

/* Responsive: apila columnas en móviles */
@media (max-width: 640px){
    #tblAdjuntos td{
        display:block;
        width:100% !important;
        padding:8px 0;
        border-top:none;
    }
    #tblAdjuntos tr + tr td{
        border-top:1px solid #eef2f7;
    }
    #tblAdjuntos td:first-child{
        margin-top:8px;
    }
}
/* Caja donde aparecen roles o clave */
.oirs-v2 .verificacion-box {
    min-height: 45px;
    height: auto;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 10px;
    margin-top: 0px;
    background: #f9fafb;
    font-size: 14px;
    color: #1f2937;
    opacity: 0;
    transform: translateY(-4px);
    transition: all .25s ease;
}
.oirs-v2 .verificacion-box.show {
    opacity: 1;
    transform: translateY(0);
}

/* Inputs radio dentro de verificación */
.oirs-v2 .verificacion-box input[type="radio"] {
    margin-right: 6px;
}
.oirs-v2 .verificacion-box label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.oirs-v2 .verificacion-box strong {
    color: var(--primary);
}
.oirs-v2 .verificacion-box input[type="password"],
.oirs-v2 .verificacion-box input[type="text"] {
    width: 100%;
    max-width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
    background: #fff;
}
.oirs-v2 .verificacion-box label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
}
#div_txt_otro_pais[style*="display:none"] {
     display: none !important;
 }