/* ==========================================================================
   BAIRES HOST - Area de clientes (tema lagom2)
   Sistema visual minimalista: Geist, superficies planas, una escala de
   tamanos estandar, estados legibles en modo oscuro y claro.

   Orden del archivo
     1. Tokens y tipografia
     2. Cabecera, titulo de pagina y grilla
     3. Barra lateral
     4. Componentes: botones, formularios, tablas, badges, alertas, paneles
     5. Inicio (clientarea.php)
     6. Detalle de servicio
     7. Celular
   ========================================================================== */

/* 1. TOKENS Y TIPOGRAFIA -------------------------------------------------- */

body.lagom {
    --ui-surface: #ffffff;
    --ui-sunken: #f6f7f9;
    --ui-hover: #f1f2f4;
    --ui-line: #e4e6ea;
    --ui-line-strong: #d3d6dc;
    --ui-text: #15171a;
    --ui-muted: #5b616b;
    --ui-ok: #1e7a4c;
    --ui-warn: #a85d00;
    --ui-bad: #c4242a;
    --ui-info: #1a56d6;
    --ui-radius: 10px;
    --ui-radius-sm: 8px;
    --ui-gap: 16px;

    font-family: var(--font-family-base);
    font-size: 14px;
    line-height: 1.5;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
}

.lagom-dark-mode body.lagom {
    --ui-surface: #171717;
    --ui-sunken: #101010;
    --ui-hover: #202020;
    --ui-line: #2a2a2a;
    --ui-line-strong: #3a3a3a;
    --ui-text: #ededed;
    --ui-muted: #a1a1a1;
    --ui-ok: #52c98f;
    --ui-warn: #f0a340;
    --ui-bad: #ff7085;
    --ui-info: #6ea2ff;
}

body.lagom h1,
body.lagom h2,
body.lagom h3,
body.lagom h4,
body.lagom h5,
body.lagom h6,
body.lagom .h1,
body.lagom .h2,
body.lagom .h3,
body.lagom .h4,
body.lagom .h5,
body.lagom .h6,
body.lagom .btn,
body.lagom .form-control,
body.lagom select,
body.lagom textarea,
body.lagom button {
    font-family: var(--font-family-base);
    letter-spacing: -0.005em;
    text-transform: none;
}

body.lagom h1 { font-size: 22px; line-height: 1.25; font-weight: 600; }
body.lagom h2 { font-size: 18px; line-height: 1.3; font-weight: 600; }
body.lagom h3 { font-size: 16px; line-height: 1.35; font-weight: 600; }
body.lagom h4,
body.lagom h5,
body.lagom h6 { font-size: 14px; line-height: 1.4; font-weight: 600; }

body.lagom .section-title { font-size: 16px; font-weight: 600; }
body.lagom small,
body.lagom .small { font-size: 12px; }

/* IPs, dominios con puerto, IDs y codigos: Geist Mono */
body.lagom code,
body.lagom kbd,
body.lagom pre,
body.lagom .text-domain,
body.lagom .product-footer,
body.lagom .ticket-number {
    font-family: var(--font-family-mono);
    font-size: 0.93em;
}

/* 2. CABECERA, TITULO DE PAGINA Y GRILLA ---------------------------------- */

body.lagom .app-nav .top-nav > li > a,
body.lagom .app-nav .top-nav .item-text {
    font-size: 13px;
}

body.lagom .app-nav .main-nav > li > a,
body.lagom .app-nav .app-nav-menu > li > a,
body.lagom .app-nav-menu .nav-link {
    font-size: 14px;
    font-weight: 500;
}

body.lagom .app-nav .btn {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

body.lagom .main-header {
    padding: 24px 0 4px;
    margin: 0;
}

body.lagom .main-header-title {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-transform: none !important;
}

body.lagom .main-header .breadcrumb {
    margin: 0;
    font-size: 13px;
}

body.lagom .main-body {
    padding-top: 20px;
}

body.lagom .section {
    margin-bottom: 28px;
}

body.lagom .section-header {
    margin-bottom: 12px;
}

body.lagom .app-footer,
body.lagom .app-footer * {
    font-size: 13px;
}

/* 3. BARRA LATERAL -------------------------------------------------------- */

body.lagom .panel-sidebar {
    margin-bottom: 20px;
    background: none;
    border: 0;
    box-shadow: none;
}

body.lagom .panel-sidebar.panel-default,
body.lagom .panel-sidebar.panel-default.card-light {
    background: none;
    border: 0;
    border-radius: 0;
}

body.lagom .panel-sidebar > .panel-heading,
body.lagom .panel-sidebar.panel-default > .panel-heading {
    padding: 0 0 6px;
    background: none;
    border: 0;
    min-height: 0;
}

body.lagom .panel-sidebar .panel-title {
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--ui-muted);
}

body.lagom .panel-sidebar .panel-title > i,
body.lagom .panel-sidebar .panel-title > .ls,
body.lagom .panel-sidebar .panel-minimise {
    display: none;
}

body.lagom .panel-sidebar .list-group a.list-group-item,
body.lagom .panel-sidebar .list-group .list-group-item {
    color: var(--ui-text) !important;
}

body.lagom .panel-sidebar .list-group .list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -8px;
    padding: 7px 8px;
    background: none;
    border: 0;
    border-radius: var(--ui-radius-sm);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ui-text);
}

