/* ==========================================================================
   VARIABLES DE DISE�O INVARIANTES (Contraste de Gris Corregido)
   ========================================================================== */
:root {
    /* PALETA CENTRAL DEL SISTEMA
       Para cambiar el color institucional, modifique principalmente estas variables. */
    --dp-primary: #6f42c1;
    --dp-primary-hover: #5b35a5;
    --dp-primary-active: #4c2b8c;
    --dp-primary-soft: #f2ecfb;
    --dp-primary-soft-hover: #e8def8;
    --dp-primary-border: #d8c8ed;
    --dp-on-primary: #ffffff;

    /* Graficos: por defecto heredan el violeta institucional */
    --dp-chart-primary: var(--dp-primary);
    --dp-chart-border: var(--dp-primary-border);
    --dp-chart-total: var(--dp-primary);
    --dp-chart-pending: #f59e0b;
    --dp-chart-collected: #22c55e;

    /* Alias usados por las pantallas existentes */
    --primary-blue: var(--dp-primary);
    --btn-cyan: var(--dp-primary);
    --bg-gray: #f8f9fa;
    --border-color: #ced4da;
    --label-color: #212529;
    --text-color: #6c757d;
    --disabled-bg: #e9ecef;
}

* { box-sizing: border-box; }

body {
    background-color: var(--bg-gray);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-color);
    font-size: 13px;
    margin: 0;
}

/* FORMATO EST�NDAR POR TIPO DE OBJETO */
label {
    font-weight: bold;
    color: var(--label-color); /* Aplica el gris oscuro principal */
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.2;
    display: block;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select {
    height: 34px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-color); /* Aplica el tono de gris m�s claro solicitado */
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 100%;
    transition: border-color 0.15s ease-in-out;
}

textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    height: auto;
    resize: vertical;
}

/* ==========================================================================
   ELIMINAR FLECHAS NATIVAS EN INPUTS NUM�RICOS
   ========================================================================== */

/* ?? Para navegadores Chrome, Edge, Safari y Opera (Webkit) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Elimina el margen residual que a veces dejan algunos navegadores */
}

/* ?? Para el navegador Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* ==========================================================================
   ELIMINAR FLECHAS NATIVAS EN INPUTS NUM�RICOS
   ========================================================================== */

input:focus, select:focus {
    border-color: var(--primary-blue);
    outline: 0;
    color: #495057; /* Se oscurece levemente al escribir para mejor legibilidad */
}

input:disabled, select:disabled {
    background-color: var(--disabled-bg);
    color: #adb5bd; /* Texto a�n m�s tenue para el estado bloqueado */
    cursor: not-allowed;
}

