/* ==========================================================================
   VARIABLES DE DISEÑO INVARIANTES (Contraste de Gris Corregido)
   ========================================================================== */
:root {
    --primary-blue: #33b5e5;
    --btn-cyan: #17a2b8;
    --bg-gray: #f8f9fa;
    --border-color: #ced4da;
    
    /* ?? Ajuste de contraste solicitado: */
    --label-color: #212529;        /* Títulos de objetos: Gris muy oscuro / Casi negro */
    --text-color: #6c757d;         /* Contenido de objetos: Gris más claro y suave */
    
    --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: #33b5e5;
    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: #eaf7fc;
    color: #33b5e5;
}

.operacion-tab-btn.active {
    background: #33b5e5;
    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); }

/* Estado vacío de la tabla de cupones */
.empty-results-row { background: #fff; }
.empty-results-cell {
  padding: 28px 16px !important;
  text-align: center !important;
  color: #6c757d;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ==========================================================================
   INTERFAZ COBROSEGURO - CUPONES Y LOGIN
   ========================================================================== */
:root{--page-max:1180px;--shadow:0 10px 30px rgba(32,52,71,.08);--muted:#65758b;--danger:#d92d20;--success:#16803c;--warning:#c66a00}
html{scroll-behavior:smooth}
body.app-body{min-height:100vh;background:#f5f7fa;font-family:Inter,"Helvetica Neue",Arial,sans-serif;color:#263444;font-size:13px}
a{text-decoration:none;color:inherit}
.app-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #dbe5ed;box-shadow:0 2px 8px rgba(40,58,73,.05)}
.app-header__inner{width:min(var(--page-max),calc(100% - 32px));height:72px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;min-width:180px}.brand img{display:block;max-width:170px;max-height:52px;object-fit:contain}.brand__fallback{display:none;font-size:25px;font-weight:800;color:#13afd0;letter-spacing:-1.5px}.brand__fallback span{color:#101820}
.app-nav{display:flex;align-items:center;gap:6px}.app-nav__link{padding:10px 14px;border-radius:6px;color:#46566a;font-weight:600}.app-nav__link:hover,.app-nav__link.active{background:#eaf7fc;color:#159fc8}.app-nav__link--exit{color:#a33737}
.page-shell{width:min(var(--page-max),calc(100% - 32px));margin:28px auto 40px;display:flex;flex-direction:column;gap:22px}
.panel-container{max-width:none;margin:0;border-color:#33b5e5;box-shadow:var(--shadow)}
.panel-title-bar{text-align:left;padding:13px 18px;font-size:14px;letter-spacing:.1px}.panel-title-bar--split{display:flex;justify-content:space-between;align-items:center}.panel-count{font-size:12px;background:rgba(255,255,255,.2);padding:4px 9px;border-radius:999px}
.panel-body-area{padding:20px}.panel-body-area--table{padding:0}
/* Existing summary boxes become a compact five-column KPI grid */
.dashboard-panel form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.dashboard-panel #MyDivRecuadroInLine{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid #e0e7ee;border-radius:6px;background:#fff;min-width:0}
.dashboard-panel #MyDivRecuadroInLine label{margin:0;color:#607085;font-size:11px;text-transform:uppercase;letter-spacing:.45px}
.dashboard-panel #MyDivRecuadroInLine input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.dashboard-panel #MyDivRecuadroWhite{border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;background:transparent!important;max-width:none!important}
.dashboard-panel #MyDivRecuadroWhite h3{margin:0;color:#172330;font-size:24px;line-height:1.15;font-weight:700}
.dashboard-panel #MyDivRecuadroInLine:has(input:checked){border-color:#33b5e5;background:#f2fbfe;box-shadow:inset 0 0 0 1px #33b5e5}
.dashboard-panel #MyDivRecuadroInLine:last-of-type{grid-column:auto}
.dashboard-panel form>label{grid-column:1/-1;margin:4px 0 0}.dashboard-panel form>label[style]{color:#9a4d00!important;background:#fff7e6;border:1px solid #ffe0a3;border-radius:5px;padding:9px 11px;font-size:11px!important}
.dashboard-panel input[name=vBuscar]{grid-column:1/-2;height:38px;border-radius:5px;font-size:13px;padding:7px 12px}
.dashboard-panel input[type=submit]{grid-column:-2/-1;height:38px;border-radius:19px;border:0;background:#17a2b8;color:#fff;font-weight:700;cursor:pointer}
.dashboard-panel input[type=submit]:hover{filter:brightness(.95)}
/* Hide legacy task glyphs and oversized spacing */
.dashboard-panel .icon-plus-circled,.dashboard-panel .icon-tools{font-size:0!important}.dashboard-panel .icon-plus-circled:before{content:"+";font-size:18px}.dashboard-panel .icon-tools:before{content:"Herramientas";font-size:12px}
.results-panel{overflow:hidden}.table-responsive{width:100%;overflow-x:auto}
.data-table,.results-panel table{width:100%!important;border-collapse:collapse!important;min-width:980px;background:#fff;font-size:12px}
.data-table thead tr,.results-panel table thead tr{background:#edf3f7!important}
.data-table th,.results-panel table th{padding:10px 8px!important;color:#34475b;text-align:left!important;font-weight:700;border-bottom:1px solid #d6e0e8;white-space:nowrap}
.data-table td,.results-panel table td{padding:9px 8px!important;border-bottom:1px solid #edf1f4;vertical-align:middle;white-space:nowrap;background:transparent!important}
.results-panel table tbody tr:hover{background:#f5fbfe!important}
.results-panel label[class^=icon-]{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:0!important;cursor:pointer;background:#edf6fa;color:#1c91b4}
.results-panel .icon-whatsapp:before{content:"W";font-size:12px;font-weight:800;color:#138a3d}.results-panel .icon-mail:before{content:"@";font-size:15px;font-weight:700}.results-panel .icon-print:before{content:"P";font-size:12px;font-weight:800}.results-panel .icon-cancel-circled:before{content:"×";font-size:18px;color:#d92d20}.results-panel .icon-plus-circled:before{content:"+";font-size:18px;color:#175cd3}
.create-coupon-area{display:flex;flex-direction:column;align-items:center;gap:16px}.btn-new-coupon{display:inline-flex;align-items:center;gap:8px;border-radius:19px}.btn-new-coupon span{font-size:19px;line-height:1}
.new-coupon-panel{width:100%}.new-coupon-panel h2{display:none}.new-coupon-panel>div>label[style]{display:block;color:#9a4d00!important;background:#fff7e6;border:1px solid #ffe0a3;border-radius:5px;padding:9px 11px;font-size:11px!important;margin-bottom:14px}
.new-coupon-panel table{width:100%!important;border-collapse:separate;border-spacing:10px 8px}.new-coupon-panel th{font-size:11px;text-transform:uppercase;color:#5b6878;background:transparent!important;text-align:left}.new-coupon-panel td{padding:0!important}.new-coupon-panel input,.new-coupon-panel select{height:36px;border-radius:5px}.new-coupon-panel input[type=submit]{min-width:110px}
.app-footer{border-top:1px solid #dce5ec;background:#fff}.app-footer__inner{width:min(var(--page-max),calc(100% - 32px));margin:auto;padding:20px 0;color:#718096;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.app-footer strong{color:#34475b}.app-footer .menuContainerCopy{width:100%;font-size:11px}
#scroll{position:fixed;right:24px;bottom:24px;width:42px;height:42px;border-radius:50%;background:#33b5e5;color:#fff;font-size:0;box-shadow:0 6px 18px rgba(0,0,0,.15)}#scroll:after{content:"↑";font-size:20px;display:grid;place-items:center;height:100%}
body>br,.page-shell>br{display:none}
@media(max-width:900px){.dashboard-panel form{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-panel input[name=vBuscar]{grid-column:1/-1}.dashboard-panel input[type=submit]{grid-column:1/-1}.app-header__inner{height:auto;min-height:68px;padding:10px 0}.app-nav{overflow-x:auto}.app-nav__link{white-space:nowrap}}
@media(max-width:576px){.app-header__inner,.page-shell,.app-footer__inner{width:calc(100% - 20px)}.app-header__inner{align-items:flex-start;flex-direction:column;gap:8px}.app-nav{width:100%;padding-bottom:4px}.dashboard-panel form{grid-template-columns:1fr}.panel-body-area{padding:14px}.dashboard-panel #MyDivRecuadroInLine{padding:12px}.dashboard-panel #MyDivRecuadroWhite h3{font-size:21px}}

/* Ajustes aprobados de resumen, acciones y búsqueda */
.panel-title-bar--actions{display:flex;align-items:center;justify-content:space-between;gap:16px}
.panel-actions{display:flex;align-items:center;gap:7px}
.panel-action-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .15s ease,transform .15s ease;border-color .15s ease}
.panel-action-btn:hover,.panel-action-btn:focus-visible{background:#fff;color:#159fc8;transform:translateY(-1px);outline:none}
.panel-action-btn.is-open{background:#fff;color:#d92d20}
.panel-action-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dashboard-panel form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.dashboard-panel form>h2{display:none!important}
.dashboard-panel #MyDivRecuadroInLine{grid-column:auto!important}
.coupon-search{grid-column:1/-1;margin-top:4px}
.coupon-search label{margin-bottom:7px}
.search-input-wrap{position:relative;width:100%}
.dashboard-panel .search-input-wrap input[name=vBuscar]{width:100%;height:38px;padding:7px 46px 7px 12px;border-radius:5px;font-size:13px;grid-column:auto}
.search-icon-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:31px;height:31px;padding:0;border:0;border-radius:50%;background:transparent;color:#159fc8;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.search-icon-btn:hover,.search-icon-btn:focus-visible{background:#eaf7fc;outline:none}
.search-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.create-coupon-area{display:block}
.new-coupon-panel{margin-top:0}
@media(max-width:900px){.dashboard-panel form{grid-template-columns:repeat(5,minmax(125px,1fr));overflow-x:auto;padding-bottom:4px}.coupon-search{position:sticky;left:0;min-width:min(100%,620px)}}
@media(max-width:576px){.panel-title-bar--actions{padding-right:10px}.panel-action-btn{width:30px;height:30px}.dashboard-panel form{grid-template-columns:repeat(5,minmax(135px,1fr))}}

/* Ajustes de identidad, métricas y tipografía uniforme */
.brand--cs{display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.brand__mark{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 7px;border-radius:8px;background:#0a9fc5;color:#fff;font-size:23px;font-weight:800;letter-spacing:-2px;line-height:1}
.brand__name{display:inline-flex;align-items:baseline;font-size:24px;font-weight:700;letter-spacing:-.7px;line-height:1}
.brand__cobro{color:#0a9fc5}.brand__seguro{color:#27384a}
.dashboard-panel .panel-body-area,.results-panel .panel-body-area{font-size:12px;font-weight:400;color:#5f6b7a}
.dashboard-panel #MyDivRecuadroInLine{display:flex!important;align-items:center;gap:7px;min-width:0;padding:11px 12px!important}
.dashboard-panel #MyDivRecuadroInLine>input[type=radio]{flex:0 0 auto;margin:0}
.dashboard-panel #MyDivRecuadroWhite{display:flex!important;align-items:center;justify-content:flex-end;flex:1 1 auto;min-width:0;margin:0 0 0 auto!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.dashboard-panel #MyDivRecuadroWhite h3{width:100%;margin:0!important;text-align:right!important;font-size:18px!important;font-weight:600!important;line-height:1.2;color:#243746}
.coupon-search label{font-size:12px!important;font-weight:400!important;color:#5f6b7a!important;text-transform:none!important}
.data-table th,.results-panel table th,.new-coupon-panel th{font-size:12px!important;font-weight:400!important;color:#5f6b7a!important;text-transform:none!important;letter-spacing:0!important}
.data-table td,.results-panel table td{font-size:12px!important;font-weight:400!important;color:#4d5d6c}
.new-coupon-panel>div>label[style]{display:none!important}
@media(max-width:576px){.brand__mark{min-width:38px;height:38px;font-size:20px}.brand__name{font-size:21px}}

/* Ajuste de columna Tarea y formulario Nuevo cupón */
.results-panel th.task-heading{ text-align:center!important; }
.new-coupon-panel .panel-body-area{padding:20px 22px 22px}
.new-coupon-form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:15px;align-items:end}
.new-coupon-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.new-coupon-field label{margin:0;font-size:12px!important;font-weight:400!important;color:#5f6b7a!important}
.new-coupon-field input,.new-coupon-field select{width:100%;height:36px;margin:0;border-radius:4px}
.new-coupon-field--type{grid-column:span 3}
.new-coupon-field--insured{grid-column:span 5}
.new-coupon-field--reference{grid-column:span 4}
.new-coupon-field--email{grid-column:span 4}
.new-coupon-field--phone{grid-column:span 3}
.new-coupon-field--due{grid-column:span 2}
.new-coupon-field--amount{grid-column:span 3}
.new-coupon-field--card-type{grid-column:span 4}
.new-coupon-field--card-number{grid-column:span 5}
.new-coupon-actions{grid-column:span 3;display:flex;justify-content:flex-end;align-items:flex-end}
.new-coupon-actions .btn-form{min-width:120px;height:38px;margin:0}
@media(max-width:900px){
 .new-coupon-field--type,.new-coupon-field--insured,.new-coupon-field--reference,.new-coupon-field--email,.new-coupon-field--phone,.new-coupon-field--due,.new-coupon-field--amount,.new-coupon-field--card-type,.new-coupon-field--card-number{grid-column:span 6}
 .new-coupon-actions{grid-column:span 6}
}
@media(max-width:576px){
 .new-coupon-form{grid-template-columns:1fr;gap:12px}
 .new-coupon-field--type,.new-coupon-field--insured,.new-coupon-field--reference,.new-coupon-field--email,.new-coupon-field--phone,.new-coupon-field--due,.new-coupon-field--amount,.new-coupon-field--card-type,.new-coupon-field--card-number,.new-coupon-actions{grid-column:1}
 .new-coupon-actions{justify-content:stretch}.new-coupon-actions .btn-form{width:100%}
}

/* Utilidades extraídas de estilos inline */
.is-hidden { display: none !important; }
.coupon-radio { cursor: pointer; }
.action-image { display: inline-block; cursor: pointer; padding-left: 0; padding-right: 0; }
.action-image--30 { max-width: 30px; }
.action-image--27 { max-width: 27px; }
.action-image.is-muted { opacity: .4; }
.status-text--paid { color: var(--success); }
.status-text--expired { color: var(--danger); }
.status-text--pending { color: var(--warning); }
.action-icon { font-size: 20px; cursor: pointer; }
.action-icon--delete { color: var(--danger); }
.action-icon--copy { color: #175cd3; }
#scroll { display: none; }

/* Marca CobroSeguro compartida */
.brand--cs { gap: 10px; text-decoration: none; }
.brand__mark { width: 43px; height: 43px; display: inline-grid; place-items: center; border-radius: 12px; background: #33b5e5; color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -.5px; box-shadow: 0 6px 16px rgba(51,181,229,.25); }
.brand__name { display: inline-flex; align-items: baseline; font-size: 24px; font-weight: 800; letter-spacing: -1px; }
.brand__cobro { color: #172330; }
.brand__seguro { color: #159fc8; }

/* Login con la misma identidad visual de UserCouponsView */
.login-page-body { display: flex; flex-direction: column; }
.login-header__caption { color: #65758b; font-size: 13px; font-weight: 600; }
.login-shell { width: min(470px, calc(100% - 32px)); margin: auto; padding: 48px 0; flex: 1 0 auto; display: flex; align-items: center; }
.login-panel { width: 100%; }
.login-panel__body { padding: 30px; }
.login-intro { text-align: center; margin-bottom: 24px; }
.login-intro h1 { margin: 0 0 8px; color: #172330; font-size: 25px; line-height: 1.2; }
.login-intro p { margin: 0; color: #65758b; line-height: 1.55; }
.login-form { display: grid; gap: 18px; }
.login-form input { height: 42px; font-size: 14px; }
.login-submit { width: 100%; height: 42px; margin-top: 4px; border-radius: 21px; }
.login-submit:disabled { opacity: .7; cursor: wait; }
.login-secondary-actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #edf1f4; }
.login-secondary-actions form { margin: 0; }
.login-link-button { border: 0; background: transparent; color: #159fc8; padding: 4px 0; font: inherit; font-weight: 700; cursor: pointer; }
.login-link-button:hover, .login-link-button:focus-visible { color: #117f9f; text-decoration: underline; outline: none; }
.login-action-separator { width: 1px; height: 18px; background: #d9e2ec; }
.form-alert { margin-bottom: 18px; padding: 10px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.form-alert--error { color: #9f241a; background: #fff1f0; border: 1px solid #ffc9c5; }
.login-footer { flex: 0 0 auto; }

@media (max-width: 576px) {
    .login-header .app-header__inner { flex-direction: row; align-items: center; }
    .login-header__caption { display: none; }
    .login-shell { width: calc(100% - 20px); padding: 24px 0; }
    .login-panel__body { padding: 22px 18px; }
    .login-secondary-actions { flex-direction: column; gap: 8px; }
    .login-action-separator { display: none; }
    .brand__name { font-size: 22px; }
}



.legacy-icon-large { font-size: 30px; }

.action-image--20 { max-width: 20px; }


/* ========================================================================== 
   USERCOUPONSPROCESS - PROCESAMIENTO DE CUPONES
   ========================================================================== */
.process-intro-panel .panel-body-area { padding: 22px; }
.process-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.process-intro h1 { margin: 0 0 7px; color: #172330; font-size: 22px; line-height: 1.25; }
.process-intro p { margin: 0; color: #65758b; line-height: 1.55; }
.process-back-button { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; white-space: nowrap; }
.process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.process-card { display: flex; flex-direction: column; min-width: 0; }
.process-card .panel-title-bar { text-align: left; }
.process-card__body { display: flex; flex-direction: column; flex: 1; gap: 18px; }
.process-card__description h2 { margin: 0 0 7px; color: #243746; font-size: 17px; line-height: 1.3; }
.process-card__description p { margin: 0; min-height: 40px; color: #65758b; line-height: 1.55; }
.process-template-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; color: #159fc8; font-size: 12px; font-weight: 700; }
.process-template-link:hover { color: #117f9f; text-decoration: underline; }
.process-template-link span { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #eaf7fc; font-size: 17px; line-height: 1; }
.process-upload-form { display: grid; gap: 10px; margin-top: auto; }
.process-upload-form label { margin: 0; color: #5f6b7a; font-size: 12px; font-weight: 600; }
.process-file-input { width: 100%; min-height: 42px; padding: 5px; border: 1px solid var(--border-color); border-radius: 5px; background: #fff; color: #5f6b7a; font: inherit; }
.process-file-input::file-selector-button { height: 30px; margin-right: 10px; padding: 0 13px; border: 0; border-radius: 4px; background: #edf6fa; color: #167f9f; font: inherit; font-weight: 700; cursor: pointer; }
.process-file-input:hover::file-selector-button { background: #dff2f8; }
.process-file-input:focus { border-color: var(--primary-blue); outline: 0; box-shadow: 0 0 0 3px rgba(51,181,229,.12); }
.process-submit { width: 100%; height: 40px; margin-top: 4px; border-radius: 20px; }
.process-submit:disabled { opacity: .7; cursor: wait; }
@media (max-width: 800px) {
    .process-grid { grid-template-columns: 1fr; }
    .process-card__description p { min-height: 0; }
}
@media (max-width: 576px) {
    .process-intro { align-items: stretch; flex-direction: column; gap: 16px; }
    .process-back-button { width: 100%; }
    .process-intro h1 { font-size: 19px; }
}


/* ========================================================================== 
   USEREDIT - EDICIÓN DE PERFIL
   ========================================================================== */
.profile-page-body { min-height: 100vh; }
.profile-shell { gap: 20px; }
.profile-intro-panel .panel-body-area { padding: 22px; }
.profile-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.profile-intro h1 { margin: 0 0 7px; color: #172330; font-size: 22px; line-height: 1.25; }
.profile-intro p { margin: 0; color: #65758b; line-height: 1.55; }
.profile-back-button { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; white-space: nowrap; }
.profile-form { display: grid; gap: 20px; }
.profile-section { min-width: 0; }
.profile-fields-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.profile-field { display: flex; flex-direction: column; min-width: 0; gap: 6px; grid-column: span 1; }
.profile-field--wide { grid-column: span 2; }
.profile-field--full { grid-column: 1 / -1; }
.profile-field label { margin: 0; color: #5f6b7a; font-size: 12px; font-weight: 600; }
.profile-field input { width: 100%; height: 38px; margin: 0; border-radius: 5px; }
.profile-field input[type=email] { height: 38px; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-color); font: inherit; }
.profile-field input[type=email]:focus { border-color: var(--primary-blue); outline: 0; color: #495057; }
.profile-field-help { display: block; color: #b25000; font-size: 11px; line-height: 1.4; }
.profile-disclaimer-panel { border-color: #d9e2ec; }
.profile-disclaimer-panel p { margin: 0; color: #65758b; line-height: 1.65; }
.profile-disclaimer-panel strong { color: #34475b; }
.profile-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #edf1f4; }
.profile-actions .btn-form { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; }
.profile-save-button:disabled { opacity: .7; cursor: wait; }
@media (max-width: 900px) {
    .profile-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-field--wide { grid-column: span 2; }
}
@media (max-width: 576px) {
    .profile-intro { align-items: stretch; flex-direction: column; gap: 16px; }
    .profile-back-button { width: 100%; }
    .profile-intro h1 { font-size: 19px; }
    .profile-fields-grid { grid-template-columns: 1fr; gap: 13px; padding: 16px; }
    .profile-field, .profile-field--wide, .profile-field--full { grid-column: 1; }
    .profile-actions { align-items: stretch; flex-direction: column-reverse; }
    .profile-actions .btn-form { width: 100%; }
}