body.lagom .panel-sidebar .list-group-item i {
    flex: none;
    width: 16px;
    margin: 0;
    font-size: 14px;
    text-align: center;
    color: var(--ui-muted);
}

body.lagom .panel-sidebar .list-group a.list-group-item:hover {
    background: var(--ui-hover);
}

body.lagom .panel-sidebar .list-group .list-group-item.active,
body.lagom .panel-sidebar .list-group .list-group-item.active:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-text) !important;
    font-weight: 600;
}

body.lagom .panel-sidebar .list-group .list-group-item.active i {
    color: var(--ui-text);
}

body.lagom .panel-sidebar .list-group-item.disabled {
    opacity: 0.45;
}

body.lagom .panel-sidebar .panel-footer {
    padding: 8px 0 0;
    background: none;
    border: 0;
}

/* 4. COMPONENTES ---------------------------------------------------------- */

/* Botones: una altura, un radio, sin degradados */
body.lagom .btn {
    height: 34px;
    padding: 0 14px;
    border-radius: var(--ui-radius-sm);
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    box-shadow: none;
    background-image: none;
}

body.lagom .btn-sm { height: 30px; padding: 0 12px; line-height: 28px; }
body.lagom .btn-xs { height: 26px; padding: 0 10px; font-size: 12px; line-height: 24px; }
body.lagom .btn-lg { height: 42px; padding: 0 20px; font-size: 14px; line-height: 40px; }
body.lagom .btn-icon { padding: 0; }

body.lagom .btn-default,
body.lagom .btn-outline {
    background: transparent;
    border: 1px solid var(--ui-line-strong);
    color: var(--ui-text);
}

body.lagom .btn-default:hover,
body.lagom .btn-outline:hover {
    background: var(--ui-hover);
    color: var(--ui-text);
}

/* Formularios */
body.lagom .form-control,
body.lagom select.form-control {
    height: 38px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-line-strong);
    background-color: var(--ui-sunken);
    font-size: 14px;
    box-shadow: none;
}

body.lagom textarea.form-control {
    height: auto;
    padding: 10px 12px;
}

body.lagom label,
body.lagom .control-label {
    font-size: 13px;
    font-weight: 500;
}

body.lagom .form-group {
    margin-bottom: 16px;
}

/* Badges y estados: pastilla con punto de color y texto siempre legible */
body.lagom .status,
body.lagom .label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--ui-text);
    background: var(--ui-hover);
    --ui-sc: var(--status-color, var(--ui-muted));
}

body.lagom .status {
    background: color-mix(in srgb, var(--ui-sc) 16%, transparent);
}

body.lagom .status::before {
    content: "";
    display: inline-block;
    position: static;
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-sc) 65%, var(--ui-text));
}

body.lagom .label-success { background: color-mix(in srgb, var(--ui-ok) 16%, transparent); color: var(--ui-ok); }
body.lagom .label-warning { background: color-mix(in srgb, var(--ui-warn) 16%, transparent); color: var(--ui-warn); }
body.lagom .label-danger { background: color-mix(in srgb, var(--ui-bad) 16%, transparent); color: var(--ui-bad); }
body.lagom .label-info,
body.lagom .label-primary { background: color-mix(in srgb, var(--ui-info) 16%, transparent); color: var(--ui-info); }

body.lagom .badge {
    font-size: 11px;
    font-weight: 600;
}

/* Alertas: una linea, tinte plano */
body.lagom .alert {
    padding: 10px 14px;
    border-radius: var(--ui-radius);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: none;
}

/* Paneles y tarjetas: planos, borde de 1px, sin sombra */
body.lagom .panel-default,
body.lagom .panel.card-light {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: none;
}

body.lagom .panel-default > .panel-heading {
    min-height: 0;
    padding: 12px 16px;
    background: none;
    border-bottom: 1px solid var(--ui-line);
}

body.lagom .panel-default .panel-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

body.lagom .panel-default > .panel-body {
    padding: 16px;
}

body.lagom .panel-default > .panel-footer {
    padding: 10px 16px;
    background: none;
    border-top: 1px solid var(--ui-line);
    font-size: 13px;
}

/* Tablas (listas con DataTables) */
body.lagom .table > thead > tr > th,
body.lagom table.dataTable > thead > tr > th {
    padding: 10px 16px;
    border-bottom: 1px solid var(--ui-line);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ui-muted);
    background: none;
}

body.lagom .table > tbody > tr > td,
body.lagom table.dataTable > tbody > tr > td {
    padding: 12px 16px;
    border-top: 1px solid var(--ui-line);
    font-size: 14px;
    vertical-align: middle;
}

body.lagom .table-striped > tbody > tr:nth-of-type(odd) {
    background: none;
}

body.lagom .table > tbody > tr:hover > td {
    background: var(--ui-hover);
}

/* Pestanas */
body.lagom .nav-tabs > li > a {
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
}

/* Listas clave/valor */
body.lagom .list-info .list-info-title {
    font-size: 13px;
    font-weight: 400;
    color: var(--ui-muted);
}

body.lagom .list-info .list-info-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--ui-text);
}

/* 5. INICIO (clientarea.php) ---------------------------------------------- */

