@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* =====================================================
   AUTO AMECAH SICAP
	Desarrollador: Rodrigo Moreno Razo -  Mercadotecnia
	Contacto: +525571138693 Email: rmoreno@autoamecah.mx
   HOJA DE ESTILOS GENERAL
   ===================================================== */


/* =====================================================
   COLORES BASE
   ===================================================== */

:root{

    /* Colores principales ConfiPlan */

    --cp-primary: #1C4FA8;
    --cp-primary-dark: #054784;
    --cp-primary-light: #207ABF;

    --cp-silver: #C7CCD6;
    --cp-silver-dark: #8A9099;
    --cp-fog: #E8EAED;

    --cp-black: #1A1A1A;
    --cp-white: #FFFFFF;

    /* Estados */

    --cp-success: #207ABF;
    --cp-info: #1C4FA8;

    /* Sombras */

    --cp-shadow:
    0 4px 14px rgba(0,0,0,.08);

    /* Bordes */

    --cp-border:
    1px solid #E8EAED;

}

:root{

    /* Auto Amecah */
    --autoamecah:#1C4FA8;

    /* Autofinanciamientos */
    --afasa:#1E88E5;
    --sicrea:#1565C0;
    --conauto:#0D47A1;
    --suauto:#42A5F5;
    --mazda:#64B5F6;
    --hyundai:#90CAF9;

    /* Bancos */
    --bbva:#004481;
    --banorte:#E30613;
    --santander:#EC0000;
    --hsbc:#DB0011;
    --scotia:#D71920;

}



.afasa{
    color:#1E88E5;
}

.sicrea{
    color:#1565C0;
}

.conauto{
    color:#0D47A1;
}

.bbva{
    color:#004481;
}

.banorte{
    color:#E30613;
}

.santander{
    color:#EC0000;
}

/* =====================================================
   RESET
   ===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =====================================================
   BODY
   ===================================================== */



body{
    font-family:'Montserrat',sans-serif;
    color:var(--cp-black);
    background:#f8f9fb;
	padding:30px;
}

h1{
    color:var(--cp-primary);
    font-weight:700;
	text-align: center;
}

h2{
    color:var(--cp-primary-dark);
    font-weight:600;
	text-align: center;
}

h3{
    color:var(--cp-primary-light);
    font-weight:600;
	text-align: left;
}

a{

    color:var(--cp-primary);

    text-decoration:none;

}

a:hover{

    color:var(--cp-primary-dark);

}

/* =====================================================
   CONTENEDORES
   ===================================================== */

.contenedor{
    width:100%;
    max-width:700px;
    margin:auto;
}

.contenedor-grande{
    width:100%;
    max-width:1400px;
    margin:auto;
}

.TiposIngresos{
	position: relative;
	left: 10%;
	font-size: small;
	
}

.radio-option {
	width: 50%;
	float: left;
	
}


/* =====================================================
   TARJETAS
   ===================================================== */

.card{

    background:white;

    border-radius:18px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:var(--cp-shadow);

    border:var(--cp-border);

}

.card-secundaria{
    background:#f8f9fa;
    border-radius:8px;
    padding:20px;
    margin-top:15px;
}




/* =====================================================
   LOGO
   ===================================================== */

.logo-container{
    text-align:center;
    margin-bottom:25px;
}

.logo-container img{
    width:100%;
    max-width:350px;
    height:auto;
}


/* =====================================================
   TITULOS
   ===================================================== */

/*
h1{
    text-align:center;
    color:#c8102e;
    margin-bottom:15px;
}

h2{
    color:#111;
    margin-bottom:15px;
}

h3{
    color:#c8102e;
    margin-bottom:10px;
}
*/

/* =====================================================
   TEXTOS
   ===================================================== */

.descripcion{
    text-align:center;
    color:#666;
    line-height:1.6;
    margin-bottom:25px;
}

.valor{
    font-size:22px;
    font-weight:700;
}

.estatus{
    font-weight:bold;
}


/* =====================================================
   FORMULARIOS
   ===================================================== */

.grupo{
    margin-bottom:20px;
}

label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

input:not([type="radio"]){
    width:100%;
    padding:14px;
    border:1px solid #d9d9d9;
    border-radius:6px;
    font-size:16px;
}

input:focus{
    outline:none;
    border-color:#c8102e;
}

.select-agencia{
    width:100%;
    padding:14px;
    border:1px solid #d9d9d9;
    border-radius:6px;
    font-size:16px;
    background:#fff;
}

.select-agencia:focus{
    outline:none;
    border-color:#c8102e;
}

#agencia_busqueda{

    width:100%;
    padding:14px;
    border:1px solid #d9d9d9;
    border-radius:6px;
    font-size:16px;
}

