/*======= CLIENTCORE · ESTILO GENERAL DE PÁGINAS (CC_SKIN_V76) =======*/
/*
 * Se aplica solo a las páginas que no tienen diseño propio (body.cc-skin):
 * tickets, Mi cuenta, detalle de servicio y dominio, pagos, contraseñas,
 * descargas, estado de la red, afiliados, presupuestos, SSL, errores, etc.
 * Selectores de baja especificidad (sin #id) para no pisar los diseños propios
 * ni los listados (V27). Solo colores de brand.css.
 */

/* ---------- Tipografía y enlaces ---------- */
.cc-skin .primary-content h1,
.cc-skin .primary-content h2,
.cc-skin .primary-content h3,
.cc-skin .primary-content h4,
.cc-skin .primary-content h5,
.cc-skin .primary-content h6,
.cc-skin .primary-content .h3,
.cc-skin .primary-content .h5 {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--brand-dark);
}

.cc-skin .primary-content a:not([class]) {
    color: var(--brand-primary);
}

.cc-skin .primary-content a:not([class]):hover {
    color: var(--brand-primary-700);
}

.cc-skin .primary-content .text-muted,
.cc-skin .primary-content .small-text { color: var(--brand-muted) !important; }

.cc-skin .primary-content .text-primary { color: var(--brand-primary) !important; }
.cc-skin .primary-content .text-success { color: var(--state-success) !important; }
.cc-skin .primary-content .text-danger { color: var(--state-danger) !important; }
.cc-skin .primary-content .text-info { color: var(--brand-primary-600) !important; }

/* ---------- Tarjetas ---------- */
.cc-skin .primary-content .card {
    margin-bottom: 18px;
    border: 1px solid var(--brand-border);
    border-radius: 15px;
    background: var(--neutral-white);
    box-shadow: none;
    overflow: hidden;
}

.cc-skin .primary-content .card-body { padding: 22px; }

.cc-skin .primary-content .card-title {
    margin-bottom: 14px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--brand-dark);
}

/* Título al inicio de la tarjeta: encabezado con línea */
.cc-skin .primary-content .card-body > .card-title:first-child {
    margin: -2px 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--brand-border);
}

.cc-skin .primary-content .card-header {
    padding: 14px 22px;
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-tint);
    color: var(--brand-dark);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
}

.cc-skin .primary-content .card-header .card-title { margin: 0; }

.cc-skin .primary-content .card-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--brand-border);
    background: var(--brand-tint);
}

/* ---------- Formularios ---------- */
.cc-skin .primary-content .col-form-label,
.cc-skin .primary-content .control-label,
.cc-skin .primary-content .form-group > label,
.cc-skin .primary-content label.form-control-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-dark);
}

/* Etiquetas a la izquierda (twenty-one las alinea a la derecha) */
.cc-skin .primary-content .col-form-label,
.cc-skin .primary-content .control-label { text-align: left !important; }

.cc-skin .primary-content .form-control,
.cc-skin .primary-content .custom-select {
    min-height: 44px;
    border: 1px solid var(--brand-border-6);
    border-radius: 10px;
    background-color: var(--neutral-white);
    color: var(--brand-ink);
    font-size: 14px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cc-skin .primary-content textarea.form-control { min-height: 120px; }

.cc-skin .primary-content .form-control:focus,
.cc-skin .primary-content .custom-select:focus {
    border-color: var(--brand-primary-600);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-600-rgb), .14);
}

.cc-skin .primary-content .form-control[disabled],
.cc-skin .primary-content .form-control[readonly] {
    background-color: var(--brand-tint);
    color: var(--brand-muted);
}

.cc-skin .primary-content .input-group-text {
    border-color: var(--brand-border-6);
    background: var(--brand-tint);
    color: var(--brand-primary);
}

.cc-skin .primary-content .input-group > .form-control:not(:last-child),
.cc-skin .primary-content .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cc-skin .primary-content .input-group > .form-control:not(:first-child),
.cc-skin .primary-content .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.cc-skin .primary-content .form-check-input,
.cc-skin .primary-content input[type="checkbox"],
.cc-skin .primary-content input[type="radio"] { accent-color: var(--brand-primary); }

.cc-skin .primary-content .custom-file-label {
    min-height: 44px;
    padding-top: 10px;
    border-color: var(--brand-border-6);
    border-radius: 10px;
}

.cc-skin .primary-content .custom-file-label::after {
    height: 42px;
    padding-top: 10px;
    background: var(--brand-tint);
    color: var(--brand-primary);
    content: "Examinar";
}