body.page-clientareahome .panel-client-details.panel-sidebar {
    margin: 0 0 20px;
    padding: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: none;
    color: var(--ui-text);
}

.page-clientareahome .panel-client-details .panel-body {
    padding: 16px 16px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ui-muted);
}

.page-clientareahome .panel-client-details .client-avatar {
    margin: 0 0 10px;
}

.page-clientareahome .panel-client-details .client-avatar img {
    width: 40px;
    height: 40px;
}

.page-clientareahome .panel-client-details .panel-body > br:first-of-type {
    display: none;
}

.page-clientareahome .panel-client-details strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ui-text) !important;
}

.page-clientareahome .panel-client-details em {
    font-style: normal;
    color: var(--ui-text);
}

body.page-clientareahome .panel-client-details .panel-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px 16px !important;
    background: none;
    border: 0;
}

.page-clientareahome .panel-client-details .panel-footer::before,
.page-clientareahome .panel-client-details .panel-footer::after {
    display: none;
}

.page-clientareahome .panel-client-details .panel-footer .btn {
    width: 100%;
    margin: 0;
    padding: 0 10px;
    background: transparent !important;
    border: 1px solid var(--ui-line-strong) !important;
    color: var(--ui-text) !important;
}

.page-clientareahome .panel-client-details .panel-footer .btn i {
    display: none;
}

.page-clientareahome .panel-client-details .panel-footer .btn:hover {
    background: var(--ui-hover) !important;
}

.page-clientareahome .sidebar-secondary .panel-footer .btn {
    background: transparent !important;
    border: 1px solid var(--ui-line-strong) !important;
    color: var(--ui-text) !important;
}

/* "Mas contactos" no aporta cuando no hay contactos */
.page-clientareahome .sidebar-secondary .contact-more {
    display: none;
}

/* "Cerrar sesion" ya esta en el perfil: no repetirlo en Accesos directos */
.page-clientareahome .sidebar-secondary a.list-group-item[href$="logout.php"] {
    display: none;
}

.page-clientareahome .client-home-alerts {
    margin-bottom: var(--ui-gap);
}

/* Contadores: una franja dividida, no cuatro tarjetas */
.page-clientareahome .main-content .tiles {
    margin: 0 0 var(--ui-gap) !important;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.page-clientareahome .tiles > .row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 0;
    transform: none !important;
}

.page-clientareahome .tiles .swiper-slide {
    width: auto !important;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0 !important;
}

.page-clientareahome .tiles .swiper-slide + .swiper-slide {
    border-left: 1px solid var(--ui-line);
}

.page-clientareahome .tiles .tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 12px 18px;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.page-clientareahome .tiles .tile:hover {
    background: var(--ui-hover);
}

.page-clientareahome .tiles .tile-icon-absolute,
.page-clientareahome .tiles .swiper-pagination {
    display: none;
}

.page-clientareahome .tiles .tile-title {
    order: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
    color: var(--ui-muted);
}

.page-clientareahome .tiles .tile-stat {
    order: 2;
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.page-clientareahome .tiles .tile-stat.text-danger {
    color: var(--ui-bad);
}

/* Paneles: una sola columna. Servicios arriba, tickets debajo. */
.page-clientareahome .client-home-panels.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ui-gap);
    margin: 0;
    height: auto !important;
}

.page-clientareahome .client-home-panels > [data-panels-grid-item] {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none;
    float: none;
    padding: 0;
    margin: 0;
}

.page-clientareahome .client-home-panels > .column-sizer {
    display: none;
}

.page-clientareahome .client-home-panels > [data-panels-grid-item]:has(.panel-active-services) {
    order: -1;
}

.page-clientareahome .client-home-panels .panel {
    margin: 0;
    overflow: hidden;
}

.page-clientareahome .client-home-panels .panel-title > i,
.page-clientareahome .client-home-panels .panel-title > .ls {
    display: none;
}

.page-clientareahome .client-home-panels .list-group-item {
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ui-line);
    font-size: 14px;
    line-height: 1.4;
}

.page-clientareahome .client-home-panels .list-group-item:last-child {
    border-bottom: 0;
}

.page-clientareahome .client-home-panels .list-group-item:hover {
    background: var(--ui-hover);
}

.page-clientareahome .client-home-panels .list-group.has-scroll {
    max-height: 342px;
}

.page-clientareahome .client-home-panels .list-group-item .list-group-item-content {
    padding: 10px 16px !important;
}

.page-clientareahome .client-home-panels .list-group-item-name,
.page-clientareahome .client-home-panels .list-group-item-fullname {
    font-size: 14px;
    line-height: 20px;
}

.page-clientareahome .client-home-panels .list-group-item .text-domain {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: var(--ui-muted);
}

.page-clientareahome .client-home-panels .list-group-item-status,
.page-clientareahome .client-home-panels .list-group-item-actions {
    padding-left: 12px;
}

.page-clientareahome .client-home-panels .status-expiry {
    font-size: 12px;
    color: var(--ui-bad);
}

/* Tickets recientes: titulo a la izquierda, estado a la derecha, fecha abajo */
.page-clientareahome .panel-support-tickets a.list-group-item {
    display: block;
    padding: 12px 16px;
}

.page-clientareahome .panel-support-tickets .status-modern {
    display: block;
    position: relative;
    padding-right: 130px;
}