#agencia_busqueda:focus{

    outline:none;
    border-color:#c8102e;
}

/* =====================================================
   BOTONES
   ===================================================== */

/*.btn-principal{
    display:block;
    width:100%;
    padding:16px;
    text-align:center;
    text-decoration:none;
    border-radius:6px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}*/

.btn-principal{

    background:var(--cp-primary);
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.btn-principal:hover{

    background:var(--cp-primary-light);

}



.btn-plan{
    background:none;
    border:none;
    color:var(--cp-primary);
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}

.btn-plan:hover{
    text-decoration:underline;
}

.btn-plan-recomendado{
    background:var(--cp-primary);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:15px 35px;
    font-size:40px;
    font-weight:bold;
    cursor:pointer;
}


/* =====================================================
   RESULTADOS
   ===================================================== */

.resultado{
    margin-top:25px;
}

.bloque{
    background:#f8f9fa;
    border-left:5px solid var(--cp-primary); 
    border-radius:6px;
    padding:20px;
    margin-bottom:18px;
}

.mensaje{
    color:#666;
    line-height:1.5;
}

.lista-requisitos{
    margin-top:10px;
    padding-left:20px;
}

.lista-requisitos li{
    margin-bottom:8px;
}

.resultado-final{
    text-align:center;
    padding:20px;
    border-radius:8px;
    margin-top:25px;
    font-size:22px;
    font-weight:bold;
}

.aprobado{
    background:#e8f5e9;
    color:#2e7d32;
}

.rechazado{
    background:#ffebee;
    color:#c62828;
}


/* =====================================================
   VEHICULOS
   ===================================================== */

.vehiculo-card{
    display:block;
    background:#fff;
    border:2px solid #e0e0e0;
    border-radius:10px;
    padding:18px;
    margin-bottom:15px;
    cursor:pointer;
    transition:.3s;
}

.vehiculo-card:hover{
    border-color:#c8102e;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.vehiculo-info h3{
    color:#c8102e;
}

.vehiculo-version{
    margin-top:5px;
    color:#555;
}

.vehiculo-clave{
    margin-top:8px;
    color:#777;
    font-size:13px;
}

.vehiculo-precio{
    margin-top:12px;
    font-size:24px;
    font-weight:bold;
}


/* ==========================
   GRID VEHÍCULOS
   ========================== */

.vehiculo-masonry input[type="radio"]{
    display:none;
}

.masonry-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px,1fr)
        );

    gap:25px;

    margin-top:30px;
}

.vehiculo-masonry{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.10);

    transition:.35s;

    cursor:pointer;

    display:block;
}

.vehiculo-masonry:hover{

    transform:translateY(-8px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.18);
}

.vehiculo-masonry img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;
}

.vehiculo-overlay{

    padding:20px;
}

.vehiculo-overlay h3{

    color:#c8102e;

    margin-bottom:8px;

    font-size:28px;
}

.version{

    color:#555;

    font-size:15px;

    margin-bottom:15px;
}

.precio{

    font-size:32px;

    font-weight:700;

    color:#111827;
}

.vehiculo-masonry input[type="radio"]{

    position:absolute;

    top:15px;

    right:15px;

    width:22px;

    height:22px;

    z-index:20;
}


.vehiculo-masonry:has(input:checked){

    outline:5px solid #c8102e;

    box-shadow:
        0 0 0 6px rgba(200,16,46,.15);

}

.contenedor-vehiculos{

    max-width:1400px;

    margin:auto;
}

/* =====================================================
   TABLAS
   ===================================================== */

table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

th{
    background:var(--cp-primary);
    color:#fff;
    padding:12px;
    text-align:left;
}

td{
    padding:10px;
    border-bottom:1px solid #ddd;
}

tr:nth-child(even){
    background:#fafafa;
}

tr:hover{
    background:#f5f5f5;
}


/* =====================================================
   GRAFICAS
   ===================================================== */

.chart-container{
    width:100%;
    max-width:1100px;
    margin:auto;
}


/* =====================================================
   WIDGETS FLOTANTES
   ===================================================== */

.quote-widget-container-fixed{
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:1000;
}

.help-widget-container{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1000;
}

.actions-widget-container{
    position:fixed;
    right:20px;
    bottom:80px;
    z-index:1000;
}


/* =====================================================
   BOTONES WIDGETS
   ===================================================== */

.quote-button-link,
.help-button,
.actions-button{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#fff;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,.3);
    transition:.3s;
}

.quote-button-link{
    background:#ff9800;
}

.help-button{
    background:#007bff;
}

.actions-button{
    background:#28a745;
}