.cc-skin .primary-content .field-help-text,
.cc-skin .primary-content .form-text { color: var(--brand-muted); font-size: 12px; }

/* ---------- Botones ---------- */
.cc-skin .primary-content .btn {
    border-radius: 10px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cc-skin .primary-content .btn-lg { border-radius: 12px; }

.cc-skin .primary-content .btn-primary,
.cc-skin .primary-content .btn-success {
    border-color: var(--brand-primary-600);
    background: var(--brand-primary-600);
    color: var(--neutral-white);
}

.cc-skin .primary-content .btn-primary:hover,
.cc-skin .primary-content .btn-primary:focus,
.cc-skin .primary-content .btn-success:hover,
.cc-skin .primary-content .btn-success:focus {
    border-color: var(--brand-primary-700);
    background: var(--brand-primary-700);
    color: var(--neutral-white);
}

.cc-skin .primary-content .btn-default,
.cc-skin .primary-content .btn-secondary,
.cc-skin .primary-content .btn-info,
.cc-skin .primary-content .btn-light {
    border: 1px solid var(--brand-border-6);
    background: var(--neutral-white);
    color: var(--brand-primary);
}

.cc-skin .primary-content .btn-default:hover,
.cc-skin .primary-content .btn-default:focus,
.cc-skin .primary-content .btn-secondary:hover,
.cc-skin .primary-content .btn-info:hover,
.cc-skin .primary-content .btn-light:hover {
    border-color: var(--brand-primary);
    background: var(--brand-tint);
    color: var(--brand-primary);
}

.cc-skin .primary-content .btn-danger {
    border-color: var(--state-danger);
    background: var(--state-danger);
    color: var(--neutral-white);
}

.cc-skin .primary-content .btn-danger:hover,
.cc-skin .primary-content .btn-danger:focus {
    border-color: var(--state-danger-dark);
    background: var(--state-danger-dark);
    color: var(--neutral-white);
}

.cc-skin .primary-content .btn-warning {
    border-color: var(--state-warning-border);
    background: var(--state-warning-bg);
    color: var(--state-warning-ink);
}

.cc-skin .primary-content .btn:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; box-shadow: none; }

/* ---------- Avisos ---------- */
.cc-skin .primary-content .alert {
    border: 1px solid var(--brand-border);
    border-left-width: 4px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.55;
}

.cc-skin .primary-content .alert-info {
    border-color: var(--brand-soft-6, var(--brand-border));
    border-left-color: var(--brand-primary);
    background: var(--brand-soft-1);
    color: var(--brand-dark);
}

.cc-skin .primary-content .alert-success {
    border-color: var(--brand-lime-border);
    border-left-color: var(--brand-primary);
    background: var(--brand-lime-soft);
    color: var(--brand-dark);
}

.cc-skin .primary-content .alert-warning {
    border-color: var(--state-warning-border);
    border-left-color: var(--state-warning-border);
    background: var(--state-warning-bg);
    color: var(--state-warning-ink);
}

.cc-skin .primary-content .alert-danger {
    border-color: var(--state-danger-border);
    border-left-color: var(--state-danger);
    background: var(--state-danger-bg);
    color: var(--state-danger-ink);
}

.cc-skin .primary-content .alert a { font-weight: 700; text-decoration: underline; }

/* ---------- Tablas (no los listados con buscador, que ya tienen estilo) ---------- */
.cc-skin .primary-content .table { color: var(--brand-ink); font-size: 13.5px; }

