/* templates/raxa/css/custom.css */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --jade: #52adc2;
  --deep: #0f2a31;
  --ink: #102126;
  --muted: #5f7479;
  --paper: #f5f8f7;
  --line: #dce8e7;
  --coral: #d91f2b;
  color-scheme: dark;
}

html[data-theme="light"] {
  --paper: #f5f8f7;
  --ink: #102126;
  --muted: #5f7479;
  --line: #dce8e7;
  color-scheme: light;
}

html:not([data-theme="light"]) {
  --paper: #0b1d22;
  --ink: #edf7f7;
  --muted: #b1c6c8;
  --line: #23474e;
}

body, .primary-bg-color {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.card-title, .panel-title {
  font-family: 'Space Grotesk', sans-serif;
}

a { color: var(--jade); }
a:hover { color: #7bc9d3; }

/* Buttons */
.btn-primary, .btn.btn-primary {
  background: var(--jade) !important;
  border-color: var(--jade) !important;
  color: #07161a !important;
  font-weight: 700;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: #7bc9d3 !important;
  border-color: #7bc9d3 !important;
}
.btn-default, .btn.btn-default {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

/* Cards / panels */
.card, .panel, .list-group-item {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.card-header, .panel-heading {
  background: var(--deep) !important;
  color: #dceff1 !important;
  border-color: var(--line) !important;
  font-family: 'Space Grotesk', sans-serif;
}
.card-header *, .panel-heading * {
  color: inherit !important;
}
.card *, .panel *, .list-group-item * {
  color: inherit;
}
.card .text-muted, .panel .text-muted {
  color: var(--muted) !important;
}

/* Tables */
.table {
  color: var(--ink) !important;
  background: transparent !important;
}
.table th, .table td {
  border-color: var(--line) !important;
}
.table-hover tbody tr:hover {
  background: color-mix(in srgb, var(--jade) 8%, transparent) !important;
}

/* Alerts */
.alert-info { background: color-mix(in srgb, var(--jade) 15%, var(--paper)) !important; border-color: var(--jade) !important; color: var(--ink) !important; }
.alert-danger { background: color-mix(in srgb, var(--coral) 15%, var(--paper)) !important; border-color: var(--coral) !important; color: var(--ink) !important; }
.alert-danger * { color: inherit !important; }

/* Badges */
.badge-info, .badge.badge-info {
  background: var(--jade) !important;
  color: #07161a !important;
}

/* Form inputs */
.form-control, input.form-control, select.form-control {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.form-control:focus {
  border-color: var(--jade) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 20%, transparent) !important;
}

/* Header branding */
.header .navbar-light, .header .topbar {
  background: #07161a !important;
  border-bottom: 1px solid #2e626b;
}
.raxa-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font: 700 1.35rem 'Space Grotesk', sans-serif !important;
}
.raxa-brand img { width: 30px; height: 30px; }
.raxa-jade { color: var(--jade); }
.header .navbar-light .navbar-nav .nav-link,
.header .topbar .btn {
  color: #b9ced1 !important;
}
.header .navbar-light .navbar-nav .nav-link:hover {
  color: var(--jade) !important;
}

.header .main-navbar-wrapper {
  background: #07161a !important;
  border-bottom: 1px solid #2e626b;
}
.header .main-navbar-wrapper .nav-link {
  color: #b9ced1 !important;
}
.header .main-navbar-wrapper .nav-link:hover,
.header .main-navbar-wrapper .nav-link.active {
  color: var(--jade) !important;
}
.header .main-navbar-wrapper .dropdown-menu {
  background: #0d232a !important;
  border-color: #2e626b !important;
}
.header .main-navbar-wrapper .dropdown-item {
  color: #dceff1 !important;
}
.header .main-navbar-wrapper .dropdown-item:hover {
  background: #173840 !important;
  color: var(--jade) !important;
}

.raxa-theme-toggle {
  border: 1px solid #31545a !important;
  border-radius: 9px;
  width: 38px;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: #dceff1 !important;
}

/* Footer */
.footer {
  background: var(--deep) !important;
  color: #dceff1 !important;
  border-top: 1px solid #23474e;
  padding: 40px 0 26px !important;
}
.footer .nav-link { color: #a7b8bc !important; }
.footer .nav-link:hover { color: #fff !important; }
.footer .copyright { color: #7f9da2 !important; }

.table td, .table td *, .table th, .table th * {
  color: var(--ink) !important;
}

.table, .table tbody tr, .table thead tr, .table-striped tbody tr:nth-of-type(odd) {
  background: var(--paper) !important;
}

.table tr.odd, .table tr.even, .table tr.odd > td, .table tr.even > td,
table.dataTable tr.odd, table.dataTable tr.even {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.table thead th, table.dataTable thead th {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.order-summary, .order-summary * {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  color: var(--ink) !important;
}
.order-summary .btn-primary, .order-summary .btn-primary * {
  color: #07161a !important;
}

.list-group-item-action:hover, .list-group-item-action:focus {
  background: color-mix(in srgb, var(--jade) 10%, var(--paper)) !important;
  color: var(--ink) !important;
}

/* Breadcrumb bar */
.master-breadcrumb {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  border-bottom: 1px solid var(--line) !important;
}
.master-breadcrumb, .master-breadcrumb .breadcrumb, .master-breadcrumb a, .master-breadcrumb li {
  color: var(--muted) !important;
  background: transparent !important;
}
.master-breadcrumb a:hover {
  color: var(--jade) !important;
}
.master-breadcrumb .breadcrumb-item.active {
  color: var(--ink) !important;
}

.header .main-navbar-wrapper .pr-4,
.header .main-navbar-wrapper a.dropdown-toggle {
  color: #b9ced1 !important;
}
.header .main-navbar-wrapper .pr-4:hover,
.header .main-navbar-wrapper a.dropdown-toggle:hover {
  color: var(--jade) !important;
}

/* Modals */
.modal-content {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.modal-header {
  background: var(--deep) !important;
  color: #fff !important;
  border-color: var(--line) !important;
}
.modal-header .close {
  color: #fff !important;
  opacity: 0.8;
}
.modal-body, .modal-body *, .modal-footer, .modal-footer * {
  color: var(--ink) !important;
}
.modal-footer {
  border-color: var(--line) !important;
}
.modal input, .modal select, .modal textarea {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

/* Branded social login buttons keep their own fixed colors, not theme-driven */
.btn-social.btn-google, .btn-social.btn-google * {
  color: #757575 !important;
  background: #fff !important;
}
.btn-social.btn-facebook, .btn-social.btn-facebook * {
  color: #fff !important;
}

/* Remaining Bootstrap alert variants */
.alert-warning, .alert-warning * {
  background: color-mix(in srgb, #e5a93d 20%, var(--paper)) !important;
  border-color: #e5a93d !important;
  color: var(--ink) !important;
}
.alert-success, .alert-success * {
  background: color-mix(in srgb, #2b9f78 20%, var(--paper)) !important;
  border-color: #2b9f78 !important;
  color: var(--ink) !important;
}

/* Align Bootstrap semantic colors with the raxa.host accent palette
   instead of raw defaults (green/red/blue) */
.badge-success, .btn-success, .btn.btn-success {
  background: #2b9f78 !important;
  border-color: #2b9f78 !important;
  color: #07161a !important;
}
.badge-danger, .btn-danger, .btn.btn-danger {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: #fff !important;
}
.badge-warning, .btn-warning, .btn.btn-warning {
  background: #e5a93d !important;
  border-color: #e5a93d !important;
  color: #07161a !important;
}
.badge-info, .btn-info, .btn.btn-info {
  background: var(--jade) !important;
  border-color: var(--jade) !important;
  color: #07161a !important;
}
.text-success { color: #2b9f78 !important; }
.text-danger { color: var(--coral) !important; }
.text-warning { color: #e5a93d !important; }
.text-info, .text-primary { color: var(--jade) !important; }
.alert-warning { border-color: #e5a93d !important; }
.alert-warning { background: color-mix(in srgb, #e5a93d 18%, var(--paper)) !important; }
.progress-bar-success { background-color: #2b9f78 !important; }
.progress-bar-danger { background-color: var(--coral) !important; }
.progress-bar-warning { background-color: #e5a93d !important; }

/* Bootstrap 3 .label variants (older addons like Facturacom) */
.label-success, .status-paid { background: #2b9f78 !important; color: #07161a !important; }
.label-danger, .status-unpaid { background: var(--coral) !important; color: #fff !important; }
.label-warning { background: #e5a93d !important; color: #07161a !important; }
.label-info, .label-primary { background: var(--jade) !important; color: #07161a !important; }
.label-default { background: var(--line) !important; color: var(--ink) !important; }
.label-grey { background: var(--muted) !important; color: var(--paper) !important; }

/* Domain renewal cart (orderforms/standard_cart) */
.domain-renewals {
  background: var(--paper) !important;
  border-top-color: var(--line) !important;
}
.domain-renewals .domain-renewal {
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}
.domain-renewals .domain-renewal:nth-child(even) {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
}
.domain-renewals .domain-renewal * {
  color: inherit !important;
}
.domain-renewals .domain-renewal .control-label {
  color: var(--muted) !important;
}

/* DataTables built-in filter/length inputs (no class, plain <input>/<select>) */
.dataTables_filter input, .dataTables_length select {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
  padding: 4px 8px;
}
.dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate {
  color: var(--ink) !important;
}
.dataTables_paginate .paginate_button {
  color: var(--ink) !important;
}

/* DataTables pagination + table border bevel cleanup */
.dataTables_paginate .paginate_button {
  color: var(--ink) !important;
  border-color: transparent !important;
}
.dataTables_paginate .paginate_button.disabled {
  color: var(--muted) !important;
}
.dataTables_paginate .paginate_button:hover {
  background: color-mix(in srgb, var(--jade) 15%, transparent) !important;
  color: var(--jade) !important;
  border-color: var(--jade) !important;
}
.dataTables_paginate .paginate_button.current {
  background: var(--jade) !important;
  color: #07161a !important;
  border-color: var(--jade) !important;
}
table.dataTable, table.dataTable th, table.dataTable td {
  border-color: var(--line) !important;
}

/* Force pagination text colors — high specificity override, some addon CSS was winning */
div.dataTables_wrapper div.dataTables_paginate a.paginate_button,
div.dataTables_wrapper div.dataTables_paginate span a.paginate_button {
  color: var(--ink) !important;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.disabled,
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.disabled:hover {
  color: var(--muted) !important;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.current {
  color: #07161a !important;
}

/* Download buttons: normalize size, they were oversized from addon defaults */
.btn-send-email.btn-info {
  padding: 6px 14px !important;
  font-size: 0.85rem !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* Keep both DataTables tables the same column sizing behavior */
#tableClientToInvoicesList, #tableClientInvoicesList {
  table-layout: auto !important;
  width: 100% !important;
}

/* Unify DataTables-based tables (facturacion.php addon) with the native
   WHMCS table look used site-wide (tickets, domains, etc.) */
table.dataTable {
  border-collapse: collapse !important;
  font-size: inherit !important;
}
table.dataTable thead th,
table.dataTable tbody td {
  padding: 12px 10px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--line) !important;
  font-family: 'DM Sans', sans-serif !important;
  vertical-align: middle !important;
}
table.dataTable thead th {
  font-weight: 700 !important;
  border-bottom: 2px solid var(--line) !important;
}
table.dataTable tbody tr:hover td {
  background: color-mix(in srgb, var(--jade) 8%, transparent) !important;
}
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background: transparent !important;
}
.dataTables_wrapper {
  font-family: 'DM Sans', sans-serif !important;
}

/* Distinguish "Descargar XML" (last column) as secondary/outline vs PDF (primary) */
table.dataTable td:last-child .btn-send-email.btn-info {
  background: transparent !important;
  color: var(--jade) !important;
  border: 1px solid var(--jade) !important;
}
table.dataTable td:last-child .btn-send-email.btn-info:hover {
  background: color-mix(in srgb, var(--jade) 15%, transparent) !important;
  color: var(--jade) !important;
}

/* Native Bootstrap pagination component (domains list, etc.) */
.pagination > li > a, .pagination > li > span {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.pagination > li > a:hover {
  background: color-mix(in srgb, var(--jade) 15%, var(--paper)) !important;
  color: var(--jade) !important;
  border-color: var(--jade) !important;
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover {
  background: var(--jade) !important;
  border-color: var(--jade) !important;
  color: #07161a !important;
}
.pagination > .disabled > a, .pagination > .disabled > span {
  background: transparent !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

/* Match DataTables pagination pill style to the native .pagination component */
div.dataTables_wrapper div.dataTables_paginate {
  display: flex !important;
  gap: 4px;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button,
div.dataTables_wrapper div.dataTables_paginate span a.paginate_button {
  display: inline-block !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: var(--paper) !important;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button:hover {
  background: color-mix(in srgb, var(--jade) 15%, var(--paper)) !important;
  border-color: var(--jade) !important;
  color: var(--jade) !important;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.current {
  background: var(--jade) !important;
  border-color: var(--jade) !important;
  color: #07161a !important;
}
div.dataTables_wrapper div.dataTables_paginate a.paginate_button.disabled {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

/* "enviada" status in Historial de facturas — distinct from Pagada green */
#tableClientInvoicesList .status-paid {
  background: #004258 !important;
  color: #fff !important;
}

/* Bootstrap Switch widget (Inicio de Sesión Simple, etc.) — make the
   track/off-state visible against the dark background */
.bootstrap-switch {
  border: 1px solid var(--line) !important;
  background: var(--paper) !important;
}
.bootstrap-switch-handle-off {
  background: var(--paper) !important;
  color: var(--muted) !important;
}
.bootstrap-switch-label {
  background: var(--line) !important;
}

/* WHMCS markdown reply editor (.md-header toolbar + .md-editor area) */
.md-header {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}
.md-header .btn-default {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.md-header .btn-default:hover {
  background: color-mix(in srgb, var(--jade) 15%, transparent) !important;
  border-color: var(--jade) !important;
  color: var(--jade) !important;
}
.md-editor, .md-editor.active {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.md-editor-wrapper, .markItUp, .markItUpEditor {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Ticket sidebar action buttons (Responder/Cerrado) — force icon+label
   inline instead of wrapping, tighten sizing */
.col-button-left .btn.btn-block,
.col-button-right .btn.btn-block {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px !important;
  font-size: 0.85rem !important;
  white-space: nowrap;
}
.col-button-left .btn.btn-block i,
.col-button-right .btn.btn-block i {
  display: inline !important;
  margin: 0 !important;
}

/* Ticket reply "Posted by" header row + raw textarea under the md editor */
.posted-by {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  color: var(--ink) !important;
}
.posted-by * {
  color: inherit !important;
}
.posted-by-name {
  color: var(--jade) !important;
}
textarea[name="message"], .md-editor textarea, .md-editor-wrapper textarea {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Force md-header toolbar background — explicit background-color, max specificity */
body .md-header.btn-toolbar {
  background-color: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* "Propietario" requestor-type badge: own line, unique accent color */
.requestor-type-owner {
  display: block !important;
  width: fit-content;
  margin-top: 6px !important;
  background: #9574ff !important;
  color: #fff !important;
}

/* Sidebar info widgets: distinguish field label (.title) from its value.
   Applies wherever WHMCS uses this pattern (ticket info, domain info, etc.) */
.list-group-item .title {
  display: block;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted) !important;
  margin-bottom: 2px;
}

/* Ticket/page title heading — tone down size, was feeling oversized */
.card-title {
  font-size: 1.15rem !important;
}

/* Sync sidebar Responder/Cerrado buttons with the compact top-right pair
   — same size, not stretched full-width blocks */
.col-button-left .btn.btn-block,
.col-button-right .btn.btn-block {
  display: inline-flex !important;
  width: auto !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}
.col-button-left, .col-button-right {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 50% !important;
  display: flex !important;
}
.col-button-left .btn, .col-button-right .btn {
  width: 100% !important;
}

/* Reply message textarea (real name="replymessage", class .md-input) —
   .form-control rule was losing to the editor's own bundled CSS */
textarea.markdown-editor.md-input,
.form-control.markdown-editor.md-input {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.col-button-left, .col-button-right {
  box-sizing: border-box !important;
}
.row:has(> .col-button-left), .row:has(> .col-button-right) {
  flex-wrap: nowrap !important;
}

/* Attachment area under the reply editor */
/* Bootstrap 4 custom file input (Adjuntos) */
.custom-file, .custom-file-input, .custom-file-label {
  height: 38px !important;
}
.custom-file-label {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  line-height: 1.6;
}
.custom-file-label::after {
  content: "Buscar" !important;
  background: var(--jade) !important;
  color: #07161a !important;
  font-weight: 700;
  border-left: 1px solid var(--line) !important;
  height: 36px;
}
.attachment-group .input-group-append .btn {
  height: 38px !important;
  display: inline-flex !important;
  align-items: center;
}

/* Attachments help text ("Extensiones de archivo permitidas...") */
.attachment-group ~ small, .form-group small {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--jade) 10%, var(--paper)) !important;
  border: 1px solid color-mix(in srgb, var(--jade) 25%, transparent) !important;
  border-radius: 6px;
  padding: 6px 10px !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  margin-top: 8px;
  width: fit-content;
}
.attachment-group ~ small::before, .form-group small::before {
  content: "ⓘ";
  color: var(--jade);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.attachment-group.input-group {
  gap: 8px;
}
.attachment-group .custom-file-label {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}
.attachment-group .input-group-append .btn {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

.md-footer {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Knowledgebase category cards: :hover state was flipping to white bg */
.card.kb-category:hover, .card:hover {
  background: color-mix(in srgb, var(--jade) 6%, var(--paper)) !important;
  border-color: var(--jade) !important;
}
.show-on-card-hover {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.card-body:hover, a.card-body:hover {
  background: color-mix(in srgb, var(--jade) 6%, var(--paper)) !important;
  color: var(--ink) !important;
}

/* Bootstrap ".text-black-50" utility is illegible on the dark theme
   (used for kb article icons, etc.) */
.text-black-50 {
  color: var(--muted) !important;
}

/* Login/register input-group icon boxes (email/password prepend) */
.input-group-text {
  background: var(--deep) !important;
  border-color: var(--line) !important;
  color: var(--jade) !important;
}
.input-group-merge .input-group-text {
  border-right: 0 !important;
}

/* Card footer bar (e.g. login card "No estás registrado? Crear cuenta") */
.card-footer {
  background: var(--deep) !important;
  border-color: var(--line) !important;
  color: #dceff1 !important;
}
.card-footer * {
  color: inherit !important;
}
.card-footer a {
  color: var(--jade) !important;
}

/* Address-autocomplete input (register.php "Dirección 2") uses a bare
   ".field" class instead of .form-control */
input.field, .field {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Plain <label> elements (custom fields, etc.) use Bootstrap's raw gray
   (#666) — too low contrast on dark theme */
label {
  color: var(--ink) !important;
}
.help-block, .form-text, small.form-text {
  color: var(--muted) !important;
}

/* Order form "standard_cart" (loaded from /templates/orderforms/standard_cart/)
   ships its own light-theme CSS after custom.css — override to match theme */
.product {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.product * {
  color: inherit !important;
}
.product header {
  background: var(--deep) !important;
  color: #fff !important;
  border-color: var(--line) !important;
}
.product .product-desc {
  color: var(--ink) !important;
}
.product .pricing, .product .price {
  color: var(--ink) !important;
}
.product footer {
  background: transparent !important;
  border-color: var(--line) !important;
}

/* Domain-choice step in checkout (standard_cart orderform) — ".option" rows */
.domain-selection-options .option {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.domain-selection-options .option * {
  color: inherit !important;
}

/* "Configurar" step (standard_cart orderform) — .product-info domain summary box */
.product-info {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.product-info * {
  color: inherit !important;
}

/* Cart review ("Revisar & Pagar") item rows — .item inside .view-cart-items */
.view-cart-items .item {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.view-cart-items .item * {
  color: inherit !important;
}
.view-cart-items .item .item-title a {
  color: var(--jade) !important;
}

/* Cart promo-code tab panel (.tab-content wraps .tab-pane) */
.tab-content {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  border-color: var(--line) !important;
}
.nav-tabs .nav-link {
  background: transparent !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
.nav-tabs .nav-link.active {
  background: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Dashboard homepage stat tiles (Servicios/Dominios/Tickets/Recibos) */
.tiles .tile {
  background-color: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  border-right: 1px solid var(--line) !important;
}
.tiles .tile .stat {
  color: var(--ink) !important;
}
.tiles .tile .title {
  color: var(--muted) !important;
}
.tiles .tile i {
  color: var(--line) !important;
}
.tiles .tile:hover {
  background-color: color-mix(in srgb, var(--ink) 8%, var(--paper)) !important;
}
.tiles .tile:hover i {
  color: var(--muted) !important;
}
.tiles .row > div:last-child .tile {
  border: 0 !important;
}
@media (max-width: 1199.98px) {
  .tiles div:nth-child(1) > .tile,
  .tiles div:nth-child(2) > .tile {
    border-bottom: 1px solid var(--line) !important;
  }
}

/* Header móvil: evita que el logo y los íconos salten a 2 líneas.
   El buscador de KB no tiene contenido visible bajo xl (d-none d-xl-flex
   en su div interno), pero el <form> vacío seguía ocupando espacio en el
   flex del navbar y lo empujaba a envolver. */
@media (max-width: 599.98px) {
  .header .navbar-light .container {
    flex-wrap: nowrap !important;
  }
  .header .navbar-light form.form-inline {
    display: none !important;
  }
  .raxa-brand {
    font-size: 1.05rem !important;
    gap: 8px !important;
  }
  .raxa-brand img {
    width: 26px !important;
    height: 26px !important;
  }
  .header .navbar-light .toolbar .nav-item {
    margin-left: 8px !important;
  }
}

/* Bootstrap utility ".bg-white" used by domain register TLD pricing table */
.bg-white {
  background-color: var(--paper) !important;
}
.tld-pricing-header {
  color: var(--ink) !important;
}
.tld-pricing-header > div,
.tld-pricing-header div {
  border-bottom-color: var(--jade) !important;
  background-color: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  color: var(--ink) !important;
}
.tld-row {
  border-bottom-color: var(--line) !important;
  color: var(--ink) !important;
}
.tld-row.highlighted {
  background: color-mix(in srgb, var(--jade) 10%, var(--paper)) !important;
}
.tld-filters a {
  color: var(--muted) !important;
}
.tld-filters a.active, .tld-filters a:hover {
  color: var(--jade) !important;
}

/* Domain register promo boxes (Paquetes de Alojamiento / Transferencia de Dominios) */
.domain-promo-box {
  background-color: color-mix(in srgb, var(--ink) 4%, var(--paper)) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.domain-promo-box * {
  color: inherit !important;
}
.domain-promo-box .small {
  color: var(--muted) !important;
}

/* viewinvoice.php — standalone printable invoice page.
   Outer body uses the site's dark bg (via the global "body" rule above);
   the invoice card itself stays a white "paper" sheet on purpose, so its
   own text must stay dark regardless of the dark-mode body color. */
.invoice-container {
  color: #212529 !important;
  margin: 15px auto !important;
  padding: 28px 32px 40px 32px !important;
}
.invoice-container, .invoice-container * {
  color: #212529 !important;
}
.invoice-container td, .invoice-container td *,
.invoice-container th, .invoice-container th *,
.invoice-container p, .invoice-container span,
.invoice-container div, .invoice-container strong,
.invoice-container h1, .invoice-container h2, .invoice-container h3 {
  color: #212529 !important;
}
.invoice-container .btn, .invoice-container .btn * {
  color: inherit !important;
}
.invoice-container a, .invoice-container a * {
  color: #369 !important;
}
/* Neutralize the dark-theme card/table chrome that otherwise bleeds into
   this white paper document (card-header, thead, table rows). */
.invoice-container .card,
.invoice-container .card-body {
  background: #fff !important;
  border-color: #e9ecef !important;
}
.invoice-container .card-header,
.invoice-container thead,
.invoice-container thead th {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
}
.invoice-container tbody tr,
.invoice-container thead tr,
.invoice-container tr,
.invoice-container table {
  background: #fff !important;
}
.invoice-container td.total-row {
  background: #f8f8f8 !important;
}
@page {
  size: letter;
  margin: 0.4in;
}
@media print {
  html, body {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .invoice-container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    height: auto !important;
    min-height: 0 !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  .invoice-container * {
    min-height: 0 !important;
  }
  .invoice-container > *:last-child,
  .invoice-container br:last-child {
    margin-bottom: 0 !important;
  }
  .invoice-hero {
    margin: 6px 0 8px !important;
    padding: 10px 14px !important;
  }
  .invoice-container .table-sm td,
  .invoice-container .table-sm th {
    padding: 3px 8px !important;
  }
  .invoice-container hr {
    margin: 8px 0 !important;
  }
  .invoice-container br {
    line-height: 0.6 !important;
  }
  .invoice-container address {
    margin-bottom: 4px !important;
  }
  .invoice-hero,
  .invoice-status span,
  .invoice-hero-actions .btn {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /* d-print-none oculta todo .invoice-hero-actions, pero para gateways
     offline (deposito/transferencia) ese bloque son datos que el
     cliente necesita impresos, no un botón. Se reactiva el bloque y
     solo se ocultan los controles interactivos reales dentro. */
  .invoice-hero-actions.d-print-none {
    display: block !important;
  }
  .invoice-hero-actions form,
  .invoice-hero-actions button,
  .invoice-hero-actions .btn,
  .invoice-hero-actions select,
  .invoice-hero-actions img {
    display: none !important;
  }
  /* "Método de Pago" solo se imprime cuando es Deposito/Transferencia
     o BBVA (los datos bancarios son información real que el cliente
     necesita); para el resto de gateways (Stripe, PayPal, etc) no hay
     nada útil que imprimir ahí, así que se oculta por completo. */
  .invoice-hero-paymethod {
    display: none !important;
  }
  .invoice-hero-paymethod-bank {
    display: block !important;
  }
  .d-print-only {
    display: inline !important;
  }
  .invoice-hero-total-amount {
    font-size: 26px !important;
  }
}

/* Configura tu dominio (standard_cart/configuredomains.tpl) — hosting status hint */
.text-domain-hashosting {
  color: #2b9f78 !important;
}
.text-domain-nohosting {
  color: var(--coral) !important;
}

/* Fix: email verification banner is fixed-light in theme.css, but
   .btn-default rule above uses var(--ink) which is near-white in dark
   mode, making the resend button invisible on the light banner. */
.email-verification {
  background: color-mix(in srgb, #e5a93d 15%, #0b1d22) !important;
  color: #edf7f7 !important;
  border: 1px solid #e5a93d !important;
  border-radius: 6px !important;
  margin: 16px !important;
}
.email-verification .row {
  align-items: center !important;
}
.email-verification .btn-resend-verify-email {
  background: #52adc2 !important;
  border-color: #52adc2 !important;
  color: #07161a !important;
  font-weight: 700 !important;
}
.email-verification .btn-resend-verify-email:hover {
  background: #7bc9d3 !important;
  border-color: #7bc9d3 !important;
  color: #07161a !important;
}
.email-verification .fas,
.email-verification .far {
  color: #e5a93d !important;
}
.email-verification .btn.close {
  color: rgba(237, 247, 247, 0.5) !important;
}
.email-verification .btn.close:hover {
  color: rgba(237, 247, 247, 0.8) !important;
}

/* Fix: "Regresar a la Admin" floating tab inherits the navbar topbar
   button color rule (#b9ced1) over its own light-grey background from
   theme.css, giving poor contrast. Give it its own themed colors. */
.btn-return-to-admin,
.header .topbar .btn.btn-return-to-admin {
  background-color: #52adc2 !important;
  color: #07161a !important;
  font-weight: 700 !important;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.btn-return-to-admin:hover,
.header .topbar .btn.btn-return-to-admin:hover {
  background-color: #7bc9d3 !important;
  color: #07161a !important;
}

/* Rediseño viewinvoice.php: hero con total/estado/botón, colores de
   marca en badges de estado (2026-08-02). Scopeado a .invoice-container
   para no afectar nada fuera de esta página. */
.invoice-container .invoice-hero-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
.invoice-container .invoice-hero-logo img {
  max-height: 40px;
}
.invoice-container .invoice-hero-badge {
  margin-top: 4px;
}
.invoice-container .invoice-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: color-mix(in srgb, #52adc2 6%, #fff);
  border: 1px solid #e5e9e8;
  border-radius: 8px;
  padding: 20px;
  margin: 12px 0 16px;
}
.invoice-container .invoice-hero-left {
  flex: 1 1 auto;
}
.invoice-container .invoice-hero-left h3 {
  margin-top: 0;
}
.invoice-container .invoice-hero-total-label {
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6b6e;
}
.invoice-container .invoice-hero-total-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #102126;
}
.invoice-container .invoice-hero-actions {
  flex: 0 1 auto;
  text-align: right;
}
@media (max-width: 575.98px) {
  .invoice-container .invoice-hero-topbar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .invoice-container .invoice-hero-left,
  .invoice-container .invoice-hero-actions {
    text-align: center;
    flex: 1 1 100%;
  }
}
.invoice-container .invoice-hero-total-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6b6e;
}
.invoice-container .invoice-hero-total-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #102126;
}
.invoice-container .invoice-hero-actions .btn {
  background: #52adc2 !important;
  border-color: #52adc2 !important;
  color: #07161a !important;
  font-weight: 700 !important;
}
.invoice-container .invoice-hero-actions .btn:hover {
  background: #7bc9d3 !important;
  border-color: #7bc9d3 !important;
}
.invoice-container .invoice-status span {
  display: inline-block;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.invoice-container .paid {
  background: #52adc2 !important;
  color: #07161a !important;
}
.invoice-container .unpaid {
  background: #e5a93d !important;
  color: #07161a !important;
}
.invoice-container .refunded,
.invoice-container .cancelled,
.invoice-container .collections {
  background: #d91f2b !important;
  color: #fff !important;
}
.invoice-container .draft {
  background: #8a9a9d !important;
  color: #fff !important;
}
.invoice-container .card-title,
.invoice-container h2,
.invoice-container h3 {
  font-family: 'Space Grotesk', sans-serif !important;
}
.invoice-container .invoice-hero-paymethod {
  margin-top: 10px;
  font-size: 12px;
}
.d-print-only {
  display: none;
}