/* 
    Created on : May 13, 2016, 3:27:40 PM
    Author     : juandiego@comtor.net
*/

.report-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}




#top {
    min-height:60px;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#user-menu {
    position: static;
    width: 300px;

}
#user-menu > li > ul {
    width: 250px;

}

td ul li:nth-child(even) {
    color: #1057A4;
}

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.quantity_span {
    float: right;
}

.highlight {
    background-color: yellow;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -80px !important;
}

/* Popup arrow */
.popup .popuptext::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity:1 ;
    }
}


.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{
    text-indent: 0;
    width: auto;
    margin-left: -17px;
    cursor: pointer;
}

#sellers_summary_form table tr:last-child {
    font-weight: bolder;
    background-color: var(--table-header) !important;
    color: white;
}

#product_delete_list_container,
.details_table_container {
    max-height: 500px;
    overflow: auto;
    border: 1px solid lightgray;
}

#products_details_table th:last-child,
#customers_details_table th:last-child,
#purchase_orders_details_table_container table th:last-child {
    width: 1%;
    text-align: center;
}

#purchase_order_results div:first-child{
    font-weight:600;
}

#product_delete_list_container table th:first-child {
    width: 1%;
    text-align: center;
}

.map {
    height: 100vh;
    width: calc(100% - 550px);
    transition: margin-left .5s;
    float: left;
    display: inline-block;
}
.customer-map {
    height: 100vh;
    width: 100%;
}
#nav_menu_container {
    display: inline-block;
    position: absolute;
    float: right;
    right: 0;
    height: 100%;
}

#nav_menu {
    height: 100%;
    width: 500px;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    display: inline-block;
    float: left;
}

#nav_menu_tab {
    width: 50px;
    margin: 0 !important;
    display: inline-block;
    background: var(--main-color);
    float: left;
    height: 100%;
    cursor: pointer;
    font-size: 20pt;
    color: white;
}

#nav_menu_tab a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    font-weight: bolder;
}

#nav_menu_tab a:hover {
    color: #f1f1f1;
}

#nav_menu .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#nav_menu .summary_table {
    width: 100%;
}

#update_status {
    display: block;
    text-align: left;
    padding: 10px 20px;
    border: 2px solid white;
}

.cardImgDiv i {
    font-size: 4rem;
    padding: 0.4rem;
}
.cardTitleSpan{
    height: 1rem;
}

.cardTitleDiv span {
    margin: auto 0 auto 0;
    font-size: 10pt;
    text-overflow: ellipsis;
}
.conventions {
    width: 100%;
    margin-top: 0 !important;
}

.conventions tr td:first-child {
    margin: 0 !important;
    padding: 0 !important;
    width: 1%;
}

.conventions tr td:first-child img {
    margin: 0;
    padding: 0;
    width: 30px;
}

.gps_marker_info_window {
    margin: 20px 0 10px;
}

.gps_marker_info_window h3 {
    margin: 0;
    padding: 5px 0;
    display: block;
}

.gps_marker_info_window span {
    font-size: 10pt;
    margin: 0;
    padding: 5px;
    display: block;
}

.comtor-row-input-error {
    color: var(--danger-color);
    font-weight: bolder;
    padding: 0.2rem;
    display: block;
    width: 100%;

}

#purchase_orders_problemsEx {
    color: red;
    display:block;
    text-align: start;
    margin-left: 1%
}

#purchase_orders_summary_frame {
    width: 100%;
    height: 500px;
    display:block;
    margin: 20px auto;
    border: 0;
}

#checker {
    visibility:hidden;
}

#mainContainer {
    background-color: white;
    border-radius: 10pt;
    padding: 10px 0;
}

#date_container #reload_button,
#boton_buscar {
    display: block;
    margin: 10px auto 0;
}

#configuration_form .comtorboxheader {
    margin: 0;
}

#orderDetailTable th,
#sellerDetailTable th {
    width: 10%;
    background-color: initial;
    color: black;
}

#aux_bar {
    border-radius: 10px;
    border: 1px solid lightgray;
    width: 97vw;
    height: 35px;
}

div#checkbox_container {
    margin-left: 0px;
    margin-right: 0px;
    width: fit-content;
}