.page-clientareahome .panel-support-tickets .status-modern label.status {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

.page-clientareahome .panel-support-tickets .status-modern small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ui-muted);
}

/* 6. DETALLE DE SERVICIO -------------------------------------------------- */

/* Cabecera del servicio: nombre + IP en una fila, sin tarjeta azul */
.product-details > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0 0 var(--ui-gap);
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius);
    overflow: hidden;
}

.product-details > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
    float: none;
}

.product-details > .row,
.product-details > .row > [class*="col-"],
.product-details .product-icon,
.product-details .product-icon .product-content {
    min-height: 0 !important;
    height: auto !important;
    padding: 0;
    background: none !important;
    background-image: none !important;
    border: 0;
    box-shadow: none;
}

.product-details .product-icon .product-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px 16px;
    text-align: left;
}

.product-details .product-image,
.product-details .product-icon svg,
.product-details .product-icon .graphic-item {
    display: none !important;
}

.product-details .product-name,
.product-details .product-name * {
    color: var(--ui-text) !important;
}

.product-details .product-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.product-details .product-name .product-group-name {
    font-weight: 400;
    color: var(--ui-muted) !important;
}

.product-details .product-footer {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    width: auto !important;
    text-align: left !important;
    font-size: 13px;
    color: var(--ui-muted) !important;
    box-shadow: none !important;
}

.product-details .product-icon::before,
.product-details .product-icon::after,
.product-details .product-icon .product-content::before,
.product-details .product-icon .product-content::after,
.product-details .product-info::before {
    display: none !important;
}

.product-details .product-icon {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding: 16px 20px 12px !important;
}

.product-details .product-icon .product-content {
    width: auto;
    padding: 0 !important;
}

.product-details .product-name {
    width: auto;
    text-align: left;
}

.product-details .product-info {
    display: block !important;
    min-height: 0 !important;
    padding: 0 20px 16px;
    background: none;
}

.product-details .product-info .list-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 24px;
    margin: 0;
    padding: 0;
}

.product-details .product-info .list-info > li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
}

.product-details .product-info .list-info-title {
    order: 1;
    font-size: 12px;
    color: var(--ui-muted);
}

.product-details .product-info .list-info-text {
    order: 2;
    font-size: 14px;
    font-weight: 500;
}

.panel-product-details,
body.lagom .panel-default.panel-product-details {
    margin: 0 0 var(--ui-gap);
    background: none;
    border: 0;
}

.panel-product-details > .panel-body {
    padding: 0 !important;
}

.panel-product-details .module-client-area center {
    text-align: left;
}

/* Accion principal del servicio: el acceso al panel de control, como boton */
.panel-product-details .module-client-area a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--ui-radius-sm);
    background: var(--brand-primary, #1062fe);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.panel-product-details .module-client-area a:hover {
    filter: brightness(1.1);
}

/* Datos del servicio en dos columnas, con lineas suaves */
body.lagom .list-info-bordered > li {
    padding: 12px 20px;
    border: 0;
    border-bottom: 1px solid var(--ui-line);
}

body.lagom .list-info-bordered > li:last-child {
    border-bottom: 0;
}

/* 7. CELULAR -------------------------------------------------------------- */

@media (max-width: 767px) {
    body.lagom .main-header-title {
        font-size: 20px;
    }

    .page-clientareahome .tiles > .row {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-clientareahome .tiles .swiper-slide:nth-child(odd) {
        border-left: 0;
    }

    .page-clientareahome .tiles .swiper-slide:nth-child(n + 3) {
        border-top: 1px solid var(--ui-line);
    }

    .page-clientareahome .client-home-panels .list-group.has-scroll {
        max-height: none;
    }

    .page-clientareahome .panel-active-services .list-group > :nth-child(n + 5) {
        display: none;
    }

    .page-clientareahome .client-home-panels .list-group-item-name {
        padding-right: 76px;
    }

    .page-clientareahome .client-home-panels .list-group-item-actions {
        padding-left: 0;
        margin-top: 8px;
    }
}

/* ==========================================================================
   8. IDENTIDAD Y AJUSTES (v2)
   Tokens propios del tema: tamanos de titulos, acento celeste y fondo oscuro.
   Se declaran sobre html:root (mas especificos que el :root del tema).
   ========================================================================== */

html:root {
    /* Escala de titulos: sin heroes, 26px es el maximo */
    --font-size-h1: 26px;  --line-height-h1: 32px;  --font-weight-h1: 600;
    --font-size-h2: 20px;  --line-height-h2: 28px;  --font-weight-h2: 600;
    --font-size-h3: 17px;  --line-height-h3: 24px;  --font-weight-h3: 600;
    --font-size-h4: 15px;  --line-height-h4: 22px;  --font-weight-h4: 600;
    --font-size-h5: 14px;  --line-height-h5: 20px;  --font-weight-h5: 600;
    --font-size-h6: 13px;  --line-height-h6: 18px;  --font-weight-h6: 600;
    --font-size-lg: 15px;  --line-height-lg: 22px;
    --font-size-xlg: 17px; --line-height-xlg: 24px;

    /* Acento: celeste rioplatense (modo claro), plano y sin degradados */
    --brand-primary: #1d6fb8;
    --brand-primary-lighter: #3f8ad0;
    --brand-primary-darker: #155a97;
    --brand-primary-lighter-2: #bcd6ee;
    --brand-primary-lighter-3: #dbe9f6;
    --brand-primary-lighter-4: #eef5fb;
    --brand-primary-gradient-start: #1d6fb8;
    --brand-primary-gradient-end: #1d6fb8;

    /* Acento y fondo en modo oscuro */
    --dark-mode-brand-primary: #74acdf;
    --dark-mode-brand-primary-lighter: #9cc3e8;
    --dark-mode-brand-primary-darker: #5b97cd;
    --dark-mode-brand-primary-gradient-start: #74acdf;
    --dark-mode-brand-primary-gradient-end: #74acdf;
    --dark-mode-body-bg: #0e0f11;
}

html.lagom-dark-mode:root {
    --btn-primary-color: #0a1522;
    --ui-block-bg: #15161a;
    --brand-primary-gradient-start: #74acdf;
    --brand-primary-gradient-end: #74acdf;
}

.lagom-dark-mode body.lagom {
    --ui-surface: #15161a;
    --ui-sunken: #0e0f11;
    --ui-hover: #1c1d22;
    --ui-line: #25272c;
    --ui-line-strong: #34363c;
}

body.lagom .main-header-title {
    font-size: 24px;
}

body.lagom .btn-primary,
body.lagom .btn-primary:hover,
body.lagom .btn-primary:focus {
    background-image: none;
}

/* 9. INICIO: ajustes puntuales ------------------------------------------- */

/* Paneles estrictamente en filas (servicios, luego tickets, luego el resto).
   Se anula toda asignacion de columna/fila heredada de versiones anteriores. */
body.page-clientareahome .client-home-panels.row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    gap: var(--ui-gap);
}