.form-group-block {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-inline-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.input-inline-group span {
    color: var(--text-color); /* El nexo "hasta" acompa�a el tono claro */
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Moneda ($) */
.input-currency-group {
    position: relative;
    display: flex;
    width: 100%;
}

.input-currency-group::before {
    content: "$";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999999;
    font-weight: bold;
}

.input-currency-group input {
    padding-left: 24px;
	padding-right: 15px;  /* Agrega una luz de separaci�n contra el borde derecho del input */
    text-align: right;    /* ?? Fuerza la alineaci�n del texto a la derecha */
}
/* ==========================================================================
   SISTEMA DE COLUMNAS GEN�RICAS (Maquetado de L�nea)
   ========================================================================== */
/* .form-line-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-end;
} */

.form-line-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.line-divider {
    grid-column: span 12;
    border-top: 1px dashed #e0e0e0;
    margin: 8px 0;
}

/* Comportamiento M�vil por defecto (Mobile-First) */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 12;
}

@media (max-width: 576px) {
    .input-inline-group {
        flex-direction: column;
        align-items: stretch;
    }
    .input-inline-group span {
        text-align: center;
        margin: 2px 0;
    }
}

/* ?? MONITOR DE ESCRITORIO (Desde 992px) */
@media (min-width: 992px) {
    .col-1  { grid-column: span 1; }
    .col-2  { grid-column: span 2; }
    .col-3  { grid-column: span 3; }
    .col-4  { grid-column: span 4; }
    .col-5  { grid-column: span 5; }
    .col-6  { grid-column: span 6; }
    .col-7  { grid-column: span 7; }
    .col-8  { grid-column: span 8; }
    .col-9  { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
}

/* CONTENEDORES DE PANTALLA */
.panel-container { background: #ffffff; border: 1px solid var(--primary-blue); border-radius: 4px; width: 100%; max-width: 1050px; margin: 0 auto; overflow: hidden; }
.panel-title-bar { background-color: var(--primary-blue); color: #ffffff; text-align: center; padding: 12px; font-size: 14px; font-weight: bold; }
.panel-body-area { padding: 20px; }
/* .operacion-tabs-nav, .operacion-tab-content, .panel-body-area {width: 100%; box-sizing: border-box;} */
.operacion-tabs-nav, .operacion-tab-content {width: 100%; box-sizing: border-box;}
.operacion-tabs-wrapper {
    width: 100%;
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}

.operacion-tab-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--dp-primary);
    margin-bottom: 12px;
}

.operacion-tabs-nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background: #f4f6f8;
    border-bottom: 1px solid #d9e2ec;
    box-sizing: border-box;
}

.operacion-tab-btn {
    flex: 1 1 0;
    width: auto;
    border: none;
    background: transparent;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #5f6b7a;
    cursor: pointer;
    border-right: 1px solid #d9e2ec;
    text-align: center;
}

.operacion-tab-btn:hover {
    background: var(--dp-primary-soft);
    color: var(--dp-primary);
}

.operacion-tab-btn.active {
    background: var(--dp-primary);
    color: #ffffff;
}

.operacion-tab-content {
    display: none;
    width: 100%;
    padding: 18px 20px;
    box-sizing: border-box;
}

.operacion-tab-content.active {
    display: block;
}

.flex-center-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 20px; grid-column: span 12; }
.btn-form { height: 38px; padding: 0 30px; font-size: 13px; font-weight: bold; border-radius: 20px; cursor: pointer; border: none; }
.btn-cyan { background-color: var(--btn-cyan); color: #ffffff; }
.btn-white { background-color: #ffffff; color: #666666; border: 1px solid var(--border-color); }

/* ==========================================================================
   TEMA INSTITUCIONAL CENTRALIZADO
   Todo color principal depende de las variables --dp-* declaradas en :root.
   ========================================================================== */

/* Botones propios y de Bootstrap */
.btn-cyan,
.btn-primary,
.btn-success,
.btn-info,
.dp-btn-primary,
button.btn-cyan,
input.btn-cyan,
input[type="submit"].btn-primary,
input[type="submit"].btn-success {
    background-color: var(--dp-primary) !important;
    border-color: var(--dp-primary) !important;
    color: var(--dp-on-primary) !important;
}

.btn-cyan:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.dp-btn-primary:hover,
button.btn-cyan:hover,
input.btn-cyan:hover,
input[type="submit"].btn-primary:hover,
input[type="submit"].btn-success:hover {
    background-color: var(--dp-primary-hover) !important;
    border-color: var(--dp-primary-hover) !important;
    color: var(--dp-on-primary) !important;
}

.btn-cyan:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.dp-btn-primary:active {
    background-color: var(--dp-primary-active) !important;
    border-color: var(--dp-primary-active) !important;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-info {
    color: var(--dp-primary) !important;
    border-color: var(--dp-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover {
    color: var(--dp-on-primary) !important;
    background-color: var(--dp-primary) !important;
    border-color: var(--dp-primary) !important;
}

/* Encabezados, paneles y t�tulos */
.panel-container {
    border-color: var(--dp-primary) !important;
}
.panel-title-bar,
.dp-header,
.dp-navbar {
    background-color: var(--dp-primary) !important;
    color: var(--dp-on-primary) !important;
}
.operacion-tab-title,
a,
.action-btn,
.text-primary {
    color: var(--dp-primary);
}
.operacion-tab-btn.active,
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.page-item.active .page-link {
    background-color: var(--dp-primary) !important;
    border-color: var(--dp-primary) !important;
    color: var(--dp-on-primary) !important;
}
.operacion-tab-btn:hover,
.nav-tabs .nav-link:hover {
    background-color: var(--dp-primary-soft) !important;
    color: var(--dp-primary) !important;
}

/* Formularios */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--dp-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(111, 66, 193, .16) !important;
    outline: 0;
}
.form-check-input:checked {
    background-color: var(--dp-primary) !important;
    border-color: var(--dp-primary) !important;
}

/* Tailwind: utilidades de color usadas por IncludeHeader.asp */
.bg-sky-400 {
    background-color: var(--dp-primary) !important;
}
.border-sky-400 {
    border-color: var(--dp-primary) !important;
}
.text-sky-500 {
    color: var(--dp-primary) !important;
}
.hover\:text-sky-500:hover {
    color: var(--dp-primary) !important;
}
.hover\:bg-sky-50:hover {
    background-color: var(--dp-primary-soft) !important;
}
.hover\:border-sky-400:hover {
    border-color: var(--dp-primary) !important;
}

/* Elementos frecuentes del sistema */
.badge.bg-primary,
.badge.bg-success,
.alert-primary,
.progress-bar,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--dp-primary) !important;
    border-color: var(--dp-primary) !important;
    color: var(--dp-on-primary) !important;
}
.table-primary,
thead.bg-primary,
.list-table thead {
    --bs-table-bg: var(--dp-primary);
    --bs-table-color: var(--dp-on-primary);
}
.page-link {
    color: var(--dp-primary);
}
.page-link:hover {
    color: var(--dp-primary-hover);
    background-color: var(--dp-primary-soft);
    border-color: var(--dp-primary-border);
}


/* =========================================================
   PORTAL DEL ASEGURADO Y DOCUMENTOS
   ========================================================= */
.d-none{display:none!important}.login-tabs{display:flex;gap:8px;padding:5px;background:var(--dp-primary-soft);border-radius:8px;margin-bottom:20px}.login-tab{flex:1;border:0;background:transparent;padding:10px 12px;border-radius:6px;font-weight:600;color:#5f5375;cursor:pointer}.login-tab.active{background:#fff;color:var(--dp-primary);box-shadow:0 2px 8px rgba(67,38,104,.12)}.login-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:16px;border:1px solid #f2c66d;background:#fff8e8;color:#8a5a00;border-radius:6px;font-size:13px}.login-help{font-size:12px;color:#7a7184;margin:8px 0 18px}
.asegurado-body{margin:0;background:#f6f3fa;color:#31283c;font-family:'Poppins',sans-serif}.asegurado-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:16px max(20px,calc((100% - 1180px)/2));background:var(--dp-primary);color:#fff;box-shadow:0 4px 18px rgba(58,31,91,.18)}.asegurado-header div{display:flex;flex-direction:column}.asegurado-header span{font-size:11px;opacity:.8}.asegurado-salir{color:#fff;text-decoration:none;font-size:13px}.asegurado-main{max-width:1180px;margin:0 auto;padding:28px 20px 50px}.asegurado-bienvenida{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.asegurado-bienvenida div{display:flex;flex-direction:column}.asegurado-bienvenida small{color:#766985}.asegurado-bienvenida strong{font-size:20px}.asegurado-bienvenida p{margin:0;color:#766985;font-size:13px}.seguro-card{background:#fff;border:1px solid #e6ddef;border-radius:10px;box-shadow:0 8px 24px rgba(69,42,96,.07);margin-bottom:22px;overflow:hidden}.seguro-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:20px 22px;background:linear-gradient(135deg,var(--dp-primary-soft),#fff)}.seguro-card-head h2{font-size:19px;margin:4px 0}.seguro-ramo{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dp-primary);font-weight:700}.seguro-dominio{display:inline-block;background:#fff;border:1px solid var(--dp-primary-border);padding:4px 10px;border-radius:5px;font-weight:700;letter-spacing:.08em}.seguro-estado{padding:7px 11px;border-radius:999px;font-size:11px;font-weight:700;max-width:260px;text-align:center}.estado-violeta{background:#eee6f8;color:#633b91}.estado-verde{background:#dcfce7;color:#166534}.estado-ambar{background:#fef3c7;color:#92400e}.estado-rojo{background:#fee2e2;color:#991b1b}.seguro-datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:18px 22px}.seguro-datos div{display:flex;flex-direction:column;gap:3px}.seguro-datos small{font-size:11px;color:#81758d}.seguro-datos strong{font-size:13px}.cuotas-title{padding:12px 22px;border-top:1px solid #eee8f3;font-weight:600;color:var(--dp-primary)}.cuotas-wrap{overflow-x:auto}.cuotas-table{width:100%;border-collapse:collapse;font-size:12px}.cuotas-table th,.cuotas-table td{padding:11px 22px;border-top:1px solid #f0ebf4;text-align:left;white-space:nowrap}.cuotas-table th{color:#756a80;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.cuotas-table .importe{text-align:right;font-weight:600}.cuota-estado{padding:4px 8px;border-radius:999px;font-size:10px;font-weight:700}.cuota-pagada{background:#dcfce7;color:#166534}.cuota-pendiente{background:#fef3c7;color:#92400e}.cuotas-vacio,.asegurado-vacio{text-align:center!important;color:#8b8094;padding:28px!important}.btn-upload-doc{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;margin:0 5px 0 2px;border-radius:4px;border:1px solid var(--dp-primary-border);background:var(--dp-primary-soft);color:var(--dp-primary);text-decoration:none;vertical-align:middle}.btn-upload-doc:hover{background:var(--dp-primary);color:#fff}.upload-body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f6f3fa;font-family:'Poppins',Arial,sans-serif}.upload-card{width:min(520px,calc(100% - 32px));background:#fff;border:1px solid #e6ddef;border-radius:10px;padding:24px;box-shadow:0 12px 32px rgba(69,42,96,.10)}.upload-title{display:flex;gap:12px;align-items:center;margin-bottom:22px;color:var(--dp-primary)}.upload-title i{font-size:28px}.upload-title div{display:flex;flex-direction:column}.upload-title small{color:#81758d}.upload-card label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}.upload-card input[type=file]{width:100%;box-sizing:border-box;border:1px solid #d9cce6;padding:12px;border-radius:6px}.upload-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.upload-ok,.upload-error{padding:10px 12px;border-radius:6px;margin-bottom:14px;font-size:12px}.upload-ok{background:#dcfce7;color:#166534}.upload-error{background:#fee2e2;color:#991b1b}
@media(max-width:760px){.asegurado-bienvenida,.seguro-card-head{align-items:flex-start;flex-direction:column}.seguro-datos{grid-template-columns:repeat(2,minmax(0,1fr))}.seguro-estado{max-width:100%}.cuotas-table th,.cuotas-table td{padding:10px 14px}}

/* Portal del asegurado: pictograma central de la sección */
.seguro-card-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
}
.seguro-card-identidad{justify-self:start;min-width:0}
.seguro-estado-wrap{justify-self:end;display:flex;align-items:center;justify-content:flex-end;min-width:0}
.seguro-seccion-icon{
  width:86px;
  height:86px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  background:#fff;
  border:2px solid var(--dp-primary-border);
  box-shadow:0 7px 20px rgba(74,42,105,.12);
  color:var(--dp-primary);
  overflow:hidden;
}
.seguro-seccion-icon svg{width:70px;height:48px;overflow:visible}
.seguro-seccion-icon circle,
.seguro-seccion-icon .vehiculo-trazo{
  fill:none;
  stroke:currentColor;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.seguro-seccion-icon .vehiculo-cuerpo{
  fill:var(--dp-primary-soft);
  stroke:currentColor;
  stroke-width:3.5;
  stroke-linejoin:round;
}
.seguro-seccion-icon .vehiculo-ventana{
  fill:#fff;
  stroke:currentColor;
  stroke-width:3;
  stroke-linejoin:round;
}
@media(max-width:760px){
  .seguro-card-head{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"identidad icono" "estado estado";
    align-items:center;
  }
  .seguro-card-identidad{grid-area:identidad}
  .seguro-seccion-icon{grid-area:icono;width:72px;height:72px}
  .seguro-seccion-icon svg{width:58px;height:42px}
  .seguro-estado-wrap{grid-area:estado;justify-self:start;margin-top:4px}
}

/* Portal del asegurado v8: ilustraciones SVG sobrias y más representativas */
.seguro-seccion-icon{
  background:linear-gradient(145deg,#fff,var(--dp-primary-soft));
  border:1px solid var(--dp-primary-border);
  box-shadow:0 6px 18px rgba(74,42,105,.10),inset 0 0 0 5px rgba(255,255,255,.72);
}
.seguro-seccion-icon svg{width:76px;height:54px}
.seguro-seccion-icon .vehiculo-rueda{
  fill:#fff;
  stroke:#43394d;
  stroke-width:4;
}
.seguro-seccion-icon .vehiculo-eje{
  fill:var(--dp-primary);
  stroke:none;
}
.seguro-seccion-icon .vehiculo-cuerpo{
  fill:#e9def4;
  stroke:var(--dp-primary);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.seguro-seccion-icon .vehiculo-ventana{
  fill:#fff;
  stroke:#756585;
  stroke-width:2.4;
  stroke-linejoin:round;
}
.seguro-seccion-icon .vehiculo-trazo,
.seguro-seccion-icon .vehiculo-marco,
.seguro-seccion-icon .vehiculo-detalle{
  fill:none;
  stroke:#62556e;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.seguro-seccion-icon .vehiculo-asiento{
  fill:#4c4255;
  stroke:#4c4255;
  stroke-width:2;
  stroke-linejoin:round;
}
.seguro-seccion-icon .vehiculo-motor{
  fill:#fff;
  stroke:#62556e;
  stroke-width:2.2;
  stroke-linejoin:round;
}
.seguro-seccion-icon .vehiculo-luz{
  fill:#fff;
  stroke:var(--dp-primary);
  stroke-width:1.8;
  stroke-linejoin:round;
}
@media(max-width:760px){
  .seguro-seccion-icon svg{width:64px;height:46px}
}

/* Portal del asegurado v9: ficha sobria basada en el diseño aprobado */
.asegurado-body{background:#f5f2f8}
.asegurado-main{max-width:1080px}
.seguro-card{border-radius:14px;border-color:#e8e0ee;box-shadow:0 12px 34px rgba(70,42,96,.08)}
.seguro-card-head{display:block;padding:0;background:linear-gradient(180deg,#fff 0%,#fff 46%,#faf8fc 100%);border-bottom:1px solid #eee8f3}
.seguro-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 28px 10px}
.seguro-card-identidad h2{font-size:22px;line-height:1.25;margin:5px 0 10px;color:#2f2638;font-weight:600}
.seguro-ramo{font-size:10px;letter-spacing:.12em;color:#766486}
.seguro-dominio{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:0;border-radius:0;letter-spacing:normal}
.seguro-dominio span{font-size:11px;color:#8a7e93}
.seguro-dominio strong{display:inline-flex;padding:4px 9px;border:1px solid #ddd2e7;border-radius:6px;background:#fff;color:#4b3d58;font-size:12px;letter-spacing:.08em}
.seguro-estado-wrap{padding-top:2px}
.seguro-estado{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:10px;letter-spacing:.03em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.seguro-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 20px}
.seguro-seccion-icon{width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff 0,#fbf8fd 48%,#eee7f4 100%);border:1px solid #e5dced;box-shadow:0 15px 35px rgba(79,49,105,.11),inset 0 0 0 10px rgba(255,255,255,.5);overflow:visible}
.seguro-seccion-icon svg{width:225px;height:128px;filter:drop-shadow(0 7px 7px rgba(57,43,66,.16));overflow:visible}
.seguro-seccion-icon .vehiculo-sombra{fill:rgba(55,42,65,.16);stroke:none}
.seguro-seccion-icon .vehiculo-neumatico{fill:#3f3944;stroke:#29242d;stroke-width:3}
.seguro-seccion-icon .vehiculo-llanta{fill:#dcd7e0;stroke:#736b79;stroke-width:3}
.seguro-seccion-icon .vehiculo-eje{fill:#6f3d94;stroke:none}
.seguro-seccion-icon .vehiculo-cuerpo{fill:#8e63aa;stroke:#5f3978;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.seguro-seccion-icon .vehiculo-ventana{fill:#e8edf2;stroke:#675b70;stroke-width:2.6;stroke-linejoin:round}
.seguro-seccion-icon .vehiculo-marco,.seguro-seccion-icon .vehiculo-detalle,.seguro-seccion-icon .vehiculo-estructura,.seguro-seccion-icon .vehiculo-linea-carroceria,.seguro-seccion-icon .vehiculo-zocalo,.seguro-seccion-icon .vehiculo-manubrio{fill:none;stroke:#584c61;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.seguro-seccion-icon .vehiculo-linea-carroceria{stroke:#cdb7dc;stroke-width:2.2}
.seguro-seccion-icon .vehiculo-zocalo{stroke:#4b4052;stroke-width:4}
.seguro-seccion-icon .vehiculo-asiento{fill:#403946;stroke:#2f2934;stroke-width:2.5}
.seguro-seccion-icon .vehiculo-motor{fill:#eeeaf0;stroke:#62586a;stroke-width:2.5}
.seguro-seccion-icon .vehiculo-escape{fill:#b7b0ba;stroke:#554d5b;stroke-width:2.5}
.seguro-seccion-icon .vehiculo-luz{fill:#fff7cf;stroke:#755e36;stroke-width:1.8}
.seguro-marca-sello{display:flex;align-items:center;gap:8px;margin-top:12px;color:#57485f;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.seguro-marca-punto{width:9px;height:9px;border-radius:50%;border:2px solid var(--dp-primary);box-shadow:0 0 0 3px var(--dp-primary-soft)}
.seguro-datos{padding:22px 28px;gap:18px}
.seguro-datos div{padding-right:14px;border-right:1px solid #eee8f3}
.seguro-datos div:last-child{border-right:0}
.cuotas-title{padding:14px 28px;background:#fcfbfd}
.cuotas-table th,.cuotas-table td{padding:12px 28px}
@media(max-width:760px){
  .seguro-card-top{padding:20px 18px 8px;gap:12px}
  .seguro-card-identidad h2{font-size:18px}
  .seguro-estado{font-size:9px;padding:6px 9px}
  .seguro-visual{padding:4px 12px 18px}
  .seguro-seccion-icon{width:190px;height:190px}
  .seguro-seccion-icon svg{width:170px;height:104px}
  .seguro-datos{padding:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .seguro-datos div{border-right:0;border-bottom:1px solid #eee8f3;padding-bottom:10px}
  .cuotas-title{padding:13px 18px}
}

/* Portal del asegurado v10: cabecera institucional y ficha aprobada */
.asegurado-header{
  position:sticky;
  display:grid;
  grid-template-columns:1fr minmax(300px,2fr) 1fr;
  align-items:center;
  min-height:92px;
  padding:12px max(20px,calc((100% - 1180px)/2));
}
.asegurado-header-titulo{justify-self:start;display:block!important}
.asegurado-header-titulo strong{font-size:21px;letter-spacing:-.02em}
.asegurado-productor{justify-self:center!important;align-items:center;text-align:center;line-height:1.35;min-width:0}
.asegurado-productor strong{font-size:15px;font-weight:600;max-width:620px}
.asegurado-productor span{font-size:12px!important;opacity:.9!important;margin-top:2px}
.asegurado-productor small{font-size:10px;letter-spacing:.035em;opacity:.78;margin-top:2px}
.asegurado-salir{justify-self:end;white-space:nowrap}
.seguro-poliza-linea{display:flex;align-items:center;gap:8px;min-height:31px}
.btn-poliza-futura{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border:1px solid var(--dp-primary-border);border-radius:5px;background:var(--dp-primary-soft);color:var(--dp-primary);text-decoration:none;transition:.18s ease;flex:0 0 auto}
.btn-poliza-futura:hover{background:var(--dp-primary);border-color:var(--dp-primary);color:#fff;transform:translateY(-1px)}
.seguro-seccion-icon svg{width:235px;height:145px}
.seguro-seccion-icon .vehiculo-cuerpo{paint-order:stroke fill}
.seguro-seccion-icon .vehiculo-llanta{fill:#d9d5dc;stroke:#655e69;stroke-width:3}
.seguro-seccion-icon .vehiculo-neumatico{fill:#37323b;stroke:#242028;stroke-width:3}
.seguro-seccion-icon .vehiculo-eje{fill:#7a4998}
.seguro-seccion-icon .vehiculo-luz{filter:drop-shadow(0 0 3px rgba(255,239,165,.5))}
@media(max-width:760px){
  .asegurado-header{grid-template-columns:1fr auto;grid-template-areas:"titulo salir" "productor productor";row-gap:8px;min-height:auto;padding-top:12px;padding-bottom:12px}
  .asegurado-header-titulo{grid-area:titulo}
  .asegurado-productor{grid-area:productor;width:100%;border-top:1px solid rgba(255,255,255,.18);padding-top:8px}
  .asegurado-salir{grid-area:salir}
  .asegurado-productor strong{font-size:13px}
  .seguro-seccion-icon svg{width:176px;height:112px}
}


/* Portal del Asegurado: navegación, siniestros y ayuda */
.asegurado-menu{display:flex;align-items:center;justify-content:flex-end;gap:22px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid #ece7f1}
.asegurado-menu a{display:inline-flex;align-items:center;gap:6px;padding:6px 0;color:#6a6170;text-decoration:none;font-size:13px;font-weight:500;border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;transition:.2s}
.asegurado-menu a:hover{color:#6d3b85;border-bottom-color:#d8c9e2}
.asegurado-menu a.activo{color:#6d3b85;border-bottom-color:#6d3b85;font-weight:700;background:transparent}
.asegurado-menu a.asegurado-salir{margin-left:12px}.asegurado-bienvenida strong{display:block}.asegurado-bienvenida span{display:block;margin-top:3px;color:#77677f;font-size:12px}.portal-info-main{max-width:1120px}.portal-hero-card,.portal-contact-card,.ayuda-card,.portal-note,.asegurado-resumen{background:#fff;border:1px solid #eadff0;border-radius:16px;box-shadow:0 10px 30px rgba(69,37,83,.07)}.portal-hero-card{display:flex;align-items:center;gap:20px;padding:28px;margin-bottom:22px}.portal-hero-icon{width:70px;height:70px;min-width:70px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8e62a8,#5d3373);color:#fff;font-size:30px}.portal-hero-card small,.portal-contact-card small,.ayuda-identidad small,.ayuda-datos small,.asegurado-resumen small{color:#8b7894;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.portal-hero-card h1{font-size:25px;color:#452553;margin:4px 0 7px}.portal-hero-card p,.portal-contact-card p{color:#74657b;margin:0}.pasos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.paso-card{position:relative;background:#fff;border:1px solid #eadff0;border-radius:14px;padding:22px;min-height:220px}.paso-card>span{position:absolute;right:16px;top:14px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f1e9f6;color:#6d3b85;font-weight:700}.paso-card>i{font-size:27px;color:#784991}.paso-card h2{font-size:16px;color:#4c2c5a;margin:14px 0 8px}.paso-card p{font-size:13px;line-height:1.65;color:#74657b;margin:0}.portal-contact-card{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px;margin-top:20px}.portal-contact-card h2{font-size:20px;color:#4c2c5a;margin:3px 0}.portal-actions{display:flex;gap:9px;flex-wrap:wrap}.portal-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border-radius:9px;background:#6d3b85;color:#fff;text-decoration:none;font-size:12px;font-weight:700}.portal-btn:hover{background:#58306c;color:#fff}.portal-btn-sec{background:#f3edf6;color:#63387a;border:1px solid #e2d4e9}.portal-btn-sec:hover{background:#e9dff0;color:#58306c}.portal-note{display:flex;gap:10px;padding:16px 18px;margin-top:16px;color:#66556e;font-size:12px}.portal-note i{color:#75468c;font-size:17px}.ayuda-card{padding:28px}.ayuda-identidad{display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid #eee5f2}.ayuda-avatar{width:62px;height:62px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8f65a8,#5c3370);color:#fff;font-size:19px;font-weight:800}.ayuda-identidad h2{margin:4px 0 2px;color:#472756;font-size:23px}.ayuda-identidad p{margin:0;color:#8a7892;font-size:12px}.ayuda-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:22px 0}.ayuda-datos>div{display:flex;align-items:flex-start;gap:12px;padding:15px;border-radius:11px;background:#faf7fb;border:1px solid #eee5f2}.ayuda-datos>div>i{font-size:20px;color:#75468c}.ayuda-datos span{display:flex;flex-direction:column;min-width:0}.ayuda-datos strong{color:#4f3d57;font-size:13px;word-break:break-word}.ayuda-datos .dato-ancho{grid-column:1/-1}.ayuda-actions{padding-top:3px}.asegurado-resumen{display:flex;align-items:center;gap:14px;padding:18px;margin-top:18px}.asegurado-resumen>i{font-size:28px;color:#75468c}.asegurado-resumen div{display:flex;flex-direction:column}.asegurado-resumen strong{color:#4c2c5a}.asegurado-resumen span{font-size:12px;color:#806f87}.asegurado-body footer{margin-top:30px!important}
@media(max-width:900px){.asegurado-header{align-items:flex-start;gap:14px;flex-wrap:wrap}.asegurado-productor{order:3;width:100%}.asegurado-menu{margin-left:auto}.pasos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.asegurado-menu{width:100%;justify-content:center}.asegurado-menu a{padding:8px 9px;font-size:11px}.portal-hero-card{align-items:flex-start;padding:20px}.portal-hero-icon{width:54px;height:54px;min-width:54px;font-size:24px}.portal-hero-card h1{font-size:20px}.pasos-grid{grid-template-columns:1fr}.paso-card{min-height:auto}.portal-contact-card{align-items:flex-start;flex-direction:column}.ayuda-card{padding:20px}.ayuda-datos{grid-template-columns:1fr}.ayuda-datos .dato-ancho{grid-column:auto}.portal-actions{width:100%}.portal-btn{flex:1}.asegurado-header-titulo{width:100%;text-align:center}}


/* =========================================================
   PORTAL DEL ASEGURADO v14 - CABECERA, VEHICULOS Y FOOTER
   ========================================================= */
.asegurado-header{
  display:grid!important;
  grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) minmax(280px,1fr)!important;
  grid-template-areas:"espacio titulo productor" "menu menu menu"!important;
  align-items:center!important;
  gap:10px 24px!important;
  min-height:auto!important;
  padding:16px max(20px,calc((100% - 1180px)/2)) 10px!important;
}
.asegurado-header-espacio{grid-area:espacio}
.asegurado-header-titulo{grid-area:titulo;justify-self:center!important;text-align:center!important;display:block!important}
.asegurado-header-titulo strong{font-size:24px!important;font-weight:650!important;letter-spacing:-.025em}
.asegurado-productor{grid-area:productor;justify-self:end!important;align-items:flex-end!important;text-align:right!important;line-height:1.35!important}
.asegurado-productor strong{font-size:14px!important;max-width:390px}
.asegurado-productor span{font-size:12px!important;margin-top:2px}
.asegurado-productor small{font-size:10px!important;letter-spacing:.025em;margin-top:2px}
.asegurado-header-menu{grid-area:menu;width:100%;border-top:1px solid rgba(255,255,255,.18);padding-top:8px}
.asegurado-menu{display:flex!important;align-items:center;justify-content:center!important;gap:24px;flex-wrap:wrap;padding:0!important;border:0!important}
.asegurado-menu a{color:rgba(255,255,255,.82)!important;border-bottom:2px solid transparent!important;padding:5px 0!important}
.asegurado-menu a:hover,.asegurado-menu a.activo{color:#fff!important;border-bottom-color:#fff!important;background:transparent!important}
.asegurado-menu a.asegurado-salir{margin-left:18px!important}

/* Ilustración más proporcionada: aproximadamente la mitad del tamaño anterior */
.seguro-visual{padding:8px 18px 16px!important}
.seguro-seccion-icon{
  width:128px!important;
  height:128px!important;
  min-width:128px!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 45% 35%,#fff 0,#fbf9fd 47%,#ece3f2 100%)!important;
  border:1px solid #dfd2e8!important;
  box-shadow:0 10px 24px rgba(75,45,96,.12),inset 0 0 0 6px rgba(255,255,255,.58)!important;
}
.seguro-seccion-icon svg{width:119px!important;height:82px!important;filter:drop-shadow(0 5px 5px rgba(48,35,56,.18))!important}
.seguro-marca-sello{margin-top:8px!important;font-size:11px!important}
.seguro-seccion-icon .vehiculo-sombra{fill:rgba(50,38,58,.18);stroke:none}
.seguro-seccion-icon .vehiculo-neumatico{fill:#29252d;stroke:#17141b;stroke-width:4}
.seguro-seccion-icon .vehiculo-llanta{stroke:#5e5763;stroke-width:3}
.seguro-seccion-icon .vehiculo-eje{fill:#70438c;stroke:#fff;stroke-width:2}
.seguro-seccion-icon .vehiculo-rayos path{fill:none;stroke:#746d78;stroke-width:2.2;stroke-linecap:round}
.seguro-seccion-icon .vehiculo-cuerpo{stroke:#533068;stroke-width:4;stroke-linejoin:round;paint-order:stroke fill}
.seguro-seccion-icon .vehiculo-ventana{stroke:#5f5966;stroke-width:3;stroke-linejoin:round}
.seguro-seccion-icon .vehiculo-marco,.seguro-seccion-icon .vehiculo-detalle,.seguro-seccion-icon .vehiculo-estructura,.seguro-seccion-icon .vehiculo-linea-carroceria,.seguro-seccion-icon .vehiculo-zocalo,.seguro-seccion-icon .vehiculo-manubrio,.seguro-seccion-icon .vehiculo-manija,.seguro-seccion-icon .vehiculo-cromo,.seguro-seccion-icon .vehiculo-reflejo{fill:none;stroke:#4f4854;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.seguro-seccion-icon .vehiculo-linea-carroceria{stroke:#d8c4e4;stroke-width:2.3}
.seguro-seccion-icon .vehiculo-zocalo{stroke:#3d3642;stroke-width:5}
.seguro-seccion-icon .vehiculo-cromo{stroke-width:4}
.seguro-seccion-icon .vehiculo-reflejo{stroke:#eadff1;stroke-width:4}
.seguro-seccion-icon .vehiculo-asiento{fill:#39333e;stroke:#211d25;stroke-width:3}
.seguro-seccion-icon .vehiculo-motor{stroke:#5f5864;stroke-width:3}
.seguro-seccion-icon .vehiculo-detalle-relleno{fill:#dcd6df;stroke:#625a68;stroke-width:2.5}
.seguro-seccion-icon .vehiculo-escape{fill:#aaa3ae;stroke:#4f4854;stroke-width:3}
.seguro-seccion-icon .vehiculo-carenado{fill:#6f418c;stroke:#4f2a64;stroke-width:3}
.seguro-seccion-icon .vehiculo-luz,.seguro-seccion-icon .vehiculo-luz-delantera{fill:#fff4bd;stroke:#78612f;stroke-width:2.5}
.seguro-seccion-icon .vehiculo-luz-centro{fill:#fff;stroke:none}
.seguro-seccion-icon .vehiculo-luz-trasera{fill:#e78088;stroke:#7e343c;stroke-width:2.5}

/* Footer institucional integrado al lenguaje visual de la plataforma */
.portal-footer{margin-top:38px;background:#392447;color:#e8dfed;border-top:4px solid var(--dp-primary)}
.portal-footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.35fr .8fr;gap:38px;padding:38px 24px 30px}
.portal-footer-col h4{margin:0 0 14px;color:#fff;font-size:15px;font-weight:650}
.portal-footer-col p{margin:0 0 11px;color:#cfc2d6;font-size:12px;line-height:1.65}
.portal-footer-col a{color:#eadcf2;text-decoration:none}
.portal-footer-col a:hover{color:#fff;text-decoration:underline}
.portal-footer-ssn{display:inline-flex;align-items:center;max-width:100%;padding:7px 10px;margin-bottom:10px;background:#fff;border-radius:6px}
.portal-footer-ssn img{display:block;max-width:100%;height:auto;object-fit:contain}
.portal-footer-matricula{font-size:11px!important;color:#bfaec8!important}
.portal-social-icons{display:flex;gap:10px;flex-wrap:wrap}
.portal-social-icons a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:17px;transition:.2s}
.portal-social-icons a:hover{background:var(--dp-primary);transform:translateY(-2px);text-decoration:none}
.portal-footer-bottom{text-align:center;padding:12px 20px;background:rgba(0,0,0,.16);color:#bdaec5;font-size:11px;border-top:1px solid rgba(255,255,255,.08)}

@media(max-width:900px){
  .asegurado-header{grid-template-columns:1fr auto!important;grid-template-areas:"titulo productor" "menu menu"!important}
  .asegurado-header-espacio{display:none}
  .portal-footer-inner{grid-template-columns:1fr 1fr}
  .portal-footer-social{grid-column:1/-1}
}
@media(max-width:640px){
  .asegurado-header{grid-template-columns:1fr!important;grid-template-areas:"titulo" "productor" "menu"!important;text-align:center!important}
  .asegurado-header-titulo{justify-self:center!important}
  .asegurado-productor{justify-self:center!important;align-items:center!important;text-align:center!important}
  .asegurado-menu{gap:13px!important}
  .asegurado-menu a.asegurado-salir{margin-left:0!important}
  .seguro-seccion-icon{width:112px!important;height:112px!important;min-width:112px!important}
  .seguro-seccion-icon svg{width:104px!important;height:72px!important}
  .portal-footer-inner{grid-template-columns:1fr;gap:25px;padding:30px 20px 24px}
  .portal-footer-social{grid-column:auto}
}

/* =========================================================
   PORTAL DEL ASEGURADO v15 - IDENTIDAD A LA IZQUIERDA
   Y MENU HAMBURGUESA EN MOVILES
   ========================================================= */
.asegurado-header{
  grid-template-columns:minmax(300px,1fr) minmax(180px,auto) minmax(300px,1fr)!important;
  grid-template-areas:"productor titulo espacio" "menu menu menu"!important;
  padding-top:14px!important;
}
.asegurado-productor{
  grid-area:productor!important;
  justify-self:start!important;
  align-items:flex-start!important;
  text-align:left!important;
  padding:10px 14px!important;
  border-left:3px solid rgba(255,255,255,.88)!important;
  background:rgba(255,255,255,.08)!important;
  border-radius:0 9px 9px 0!important;
}
.asegurado-productor strong{
  font-size:17px!important;
  font-weight:700!important;
  color:#fff!important;
  letter-spacing:.005em!important;
}
.asegurado-productor span{
  font-size:13px!important;
  color:rgba(255,255,255,.94)!important;
}
.asegurado-productor small{
  font-size:10px!important;
  font-weight:500!important;
  color:rgba(255,255,255,.76)!important;
  text-transform:none!important;
}
.asegurado-header-titulo{
  grid-area:titulo!important;
  align-self:center!important;
  opacity:.9!important;
}
.asegurado-header-titulo strong{
  font-size:19px!important;
  font-weight:500!important;
  letter-spacing:0!important;
}
.asegurado-header-espacio{grid-area:espacio!important;display:block!important}
.asegurado-header-menu{position:relative}
.asegurado-menu-toggle{display:none}

@media(max-width:900px) and (min-width:701px){
  .asegurado-header{
    grid-template-columns:minmax(260px,1fr) auto minmax(80px,1fr)!important;
    grid-template-areas:"productor titulo espacio" "menu menu menu"!important;
  }
}

@media(max-width:700px){
  .asegurado-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"productor toggle" "titulo titulo" "menu menu"!important;
    gap:9px 14px!important;
    padding:12px 16px 10px!important;
    text-align:left!important;
  }
  .asegurado-header-espacio{display:none!important}
  .asegurado-productor{
    grid-area:productor!important;
    justify-self:start!important;
    align-items:flex-start!important;
    text-align:left!important;
    min-width:0!important;
    padding:7px 10px!important;
  }
  .asegurado-productor strong{
    max-width:100%!important;
    font-size:14px!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .asegurado-productor span{font-size:11px!important}
  .asegurado-productor small{font-size:8.5px!important;line-height:1.35!important}
  .asegurado-header-titulo{
    grid-area:titulo!important;
    justify-self:center!important;
    width:100%!important;
    text-align:center!important;
    padding:2px 0 4px!important;
  }
  .asegurado-header-titulo strong{font-size:17px!important;font-weight:500!important}
  .asegurado-header-menu{
    grid-area:menu!important;
    width:100%!important;
    border-top:1px solid rgba(255,255,255,.16)!important;
    padding-top:8px!important;
  }
  .asegurado-menu-toggle{
    display:inline-flex!important;
    position:absolute!important;
    right:0!important;
    top:-72px!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    min-width:44px!important;
    height:42px!important;
    padding:0 11px!important;
    border:1px solid rgba(255,255,255,.48)!important;
    border-radius:9px!important;
    background:rgba(255,255,255,.1)!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:12px!important;
    font-weight:600!important;
    cursor:pointer!important;
  }
  .asegurado-menu-toggle:hover,.asegurado-menu-toggle:focus{
    background:rgba(255,255,255,.18)!important;
    outline:none!important;
  }
  .asegurado-menu-toggle-icon{font-size:22px;line-height:1}
  .asegurado-menu-toggle-text{display:none}
  .asegurado-menu{
    display:none!important;
    width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:2px!important;
    padding:7px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:10px!important;
    background:rgba(43,25,55,.34)!important;
    box-shadow:0 10px 22px rgba(31,16,40,.16)!important;
  }
  .asegurado-menu.abierto{display:flex!important}
  .asegurado-menu a{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    padding:11px 12px!important;
    border:0!important;
    border-radius:7px!important;
    font-size:12px!important;
    text-align:left!important;
  }
  .asegurado-menu a:hover,.asegurado-menu a.activo{
    background:rgba(255,255,255,.13)!important;
    border:0!important;
  }
  .asegurado-menu a.asegurado-salir{
    margin:5px 0 0!important;
    border-top:1px solid rgba(255,255,255,.16)!important;
    border-radius:0 0 7px 7px!important;
  }
}