.quote-button-link:hover,
.help-button:hover,
.actions-button:hover{
    transform:scale(1.1);
}


/* =====================================================
   MENUS FLOTANTES
   ===================================================== */

.help-menu,
.actions-menu{
    position:absolute;
    right:0;
    bottom:70px;
    display:none;
    flex-direction:column;
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.2);
}

/* Estilos para el Widget de Acciones Flotante */
.actions-widget-container {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 9998;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Botón flotante principal */
.actions-button {
    width: 50px;
    height: 50px;
    background-color: #28a745;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
    position: relative;
    border: none;
    font-size: 24px;
}

.actions-button:hover {
    background-color: #218838;
    transform: scale(1.1);
}

/* Tooltip "Acciones" */
.actions-button::after {
    content: "Acciones";
    position: absolute;
    right: 60px;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.actions-button:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Menú desplegable */
.actions-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 200px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: none;
    flex-direction: column;
    border: 1px solid #eee;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.actions-menu.active {
    display: flex;
}

.actions-menu-header {
    background-color: #f8f9fa;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

.actions-menu-item {
    padding: 12px 15px;
    text-decoration: none;
    color: #444;
    font-size: 14px;
    border-bottom: 1px solid #f1f1f1;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.actions-menu-item:last-child {
    border-bottom: none;
}

.actions-menu-item:hover {
    background-color: #f0f7ff;
    color: #28a745;
}

.actions-menu-item::before {
    content: "▶";
    margin-right: 10px;
    font-size: 12px;
    color: #28a745;
}


/* Estilos para el Widget de Ayuda Flotante */
.help-widget-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Botón flotante principal */
.help-button {
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
    position: relative;
}

.help-button:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

.help-button i {
    font-size: 24px;
    font-weight: bold;
    font-style: normal;
}

/* Tooltip "Temas de ayuda" */
.help-button::after {
    content: "Temas de ayuda";
    position: absolute;
    right: 60px;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.help-button:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Menú desplegable */
.help-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 280px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: none; /* Se controla con JS */
    flex-direction: column;
    border: 1px solid #eee;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.help-menu.active {
    display: flex;
}

.help-menu-header {
    background-color: #f8f9fa;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    color: #333;
    font-size: 16px;
}

.help-menu-item {
    padding: 12px 15px;
    text-decoration: none;
    color: #444;
    font-size: 14px;
    border-bottom: 1px solid #f1f1f1;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

.help-menu-item:last-child {
    border-bottom: none;
}

.help-menu-item:hover {
    background-color: #f0f7ff;
    color: #007bff;
}

.help-menu-item::before {
    content: "📄";
    margin-right: 10px;
    font-size: 16px;
}


.help-menu.active,
.actions-menu.active{
    display:flex;
}

.help-menu-item,
.actions-menu-item{
    padding:12px 15px;
    text-decoration:none;
    color:#444;
    border-bottom:1px solid #eee;
}


/* =====================================================
   IMPRESION
   ===================================================== */

@media print{

    .quote-widget-container-fixed,
    .help-widget-container,
    .actions-widget-container,
    .help-menu,
    .actions-menu{
        display:none !important;
    }

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media screen and (max-width:768px){

    body{
        padding:15px;
    }

    .card{
        padding:25px;
    }

    .btn-plan-recomendado{
        font-size:28px;
    }

    .quote-widget-container-fixed{
        left:15px;
        bottom:15px;
    }

    .help-widget-container{
        right:15px;
        bottom:15px;
    }

    .actions-widget-container{
        right:15px;
        bottom:75px;
    }

}




/* =====================================
   CATÁLOGO DE VEHÍCULOS
   ===================================== */

.contenedor-vehiculos{
    width:95%;
    max-width:1600px;
    margin:auto;
}

.masonry-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(320px,1fr));
    gap:25px;
    margin-top:30px;
}

.vehiculo-masonry{
    display:block;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 8px 25px rgba(0,0,0,.10);
}

.vehiculo-masonry:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.vehiculo-masonry img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.vehiculo-overlay{
    padding:20px;
}

.vehiculo-overlay h3{
    color:#c8102e;
    margin-bottom:10px;
}

.vehiculo-overlay .version{
    color:#666;
    margin-bottom:12px;
}

.vehiculo-overlay .precio{
    font-size:28px;
    font-weight:bold;
}

.vehiculo-masonry input[type="radio"]{
    display:none;
}

.vehiculo-masonry:has(input:checked){
    outline:4px solid #c8102e;
}


.pdf-mode .btn-principal,
.pdf-mode form,
.pdf-mode .quote-widget-container-fixed,
.pdf-mode .help-widget-container,
.pdf-mode .actions-widget-container{
    display:none !important;
}


/* GERENTES */

.gerente-card{
margin-bottom:20px;
}

.input-buscador{
width:100%;
padding:12px;
font-size:16px;
border:1px solid #ccc;
border-radius:8px;
}

.tabla-cobertura{
width:100%;
border-collapse:collapse;
margin-top:15px;
}

.tabla-cobertura th,
.tabla-cobertura td{
border:1px solid #ddd;
padding:10px;
text-align:left;
}

.tabla-cobertura th{
background:#858585;
}

@media(max-width:768px){

.tabla-cobertura{
font-size:14px;
}

}

.tablaAjustable{
		font-size: 0.90em;
	}
	.columna-angosta{
		width: 5%;
		padding: 0px;
	}

#contenedorEscenario{
    display:none;
}

/*LOGIN*/

.login-container{
    width:100%;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{

    width:420px;

    background:#fff;

    border-radius:12px;

    padding:40px;

    box-shadow:
    0 4px 20px rgba(0,0,0,.10);
}

.logo{
    text-align:center;
    margin-bottom:25px;
}

.logo img{
    width:240px;
}


.error{

    background:#ffe1e1;

    color:#b00020;

    padding:12px;

    margin-bottom:15px;

    border-radius:6px;
}

.link-recuperar{

    margin-top:15px;

    text-align:center;
}

.link-recuperar a{

    color:var(--cp-primary);

    text-decoration:none;
}

.encabezado-pdf{

display:flex;
align-items:center;
gap:25px;

margin-bottom:25px;
padding-bottom:20px;

border-bottom:3px solid var(--color-primario);

}

.logo-pdf{

width:180px;
height:auto;

}

.encabezado-pdf h1{

margin:0;

font-size:34px;

color:var(--color-primario);

}

.encabezado-pdf h2{

margin:6px 0 0;

font-size:18px;

font-weight:500;

color:#666;

}

.footer-pdf{

margin-top:40px;

padding-top:20px;

border-top:2px solid #C7CCD6;

font-size:11px;

color:#666;

text-align:center;

line-height:1.6;

}

.pdf-header{

text-align:center;

margin-bottom:30px;

}

.pdf-logo{

width:260px;

height:auto;

margin-bottom:15px;

}

.pdf-header h1{

margin:0;

font-size:34px;

font-weight:700;

color:#1C4FA8;

font-family:'Montserrat',sans-serif;

}

.pdf-fecha{

margin-top:10px;

font-size:14px;

color:#666;

font-family:'Montserrat',sans-serif;

}

.barra-consejos{

position:fixed;

bottom:0;

left:0;

width:100%;

height:38px;

background:#1C4FA8;

color:#FFF;

overflow:hidden;

display:flex;

align-items:center;

z-index:1;

font-size:15px;

font-weight:500;

}

.ticker{

display:inline-block;

white-space:nowrap;

padding-left:100%;

animation:ticker 40s linear infinite;

}

@keyframes ticker{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-200%);

}

}