body.page-clientareahome .client-home-panels > [data-panels-grid-item],
body.page-clientareahome .client-home-panels > [data-panels-grid-item]:has(.panel-active-services) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}

body.page-clientareahome .client-home-panels > [data-panels-grid-item]:has(.panel-active-services) {
    order: 1;
}

body.page-clientareahome .client-home-panels > [data-panels-grid-item]:has(.panel-support-tickets) {
    order: 2;
}

/* Contadores: sin hover ni animacion */
body.page-clientareahome .tiles .tile,
body.page-clientareahome .tiles .tile:hover,
body.page-clientareahome .tiles .tile:focus {
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

body.page-clientareahome .tiles .tile-stat {
    font-family: var(--font-family-mono);
    font-weight: 500;
    letter-spacing: -0.02em;
}

body.page-clientareahome .client-home-panels .list-group-item,
body.page-clientareahome .client-home-panels .panel-active-services .list-group .list-group-item {
    transition: none !important;
}

/* Perfil: Actualizar y Cerrar sesion, identicos. Se fuerza todo porque el tema
   los estiliza con selectores muy especificos y distintos para cada boton. */
body.page-clientareahome .panel-sidebar.panel-client-details .panel-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 !important;
    padding: 4px 16px 16px !important;
}

body.page-clientareahome .panel-sidebar.panel-client-details .panel-footer .btn,
body.page-clientareahome .panel-sidebar.panel-client-details .panel-footer .btn:hover,
body.page-clientareahome .panel-sidebar.panel-client-details .panel-footer .btn:focus {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid var(--ui-line-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: none !important;
}

body.page-clientareahome .panel-sidebar.panel-client-details .panel-footer .btn:hover {
    background: var(--ui-hover) !important;
}

body.page-clientareahome .panel-sidebar.panel-client-details .panel-footer .btn i,
body.page-clientareahome .panel-sidebar.panel-client-details .panel-footer .btn .ls {
    display: none !important;
}

/* Barra lateral del inicio: tarjetas ordenadas (Contactos y Accesos directos) */
body.page-clientareahome .sidebar-secondary .panel-sidebar {
    display: block;
    margin: 0 0 var(--ui-gap);
    padding: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

body.page-clientareahome .sidebar-secondary .panel-sidebar > .panel-heading {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-line);
}

body.page-clientareahome .sidebar-secondary .panel-sidebar .panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
}

body.page-clientareahome .sidebar-secondary .panel-sidebar .list-group .list-group-item {
    margin: 0;
    padding: 10px 16px;
    border-radius: 0;
    border-bottom: 1px solid var(--ui-line);
}

body.page-clientareahome .sidebar-secondary .panel-sidebar .list-group .list-group-item:last-child {
    border-bottom: 0;
}

/* Contactos: titulo a la izquierda, accion a la derecha, estado vacio en una linea */
body.page-clientareahome .sidebar-secondary .panel-client-contacts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

body.page-clientareahome .sidebar-secondary .panel-client-contacts > .panel-heading {
    grid-column: 1;
    grid-row: 1;
}

body.page-clientareahome .sidebar-secondary .panel-client-contacts > .panel-footer {
    display: flex;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
    padding: 0 12px 0 0;
    border: 0;
    border-bottom: 1px solid var(--ui-line);
    background: none;
}

body.page-clientareahome .sidebar-secondary .panel-client-contacts > .list-group {
    grid-column: 1 / -1;
    grid-row: 2;
}