.cc-skin .primary-content .table thead th,
.cc-skin .primary-content .table > tbody > tr:first-child > th {
    border-top: 0;
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-tint);
    color: var(--brand-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cc-skin .primary-content .table td,
.cc-skin .primary-content .table th { padding: 12px 14px; border-color: var(--brand-border); vertical-align: middle; }

.cc-skin .primary-content .table-striped tbody tr:nth-of-type(odd) { background: var(--brand-tint); }

.cc-skin .primary-content .table .total-row,
.cc-skin .primary-content .table tr.masspay-total td {
    background: var(--brand-soft-1);
    color: var(--brand-dark);
    font-weight: 700;
}

/* ---------- Pestañas y listas ---------- */
.cc-skin .primary-content .nav-tabs {
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 0;
}

.cc-skin .primary-content .nav-tabs .nav-link {
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    background: var(--neutral-white);
    color: var(--brand-muted);
    font-size: 13.5px;
    font-weight: 600;
}

.cc-skin .primary-content .nav-tabs .nav-link:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.cc-skin .primary-content .nav-tabs .nav-link.active,
.cc-skin .primary-content .nav-tabs .nav-item.show .nav-link {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: var(--neutral-white);
}

.cc-skin .primary-content .list-group-item {
    border-color: var(--brand-border);
    color: var(--brand-ink);
}

.cc-skin .primary-content .list-group-item-action:hover { background: var(--brand-tint); color: var(--brand-primary); }

.cc-skin .primary-content .list-group-item.active {
    border-color: var(--brand-border);
    background: var(--brand-soft-1);
    color: var(--brand-primary);
    font-weight: 600;
}

/* ---------- Etiquetas de estado ---------- */
.cc-skin .primary-content .badge,
.cc-skin .primary-content .label {
    padding: 4px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
}

.cc-skin .primary-content .badge-success,
.cc-skin .primary-content .label-success,
.cc-skin .primary-content .label.active { background: var(--brand-soft-1); color: var(--state-success); }

.cc-skin .primary-content .badge-info,
.cc-skin .primary-content .badge-primary { background: var(--brand-soft-1); color: var(--brand-primary); }

.cc-skin .primary-content .badge-warning,
.cc-skin .primary-content .label-warning { background: var(--state-warning-bg); color: var(--state-warning-ink); }

.cc-skin .primary-content .badge-danger,
.cc-skin .primary-content .label-danger { background: var(--state-danger-bg); color: var(--state-danger); }

.cc-skin .primary-content .badge-default,
.cc-skin .primary-content .badge-secondary,
.cc-skin .primary-content .label-default { background: var(--neutral-bg-3, var(--brand-tint)); color: var(--brand-ink); }

/* ---------- Paginación y barras de progreso ---------- */
.cc-skin .primary-content .pagination { gap: 6px; }

.cc-skin .primary-content .page-link {
    border: 1px solid var(--brand-border);
    border-radius: 9px !important;
    color: var(--brand-primary);
}

.cc-skin .primary-content .page-item.active .page-link { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--neutral-white); }
.cc-skin .primary-content .page-item.disabled .page-link { color: var(--brand-muted); }

.cc-skin .primary-content .progress { height: 8px; border-radius: 99px; background: var(--neutral-line-2, var(--brand-tint)); }
.cc-skin .primary-content .progress-bar { background: var(--brand-primary-600); }
.cc-skin .primary-content .progress-bar.bg-danger { background: var(--state-danger); }
.cc-skin .primary-content .progress-bar.bg-warning { background: var(--state-warning-border); }

/* ---------- Ventanas emergentes genéricas ---------- */
.cc-skin .modal-content { border: 0; border-radius: 16px; overflow: hidden; }
.cc-skin .modal-header { border-bottom-color: var(--brand-border); }
.cc-skin .modal-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: var(--brand-dark); }
.cc-skin .modal-footer { border-top-color: var(--brand-border); background: var(--brand-tint); }

/* ---------- Tickets: conversación ---------- */
.cc-skin .primary-content .view-ticket .card-body + .card-body { border-top: 1px solid var(--brand-border); }

.cc-skin .primary-content .ticket-reply {
    overflow: hidden;
    border: 1px solid var(--brand-border);
    border-radius: 14px;
    background: var(--neutral-white);
}

.cc-skin .primary-content .ticket-reply .posted-by {
    padding: 10px 16px;
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-tint);
    font-size: 12.5px;
    color: var(--brand-muted);
}

.cc-skin .primary-content .ticket-reply .posted-by-name { color: var(--brand-dark); font-weight: 700; }

.cc-skin .primary-content .ticket-reply.staff { border-color: var(--brand-lime-border); }

.cc-skin .primary-content .ticket-reply.staff .posted-by {
    border-bottom-color: var(--brand-lime-border);
    background: var(--brand-lime-soft);
}

.cc-skin .primary-content .ticket-reply .message { font-size: 14px; line-height: 1.65; color: var(--brand-ink); }

.cc-skin .primary-content .requestor-badge {
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--brand-soft-1);
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 700;
}

.cc-skin .primary-content .ticket-reply.staff .requestor-badge { background: var(--brand-primary); color: var(--brand-accent); }

.cc-skin .primary-content .ticket-reply .attachments { border-top: 1px solid var(--brand-border); background: var(--brand-tint); font-size: 13px; }