/* Tarjeta contenedora del InfoWindow */
.info-card {
    font-family: 'Segoe UI', Arial, sans-serif;
    max-width: 260px;
    color: #333;
    padding: 5px;
}

/* Encabezado con el Azul de ConfiPlan */
.info-header h3 {
    margin: 0 0 6px 0;
    color: #207ABF; /* Azul ConfiPlan */
    font-size: 16px;
    font-weight: 700;
}

/* Etiquetas de Región Comercial */
.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 12px;
    text-transform: uppercase;
}
.badge-frontera {
    background-color: #e3f2fd;
    color: #0d47a1; /* Azul descriptivo para frontera */
}
.badge-nacional {
    background-color: #f0f4f8;
    color: #475569; /* Gris pizarra para nacional estándar */
}

/* Cuerpo de la información */
.info-body {
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.4;
}
.info-text {
    margin: 4px 0;
}

/* Enlace de ruta */
.route-link {
    display: inline-block;
    margin-top: 8px;
    color: #207ABF; /* Combinado con la marca */
    text-decoration: none;
    font-weight: 600;
}
.route-link:hover {
    text-decoration: underline;
}

/* Botón de acción ConfiPlan */
.btn-select {
    width: 100%;
    background-color: #207ABF; /* Azul ConfiPlan */
    color: white;
    border: none;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.btn-select:hover {
    background-color: #175B91; /* Un tono más oscuro para el efecto hover */
}
.btn-select:active {
    transform: scale(0.98);
}

.selectorHeader{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;

    flex-wrap:wrap;

}

.selectorHeader form{

    margin-top:15px;

}

.selectorHeader .btn-principal{

    white-space:nowrap;

    margin-top:10px;

}