body.page-clientareahome .sidebar-secondary .panel-client-contacts .panel-footer .btn {
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

body.page-clientareahome .sidebar-secondary .panel-client-contacts .panel-footer .btn i {
    display: none !important;
}

body.page-clientareahome .sidebar-secondary .panel-client-contacts .list-group-item {
    color: var(--ui-muted) !important;
    font-size: 13px;
}

body.page-clientareahome .sidebar-secondary .panel-client-contacts .list-group-item i {
    display: none;
}

body.page-clientareahome .sidebar-secondary .contact-more {
    display: none !important;
}

/* Accesos directos: filas simples */
body.page-clientareahome .sidebar-secondary .panel-sidebar:not(.panel-client-contacts) .list-group-item i {
    color: var(--ui-muted);
}

body.page-clientareahome .sidebar-secondary a.list-group-item[href$="logout.php"] {
    display: none !important;
}

/* ==========================================================================
   10. ICONOS DE ACCION
   Un set de iconos de linea (SVG como mascara), asignado por destino del
   enlace. Sirve igual para la barra lateral y para los botones del contenedor.
   ========================================================================== */

body.lagom {
    --bh-i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7 4 20 12 7 20 7 4'/%3E%3C/svg%3E");
    --bh-i-reboot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpolyline points='21 3 21 9 15 9'/%3E%3C/svg%3E");
    --bh-i-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3C/svg%3E");
    --bh-i-power: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v9'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.8 0'/%3E%3C/svg%3E");
    --bh-i-plan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16V8'/%3E%3Cpath d='M8 12l4-4 4 4'/%3E%3C/svg%3E");
    --bh-i-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9'/%3E%3Cpath d='M17 6h3'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Cpath d='M4 12h3'/%3E%3Cpath d='M11 12h9'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Cpath d='M4 18h11'/%3E%3Cpath d='M19 18h1'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
    --bh-i-ban: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E");
    --bh-i-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
    --bh-i-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.8 12.2L20 3'/%3E%3Cpath d='M16 7l3 3'/%3E%3C/svg%3E");
}

/* destino -> icono (barra lateral y botones del contenedor) */
body.lagom .panel-sidebar a.list-group-item[href*="a=start"],   body.lagom .bh-action[href*="a=start"]   { --bh-ico: var(--bh-i-play); }
body.lagom .panel-sidebar a.list-group-item[href*="a=reboot"],  body.lagom .bh-action[href*="a=reboot"]  { --bh-ico: var(--bh-i-reboot); }
body.lagom .panel-sidebar a.list-group-item[href*="a=stop"],    body.lagom .bh-action[href*="a=stop"]    { --bh-ico: var(--bh-i-stop); }
body.lagom .panel-sidebar a.list-group-item[href*="a=poweroff"], body.lagom .bh-action[href*="a=poweroff"] { --bh-ico: var(--bh-i-power); }
body.lagom .panel-sidebar a.list-group-item[href*="type=package"], body.lagom .bh-action[href*="type=package"] { --bh-ico: var(--bh-i-plan); }
body.lagom .panel-sidebar a.list-group-item[href*="type=configoptions"], body.lagom .bh-action[href*="type=configoptions"] { --bh-ico: var(--bh-i-sliders); }
body.lagom .panel-sidebar a.list-group-item[href*="action=cancel"], body.lagom .bh-action[href*="action=cancel"] { --bh-ico: var(--bh-i-ban); }
body.lagom .panel-sidebar a.list-group-item[href*="vp_login"]    { --bh-ico: var(--bh-i-external); }
body.lagom .panel-sidebar a.list-group-item[href*="changepw"],  body.lagom .bh-action[href*="changepw"] { --bh-ico: var(--bh-i-key); }

/* Barra lateral: el icono propio reemplaza al generico del tema */
body.lagom .panel-sidebar a.list-group-item[href*="a=start"] > i,
body.lagom .panel-sidebar a.list-group-item[href*="a=reboot"] > i,
body.lagom .panel-sidebar a.list-group-item[href*="a=stop"] > i,
body.lagom .panel-sidebar a.list-group-item[href*="a=poweroff"] > i,
body.lagom .panel-sidebar a.list-group-item[href*="type=package"] > i,
body.lagom .panel-sidebar a.list-group-item[href*="type=configoptions"] > i,
body.lagom .panel-sidebar a.list-group-item[href*="action=cancel"] > i,
body.lagom .panel-sidebar a.list-group-item[href*="vp_login"] > i,
body.lagom .panel-sidebar a.list-group-item[href*="changepw"] > i {
    display: none;
}

body.lagom .panel-sidebar a.list-group-item[href*="a=start"]::before,
body.lagom .panel-sidebar a.list-group-item[href*="a=reboot"]::before,
body.lagom .panel-sidebar a.list-group-item[href*="a=stop"]::before,
body.lagom .panel-sidebar a.list-group-item[href*="a=poweroff"]::before,
body.lagom .panel-sidebar a.list-group-item[href*="type=package"]::before,
body.lagom .panel-sidebar a.list-group-item[href*="type=configoptions"]::before,
body.lagom .panel-sidebar a.list-group-item[href*="action=cancel"]::before,
body.lagom .panel-sidebar a.list-group-item[href*="vp_login"]::before,
body.lagom .panel-sidebar a.list-group-item[href*="changepw"]::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: var(--ui-muted);
    -webkit-mask: var(--bh-ico) center / contain no-repeat;
    mask: var(--bh-ico) center / contain no-repeat;
}