div#aux_bar ul.aux_items {
    list-style: none;
    display: flex;
    justify-content: left;
    align-items: start;
    padding: 0%;
}

div#aux_bar ul.aux_items li.aux_item_list {
    margin-right: 20px;
    margin-left: 10px;
}

input#general_checkbox {
    zoom: 1.5;
    margin-top: 5.5px;
}

input#general_not_delivered_checkbox {
    zoom: 1.5;
    margin-top: 5.5px;
}

@media screen and (max-width: 1200px) and (min-width: 750px) {

    .col-md-3{
        max-width: 50%;
        flex-basis: 100%;
    }
    .col-12.col-sm-6.col-md-3.col-lg-12.col-xl-12 {
        max-width: 100%;
        flex-basis: 100%;
    }

}
@media screen and (min-width: 2014px) and (max-width: 2425px) {
    #sysMenu > li:last-child > ul ul  {

        left: -100%;
    }
}

@media screen and (max-width: 750px) {
    #cards .cardMainDiv {
        width: 150px;
    }
    canvas.ocelot-chart{
        width: 100vw !important;
        height: auto !important;
    }

    #top{
        display: block;
    }

}

@media print {
    /* Establecer márgenes */
    @page {
        margin: 0.2cm; /* Puedes ajustar el valor de acuerdo a tus necesidades */
    }

    /* Ajustar la escala */
    body {
        transform: scale(1); /* Puedes ajustar el valor de la escala según tus necesidades */
        zoom: 75%;
    }

    #top, #footer{
        display: none;
    }

    #purchase_orders_summary_frame{
        height: auto
    }

    #top, #footer{
        display: none;
    }

}

@media screen and (orientation: potrait){
    /*
        #top{
            flex-direction: column;
            justify-content: space-between;
        } */

    #top{
        display: block;
    }

    #sysMenu > li.sfHover > ul > li.sfHover > ul{
        display: contents;
    }
}

/* Código modificado por Jools */

.title_table, .title_table_alert {
    width: 100%;
    margin: 0px auto;
}
.title_table > tr:nth-child(2) > td > table, .title_table_alert > tr:nth-child(2) > td > table{
    width: 100%;
    margin: 0px;
}
.title_table > tr:nth-child(1) > th{
    background-color:#1057A4;
}
.title_table_alert > tr:nth-child(1) > th{
    background-color: #F04A0C;
}
.title_table td:last-child, .title_table_alert td:last-child {
    text-align: center;
}
.title_table > tr:nth-child(2) > td, .title_table_alert > tr:nth-child(2) > td{
    padding: 0;
}
.title_table > tr:nth-child(2) > td > table > tr:nth-child(1) > th, .title_table_alert > tr:nth-child(2) > td > table > tr:nth-child(1) > th {
    color: #1057A4;
    background-color:#E2E2E6;
}
.title_table tr.selected-row, .title_table_alert tr.selected-row {
    background-color: #0C417B;
    color: #ffffff;
}

.title_table button, .title_table_alert button{
    background-color: #F04A0C;
    border: none;
}
.title_table button:hover, .title_table_alert button:hover{
    background-color: #B43809;
}
.tooltip {
    position: relative;
}

.tooltip:hover::after {
    content: "Ver información";
    position: absolute;
    background-color: #0069d9;
    color: white;
    padding: 5px;
    border-radius: 5px;
    bottom: 100%;
    left: 50%;

}

/* Verifying Payment*/
.container-payment-processing {
    display: flex;
    gap: 18px;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}
.title-payment-processing {
    background-color: #1057a4;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 50%;
    color: #ffffff;

}
.title-payment-processing h1 {
    font-size: 25px;
}

img.receipt-preview {
    max-width: 420px;
    margin-top: 12px;
    padding: 8px;
    background-color: #dbdbdb;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    display: block;
}

img.delivery-preview {
    max-width: 420px;
    margin-top: 12px;
    padding: 8px;
    background-color: #dbdbdb;
    border: 1px solid #d0d0d0;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    display: block;
}

.locked {
    pointer-events: none;
    background-color: #e9ecef;
    color: #6c757d;
}

