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

/* =====================================================================
   YOKAI THEME — custom.css  (v9 · AZUL ACCIÓN + gris frío · light, moderno)
   v9: AZUL (#2563EB, estilo DigitalOcean) = color de acción (botones, links,
       íconos, activos, foco) — positivo, no "negativo". Fondo gris frío limpio,
       cards blancas que flotan. ROJO lantern = SOLO marca (logo, footer,
       hairline superior) + destructivo. Footer oscuro sumi con logo.
   Child theme del área de clientes de YokaiHosting (parent: twenty-one).

   Concepto: tinta sumi + sello hanko. Premium/editorial (Stripe/Linear),
   con alma japonesa. Reglas de color ESTRICTAS:
     · PRIMARIO de acción = TINTA (#1A1A1A). Nunca rojo.
     · ROJO (#E5484D) = SOLO destructivo (cancelar/eliminar/desactivar),
       el punto del logo, y micro-detalles de marca (línea superior, sello
       del item activo, punto de no-leído, asterisco requerido).
     · Verde/ámbar/azul = SOLO semántica de estado (no decoración).
   Fondo papel cálido, bordes finos, elevación mínima, mucho aire.

   twenty-one = Bootstrap 4 claro; pisamos neutrales y el azul nativo (#369).
   Sin overrides .tpl. !important solo donde el padre obliga.
   ===================================================================== */

/* ============================ 1. TOKENS ============================ */
:root {
    /* Superficies (gris frío limpio, con profundidad para que floten las cards) */
    --yk-bg:        #F2F4F7;   /* gris frío muy claro — el blanco de las cards flota */
    --yk-surface:   #FFFFFF;
    --yk-surface-2: #EEF1F5;
    --yk-surface-3: #E4E8ED;

    /* Tinta / texto (neutros fríos) */
    --yk-ink:       #1A1A1A;
    --yk-ink-2:     #333333;
    --yk-muted:     #5C6573;
    --yk-dim:       #97A0AD;

    /* Bordes (fríos) */
    --yk-border:    #E3E7EC;
    --yk-border-2:  #D2D8E0;

    /* Azul de acción — color interactivo principal (botones, links, activos, foco).
       Positivo / confianza, estilo DigitalOcean. */
    --yk-primary:       #2563EB;
    --yk-primary-hover: #1E55D6;
    --yk-primary-deep:  #1A45B8;
    --yk-primary-soft:  #EAF1FE;
    --yk-primary-bd:    #C7DBFB;

    /* Rojo lantern — SOLO marca (logo, footer, hairline superior) + destructivo */
    --yk-seal:      #EE3D48;
    --yk-seal-hover:#D82F3C;
    --yk-seal-soft: #FDEDED;
    --yk-seal-bd:   #F6CDCE;

    /* State layers neutrales (tinta translúcida) */
    --yk-state:     rgba(26,26,26,.05);
    --yk-state-2:   rgba(26,26,26,.09);

    /* Estados semánticos (texto / fondo / borde / sólido) */
    --yk-green:#137333; --yk-green-bg:#E9F5EC; --yk-green-bd:#CDE9D5; --yk-green-solid:#1E8E3E;
    --yk-amber:#9A6400; --yk-amber-bg:#FBF1DC; --yk-amber-bd:#F2E2BC; --yk-amber-solid:#C77D11;
    --yk-red:#B3261E;   --yk-red-bg:#FBEAE9;   --yk-red-bd:#F2CFCD;   --yk-red-solid:#E5484D;
    --yk-blue:#1F5FA8;  --yk-blue-bg:#EAF1FA;  --yk-blue-bd:#CFE0F2;  --yk-blue-solid:#2D6FBF;
    --yk-gray:#5F6368;  --yk-gray-bg:#F1F1EE;  --yk-gray-bd:#E3E3DE;

    /* Radios (editoriales, no pill) */
    --yk-r:    14px;   /* cards */
    --yk-r-sm: 8px;    /* botones, inputs */
    --yk-r-xs: 6px;
    --yk-pill: 9999px; /* solo status / badges */

    /* Elevación mínima */
    --yk-sh-sm: 0 1px 2px rgba(26,26,26,.05);
    --yk-sh:    0 1px 3px rgba(26,26,26,.08), 0 1px 2px rgba(26,26,26,.04);
    --yk-sh-lg: 0 10px 28px -6px rgba(26,26,26,.16), 0 4px 10px -4px rgba(26,26,26,.08);
    --yk-ring:  0 0 0 3px rgba(37,99,235,.22);

    --yk-font: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --yk-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================ 2. BASE ============================ */
body, body.primary-bg-color, .primary-bg-color {
    background-color: var(--yk-bg);
    color: var(--yk-ink);
    font-family: var(--yk-font);
    font-size: 15px;
    line-height: 1.55;
    border-top: 2px solid var(--yk-seal);   /* línea-sello superior (marca) */
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--yk-ink); font-weight: 600; letter-spacing: -.02em; }
h1,.h1 { font-weight: 700; }
.card-title { font-weight: 600; letter-spacing: -.01em; }

