/** * Diseño "Levels" para el área de Mi Cuenta — dashboard SaaS oscuro. * * Sistema de diseño Levels (typeui.sh) adaptado a la marca Centauro: * fondos negros, texto blanco/gris, naranja #cc6600 para acciones, * cards con borde sutil y radio 16px. * * Compatible con el marcado de YITH (.yith-wcmap) y el nativo de WooCommerce. * Todo cuelga de body.chm-skin para ganar especificidad sin abusar de !important. */ body.chm-skin { --chm-bg: #0a0a0a; /* fondo del área */ --chm-surface: #131315; /* cards / contenido */ --chm-surface-2: #1a1a1d; /* hover / filas */ --chm-border: #262629; /* border-default */ --chm-border-soft: #1c1c1f; --chm-heading: #ffffff; --chm-body: #9ca3af; --chm-muted: #71717a; --chm-brand: #cc6600; --chm-brand-strong: #e0791a; --chm-brand-dark: #b35a00; --chm-success: #10b981; --chm-danger: #f43f5e; --chm-warning: #f59e0b; --chm-info: #38bdf8; --chm-radius: 16px; --chm-radius-sm: 10px; --chm-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); } /* La página completa de Mi Cuenta en oscuro. */ body.chm-skin.woocommerce-account { background: var(--chm-bg); color: var(--chm-body); } /* El div.woocommerce contiene el menú + el contenido: es el contenedor flex. Nota: woocommerce-account es una clase del , va pegada a chm-skin. */ body.chm-skin.woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; } body.chm-skin.woocommerce-account .woocommerce .woocommerce-notices-wrapper, body.chm-skin.woocommerce-account .woocommerce > .woocommerce-message, body.chm-skin.woocommerce-account .woocommerce > .woocommerce-error, body.chm-skin.woocommerce-account .woocommerce > .woocommerce-info { flex: 1 1 100%; } body.chm-skin .woocommerce-MyAccount-content h1, body.chm-skin .woocommerce-MyAccount-content h2, body.chm-skin .woocommerce-MyAccount-content h3, body.chm-skin .woocommerce-MyAccount-content h4 { color: var(--chm-heading); font-weight: 700; } body.chm-skin .woocommerce-MyAccount-content p { color: var(--chm-body); } /* ------------------------------------------------------------------ * * Sidebar * ------------------------------------------------------------------ */ body.chm-skin .yith-wcmap, body.chm-skin .woocommerce-MyAccount-navigation { flex: 0 0 232px; width: 232px; float: none; margin: 0; position: sticky; top: 24px; background: #0f0f10; border: 1px solid var(--chm-border-soft); border-radius: var(--chm-radius); padding: 8px; overflow: hidden; box-shadow: none; } body.chm-skin .woocommerce-MyAccount-navigation > ul { background: transparent; border: 0; padding: 0; margin: 0; list-style: none; } body.chm-skin .yith-wcmap .user-profile { display: none; } body.chm-skin .yith-wcmap ul.myaccount-menu { margin: 0; padding: 0; list-style: none; } body.chm-skin .yith-wcmap ul.myaccount-menu li, body.chm-skin .woocommerce-MyAccount-navigation > ul li { margin: 0 0 2px; padding: 0; border: 0; list-style: none; } body.chm-skin .yith-wcmap ul.myaccount-menu li:last-child, body.chm-skin .woocommerce-MyAccount-navigation > ul li:last-child { margin-bottom: 0; } body.chm-skin .yith-wcmap ul.myaccount-menu li a, body.chm-skin .woocommerce-MyAccount-navigation > ul li a { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--chm-radius-sm); color: var(--chm-body); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.3; background: transparent; border: 0; box-shadow: none; transition: background .16s ease, color .16s ease; } body.chm-skin .yith-wcmap ul.myaccount-menu li a:hover, body.chm-skin .woocommerce-MyAccount-navigation > ul li a:hover { background: rgba(255, 255, 255, .05); color: #fff; } body.chm-skin .yith-wcmap ul.myaccount-menu li.is-active a, body.chm-skin .yith-wcmap ul.myaccount-menu li.active a, body.chm-skin .woocommerce-MyAccount-navigation > ul li.is-active a { background: var(--chm-brand); color: #fff; } body.chm-skin .yith-wcmap ul.myaccount-menu li.is-active a:hover, body.chm-skin .woocommerce-MyAccount-navigation > ul li.is-active a:hover { background: var(--chm-brand-dark); } body.chm-skin .yith-wcmap ul.myaccount-menu li a i, body.chm-skin .yith-wcmap ul.myaccount-menu li a svg, body.chm-skin .yith-wcmap ul.myaccount-menu li a img { width: 17px; height: 17px; flex: 0 0 17px; opacity: .7; } body.chm-skin .yith-wcmap ul.myaccount-menu li.is-active a i, body.chm-skin .yith-wcmap ul.myaccount-menu li.is-active a svg, body.chm-skin .yith-wcmap ul.myaccount-menu li a:hover i, body.chm-skin .yith-wcmap ul.myaccount-menu li a:hover svg { opacity: 1; } body.chm-skin .yith-wcmap ul.myaccount-menu li a:focus-visible, body.chm-skin .woocommerce-MyAccount-navigation > ul li a:focus-visible { outline: 2px solid var(--chm-brand); outline-offset: 2px; } /* ------------------------------------------------------------------ * * Iconos del menú nativo (cuando NO se usa YITH) * ------------------------------------------------------------------ */ body.chm-skin .woocommerce-MyAccount-navigation-link a::before { content: ""; flex: 0 0 17px; width: 17px; height: 17px; background-color: currentColor; opacity: .8; -webkit-mask: center / 17px 17px no-repeat var(--chm-ic); mask: center / 17px 17px no-repeat var(--chm-ic); } body.chm-skin .woocommerce-MyAccount-navigation-link.is-active a::before, body.chm-skin .woocommerce-MyAccount-navigation-link a:hover::before { opacity: 1; } body.chm-skin .woocommerce-MyAccount-navigation-link--dashboard a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--mi-hosting a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='8' rx='2'/%3E%3Crect x='2' y='13' width='20' height='8' rx='2'/%3E%3Cline x1='6' y1='7' x2='6.01' y2='7'/%3E%3Cline x1='6' y1='17' x2='6.01' y2='17'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--subscriptions a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'/%3E%3Cpolyline points='7 23 3 19 7 15'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--orders a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--facturas a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--downloads a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--soporte a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--edit-address a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--payment-methods a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--edit-account a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } body.chm-skin .woocommerce-MyAccount-navigation-link--customer-logout a { --chm-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------ * * Contenido * ------------------------------------------------------------------ */ body.chm-skin .woocommerce-MyAccount-content { flex: 1 1 0; min-width: 0; float: none; width: auto; background: var(--chm-surface); border: 1px solid var(--chm-border); border-radius: var(--chm-radius); padding: 28px; box-shadow: var(--chm-shadow); } body.chm-skin .woocommerce-MyAccount-content > h2:first-child, body.chm-skin .woocommerce-MyAccount-content > h3:first-child { margin-top: 0; } body.chm-skin .woocommerce-MyAccount-content a:not(.button):not(.chm-btn-primary):not(.chm-btn-ghost):not(.chm-dash-card):not(.chm-file) { color: var(--chm-brand-strong); } /* Tablas */ body.chm-skin .woocommerce-MyAccount-content table.shop_table, body.chm-skin .woocommerce-MyAccount-content table.woocommerce-orders-table { border: 1px solid var(--chm-border); border-radius: var(--chm-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; background: var(--chm-surface); } body.chm-skin .woocommerce-MyAccount-content table.shop_table thead th { background: #0f0f10; color: var(--chm-body); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; padding: 14px 16px; border: 0; text-align: left; } body.chm-skin .woocommerce-MyAccount-content table.shop_table tbody td, body.chm-skin .woocommerce-MyAccount-content table.shop_table tbody th { padding: 14px 16px; border: 0; border-top: 1px solid var(--chm-border-soft); font-size: 14px; color: var(--chm-body); background: transparent; } body.chm-skin .woocommerce-MyAccount-content table.shop_table tbody tr:hover td, body.chm-skin .woocommerce-MyAccount-content table.shop_table tbody tr:hover th { background: var(--chm-surface-2); } /* Botones */ body.chm-skin .woocommerce-MyAccount-content .button, body.chm-skin .woocommerce-MyAccount-content button[type="submit"], body.chm-skin .chm-btn-primary { background: var(--chm-brand); color: #fff; border: 0; border-radius: var(--chm-radius); padding: 11px 22px; font-weight: 700; font-size: 14px; transition: background .18s ease; } body.chm-skin .woocommerce-MyAccount-content .button:hover, body.chm-skin .woocommerce-MyAccount-content button[type="submit"]:hover, body.chm-skin .chm-btn-primary:hover { background: var(--chm-brand-dark); color: #fff; } body.chm-skin .woocommerce-MyAccount-content .button:focus-visible, body.chm-skin .woocommerce-MyAccount-content button[type="submit"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Formularios */ body.chm-skin .woocommerce-MyAccount-content input[type="text"], body.chm-skin .woocommerce-MyAccount-content input[type="email"], body.chm-skin .woocommerce-MyAccount-content input[type="tel"], body.chm-skin .woocommerce-MyAccount-content input[type="password"], body.chm-skin .woocommerce-MyAccount-content input[type="number"], body.chm-skin .woocommerce-MyAccount-content input[type="search"], body.chm-skin .woocommerce-MyAccount-content input[type="file"], body.chm-skin .woocommerce-MyAccount-content select, body.chm-skin .woocommerce-MyAccount-content textarea { background: #0f0f10; color: #fff; border: 1px solid var(--chm-border); border-radius: var(--chm-radius-sm); padding: 11px 12px; } body.chm-skin .woocommerce-MyAccount-content input:focus, body.chm-skin .woocommerce-MyAccount-content select:focus, body.chm-skin .woocommerce-MyAccount-content textarea:focus { outline: 2px solid var(--chm-brand); outline-offset: 1px; border-color: var(--chm-brand); } body.chm-skin .woocommerce-MyAccount-content label { color: var(--chm-body); } /* ------------------------------------------------------------------ * * Cards del dashboard (portada "Panel") * ------------------------------------------------------------------ */ body.chm-skin .chm-dash-greeting { font-size: 22px; font-weight: 700; color: var(--chm-heading); margin: 0 0 6px; } body.chm-skin .chm-dash-greeting strong { color: var(--chm-brand-strong); } body.chm-skin .chm-dash-intro { color: var(--chm-body); font-size: 15px; margin: 0 0 20px; max-width: 60ch; } body.chm-skin .chm-dash-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 4px 0 22px; } @media (max-width: 520px) { body.chm-skin .chm-dash-cards { grid-template-columns: 1fr; } } body.chm-skin .chm-dash-card { display: flex; flex-direction: column; gap: 4px; background: #0f0f10; border: 1px solid var(--chm-border); border-radius: var(--chm-radius); padding: 20px; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; position: relative; overflow: hidden; } body.chm-skin .chm-dash-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--chm-brand); } body.chm-skin .chm-dash-card.accent-success::before { background: var(--chm-success); } body.chm-skin .chm-dash-card.accent-warning::before { background: var(--chm-warning); } body.chm-skin .chm-dash-card.accent-info::before { background: var(--chm-info); } body.chm-skin .chm-dash-card.accent-muted::before { background: #3a3a3d; } body.chm-skin .chm-dash-card:hover { background: var(--chm-surface-2); border-color: var(--chm-border); transform: translateY(-2px); } body.chm-skin .chm-dash-card:focus-visible { outline: 2px solid var(--chm-brand); outline-offset: 2px; } body.chm-skin .chm-dash-icon { font-size: 22px; line-height: 1; margin-bottom: 4px; } body.chm-skin .chm-dash-value { font-size: 32px; font-weight: 700; color: var(--chm-heading); line-height: 1.1; font-variant-numeric: tabular-nums; } body.chm-skin .chm-dash-label { font-size: 12.5px; color: var(--chm-body); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; } body.chm-skin .chm-dash-note { color: var(--chm-body); font-size: 14px; margin: 0 0 22px; padding: 12px 16px; background: #0f0f10; border: 1px solid var(--chm-border-soft); border-radius: var(--chm-radius-sm); } body.chm-skin .chm-dash-note strong { color: var(--chm-heading); } /* ------------------------------------------------------------------ * * Componentes de hosting y tickets en oscuro (solo con skin activo) * ------------------------------------------------------------------ */ /* Tarjetas de hosting */ body.chm-skin .chm-card { background: #0f0f10; border-color: var(--chm-border); } body.chm-skin .chm-card-head { border-bottom-color: var(--chm-border-soft); } body.chm-skin .chm-card-head h3 { color: var(--chm-heading); } body.chm-skin .chm-user, body.chm-skin .chm-meta dt, body.chm-skin .chm-muted { color: var(--chm-muted); } body.chm-skin .chm-meta dd { color: var(--chm-body); } body.chm-skin .chm-card code, body.chm-skin .chm-list code, body.chm-skin .woocommerce-MyAccount-content code { background: #1c1c1f; color: #e5e7eb; } /* Barras de uso */ body.chm-skin .chm-bar { background: #1c1c1f; } body.chm-skin .chm-bar-label { color: var(--chm-heading); } body.chm-skin .chm-bar-value { color: var(--chm-muted); } /* Insignias */ body.chm-skin .chm-badge.is-active { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.3); } body.chm-skin .chm-badge.is-suspended { background: rgba(244,63,94,.12); color: #fb7185; border-color: rgba(244,63,94,.3); } body.chm-skin .chm-badge.is-unknown { background: #1c1c1f; color: var(--chm-body); border-color: var(--chm-border); } /* Botón ghost */ body.chm-skin .chm-btn-ghost { background: transparent; color: #e5e7eb; border-color: var(--chm-border); } body.chm-skin .chm-btn-ghost:hover { background: var(--chm-surface-2); color: #fff; } /* Autogestión (acordeones) */ body.chm-skin .chm-selfservice { border-top-color: var(--chm-border); } body.chm-skin .chm-panel { border-bottom-color: var(--chm-border-soft); } body.chm-skin .chm-panel > summary { color: var(--chm-heading); } body.chm-skin .chm-count { background: #1c1c1f; color: var(--chm-body); } body.chm-skin .chm-list li { background: #0f0f10; border-color: var(--chm-border-soft); } body.chm-skin .chm-field label { color: var(--chm-heading); } body.chm-skin .chm-input-group span { color: var(--chm-muted); } /* Medidor de contraseña */ body.chm-skin .chm-meter { background: #1c1c1f; } body.chm-skin .chm-reqs { color: var(--chm-muted); } body.chm-skin .chm-reqs li.is-ok { color: #34d399; } /* Avisos y estado vacío */ body.chm-skin .chm-notice.is-success { background: rgba(16,185,129,.1); color: #34d399; border-color: rgba(16,185,129,.3); } body.chm-skin .chm-notice.is-error { background: rgba(244,63,94,.1); color: #fb7185; border-color: rgba(244,63,94,.3); } body.chm-skin .chm-alert { background: rgba(244,63,94,.1); color: #fb7185; border-color: rgba(244,63,94,.3); } body.chm-skin .chm-empty { background: #0f0f10; border-color: var(--chm-border); } body.chm-skin .chm-empty h3 { color: var(--chm-heading); } body.chm-skin .chm-empty p { color: var(--chm-body); } /* Tickets */ body.chm-skin .chm-tickets-title, body.chm-skin .chm-ticket-head h3 { color: var(--chm-heading); } body.chm-skin .chm-tickets-table th, body.chm-skin .chm-tickets-table td { border-bottom-color: var(--chm-border-soft); } body.chm-skin .chm-tickets-table thead th { color: var(--chm-muted); } body.chm-skin .chm-tickets-table a { color: var(--chm-brand-strong); } body.chm-skin .chm-msg.is-mine { background: #0f0f10; border-color: var(--chm-border); border-left-color: #3a3a3d; } body.chm-skin .chm-msg.is-staff { background: rgba(204,102,0,.08); border-color: var(--chm-border); border-left-color: var(--chm-brand); } body.chm-skin .chm-msg-meta { color: var(--chm-muted); } body.chm-skin .chm-msg-meta strong { color: var(--chm-heading); } body.chm-skin .chm-msg-body { color: var(--chm-body); } body.chm-skin .chm-file { background: #1c1c1f; color: var(--chm-brand-strong); } body.chm-skin .chm-file:hover { background: #26262a; } /* ------------------------------------------------------------------ * * Responsive * ------------------------------------------------------------------ */ @media (max-width: 900px) { body.chm-skin.woocommerce-account .woocommerce { display: block; } body.chm-skin .yith-wcmap, body.chm-skin .woocommerce-MyAccount-navigation { flex: none; width: auto; position: static; margin-bottom: 22px; } body.chm-skin .woocommerce-MyAccount-content { padding: 20px; } } @media (prefers-reduced-motion: reduce) { body.chm-skin .chm-dash-card, body.chm-skin .yith-wcmap ul.myaccount-menu li a, body.chm-skin .woocommerce-MyAccount-content .button { transition: none; } }