.ticket-container {
    width: 380px; /* Ajusta según el ancho de tu papel (80mm ≈ 380px) */
    background: white;
    padding: 20px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    border: 1px solid #ccc;
}

.ticket-row {
    display: flex;
    width: 100%;
    min-height: 1.2em;
    white-space: pre; /* Mantiene espacios manuales si existen */
}

/* Distribución de columnas */
.ticket-row .left   {
    flex: 1;
    text-align: left;
}
.ticket-row .center {
    flex: 1;
    text-align: center;
    font-weight: normal !important
}
.ticket-row .right  {
    flex: 1;
    text-align: right;
}

/* Simulación de fuente alta (Tall) */
.size-tall {
    display: inline-block;
    transform: scaleY(3); /* Estira verticalmente */
    transform-origin: top;
    font-weight: bold;
    margin-bottom: 20px;
}

.delivery-ticket-container {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.photo-usage-widget {
    display:grid;
    gap:.75rem;
}
.photo-usage-kpis {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem;
}
.kpi-card {
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:12px;
    padding:.9rem;
    min-height:88px;
    box-shadow:none;
}
.kpi-label {
    display:block;
    color:#666;
    font-size:.78rem;
    margin-bottom:.35rem;
}
.kpi-card strong {
    display:block;
    font-size:1.25rem;
    line-height:1.1;
    margin-bottom:.15rem;
}
.kpi-card small {
    color:#888;
    font-size:.82rem;
}
.photo-usage-chart-row {
    display:grid;
    grid-template-columns:140px 1fr;
    gap:.75rem;
    align-items:center;
    min-width:0;
}
.photo-usage-donut {
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:16px;
    padding:.75rem;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    min-width:0;
}
#photoUsageDonut {
    width:130px !important;
    height:130px !important;
}
.photo-usage-progress {
    display:grid;
    gap:.55rem;
    min-width:0;
}
.progress-label {
    display:flex;
    justify-content:space-between;
    gap:.4rem;
    font-size:.85rem;
    color:#444;
    flex-wrap:wrap;
}
.progress-label span {
    min-width:0;
}
.progress-label span:first-child {
    flex:1 1 100%;
    font-weight:600;
}
.progress-label span:last-child {
    flex:1 1 auto;
    text-align:right;
    white-space:nowrap;
}
.progress-bar-container {
    background:#f1f1f1;
    border-radius:999px;
    height:14px;
    overflow:hidden;
}
.progress-bar {
    height:100%;
    width:0%;
    border-radius:999px;
    transition:width .3s ease;
}
.progress-bar.normal {
    background:#28a745;
}
.progress-bar.warning {
    background:#ffc107;
}
.progress-bar.danger {
    background:#dc3545;
}
.range-summary {
    font-size:.84rem;
    color:#444;
    margin-top:.45rem;
}
.range-summary .range-text {
    display:inline-block;
    white-space:normal;
    color:#555;
    margin-right:.6rem;
}
.range-summary .range-text.active {
    font-weight:600;
    color:#0d6efd;
}
.range-summary small {
    color:#777;
    font-size:.82rem;
}
@media(max-width:900px) {
    .photo-usage-chart-row {
        grid-template-columns:1fr;
    }
}

/* ========================================================
   Modal "showcase" genérico: overlay con tarjeta centrada, ícono superior
   animado, título/subtítulo y footer de botones personalizados. No es
   específico de evidencia fotográfica (primer caso que lo usó) — cualquier
   feature puede invocar showFeatureShowcaseModal() en project.js.
   ======================================================== */
.feature-showcase-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-feature-showcase, .modal-feature-showcase * {
    box-sizing: border-box;
}