a { color: var(--yk-ink); font-weight: 500; transition: color .15s ease; }
a:hover, a:focus { color: var(--yk-primary); text-decoration: underline; text-underline-offset: 2px; }
hr { border-top-color: var(--yk-border); }
code, kbd, pre, samp { font-family: var(--yk-mono); }
code { color: var(--yk-ink); background: var(--yk-surface-2); padding: .1em .35em; border-radius: var(--yk-r-xs); }
::selection { background: rgba(37,99,235,.16); }
small, .small { font-size: .82em; }

.text-muted     { color: var(--yk-muted) !important; }
.text-secondary { color: var(--yk-muted) !important; }
.text-dark      { color: var(--yk-ink) !important; }
.text-body      { color: var(--yk-ink) !important; }
.text-black-50  { color: var(--yk-muted) !important; }
.text-primary   { color: var(--yk-primary) !important; }
.text-success   { color: var(--yk-green) !important; }
.text-danger    { color: var(--yk-red) !important; }
.text-warning   { color: var(--yk-amber) !important; }
.text-info      { color: var(--yk-blue) !important; }
.bg-light   { background-color: var(--yk-surface-2) !important; }
.bg-white   { background-color: var(--yk-surface) !important; }
.bg-default { background-color: var(--yk-surface) !important; }
.bg-primary { background-color: var(--yk-primary) !important; }

/* ============================ 3. HEADER / NAV ============================ */
/* Header como UN bloque cohesivo: sin bordes apilados; un solo divisor + sombra
   suave abajo del menú (ver .main-navbar-wrapper). Topbar discreta. */
header.header { background-color: var(--yk-surface); border-bottom: 0; }
/* Topbar AZUL: pop de color de marca; texto e íconos en blanco.
   !important + selector por #header: el theme padre fija el fondo del topbar
   con alta especificidad y, sin esto, queda texto blanco sobre fondo blanco. */
#header .topbar { background-color: var(--yk-primary) !important; color: #fff; border-bottom: 0; font-size: .8rem; padding-top: .45rem; padding-bottom: .45rem; }
#header .topbar a, #header .topbar .btn, #header .topbar i,
#header .topbar .nav-link, #header .topbar .active-client,
#header .topbar .active-client .btn, #header .topbar .active-client .input-group-text,
#header .topbar .input-group-text { color: #fff !important; background-color: transparent !important; }
#header .topbar .active-client .input-group-text, #header .topbar .active-client .btn { border-color: rgba(255,255,255,.32) !important; }
#header .topbar a:hover, #header .topbar .btn:hover, #header .topbar .nav-link:hover { color: rgba(255,255,255,.82) !important; text-decoration: none; }
#header .topbar .active-client .btn.btn-active-client span { border-bottom-color: rgba(255,255,255,.6); }
/* Alinear "Conectado como:" con los botones: .d-md-inline lo pone display:inline
   (baseline). Lo devolvemos a inline-flex centrado. */
#header .topbar .d-flex { align-items: center; }
#header .topbar .active-client { align-items: center; }
#header .topbar .active-client .input-group-prepend { display: inline-flex !important; align-items: center; }
/* Active-client (empresa activa + switcher) en la barra azul: pill limpio.
   Se mantiene la funcionalidad multi-empresa; se elimina el subrayado punteado
   y las cajas sueltas del estilo nativo de WHMCS. */
#header .topbar .active-client .input-group-text { border: 0 !important; padding-right: .5rem; color: rgba(255,255,255,.85) !important; font-weight: 500; }
#header .topbar .active-client .btn-group { background-color: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.30); border-radius: var(--yk-pill); overflow: hidden; }
#header .topbar .active-client .btn-group .btn { border: 0 !important; padding: .12rem .7rem; color: #fff !important; font-weight: 600; }
#header .topbar .active-client .btn-group .btn:hover { background-color: rgba(255,255,255,.18) !important; }
#header .topbar .active-client .btn-group .btn + .btn { border-left: 1px solid rgba(255,255,255,.24) !important; padding-left: .55rem; padding-right: .55rem; }
#header .topbar .active-client .btn-active-client span { border-bottom: 0 !important; }

/* Logo (wordmark tinta + punto sello) */
.navbar-light .navbar-brand {
    display: inline-block; width: 138px; height: 40px; padding: 0;
    background: url("/templates/yokai/assets/img/yokai-logo.svg") no-repeat left center;
    background-size: contain; font-size: 0; color: transparent; overflow: hidden;
}
.navbar-light .navbar-brand .logo-img { font-size: 1rem; }