/* "Informacion general" con una sola pestana no aporta nada: se oculta */
body.lagom .panel-sidebar:has(> .list-group-tab-nav > a:only-child) {
    display: none;
}

/* 11. DETALLE DE SERVICIO: cabecera, resumen y acciones ------------------- */

.product-details .product-icon {
    align-items: center !important;
}

.product-details .product-icon .bh-panel-link {
    margin-left: auto;
}

.bh-panel-link center {
    display: block;
    text-align: left;
}

.bh-panel-link a,
.bh-panel-link a:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--ui-radius-sm);
    background: var(--brand-primary);
    color: var(--btn-primary-color, #fff) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.bh-panel-link a::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--bh-i-external) center / contain no-repeat;
    mask: var(--bh-i-external) center / contain no-repeat;
}

.product-details .product-info {
    border-top: 1px solid var(--ui-line);
    padding: 16px 20px 18px;
}

.product-details .product-info .bh-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 24px;
}

.bh-summary .bh-sub {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ui-muted);
}

/* Acciones del servicio, en el contenedor principal */
.bh-actions {
    margin: 0 0 var(--ui-gap);
}

.bh-actions > .panel-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    padding: 14px 16px 16px;
}

.bh-action,
.bh-action:hover {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-sm);
    background: none;
    color: var(--ui-text);
    text-decoration: none;
    transition: none;
}

.bh-action:hover {
    background: var(--ui-hover);
    border-color: var(--ui-line-strong);
}

.bh-action-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: var(--ui-muted);
    -webkit-mask: var(--bh-ico, var(--bh-i-sliders)) center / contain no-repeat;
    mask: var(--bh-ico, var(--bh-i-sliders)) center / contain no-repeat;
}

.bh-action[href*="action=cancel"] .bh-action-icon {
    background: var(--ui-bad);
}

.bh-action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bh-action-text strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.bh-action-text small {
    font-size: 12px;
    line-height: 1.4;
    color: var(--ui-muted);
}

.bh-action.disabled,
.bh-action[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

/* 12. INICIO: Gestionar con icono, estado del ticket centrado, contactos ---- */

body.page-clientareahome .panel-active-services .btn-view-details {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
}

body.page-clientareahome .panel-active-services .btn-view-details::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--bh-i-sliders) center / contain no-repeat;
    mask: var(--bh-i-sliders) center / contain no-repeat;
}

/* El estado queda a la derecha, centrado entre el titulo y la ultima actualizacion */
body.page-clientareahome .panel-support-tickets .status-modern label.status {
    top: 50%;
    transform: translateY(-50%);
}

/* Contactos: titulo, estado vacio y accion, apilados (se adapta a cualquier ancho) */
body.page-clientareahome .sidebar-secondary .panel-client-contacts {
    display: block !important;
}

body.page-clientareahome .sidebar-secondary .panel-client-contacts > .panel-footer {
    display: block;
    padding: 10px 16px;
    border: 0;
    border-top: 1px solid var(--ui-line);
}

body.page-clientareahome .sidebar-secondary .panel-client-contacts .panel-footer .btn {
    width: 100%;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
}

/* Responsive */
@media (max-width: 991px) {
    .product-details .product-info .bh-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .bh-actions > .panel-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-details .product-icon .bh-panel-link {
        width: 100%;
        margin-left: 0;
    }

    .bh-panel-link a {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   13. DETALLE DE SERVICIO (v2): cabecera, resumen en 3 columnas, acciones
   ========================================================================== */

/* Cabecera: nombre e IP a la izquierda, boton del panel a la derecha y centrado
   verticalmente entre las dos lineas */
body.lagom .product-details .product-icon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name panel" "ip panel";
    column-gap: 16px;
    row-gap: 2px;
    align-items: center !important;
    justify-items: start;
    padding: 16px 20px !important;
    text-align: left !important;
}

body.lagom .product-details .product-icon .product-content {
    grid-area: name;
    width: auto;
    padding: 0 !important;
    text-align: left !important;
}

body.lagom .product-details .product-icon .product-footer {
    grid-area: ip;
    text-align: left !important;
}

body.lagom .product-details .product-icon .bh-panel-link {
    grid-area: panel;
    align-self: center;
    justify-self: end;
    margin: 0;
}

/* Resumen: 3 por fila, mismo ancho y mismo espacio */
body.lagom .product-details .product-info .bh-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 32px;
}

body.lagom .product-details .product-info .bh-summary > li {
    min-width: 0;
}

/* Acciones: dos grupos, cada uno con columnas iguales */
body.lagom .bh-actions > .panel-body {
    display: grid;
    gap: 12px;
    padding: 16px;
    align-items: stretch;
}

body.lagom .bh-actions-power > .panel-body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.lagom .bh-actions-plan > .panel-body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.lagom .bh-action,
body.lagom .bh-action:hover {
    align-items: flex-start;
    min-height: 74px;
    padding: 14px 16px;
}

body.lagom .bh-action-text strong,
body.lagom .bh-action:hover .bh-action-text strong {
    color: var(--ui-text) !important;
}

/* 14. TICKETS: ver ticket ------------------------------------------------- */