.cc-skin .primary-content .rating .star:hover,
.cc-skin .primary-content .rating .star:hover ~ .star,
.cc-skin .primary-content .rating-done .star.active { color: var(--state-warning-border); }

/* ---------- Abrir ticket: departamentos como tarjetas ---------- */
.cc-skin.cc-tpl-supportticketsubmit-stepone .primary-content .card-body .row > div > a,
.cc-skin.cc-tpl-supportticketsubmit-stepone .primary-content .card-body ul li a { font-weight: 700; }

/* ---------- Bloques de resumen (pago masivo, agregar fondos, presupuestos) ---------- */
.cc-skin .primary-content .masspay-total,
.cc-skin .primary-content .invoice-col { color: var(--brand-ink); }

/* ---------- Página de error ---------- */
.cc-skin .display-1.text-primary,
.cc-skin .text-primary.display-1 { color: var(--brand-primary) !important; }

/* ---------- Afiliados: indicadores como tarjetas ---------- */
.cc-skin .primary-content .affiliate-stat {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid var(--brand-border);
    border-radius: 15px;
    background: var(--neutral-white);
    color: var(--brand-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.cc-skin .primary-content .affiliate-stat i {
    grid-row: 1 / span 2;
    float: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    background: var(--brand-soft-1);
    color: var(--brand-primary);
    font-size: 18px;
}

.cc-skin .primary-content .affiliate-stat span {
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--brand-dark);
}

/* Botón de retiro: acción positiva, no de peligro */
.cc-skin.cc-tpl-affiliates .primary-content .btn-danger {
    border-color: var(--brand-primary-600);
    background: var(--brand-primary-600);
}

.cc-skin.cc-tpl-affiliates .primary-content .btn-danger.disabled {
    border-color: var(--brand-border-6);
    background: var(--brand-tint);
    color: var(--brand-muted);
    opacity: 1;
}

/* ---------- Casillas y radios de WHMCS (iCheck) con los colores de la marca ---------- */
.cc-skin .primary-content .iradio_square-blue,
.cc-skin .primary-content .icheckbox_square-blue {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--brand-border-6) !important;
    background: var(--neutral-white) !important;
    box-sizing: border-box;
    vertical-align: -4px;
    transition: border-color .15s ease, border-width .15s ease, background-color .15s ease;
}

.cc-skin .primary-content .iradio_square-blue { border-radius: 50% !important; }
.cc-skin .primary-content .icheckbox_square-blue { position: relative; border-radius: 6px !important; }
.cc-skin .primary-content .iradio_square-blue.hover,
.cc-skin .primary-content .icheckbox_square-blue.hover { border-color: var(--brand-primary) !important; }
.cc-skin .primary-content .iradio_square-blue.checked { border: 6px solid var(--brand-primary) !important; }
.cc-skin .primary-content .icheckbox_square-blue.checked { border-color: var(--brand-primary) !important; background: var(--brand-primary) !important; }

.cc-skin .primary-content .icheckbox_square-blue.checked::after {
    position: absolute;
    top: 1px;
    left: 5px;
    width: 6px;
    height: 11px;
    border: solid var(--neutral-white);
    border-width: 0 2px 2px 0;
    content: "";
    transform: rotate(45deg);
}

.cc-skin .primary-content .iradio_square-blue.disabled,
.cc-skin .primary-content .icheckbox_square-blue.disabled { opacity: .55; }

/* ---------- Ventana "ver correo" (viewemail) ---------- */
#popup-backdrop { padding: 18px; background: var(--brand-tint); }
#popup-backdrop > .card { overflow: hidden; border: 1px solid var(--brand-border); border-radius: 16px; background: var(--neutral-white); }
#popup-backdrop .card-header { padding: 16px 20px; border-bottom: 1px solid var(--brand-border); background: var(--neutral-white); }
#popup-backdrop .card-header h2 { margin: 0 0 4px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 800; color: var(--brand-dark); }
#popup-backdrop .card-header h2 i { color: var(--brand-primary); }
#popup-backdrop .card-header .popup-header-padding { color: var(--brand-muted); font-size: 12.5px; }
#popup-backdrop .card-body iframe { border: 1px solid var(--brand-border); border-radius: 10px; }
#popup-backdrop .card-footer { border-top: 1px solid var(--brand-border); background: var(--brand-tint); }
#popup-backdrop .btn-primary { border-color: var(--brand-primary-600); border-radius: 10px; background: var(--brand-primary-600); font-weight: 600; }