.navbar-light .navbar-nav .nav-link, .navbar .nav-link, .cart-btn { color: var(--yk-muted); font-weight: 500; }
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: var(--yk-ink); background-color: var(--yk-state); }
.main-navbar-wrapper { background-color: var(--yk-surface); border-top: 0; border-bottom: 1px solid var(--yk-border); box-shadow: var(--yk-sh-sm); }
#nav .nav-link { border-radius: var(--yk-r-sm); transition: background-color .15s ease, color .15s ease; }
#nav .nav-link:hover { color: var(--yk-primary); background-color: var(--yk-state); }
#nav .nav-item.active > .nav-link, #nav .nav-link.active { background-color: var(--yk-primary-soft); color: var(--yk-primary); font-weight: 600; }
.navbar-light .navbar-toggler { color: var(--yk-ink); border-color: var(--yk-border); }

/* Search del header (un solo campo cohesivo, suave; no split cuadrado) */
.input-group.search { background-color: var(--yk-surface-2); border: 1px solid var(--yk-border); border-radius: var(--yk-r-sm); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.input-group.search .form-control, .input-group.search .btn { background-color: transparent; border: 0; box-shadow: none; }
.input-group.search .form-control { border-radius: 0 var(--yk-r-sm) var(--yk-r-sm) 0; }
.input-group.search .btn { border-radius: var(--yk-r-sm) 0 0 var(--yk-r-sm); color: var(--yk-muted); }
.input-group.search:focus-within { background-color: var(--yk-surface); border-color: var(--yk-border-2); box-shadow: var(--yk-sh-sm); }
.input-group.search:focus-within .form-control, .input-group.search:focus-within .btn { background-color: transparent; }

/* Breadcrumb */
.master-breadcrumb { background-color: transparent; border-bottom: 1px solid var(--yk-border); }
.breadcrumb { background-color: transparent; padding-left: 0; font-size: .82rem; }
.breadcrumb-item, .breadcrumb-item a { color: var(--yk-muted); font-weight: 400; }
.breadcrumb-item a:hover { color: var(--yk-ink); }
.breadcrumb-item.active { color: var(--yk-ink); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--yk-dim); }

/* ============================ 4. CARDS ============================ */
.card, .mc-promo-login, .mc-promo-manage, .panel, .well, .jumbotron {
    background-color: var(--yk-surface); border: 1px solid var(--yk-border); border-radius: var(--yk-r); color: var(--yk-ink); box-shadow: var(--yk-sh-sm);
}
.card-body { padding: 1.5rem; }
.card-header, .panel-heading, .card-footer, .modal-footer, .modal-header, .modal .modal-header { background-color: var(--yk-surface); border-color: var(--yk-border); color: var(--yk-ink); }
.card-footer { background-color: var(--yk-surface); }
.modal-content, .popover, .dropdown-menu, .toast { background-color: var(--yk-surface); border: 1px solid var(--yk-border); border-radius: var(--yk-r); color: var(--yk-ink); box-shadow: var(--yk-sh-lg); }
.modal-content { border: 0; }
.modal-title { color: var(--yk-ink); }
.modal-backdrop.show { opacity: .3; }
.jumbotron { background-color: var(--yk-surface-2); }
.popover-header { background-color: var(--yk-surface-2); color: var(--yk-ink); border-bottom-color: var(--yk-border); }
.popover-body, .toast-body { color: var(--yk-ink); }
.img-thumbnail { background-color: var(--yk-surface); border-color: var(--yk-border); }
.card-title.bg-primary { background-color: var(--yk-primary) !important; color:#fff !important; }
.card-title.bg-info { background-color: var(--yk-surface-2) !important; color: var(--yk-ink) !important; }

/* List groups */
.list-group-item { background-color: var(--yk-surface); border-color: var(--yk-border); color: var(--yk-ink); }
.list-group-item-action { color: var(--yk-ink); transition: background-color .12s ease; }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--yk-state); color: var(--yk-ink); }

/* Sidebar nav: item tonal neutro + SELLO rojo en el activo (micro-detalle) */
.card-sidebar .card-header { border-bottom: 1px solid var(--yk-border); }
.sidebar .list-group { padding: .4rem; }
.sidebar .list-group-item { background-color: var(--yk-surface); border: 0; border-radius: var(--yk-r-sm); padding: .55rem .85rem; margin: 1px 0; }
.sidebar .list-group-item-action:hover { background-color: var(--yk-state); }
.sidebar .list-group-item.active, .sidebar .list-group-item.active:hover {
    background-color: var(--yk-primary-soft); color: var(--yk-primary); border: 0;
    border-left: 3px solid var(--yk-primary);
    font-weight: 600;
}
.sidebar .list-group-item.active i { color: var(--yk-primary); }
.sidebar .list-group-item .badge { background-color: var(--yk-surface-3); color: var(--yk-muted); }
.card-minimise { color: var(--yk-dim); }