.modal-feature-showcase {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
    font-family: OpenSans, Arial, sans-serif;
    /* Gama de colores por defecto ("info"/confirmación): usada por el ícono
       principal y por el recuadro de aviso (.info-box). Cada variante de tono
       de abajo solo redefine estas tres variables. */
    --tone-color: var(--main-color, #2563eb);
    --tone-bg: #eff6ff;
    --tone-border: var(--main-color, #3b82f6);
}

/* Tono "grave" (acciones destructivas: eliminar, bloquear) — mismo rojo que
   el resto de la app usa para peligro/cancelar (ver button#cancel en
   comtor-web-framework-2-files/.../main.css). */
.modal-feature-showcase.tone-danger {
    --tone-color: var(--danger-color, #dc2626);
    --tone-bg: #fef2f2;
    --tone-border: var(--danger-color, #dc2626);
}

/* Tono "satisfactorio" (algo se completó bien, cupo disponible, etc.). */
.modal-feature-showcase.tone-success {
    --tone-color: var(--ok-color, #16a34a);
    --tone-bg: #f0fdf4;
    --tone-border: var(--ok-color, #16a34a);
}

.modal-feature-showcase .modal-content {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-feature-showcase .modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    z-index: 10;
}

.modal-feature-showcase .modal-close-btn svg {
    width: 20px;
    height: 20px;
}

.modal-feature-showcase .modal-close-btn:hover {
    color: #0f172a;
}

.modal-feature-showcase .modal-body {
    padding: 20px 40px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Regla permanente: cualquier lista o desplegable dentro del cuerpo de un
   modal "showcase" siempre queda alineada a la izquierda, sin necesitar
   ninguna clase extra — mismo criterio que .confirm-modal-message en el
   componente genérico (tomapedidosAlert). */
.modal-feature-showcase .modal-body ul,
.modal-feature-showcase .modal-body ol,
.modal-feature-showcase .modal-body details {
    text-align: left;
    width: 100%;
}

.modal-feature-showcase .modal-body details {
    margin: 10px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    transition: background-color 0.15s, border-color 0.15s;
}

/* Al desplegar una sección, se pinta con el color primario — mismo criterio
   que el resto de "algo cambia de color al abrirse" (dropdowns, inputs). */
.modal-feature-showcase .modal-body details[open] {
    border-color: var(--main-color, #0e56a6);
    background-color: var(--main-color-lightest, #e6eef6);
}

.modal-feature-showcase .modal-body summary {
    cursor: pointer;
    font-weight: 600;
    color: #334155;
    text-align: left;
}

.modal-feature-showcase .modal-body details[open] > summary {
    color: var(--main-color, #0e56a6);
}

.modal-feature-showcase .modal-body ul,
.modal-feature-showcase .modal-body ol {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.modal-feature-showcase .modal-body li {
    margin-bottom: 6px;
    color: #475569;
    line-height: 1.4;
    text-align: left;
}

.modal-feature-showcase .icon-header {
    margin-bottom: 5px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Recuadro monocromático (círculo de un solo color) detrás del ícono
   principal — el color depende del tono del modal (--tone-color/--tone-bg,
   ver .modal-feature-showcase más arriba), nunca del ícono en sí. */
.modal-feature-showcase .icon-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--tone-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-feature-showcase .main-shield {
    width: 36px;
    height: 36px;
    color: var(--tone-color);
    fill: var(--tone-color);
}

/* Ícono principal del modal de "invitación a usar" (no lleva fill: los íconos
   de línea como "camera" pierden su detalle si se rellenan sólido). */
.modal-feature-showcase .invite-icon {
    width: 36px;
    height: 36px;
    color: var(--tone-color);
}

.modal-feature-showcase .inner-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    color: #ffffff;
    width: 14px;
    height: 14px;
}

.modal-feature-showcase .icon-header .star {
    position: absolute;
    color: #93c5fd;
}

.modal-feature-showcase .icon-header .star-1 {
    top: -10px;
    left: -25px;
    width: 18px;
    height: 18px;
}

.modal-feature-showcase .icon-header .star-2 {
    top: 20px;
    right: -30px;
    width: 22px;
    height: 22px;
}

.modal-feature-showcase .icon-header .check-badge {
    position: absolute;
    bottom: -5px;
    right: -10px;
    background: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--tone-color);
    z-index: 2;
}

.modal-feature-showcase .check-badge svg {
    width: 14px;
    height: 14px;
}

.modal-feature-showcase .modal-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 0px 0;
    color: #0f172a;
}

.modal-feature-showcase .modal-subtitle {
    font-size: 16px;
    color: #475569;
    margin: 0 0 5px 0;
}

/* Recuadro de aviso: texto corto (máx. 2 líneas), el resto del contenido
   (listas, acordeones, etc.) va como .modal-detail-content, fuera de este
   recuadro — así no crece de más. Color según el tono del modal. */
.modal-feature-showcase .info-box {
    background-color: var(--tone-bg);
    border-left: 4px solid var(--tone-border);
    border-radius: 4px 8px 8px 4px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 15px;
    justify-content: center;
}

.modal-feature-showcase .info-box svg {
    color: var(--tone-color);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Recuadro de fondo azul para resaltar "esto es lo relevante a informar" dentro
   de un mensaje. Antes solo funcionaba dentro de .modal-feature-showcase; esta
   versión sin ese ancestro es de uso general — cualquier modal (incluido
   tomapedidosAlert, cuyo `content` es HTML libre) puede insertar
   `<div class="info-box"><span>texto</span></div>` (con un ícono/svg opcional
   como primer hijo) y obtener el mismo tratamiento visual, sin duplicar CSS. */
.info-box {
    background-color: #f0f7ff;
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #334155;
    font-size: 15px;
    margin-bottom: 15px;
    justify-content: center;
}

.info-box svg {
    color: #3b82f6;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Contenido de referencia (leyendas, glosarios) dentro de un tomapedidosAlert.
   El modal centra el título/ícono por defecto (confirm-modal-body: text-align
   center), pero una lista o un desplegable se lee mejor alineado a la
   izquierda y ocupando el ancho completo — por eso el reset explícito acá. */
.info-content-left {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
}

.info-content-left details {
    box-sizing: border-box;
    margin: 10px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    transition: background-color 0.15s, border-color 0.15s;
}

/* Al desplegar una sección, se pinta con el color primario — mismo criterio
   que el resto de "algo cambia de color al abrirse" (dropdowns, inputs). */
.info-content-left details[open] {
    border-color: var(--main-color, #0e56a6);
    background-color: var(--main-color-lightest, #e6eef6);
}

.info-content-left summary {
    cursor: pointer;
    font-weight: 600;
    color: #334155;
}

.info-content-left details[open] > summary {
    color: var(--main-color, #0e56a6);
}

.info-content-left ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.info-content-left li {
    margin-bottom: 6px;
    color: #475569;
    line-height: 1.4;
}

/* Texto complementario de un modal "showcase": todo lo que no cabe en las
   2 líneas del recuadro de aviso (.info-box) va acá, fuera de él, para que
   el recuadro no crezca de más (ej. la leyenda de comodines de impresión,
   con sus acordeones por sección). */
.modal-feature-showcase .modal-detail-content {
    width: 100%;
    text-align: left;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 4px;
}

.modal-feature-showcase .modal-detail-content p {
    margin: 0 0 14px 0;
}

.modal-feature-showcase .video-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: #000;
    aspect-ratio: 16 / 9;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.modal-feature-showcase .video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
}

/* Regla permanente: los botones del footer siempre van alineados a la derecha, incluso
   cuando es uno solo (ej. "Entendido") — nunca centrados. Solo cuando hay una acción
   secundaria a la izquierda (ej. "Ver Tarifas", .has-secondary-action) se usa
   space-between para separarla de los botones principales. */
.modal-feature-showcase .modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 40px;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.modal-feature-showcase .modal-footer.has-secondary-action {
    justify-content: space-between;
}

.modal-feature-showcase .btn-rates {
    background-color: #0C417B;
    border-color: #0C417B;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(12, 65, 123, 0.2);
}

.modal-feature-showcase .btn-rates svg {
    width: 16px;
    height: 16px;
}

.modal-feature-showcase .footer-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* El framework le pone margen a TODO <button> (margin: 0 5px 0 15px !important,
   ver comtor-web-framework-2-files/.../main.css) — pensado para botones en línea,
   sin gap. Acá el espaciado ya lo controla el `gap` de arriba, así que ese margen
   solo suma separación de más entre Cancelar y Confirmar; se anula. */
.modal-feature-showcase .footer-actions button {
    margin: 0 !important;
}

/* Regla permanente: el botón de cancelar/cerrar de cualquier confirmación
   siempre va en rojo — nunca del mismo color que el de confirmar (ver
   variant:"cancel" en showFeatureShowcaseModal(), project.js). Mismo rojo
   que usa el resto de la app para peligro/cancelar (button#cancel en
   comtor-web-framework-2-files/.../main.css), vía --danger-color. */
.modal-feature-showcase .footer-actions button.btn-cancel {
    background-color: var(--danger-color, #dc2626);
    border-color: var(--danger-color, #dc2626);
    color: #ffffff;
}

.modal-feature-showcase .footer-actions button.btn-cancel:hover {
    background-color: var(--danger-color-hover, #b91c1c);
    border-color: var(--danger-color-hover, #b91c1c);
}

.modal-feature-showcase .footer-actions button#accept-rates,
.modal-feature-showcase .footer-actions button#accept-cop,
.modal-feature-showcase .footer-actions button#accept-usd {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    font-weight: 600;
}

.modal-feature-showcase .modal-header-simple {
    padding: 15px 40px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
}

.modal-feature-showcase .modal-header-simple h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.modal-feature-showcase .rates-body {
    text-align: left;
    align-items: flex-start;
}

.modal-feature-showcase .rates-intro {
    font-size: 15px;
    color: #475569;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.modal-feature-showcase .pricing-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 24px;
}

.modal-feature-showcase .pricing-item {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.modal-feature-showcase .pricing-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.modal-feature-showcase .pricing-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background-color: #e0e7ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.modal-feature-showcase .pricing-icon svg {
    width: 20px;
    height: 20px;
}

.modal-feature-showcase .pricing-icon.free-tier {
    background-color: #dcfce7;
    color: #16a34a;
}

.modal-feature-showcase .pricing-icon.premium-tier {
    background-color: #fef08a;
    color: #ca8a04;
}

.modal-feature-showcase .pricing-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-feature-showcase .pricing-range {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
}

.modal-feature-showcase .pricing-cost {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-feature-showcase .pricing-cost.success-text {
    color: #16a34a;
}

.modal-feature-showcase .badge {
    background-color: #16a34a;
    color: white;
    font-size: 11px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.modal-feature-showcase .rates-alert {
    background-color: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 14px 18px;
    border-radius: 4px 8px 8px 4px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    width: 100%;
}

.modal-feature-showcase .rates-alert svg {
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
    width: 18px;
    height: 18px;
}

.modal-feature-showcase .rates-alert p {
    margin: 0 0 4px 0;
    color: #1e3a8a;
    font-size: 14px;
    line-height: 1.4;
}

.modal-feature-showcase .rates-alert strong {
    color: #1e3a8a;
    font-size: 15px;
}

/* Variante para avisos positivos (ej. "aún tienes cupo en tu rango actual"), en verde en vez
   del azul informativo por defecto de .rates-alert. */
.modal-feature-showcase .rates-alert.notice-success {
    background-color: #f0fdf4;
    border-left-color: #16a34a;
}

.modal-feature-showcase .rates-alert.notice-success svg {
    color: #16a34a;
}

.modal-feature-showcase .rates-alert.notice-success p,
.modal-feature-showcase .rates-alert.notice-success strong {
    color: #166534;
}

.modal-feature-showcase .rates-footer {
    justify-content: flex-end;
}


@media (max-width: 600px) {
    /* Regla permanente: los botones siempre van alineados a la derecha, incluso apilados
       en columna en mobile — por eso align-items:flex-end (si no, .footer-actions quedaría
       centrado horizontalmente al no tener ya un width:100% que lo forzara). */
    .modal-feature-showcase .modal-footer {
        flex-direction: column;
        align-items: flex-end;
        gap: 16px;
        padding: 20px;
    }

    .modal-feature-showcase .btn-rates {
        width: 100%;
        justify-content: center;
    }

    .modal-feature-showcase .footer-actions {
        justify-content: flex-end;
    }

    .modal-feature-showcase .modal-body {
        padding: 30px 20px 20px;
    }

    .modal-feature-showcase .modal-header-simple {
        padding: 20px;
    }

    .modal-feature-showcase .pricing-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ========================================================
   Tabla de rangos de consumo (rangeHtml, generada en
   PhotoUsageHelper.buildRangeTableHtml) — reutilizada tanto por el modal
   "Rangos disponibles" del dashboard/Index como por el modal de
   confirmación de desactivación de evidencia fotográfica en
   LicenseConfigurationForm (éste último inyectado dentro del mismo
   contenedor .modal-feature-showcase que usa showPhotoEvidenceRatesConfirm,
   ver project.js). Las clases .range-table* .tier-* .status-tag deben
   coincidir exactamente con las que genera ese método.
   ======================================================== */

/* PhotoUsageHelper.buildRangeTableHtml() usa esta clase en su fallback
   ("No hay rangos de precio configurados actualmente") cuando el CRM no
   devuelve rangos. */
.evidence-modal-desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

.range-table-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.range-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.range-table thead tr {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.range-table th {
    padding: 12px 16px;
}

.range-table th.text-center,
.range-table td.text-center {
    text-align: center;
}

.range-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
}

.range-table tbody tr:last-child {
    border-bottom: none;
}

.range-table tbody tr.row-actual {
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
}

.range-table td {
    padding: 14px 16px;
    color: #475569;
}

.range-table td.col-tier {
    font-weight: 600;
    color: #334155;
}

.range-table tbody tr.row-actual td.col-tier {
    font-weight: 700;
    color: #1e40af;
}

.range-table tbody tr.row-actual td.col-limit {
    font-weight: 600;
    color: #1e40af;
}

.range-table td.col-cost {
    font-weight: 600;
    color: #1e293b;
}

.range-table tbody tr.row-actual td.col-cost {
    font-weight: 700;
    color: #1e40af;
}

.tier-cell-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tier-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 13px;
}

.tier-icon-box.level-1 {
    background: #dcfce7;
    color: #16a34a;
}

.tier-icon-box.level-2 {
    background: #dbeafe;
    color: #2563eb;
}

.tier-icon-box.level-3,
.tier-icon-box.level-4 {
    background: #f8fafc;
    color: #64748b;
}

.status-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    display: inline-block;
}

.status-tag.superado {
    background: #f1f5f9;
    color: #64748b;
}

.status-tag.actual {
    background: #2563eb;
    color: #ffffff;
    padding: 4px 10px;
    letter-spacing: 0.5px;
}

.status-tag.siguiente {
    background: #fef3c7;
    color: #b45309;
}

.status-tag.disponible {
    background: #f8fafc;
    color: #94a3b8;
}

/* ========================================================
   Miniatura de evidencia fotográfica bloqueada por límite de
   licencia (vista de detalle de No Venta / Recibo de Pago).
   ======================================================== */
.photo-evidence-locked {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
}

.photo-evidence-locked img {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    display: block;
}

.photo-evidence-locked .photo-evidence-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.4);
}

.photo-evidence-locked .photo-evidence-lock-overlay svg {
    width: 28px;
    height: 28px;
    color: #ffffff;
}

/* Marcador de foto todavía subiéndose/procesándose: mismo lenguaje visual
   (recuadro borroso) que la miniatura bloqueada, con ícono de carga en vez
   de candado, ya que el archivo real todavía no existe en el storage. */
.photo-evidence-processing {
    position: relative;
    display: inline-block;
    width: 280px;
    height: 200px;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.photo-evidence-processing .photo-evidence-processing-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #cbd5e1, #e2e8f0, #cbd5e1);
    filter: blur(6px);
    -webkit-filter: blur(6px);
}

.photo-evidence-processing .photo-evidence-processing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.25);
}

.photo-evidence-processing .photo-evidence-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    border-left-color: #ffffff;
    animation: spin 1s linear infinite;
}

.photo-evidence-processing-caption {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

/* ========================================================
   Dropdowns (<select>): el framework (comtor-web-framework-2-files/main.css)
   ya resalta los inputs de texto con el color primario al enfocarlos
   (--input-border-focus, definido como var(--main-color) en basic.css), pero
   ese mismo :focus no incluye <select> — por eso un dropdown no cambiaba de
   color al abrirse. Se replica acá el mismo tratamiento para <select>, y
   además se pinta con un tinte del color primario (no solo el borde) para
   que el cambio de color al desplegar sea evidente.
   ======================================================== */
select:focus {
    border: 1pt solid var(--input-border-focus, var(--main-color, #0e56a6));
    outline: none;
    background-color: var(--main-color-lightest, #e6eef6);
}