body.lagom .section-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

body.lagom .bh-ticket-thread .section-header,
body.lagom .bh-ticket-reply-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

body.lagom .bh-ticket-reply-section {
    margin-top: 28px;
}

/* Cada mensaje: una tarjeta con cabecera (quien y cuando) y cuerpo */
body.lagom .ticket-reply {
    margin: 0 0 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    box-shadow: none;
    overflow: hidden;
}

body.lagom .ticket-reply.staff {
    border-left: 3px solid var(--brand-primary);
}

body.lagom .ticket-reply-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border-bottom: 1px solid var(--ui-line);
}

body.lagom .ticket-reply-top .client-avatar {
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
}

body.lagom .ticket-reply-top .client-avatar img {
    width: 32px;
    height: 32px;
}

body.lagom .ticket-reply-top .staff-reply {
    display: none;
}

body.lagom .ticket-reply-top .user {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

body.lagom .ticket-reply-top .user-info .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
}

body.lagom .ticket-reply-top .user-info .date {
    font-size: 12px;
    color: var(--ui-muted);
}

body.lagom .ticket-reply-top .user-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.lagom .ticket-reply-top .rating,
body.lagom .ticket-reply-top .rating-done {
    transform: scale(0.85);
    transform-origin: right center;
    opacity: 0.8;
}

body.lagom .ticket-reply-message {
    padding: 16px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ui-text);
}

body.lagom .ticket-reply-message p {
    margin: 0 0 10px;
}

body.lagom .ticket-reply-message hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid var(--ui-line);
}

body.lagom .ticket-reply-message .ip-address {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--ui-muted);
}

/* Formulario de respuesta */
body.lagom .panel-ticket-reply .ticket-creator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ui-sunken);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-sm);
}

body.lagom .panel-ticket-reply .creator-avatar,
body.lagom .panel-ticket-reply .creator-avatar img {
    width: 32px;
    height: 32px;
}

body.lagom .panel-ticket-reply .creator-details-name {
    font-size: 14px;
    font-weight: 600;
}

body.lagom .panel-ticket-reply .creator-details-email {
    font-size: 12px;
    color: var(--ui-muted);
}

body.lagom .panel-ticket-reply textarea.markdown-editor {
    min-height: 160px;
}

body.lagom .panel-ticket-reply .editor-statusbar {
    display: none;
}

body.lagom .panel-ticket-reply .add-extra-attachement {
    border: 1px dashed var(--ui-line-strong);
    border-radius: var(--ui-radius-sm);
    background: none;
}

body.lagom .panel-ticket-reply .ticket-attachments-message {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ui-muted);
}

body.lagom .panel-ticket-reply .tab-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* Informacion del ticket (columna derecha): una tarjeta con rotulo arriba y dato abajo */
body.lagom .panel-sidebar.panel-styled-group {
    margin: 0 0 var(--ui-gap);
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

body.lagom .panel-sidebar.panel-styled-group > .panel-heading {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-line);
}

body.lagom .panel-sidebar.panel-styled-group .panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
}

body.lagom .panel-sidebar.panel-styled-group .list-group .list-group-item {
    align-items: flex-start;
    margin: 0;
    padding: 10px 16px;
    border-radius: 0;
    border-bottom: 1px solid var(--ui-line);
}

body.lagom .panel-sidebar.panel-styled-group .list-group .list-group-item:last-child {
    border-bottom: 0;
}

body.lagom .panel-sidebar.panel-styled-group .list-group-item .title {
    display: block;
    font-size: 12px;
    color: var(--ui-muted);
}

/* 15. CAMBIAR DE PLAN / AMPLIAR RECURSOS: panel resumen ------------------- */

body.lagom .panel-sidebar.panel-summary {
    margin: 0 0 var(--ui-gap);
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    overflow: hidden;
}

body.lagom .panel-sidebar.panel-summary > .panel-heading {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-line);
}

body.lagom .panel-sidebar.panel-summary .panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
}

body.lagom .panel-sidebar.panel-summary .list-group .list-group-item {
    display: block !important;
    margin: 0;
    padding: 10px 16px;
    border-radius: 0;
    border-bottom: 1px solid var(--ui-line);
    font-size: 12px;
    color: var(--ui-muted) !important;
}

body.lagom .panel-sidebar.panel-summary .list-group .list-group-item:last-child {
    border-bottom: 0;
}

body.lagom .panel-sidebar.panel-summary .list-group-item strong {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text);
}

body.lagom .panel-sidebar.panel-summary > .panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--ui-line);
    background: none;
}

/* Responsive */
@media (max-width: 1199px) {
    body.lagom .bh-actions-power > .panel-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body.lagom .product-details .product-info .bh-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.lagom .bh-actions-plan > .panel-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    body.lagom .product-details .product-icon {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "name" "ip" "panel";
        row-gap: 10px;
    }

    body.lagom .product-details .product-icon .bh-panel-link {
        justify-self: stretch;
    }

    body.lagom .product-details .product-info .bh-summary,
    body.lagom .bh-actions-power > .panel-body,
    body.lagom .bh-actions-plan > .panel-body {
        grid-template-columns: minmax(0, 1fr);
    }

    body.lagom .ticket-reply-top .user {
        flex-wrap: wrap;
    }
}