/* Íconos de marca: los íconos guía de headers/sidebar/tiles van en rojo lantern.
   (El chevron de minimizar queda neutro.) */
.card-header i, .panel-heading i, .card-title > i,
.card-sidebar .card-header i, .sidebar .card-header i,
.mc-promo-login i, .mc-promo-manage i { color: var(--yk-primary); }
.card-minimise, .card-minimise i, .card-header .card-minimise i { color: var(--yk-dim); }

/* ============================ 5. DASHBOARD TILES ============================ */
.tiles .tile {
    position: relative; display: block; background-color: var(--yk-surface); border: 1px solid var(--yk-border);
    border-radius: var(--yk-r); padding: 1.25rem 1.25rem 1.4rem; margin: .5rem; color: var(--yk-ink); overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tiles .tile:hover { border-color: var(--yk-border-2); box-shadow: var(--yk-sh); text-decoration: none; }
.tiles .tile > i { font-size: 1.25rem; color: var(--yk-primary); position: absolute; top: 1.2rem; right: 1.25rem; }
.tiles .tile .stat { font-size: 2.1rem; font-weight: 700; line-height: 1.1; color: var(--yk-ink); letter-spacing: -.02em; }
.tiles .tile .title { color: var(--yk-muted); font-size: .8rem; font-weight: 500; margin-top: .15rem; text-transform: uppercase; letter-spacing: .06em; }
/* Sin barra de color decorativa en los tiles: el número ya comunica.
   (Evita el "arcoíris" — coherente con la regla de color reservado del v6.) */
.tiles .tile .highlight { display: none; }

.client-home-cards .card-header { background-color: var(--yk-surface) !important; border-bottom: 1px solid var(--yk-border) !important; font-weight: 600; }
.client-home-cards .card-title, .client-home-cards .card-header, .client-home-cards .card-header h3 { color: var(--yk-ink) !important; }
/* botones en headers de panel → outline tinta (no color sólido) */
.client-home-cards .card-header .btn, .card-header .btn[class*="bg-color-"] {
    background-color: var(--yk-surface) !important; color: var(--yk-ink) !important; border: 1px solid var(--yk-border-2) !important;
}
.client-home-cards .card-header .btn:hover, .card-header .btn[class*="bg-color-"]:hover { background-color: var(--yk-state) !important; }
.client-home-cards .list-group { border-top-color: var(--yk-border) !important; border-bottom-color: var(--yk-border) !important; }
.client-home-cards .list-group .list-group-item { border-bottom-color: var(--yk-border) !important; border-radius: 0; }
.client-home-cards small { color: var(--yk-muted) !important; }

/* ============================ 6. SERVICE ITEMS ============================ */
.div-service-item { background-color: var(--yk-surface); border: 1px solid var(--yk-border); border-radius: var(--yk-r); padding: 1rem 1.15rem; margin-bottom: .75rem; transition: border-color .15s ease, box-shadow .15s ease; }
.div-service-item:hover { border-color: var(--yk-border-2); box-shadow: var(--yk-sh-sm); }
.div-service-name .font-weight-bold { color: var(--yk-ink); }
.div-service-name .text-domain, .text-domain { color: var(--yk-muted); font-family: var(--yk-mono); font-size: .85rem; }

/* ============================ 7. BOTONES ============================ */
.btn {
    border-radius: var(--yk-r-sm); font-weight: 600; font-family: var(--yk-font);
    padding: .5rem 1.1rem; letter-spacing: -.005em; color: var(--yk-ink); box-shadow: none;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus { box-shadow: var(--yk-ring); }
.btn:active { transform: translateY(.5px); }
.btn-sm { padding: .32rem .8rem; font-size: .82rem; }
.btn-lg { padding: .65rem 1.5rem; }

/* PRIMARIO = rojo lantern (marca) */
.btn-primary, .btn-primary:not(:disabled):not(.disabled) { background-color: var(--yk-primary); border-color: var(--yk-primary); color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,.25); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--yk-primary-hover); border-color: var(--yk-primary-hover); color:#fff; box-shadow: 0 6px 16px -4px rgba(37,99,235,.40); }
.btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--yk-primary-deep); border-color: var(--yk-primary-deep); color:#fff; }
.btn-outline-primary { color: var(--yk-primary); border-color: var(--yk-primary-bd); background: transparent; }
.btn-outline-primary:hover { background-color: var(--yk-primary-soft); color: var(--yk-primary-hover); border-color: var(--yk-primary); }

/* Secundario / default = blanco con borde */
.btn-secondary, .btn-default, .btn-light, .btn-info {
    background-color: var(--yk-surface); border-color: var(--yk-border-2); color: var(--yk-ink);
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover, .btn-info:hover,
.btn-default:focus, .btn-default:active, .btn-default:not(:disabled):not(.disabled):active {
    background-color: var(--yk-state); border-color: var(--yk-border-2); color: var(--yk-ink); box-shadow: none;
}
/* btn-success → AZUL de acción: un único color "clickeable" en toda la UI.
   El verde queda reservado a semántica de estado (badges/status), no a botones. */
.btn-success { background-color: var(--yk-primary); border-color: var(--yk-primary); color:#fff; box-shadow: 0 1px 2px rgba(37,99,235,.25); }
.btn-success:hover, .btn-success:focus { background-color: var(--yk-primary-hover); border-color: var(--yk-primary-hover); color:#fff; box-shadow: 0 6px 16px -4px rgba(37,99,235,.40); }
.btn-success:active, .btn-success:not(:disabled):not(.disabled):active { background-color: var(--yk-primary-deep); border-color: var(--yk-primary-deep); color:#fff; }
.btn-outline-success { color: var(--yk-primary); border-color: var(--yk-primary-bd); background: transparent; }
.btn-outline-success:hover { background-color: var(--yk-primary-soft); color: var(--yk-primary-hover); border-color: var(--yk-primary); }
/* ROJO = SOLO destructivo */
.btn-danger { background-color: var(--yk-seal); border-color: var(--yk-seal); color:#fff; }
.btn-danger:hover { background-color: var(--yk-seal-hover); border-color: var(--yk-seal-hover); color:#fff; box-shadow: var(--yk-sh-sm); }
.btn-warning { background-color: var(--yk-amber-solid); border-color: var(--yk-amber-solid); color:#fff; }
.btn-link { color: var(--yk-primary); box-shadow:none; background:transparent; border-color:transparent; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { color: var(--yk-primary-hover); background-color: var(--yk-primary-soft); }
.btn.disabled, .btn:disabled { opacity: .45; box-shadow:none; }
.btn-reveal-pw { color: var(--yk-muted); background: transparent; border-color: var(--yk-border-2); box-shadow:none; }

/* ============================ 8. INPUTS ============================ */
.form-control, .custom-select, .custom-file-label, .form-control-lg {
    background-color: var(--yk-surface); border: 1px solid var(--yk-border-2); color: var(--yk-ink);
    border-radius: var(--yk-r-sm); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .custom-select:focus, .custom-file-input:focus ~ .custom-file-label {
    background-color: var(--yk-surface); border-color: var(--yk-primary); color: var(--yk-ink); box-shadow: var(--yk-ring);  /* halo rojo suave */
}
.form-control::placeholder { color: var(--yk-dim); }
.form-control:disabled, .form-control[readonly], .custom-select:disabled { background-color: var(--yk-surface-2); color: var(--yk-muted); }
.input-group-text { background-color: var(--yk-surface-2); border: 1px solid var(--yk-border-2); color: var(--yk-muted); }
.input-group-merge .input-group-text { background-color: var(--yk-surface); border-right: 0; }
.input-group-merge .form-control { border-left: 0; }
/* Input-groups: input y botones comparten alto/baseline (mismo bounding box).
   El .btn global usa más padding vertical que el .form-control; acá lo igualo. */
.input-group { align-items: stretch; }
.input-group > .form-control, .input-group > .custom-select { align-self: stretch; }
.input-group .input-group-append .btn, .input-group .input-group-prepend .btn,
.input-group .input-group-btn .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding-top: .375rem; padding-bottom: .375rem;
}
label, .col-form-label, .form-control-label, .field-icon { color: var(--yk-ink); font-weight: 500; }
.field-icon i { color: var(--yk-muted); }
.custom-control-label { color: var(--yk-ink); }
.custom-control-label::before { background-color: var(--yk-surface); border: 1.5px solid var(--yk-border-2); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--yk-primary); border-color: var(--yk-primary); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--yk-ring); }
.form-check-input { accent-color: var(--yk-primary); }
.toggle-switch-success input:checked + .toggle-switch-label, .toggle-switch-success .toggle-switch-inner { background-color: var(--yk-green-solid); }

/* ============================ 9. TABLAS ============================ */
.table { color: var(--yk-ink); }
.table th, .table td { border-color: var(--yk-border); padding: .85rem .85rem; vertical-align: middle; }
.table thead th, .table .thead-light th, table.table-list thead th {
    background-color: transparent !important; border-bottom: 1px solid var(--yk-border); border-top: 0;
    color: var(--yk-muted); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .05em;
}
.table td { border-top: 1px solid var(--yk-border); background-color: transparent !important; }
.table-hover tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover td { background-color: var(--yk-state) !important; }
.table-striped tbody tr:nth-of-type(odd) td { background-color: var(--yk-bg) !important; }
table.table-list tbody tr[onclick] { cursor: pointer; }
.total-row { border-top: 2px solid var(--yk-border) !important; font-weight: 600; background-color: var(--yk-surface-2) !important; }

/* ============================ 10. STATUS · BADGES (semántica) ============================ */
.label, .status { display: inline-block; padding: .3em .75em; font-size: .72rem; font-weight: 600; line-height: 1.4; border-radius: var(--yk-pill); border: 1px solid transparent; letter-spacing: .01em; }
.badge { border-radius: var(--yk-pill); font-weight: 600; padding: .4em .7em; }
.status-active,.status-open,.status-completed,.status-paid,.status-accepted,.status-delivered,.product-status-active,.label-success,.badge-success,.requestor-type-owner {
    background-color: var(--yk-green-bg) !important; color: var(--yk-green) !important; border-color: var(--yk-green-bd) !important; }
.status-pending,.status-suspended,.status-grace,.status-pending-transfer,.status-redemption,.status-pending-registration,.status-refunded,.status-onhold,.status-payment-pending,.product-status-pending,.product-status-suspended,.label-warning,.badge-warning,.requestor-type-registereduser {
    background-color: var(--yk-amber-bg) !important; color: var(--yk-amber) !important; border-color: var(--yk-amber-bd) !important; }
.status-unpaid,.status-overdue,.status-inprogress,.status-lost,.status-collections,.label-danger,.badge-danger {
    background-color: var(--yk-red-bg) !important; color: var(--yk-red) !important; border-color: var(--yk-red-bd) !important; }
.status-customer-reply,.status-answered,.label-info,.badge-info,.requestor-type-operator {
    background-color: var(--yk-blue-bg) !important; color: var(--yk-blue) !important; border-color: var(--yk-blue-bd) !important; }
.status-cancelled,.status-closed,.status-terminated,.status-expired,.status-draft,.status-dead,.status-fraud,.status-transferred-away,.product-status-cancelled,.product-status-terminated,.product-status-fraud,.label-default,.badge-secondary,.badge-light,.badge-dark,.requestor-type-authorizeduser,.requestor-type-subaccount,.requestor-type-guest,.status-placeholder {
    background-color: var(--yk-gray-bg) !important; color: var(--yk-gray) !important; border-color: var(--yk-gray-bd) !important; }
.badge-primary { background-color: var(--yk-primary) !important; color:#fff !important; }
.label-placeholder { display:none; }
.product-status .product-icon .fa-stack { color: var(--yk-muted); }
.product-status-active .product-icon .fa-stack-2x { color: var(--yk-green-solid) !important; }
.product-status-suspended .product-icon .fa-stack-2x { color: var(--yk-amber-solid) !important; }
.product-status-terminated .product-icon .fa-stack-2x, .product-status-cancelled .product-icon .fa-stack-2x { color: var(--yk-gray) !important; }
.product-status-text { color: var(--yk-muted); }

/* ============================ 11. TABS ============================ */
.nav-tabs { border-bottom-color: var(--yk-border); }
.nav-tabs .nav-link { color: var(--yk-muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 600; }
.nav-tabs .nav-link:hover { border-color: transparent transparent var(--yk-primary-bd); color: var(--yk-primary); background-color: var(--yk-primary-soft); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: transparent; border: 0; border-bottom: 2px solid var(--yk-primary); color: var(--yk-primary); }
.tab-content, .product-details-tab-container, .tab-content.bg-white { background-color: var(--yk-surface) !important; border: 0; color: var(--yk-ink); padding-top: 1rem; }
.responsive-tabs-sm .nav-item a.active { background-color: transparent !important; color: var(--yk-ink); }

/* ============================ 12. DROPDOWNS ============================ */
.dropdown-menu { padding: .4rem; }
.dropdown-item, .dropdown-item-text { color: var(--yk-ink); border-radius: var(--yk-r-xs); padding: .55rem .8rem; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--yk-state); color: var(--yk-ink); }
.dropdown-divider { border-top-color: var(--yk-border); }
.dropdown-header { color: var(--yk-muted); }

/* ============================ 13. ALERTAS ============================ */
.alert { border-radius: var(--yk-r-sm); border: 1px solid transparent; color: var(--yk-ink); }
.alert-info, .alert-primary { background-color: var(--yk-blue-bg); border-color: var(--yk-blue-bd); color: var(--yk-blue); }
.alert-danger  { background-color: var(--yk-red-bg);   border-color: var(--yk-red-bd);   color: var(--yk-red); }
.alert-success { background-color: var(--yk-green-bg); border-color: var(--yk-green-bd); color: var(--yk-green); }
.alert-warning { background-color: var(--yk-amber-bg); border-color: var(--yk-amber-bd); color: var(--yk-amber); }
.alert-secondary { background-color: var(--yk-surface-2); border-color: var(--yk-border); color: var(--yk-ink); }
.alert a, .alert .alert-link { color: var(--yk-ink); font-weight: 600; }

/* ============================ 14. PAGINATION / PROGRESS ============================ */
.page-link { background-color: var(--yk-surface); border-color: var(--yk-border); color: var(--yk-ink); }
.page-link:hover { background-color: var(--yk-state); border-color: var(--yk-border); color: var(--yk-ink); }
.page-item.active .page-link { background-color: var(--yk-primary); border-color: var(--yk-primary); color:#fff; }
.page-link:hover { color: var(--yk-primary); }
.page-item.disabled .page-link { background-color: var(--yk-surface); border-color: var(--yk-border); color: var(--yk-dim); }
.progress { background-color: var(--yk-surface-3); border-radius: var(--yk-pill); }
.progress-bar { background-color: var(--yk-primary); }
.close { color: var(--yk-ink); text-shadow:none; opacity:.5; }
.close:hover { color: var(--yk-ink); opacity:1; }

/* ============================ 15. LOGIN / AUTH ============================ */
.login-form .card, .mw-540 { margin-left:auto; margin-right:auto; }
.login-form .card, .password-reset-container .card { box-shadow: var(--yk-sh); }
.login-form .card-footer, .card-footer { background-color: var(--yk-surface); color: var(--yk-muted); border-top: 1px solid var(--yk-border); }
.login-form .card-footer a { color: var(--yk-ink); font-weight: 600; }
.social-signin-btns .btn, .btn-icon { border-color: var(--yk-border-2); color: var(--yk-ink); }
.sub-heading, .sub-heading-borderless { color: var(--yk-muted); }

/* ============================ 16. TICKETS ============================ */
.view-ticket .card-title, .ticket-number { color: var(--yk-ink); }
.ticket-reply { border-bottom: 1px solid var(--yk-border); }
.ticket-reply.staff { background-color: var(--yk-surface-2); border-left: 3px solid var(--yk-ink); }
.ticket-reply .posted-by, .posted-by-name { color: var(--yk-ink); }
.ticket-reply .posted-on, .posted-on { color: var(--yk-muted); }
.ticket-subject.unread { font-weight: 700; color: var(--yk-ink); }
.ticket-subject.unread::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--yk-seal); margin-right:7px; vertical-align: middle; } /* punto sello no-leído */
.requestor-badge { font-size:.7rem; }
.attachment-list a, .attachments a { color: var(--yk-ink); }
.rating .star, .rating-done .star { color: var(--yk-dim); }
.rating .star:hover, .rating-done .star.active { color: var(--yk-amber-solid); }
.markdown-content a { color: var(--yk-ink); text-decoration: underline; }

/* ============================ 17. KB / HOME PÚBLICA ============================ */
.kb-category .card-body:hover, .kb-category a:hover { background-color: var(--yk-state); border-radius: var(--yk-r); }
.kb-article-item .text-black-50 { color: var(--yk-muted) !important; }
.ico-container i { color: var(--yk-primary); }
.action-icon-btns a {
    background-color: var(--yk-surface); border: 1px solid var(--yk-border); border-radius: var(--yk-r);
    color: var(--yk-muted); box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.action-icon-btns a:hover { background-color: var(--yk-surface); border-color: var(--yk-border-2); color: var(--yk-ink); box-shadow: var(--yk-sh); }
/* Íconos de tiles en azul (regla: ícono = color de acción, igual que el dashboard) */
.action-icon-btns a .ico-container i, .action-icon-btns a:hover .ico-container i { color: var(--yk-primary); }
.home-domain-search.bg-white, .home-domain-search { background-color: transparent !important; }
.home-domain-search .input-group-wrapper { background-color: var(--yk-surface) !important; border: 1px solid var(--yk-border-2) !important; border-radius: var(--yk-r); box-shadow:none; }
.home-domain-search .input-group-wrapper .advanced-input textarea, .home-domain-search textarea { background-color: var(--yk-surface) !important; color: var(--yk-ink) !important; border: 1px solid var(--yk-border) !important; border-radius: var(--yk-r-sm); }
.home-domain-search .input-group-wrapper .advanced-input label { color: var(--yk-muted); }
.home-domain-search .tld-logos { color: var(--yk-muted); }
.home-domain-search h2 { color: var(--yk-ink); }
/* Buscador grande: "Transferir" (#btnTransfer) viene en btn-success VERDE con
   alta especificidad del padre. Lo unifico al sistema como SECUNDARIO (outline)
   para jerarquía con "Buscar" (primario sólido). */
#btnTransfer, #btnTransfer2 {
    background-color: var(--yk-surface) !important; border-color: var(--yk-primary-bd) !important;
    color: var(--yk-primary) !important; box-shadow: none !important;
}
#btnTransfer:hover, #btnTransfer2:hover, #btnTransfer:focus, #btnTransfer2:focus {
    background-color: var(--yk-primary-soft) !important; border-color: var(--yk-primary) !important; color: var(--yk-primary-hover) !important;
}
/* Glyph fa-sparkles (FontAwesome Pro) no carga → se ve roto al lado de "Buscar".
   !important: FontAwesome lo pinta con igual especificidad y carga después. */
.fa-sparkles, #btnDomainSearch i, #btnDomainSearch2 i,
#btnDomainSearch svg, #btnDomainSearch2 svg { display: none !important; }
.pricing-card-title { color: var(--yk-ink); }
.verification-banner { background-color: var(--yk-amber-bg) !important; color: var(--yk-amber); border: 1px solid var(--yk-amber-bd); border-radius: var(--yk-r-sm); }
.announcement { border-bottom: 1px solid var(--yk-border); }

/* ============================ 18. FACTURA / QUOTE ============================ */
.invoice-container { background-color: var(--yk-surface); color: var(--yk-ink); border: 1px solid var(--yk-border); border-radius: var(--yk-r); box-shadow: var(--yk-sh-sm); }
.invoice-header { border-bottom: 1px solid var(--yk-border); }
.invoice-status span { display:inline-block; padding:.4em 1em; border-radius: var(--yk-pill); font-weight:600; border:1px solid transparent; }
.invoice-status .paid { background-color: var(--yk-green-bg); color: var(--yk-green); border-color: var(--yk-green-bd); }
.invoice-status .unpaid, .invoice-status .collections { background-color: var(--yk-red-bg); color: var(--yk-red); border-color: var(--yk-red-bd); }
.invoice-status .refunded, .invoice-status .cancelled, .invoice-status .draft { background-color: var(--yk-gray-bg); color: var(--yk-gray); border-color: var(--yk-gray-bd); }

/* ============================ 19. CARD ACCENTS ============================ */
/* Sin barra de color arriba de los paneles: borde uniforme con el resto de la
   tarjeta. Mata el "arcoíris" del dashboard; superficies limpias y parejas. */
[class*="card-accent-"] { border-top: 1px solid var(--yk-border); }

/* ============================ 20. FOOTER + SCROLLBAR ============================ */
/* Footer oscuro sumi: ancla visual de la página + marca. Logo claro inyectado,
   hairline rojo lantern arriba, todo centrado y con aire. */
footer .footer, #footer { background-color: #14141A; color: rgba(255,255,255,.55); border-top: 3px solid var(--yk-seal); padding: 3rem 0 2.25rem; }
#footer .container::before {
    content: ""; display: block; width: 128px; height: 34px; margin: 0 auto 1.5rem;
    background: url("/templates/yokai/assets/img/yokai-logo-light.svg") no-repeat center center; background-size: contain;
}
#footer .float-lg-right { float: none !important; }
#footer .list-inline { text-align: center; }
#footer .nav { justify-content: center !important; }
footer a, #footer a, footer .nav-link, #footer .nav-link { color: rgba(255,255,255,.6); font-weight: 500; }
footer a:hover, #footer a:hover, #footer .nav-link:hover { color: #fff; }
#footer .btn { background-color: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.78); border-radius: var(--yk-r-sm); }
#footer .btn:hover { background-color: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
#footer .copyright { color: rgba(255,255,255,.4); font-size: .8rem; margin-top: 1.25rem; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--yk-bg); }
::-webkit-scrollbar-thumb { background: var(--yk-border-2); border-radius: 10px; border: 3px solid var(--yk-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--yk-dim); }

/* ============================ 21. DATATABLES + MISC ============================ */
.dataTables_wrapper .dataTables_filter label .form-control {
    background-color: var(--yk-surface) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B6B70' stroke-width='1.6'%3e%3ccircle cx='7' cy='7' r='5'/%3e%3cpath d='M11 11l4 4' stroke-linecap='round'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: 14px center !important; background-size: 16px 16px !important;
    color: var(--yk-ink) !important; border: 1px solid var(--yk-border-2) !important; border-radius: var(--yk-r-sm) !important; padding-left: 40px !important;
}
.dataTables_wrapper .dataTables_filter label .form-control:focus { border-color: var(--yk-ink) !important; box-shadow: 0 0 0 1px var(--yk-ink) !important; }
.dataTables_wrapper .dataTables_filter label .form-control::placeholder { color: var(--yk-dim); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper label { color: var(--yk-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--yk-ink) !important; border-radius: var(--yk-r-xs); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--yk-ink) !important; border-color: var(--yk-ink) !important; color:#fff !important; }
.iti__country-list, .iti__dropdown-content { background-color: var(--yk-surface) !important; color: var(--yk-ink) !important; border: 1px solid var(--yk-border); box-shadow: var(--yk-sh-lg); }
.iti__country.iti__highlight, .iti__country:hover { background-color: var(--yk-state) !important; }
/* Outline de teclado solo en links/botones; los campos ya tienen su halo suave */
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--yk-ink); outline-offset: 1px; }