/**
* DDC Gestión — Sistema de diseño NEÓN (Deporte de Contacto / Free Dojo)
* Reutilizado en el panel de administración y en el front del club.
*/
:root {
--ddc-bg: #0a0708;
--ddc-bg-2: #0e0a0b;
--ddc-panel: rgba(24, 18, 20, .72);
--ddc-panel-2: rgba(30, 22, 24, .72);
--ddc-panel-solid: #140f11;
--ddc-border: rgba(255, 60, 60, .14);
--ddc-border-2: rgba(255, 255, 255, .07);
--ddc-text: #f4f4f6;
--ddc-muted: #93909a;
--ddc-red: #ff2e2e;
--ddc-red-soft: #ff5b5b;
--ddc-red-deep: #c11414;
--ddc-green: #37e39a;
--ddc-yellow: #ffd21e;
--ddc-cyan: #38d6ff;
--ddc-glow-red: 0 0 10px rgba(255, 46, 46, .55), 0 0 26px rgba(255, 46, 46, .35);
--ddc-glow-red-strong: 0 0 0 1px rgba(255, 60, 60, .55), 0 0 18px rgba(255, 46, 46, .45), 0 0 42px rgba(255, 46, 46, .28);
--ddc-radius: 18px;
--ddc-radius-sm: 12px;
--ddc-font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--ddc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* -------------------------------------------------------------- Base */
.ddc-neon,
.ddc-neon * {
box-sizing: border-box;
}
.ddc-neon {
background: radial-gradient(1200px 600px at 20% -10%, #17070a 0%, var(--ddc-bg) 55%);
color: var(--ddc-text);
font-family: var(--ddc-font-body);
line-height: 1.5;
padding: 24px;
border-radius: var(--ddc-radius);
}
/* En admin de WP el wrap ya trae márgenes; ajustamos. */
.wrap.ddc-neon { margin: 16px 20px 40px 2px; }
.ddc-title {
font-family: var(--ddc-font-head);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 30px;
margin: 0 0 20px;
color: #fff;
}
.ddc-subtitle {
font-family: var(--ddc-font-head);
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
font-size: 18px;
margin: 0 0 16px;
color: #fff;
}
.ddc-glow {
color: var(--ddc-red-soft);
text-shadow: var(--ddc-glow-red);
}
.ddc-title--green { color: var(--ddc-green); text-shadow: 0 0 10px rgba(43,255,136,.45); }
.ddc-lead { color: var(--ddc-muted); font-size: 16px; max-width: 620px; }
.ddc-muted { color: var(--ddc-muted); font-size: 13px; }
/* ------------------------------------------------------------- Cards */
.ddc-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.ddc-card {
background: linear-gradient(160deg, var(--ddc-panel) 0%, var(--ddc-panel-2) 100%);
border: 1px solid var(--ddc-border);
border-radius: var(--ddc-radius);
padding: 20px;
position: relative;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0,0,0,.5);
transition: transform .15s ease, border-color .15s ease;
}
.ddc-card:hover { transform: translateY(-2px); border-color: rgba(255,30,30,.5); }
.ddc-card::before {
content: "";
position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--ddc-red), transparent);
box-shadow: var(--ddc-glow-red);
}
.ddc-card__value { font-family: var(--ddc-font-head); font-size: 34px; font-weight: 700; }
.ddc-card__label { color: var(--ddc-muted); text-transform: uppercase; font-size: 12px; letter-spacing: .5px; margin-top: 4px; }
.ddc-card__meta { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* ----------------------------------------------------------- Panels */
.ddc-panel {
background: var(--ddc-panel);
border: 1px solid var(--ddc-border);
border-radius: var(--ddc-radius);
padding: 22px;
margin-bottom: 20px;
box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
/* ---------------------------------------------------------- Semáforo */
.ddc-light {
display: inline-block;
width: 12px; height: 12px;
border-radius: 50%;
vertical-align: middle;
margin-right: 4px;
}
.ddc-light--green { background: var(--ddc-green); box-shadow: 0 0 8px var(--ddc-green); }
.ddc-light--yellow { background: var(--ddc-yellow); box-shadow: 0 0 8px var(--ddc-yellow); }
.ddc-light--red { background: var(--ddc-red); box-shadow: 0 0 8px var(--ddc-red); }
.ddc-light--grey { background: #555; }
.ddc-light--xl { width: 46px; height: 46px; }
/* ----------------------------------------------------------- Badges */
.ddc-badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid transparent;
text-transform: uppercase;
letter-spacing: .3px;
}
.ddc-badge--green { color: var(--ddc-green); border-color: rgba(43,255,136,.4); background: rgba(43,255,136,.08); }
.ddc-badge--yellow { color: var(--ddc-yellow); border-color: rgba(255,210,30,.4); background: rgba(255,210,30,.08); }
.ddc-badge--red { color: var(--ddc-red-soft); border-color: rgba(255,30,30,.4); background: rgba(255,30,30,.08); }
/* ---------------------------------------------------------- Buttons */
.ddc-btn {
display: inline-block;
font-family: var(--ddc-font-head);
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
font-size: 13px;
padding: 10px 18px;
border-radius: 10px;
border: 1px solid var(--ddc-red);
background: linear-gradient(180deg, #1c1c20, #121216);
color: #fff;
cursor: pointer;
text-decoration: none;
transition: all .15s ease;
box-shadow: 0 0 0 rgba(255,30,30,0);
}
.ddc-btn:hover { box-shadow: var(--ddc-glow-red); transform: translateY(-1px); color: #fff; }
.ddc-btn--sm { padding: 6px 12px; font-size: 11px; border-radius: 8px; }
.ddc-btn--lg { padding: 14px 26px; font-size: 15px; }
.ddc-btn--green { border-color: var(--ddc-green); }
.ddc-btn--green:hover { box-shadow: 0 0 8px var(--ddc-green), 0 0 20px rgba(43,255,136,.4); }
.ddc-btn--yellow { border-color: var(--ddc-yellow); color: var(--ddc-yellow); }
.ddc-btn--red { border-color: var(--ddc-red); color: var(--ddc-red-soft); }
.ddc-btn--ghost { border-color: var(--ddc-border); background: transparent; color: var(--ddc-muted); }
.ddc-btn--ghost:hover { color: #fff; box-shadow: none; border-color: #444; }
/* ---------------------------------------------------------- Tables */
.ddc-table {
width: 100%;
border-collapse: collapse;
background: var(--ddc-panel);
border-radius: 10px;
overflow: hidden;
}
.ddc-table th, .ddc-table td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--ddc-border);
font-size: 14px;
color: #fff;
}
.ddc-table thead th {
background: #0f0f12;
font-family: var(--ddc-font-head);
text-transform: uppercase;
font-size: 12px;
letter-spacing: .5px;
color: var(--ddc-muted);
}
.ddc-table tbody tr:hover { background: rgba(255,30,30,.04); }
.ddc-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* ---------------------------------------------------------- Forms */
.ddc-form label, .ddc-field-grid label, .ddc-field-full {
display: block;
margin-bottom: 14px;
}
.ddc-form label > span, .ddc-field-grid label > span, .ddc-field-full > span {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--ddc-muted);
margin-bottom: 6px;
}
.ddc-neon input[type=text],
.ddc-neon input[type=email],
.ddc-neon input[type=url],
.ddc-neon input[type=password],
.ddc-neon input[type=number],
.ddc-neon input[type=search],
.ddc-neon input[type=file],
.ddc-neon select,
.ddc-neon textarea {
width: 100%;
background: #0e0e11;
border: 1px solid var(--ddc-border);
border-radius: 9px;
color: #fff;
padding: 10px 12px;
font-size: 14px;
font-family: var(--ddc-font-body);
transition: border-color .15s ease, box-shadow .15s ease;
}
.ddc-neon input:focus, .ddc-neon select:focus, .ddc-neon textarea:focus {
outline: none;
border-color: var(--ddc-red);
box-shadow: 0 0 0 3px rgba(255,30,30,.15);
}
.ddc-field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
}
.ddc-field-grid .ddc-field-full, .ddc-field-full { grid-column: 1 / -1; }
.ddc-check { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.ddc-check input { width: auto; }
.ddc-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.ddc-filters input, .ddc-filters select { width: auto; min-width: 200px; }
/* --------------------------------------------------------- Notices */
.ddc-notice {
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 18px;
border: 1px solid;
font-size: 14px;
}
.ddc-notice--ok { border-color: rgba(43,255,136,.5); background: rgba(43,255,136,.08); color: var(--ddc-green); }
.ddc-notice--error { border-color: rgba(255,30,30,.5); background: rgba(255,30,30,.08); color: var(--ddc-red-soft); }
/* ---------------------------------------------------------- Charts */
.ddc-chart {
display: flex;
align-items: flex-end;
gap: 10px;
min-height: 170px;
padding-top: 10px;
overflow-x: auto;
}
.ddc-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 34px; }
.ddc-bar__fill {
width: 26px;
background: linear-gradient(180deg, var(--ddc-red-soft), var(--ddc-red));
border-radius: 6px 6px 0 0;
box-shadow: var(--ddc-glow-red);
}
.ddc-bar__label { font-size: 11px; color: var(--ddc-muted); }
.ddc-bar__x { font-size: 10px; color: #666; }
.ddc-chart--grouped .ddc-bargroup { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; }
.ddc-bars { display: flex; gap: 3px; align-items: flex-end; }
.ddc-bar__fill--green { background: linear-gradient(180deg, var(--ddc-green), #14b866); box-shadow: 0 0 8px rgba(43,255,136,.5); width: 16px; }
.ddc-bar__fill--red { background: linear-gradient(180deg, var(--ddc-red-soft), var(--ddc-red)); width: 16px; }
.ddc-legend { display: flex; gap: 18px; margin-bottom: 10px; font-size: 13px; color: var(--ddc-muted); }
.ddc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.ddc-dot--green { background: var(--ddc-green); }
.ddc-dot--red { background: var(--ddc-red); }
/* ---------------------------------------------- Estadísticas / donut */
.ddc-stats-cols { align-items: start; }
.ddc-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ddc-donut { width: 150px; height: 150px; flex: none; }
.ddc-donut__num { fill: #fff; font-family: var(--ddc-font-head); font-weight: 700; font-size: 22px; }
.ddc-donut__lbl { fill: var(--ddc-muted); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.ddc-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ddc-donut-legend li { font-size: 13px; color: var(--ddc-muted); }
.ddc-donut-legend strong { color: #fff; margin-left: 6px; }
/* -------------------------------------------------- Contabilidad */
.ddc-month-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; }
.ddc-month-nav__label { font-family: var(--ddc-font-head); text-transform: uppercase; letter-spacing: 1px; font-size: 18px; color: #fff; min-width: 170px; text-align: center; }
.ddc-contable-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--ddc-border); }
.ddc-contable-row__c { flex: 1; font-size: 14px; color: #fff; }
.ddc-contable-row__v { font-family: var(--ddc-font-head); font-weight: 600; font-size: 15px; }
.ddc-contable-row--auto { background: rgba(43,255,136,.05); border: 1px solid rgba(43,255,136,.25); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; }
.ddc-contable-row--auto .dashicons { font-size: 14px; width: 14px; height: 14px; color: var(--ddc-muted); }
.ddc-contable-del { background: none; border: 0; color: var(--ddc-muted); cursor: pointer; padding: 2px; }
.ddc-contable-del:hover { color: var(--ddc-red-soft); }
.ddc-contable-del .dashicons { font-size: 17px; width: 17px; height: 17px; }
.ddc-contable-add { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ddc-contable-add input[type=text] { flex: 1; min-width: 140px; }
.ddc-contable-add input[type=number] { width: 90px; }
.ddc-contable-add input { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--ddc-border); background: rgba(255,255,255,.03); color: #fff; font: inherit; }
/* -------------------------------------------------- Impagados */
.ddc-impagados-head { margin-bottom: 16px; }
.ddc-impagados-total { display: inline-flex; align-items: center; gap: 14px; margin: 0; }
.ddc-impagados-total .dashicons { font-size: 26px; width: 26px; height: 26px; color: var(--ddc-red-soft); }
.ddc-impagados-total__num { display: block; font-family: var(--ddc-font-head); font-size: 26px; color: var(--ddc-red-soft); }
.ddc-impagados-amount { font-family: var(--ddc-font-head); font-weight: 700; color: var(--ddc-red-soft); }
/* -------------------------------------------------------- Datalist */
.ddc-datalist { list-style: none; margin: 0; padding: 0; }
.ddc-datalist li {
display: flex; justify-content: space-between; gap: 16px;
padding: 10px 0; border-bottom: 1px solid var(--ddc-border);
font-size: 14px;
}
.ddc-datalist li span:first-child { color: var(--ddc-muted); text-transform: uppercase; font-size: 12px; letter-spacing: .4px; }
.ddc-datalist--compact li { padding: 6px 0; }
/* ------------------------------------------------- Logo & requests */
.ddc-logo-placeholder {
width: 120px; height: 120px; border-radius: 12px;
border: 1px dashed var(--ddc-border);
display: flex; align-items: center; justify-content: center;
color: var(--ddc-muted); font-size: 12px; background: #0e0e11;
}
.ddc-logo-placeholder--sm { width: 60px; height: 60px; }
.ddc-request-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.ddc-request__head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.ddc-request__logo { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; border: 1px solid var(--ddc-border); }
.ddc-request__head h3 { margin: 0; font-family: var(--ddc-font-head); }
.ddc-request__actions { display: flex; gap: 8px; margin-top: 12px; }
.ddc-club-single { display: flex; gap: 24px; flex-wrap: wrap; }
.ddc-club-single__logo img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; border: 1px solid var(--ddc-border); }
.ddc-club-single__data { flex: 1; min-width: 260px; }
/* ------------------------------------------------- App / panel club
Barra lateral calcada de la app Free Dojo para Mac: punto rojo con glow +
nombre en tipografía display, ítems con barra roja a la izquierda cuando
están activos, icono rojo activo y pie con el nombre del club. */
.ddc-app { display: grid; grid-template-columns: 244px 1fr; gap: 24px; padding: 20px; align-items: start; }
.ddc-sidebar {
display: flex; flex-direction: column;
background: linear-gradient(180deg, #101013, #0b0b0d);
border: 1px solid var(--ddc-border);
border-radius: var(--ddc-radius);
padding: 20px 12px 14px;
position: sticky; top: 20px;
min-height: min(86vh, 780px);
}
.ddc-sidebar__brand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 10px 26px; text-align: center; }
.ddc-sidebar__logo { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; flex: none; box-shadow: 0 8px 26px rgba(0,0,0,.5); border: 1px solid var(--ddc-border); }
.ddc-sidebar__logo--empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--ddc-panel), var(--ddc-panel-2)); }
.ddc-sidebar__logo--empty .dashicons { font-size: 44px; width: 44px; height: 44px; color: var(--ddc-red-soft); text-shadow: var(--ddc-glow-red); }
.ddc-sidebar__name {
font-family: var(--ddc-font-head); font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; font-size: 19px; line-height: 1.1; color: #fff;
max-width: 100%; overflow-wrap: break-word;
}
.ddc-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.ddc-sidebar__sep { height: 1px; background: var(--ddc-border); margin: 10px 10px; }
.ddc-navitem {
position: relative;
display: flex; align-items: center; gap: 11px;
padding: 10px 12px; border-radius: 9px;
color: var(--ddc-muted); text-decoration: none;
font-size: 14px; font-weight: 500; transition: background .15s ease, color .15s ease;
}
.ddc-navitem .dashicons { font-size: 18px; width: 18px; height: 18px; flex: none; }
.ddc-navitem__lbl { line-height: 1; }
.ddc-navitem__bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: transparent; }
.ddc-navitem:hover { background: rgba(255,255,255,.05); color: #fff; }
.ddc-navitem.is-active { background: var(--ddc-panel-2); color: #fff; }
.ddc-navitem.is-active .dashicons { color: var(--ddc-red-soft); }
.ddc-navitem.is-active .ddc-navitem__bar { background: var(--ddc-red); box-shadow: var(--ddc-glow-red); }
.ddc-navitem--logout { margin-top: 8px; color: var(--ddc-red-soft); }
.ddc-sidebar__foot { margin-top: auto; padding: 16px 12px 4px; border-top: 1px solid var(--ddc-border); display: flex; flex-direction: column; }
.ddc-sidebar__foot strong { color: #fff; font-size: 13px; }
.ddc-sidebar__foot span { color: var(--ddc-muted); font-size: 11.5px; margin-top: 2px; }
.ddc-content { min-width: 0; }
/* Contacto para activar la suscripción (icono de sobre) en «Mi suscripción». */
.ddc-contact { margin-top: 16px; }
.ddc-contact__btn {
width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
background: linear-gradient(90deg, rgba(255,30,30,.12), rgba(255,30,30,.02));
border: 1px solid rgba(255,30,30,.45); border-radius: 14px; padding: 14px 16px;
color: #fff; font: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ddc-contact__btn:hover { border-color: var(--ddc-red); box-shadow: var(--ddc-glow-red); transform: translateY(-1px); }
.ddc-contact__ic {
flex: none; width: 46px; height: 46px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--ddc-red), #b30000); color: #fff;
box-shadow: var(--ddc-glow-red);
}
.ddc-contact__ic svg { display: block; }
.ddc-contact__txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ddc-contact__txt strong { font-size: 15px; color: #fff; }
.ddc-contact__txt span { font-size: 12.5px; color: var(--ddc-muted); }
.ddc-contact__arrow { color: var(--ddc-red-soft); flex: none; display: inline-flex; align-items: center; }
/* Cajas de importación (descargar plantilla / subir Excel). */
.ddc-import-box { text-align: center; }
.ddc-import-box__ic { font-size: 40px; width: 40px; height: 40px; color: var(--ddc-red-soft); text-shadow: var(--ddc-glow-red); margin-bottom: 6px; }
.ddc-import-box .ddc-subtitle { margin-bottom: 8px; }
.ddc-import-box .ddc-btn { margin-top: 14px; }
.ddc-import-form { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.ddc-import-form input[type=file] { width: 100%; color: var(--ddc-muted); font-size: 13px; }
/* Sección «en preparación». */
.ddc-soon {
text-align: center; max-width: 560px; margin: 30px auto;
background: var(--ddc-panel); border: 1px solid var(--ddc-border);
border-radius: var(--ddc-radius); padding: 40px 30px;
box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.ddc-soon__ic { font-size: 52px; width: 52px; height: 52px; color: var(--ddc-red-soft); text-shadow: var(--ddc-glow-red); }
.ddc-soon__badge {
display: inline-block; margin: 12px 0 14px; padding: 5px 14px; border-radius: 999px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
color: var(--ddc-yellow); border: 1px solid rgba(255,210,30,.4); background: rgba(255,210,30,.08);
}
.ddc-soon__desc { color: #fff; font-size: 15px; margin: 0 auto 10px; max-width: 440px; }
.ddc-soon__note { color: var(--ddc-muted); font-size: 13px; margin: 0 auto; max-width: 440px; }
/* ------------------------------------------------------ Auth / hero */
.ddc-hero { text-align: center; padding: 30px 0 20px; }
.ddc-auth-grid, .ddc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ddc-auth-card .ddc-btn { margin-top: 10px; }
.ddc-neon .login-username label, .ddc-neon .login-password label { display:block; margin-bottom:6px; color: var(--ddc-muted); font-size: 12px; text-transform: uppercase; }
.ddc-neon .login-submit { margin-top: 10px; }
.ddc-neon #wp-submit { all: unset; }
.ddc-neon .button-primary, .ddc-neon #wp-submit {
display: inline-block; font-family: var(--ddc-font-head); text-transform: uppercase;
padding: 10px 18px; border-radius: 10px; border: 1px solid var(--ddc-green);
background: linear-gradient(180deg,#1c1c20,#121216); color:#fff !important; cursor:pointer;
}
.ddc-terms-box {
max-height: 200px; overflow-y: auto;
background: #0e0e11; border: 1px solid var(--ddc-border);
border-radius: 10px; padding: 14px; font-size: 13px; color: var(--ddc-muted);
margin-bottom: 12px;
}
.ddc-status-card { max-width: 560px; margin: 40px auto; text-align: center; }
.ddc-status-card__light { margin-bottom: 12px; }
.ddc-status-card .ddc-datalist { text-align: left; margin: 20px 0; }
.ddc-club-logo-row { display: flex; gap: 20px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.ddc-club-logo { width: 100px; height: 100px; border-radius: 12px; object-fit: cover; border: 1px solid var(--ddc-border); }
.ddc-form__footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
/* ------------------------------------------------- Landing / Precios */
.ddc-hero--center { text-align: center; max-width: 820px; margin: 10px auto 34px; }
.ddc-hero--center .ddc-lead { margin: 0 auto; max-width: 640px; }
.ddc-hero__badge {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 18px; padding: 9px 18px; border-radius: 999px;
background: rgba(43, 255, 136, .08);
border: 1px solid rgba(43, 255, 136, .4);
color: var(--ddc-green); font-weight: 600; font-size: 14px;
}
.ddc-hero__badge .dashicons { font-size: 18px; width: 18px; height: 18px; }
.ddc-pricing {
display: grid; grid-template-columns: 360px 1fr; gap: 22px;
align-items: start; margin: 0 auto 34px; max-width: 1080px;
}
.ddc-pricing__card {
position: relative; text-align: center;
background: linear-gradient(180deg, #17171b 0%, #101013 100%);
border: 1px solid var(--ddc-red); border-radius: 18px; padding: 34px 26px;
box-shadow: var(--ddc-glow-red);
}
.ddc-pricing__card--panel { box-shadow: none; border-color: var(--ddc-border); text-align: left; }
.ddc-pricing__trial {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
background: var(--ddc-green); color: #06210f; font-weight: 800;
font-family: var(--ddc-font-head); letter-spacing: .5px; text-transform: uppercase;
padding: 7px 16px; border-radius: 999px; font-size: 14px;
box-shadow: 0 0 14px rgba(43, 255, 136, .6);
}
.ddc-pricing__trial .dashicons { font-size: 16px; width: 16px; height: 16px; }
.ddc-pricing__plan {
font-family: var(--ddc-font-head); text-transform: uppercase; letter-spacing: 1px;
font-size: 16px; color: var(--ddc-muted); margin: 10px 0 6px;
}
.ddc-pricing__price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.ddc-pricing__card--panel .ddc-pricing__price { justify-content: flex-start; }
.ddc-pricing__amount {
font-family: var(--ddc-font-head); font-weight: 700; font-size: 58px; line-height: 1;
color: #fff; text-shadow: var(--ddc-glow-red);
}
.ddc-pricing__period { color: var(--ddc-muted); font-size: 16px; }
.ddc-pricing__note { color: var(--ddc-muted); font-size: 13px; margin: 14px 0 18px; }
.ddc-pricing__cta { width: 100%; }
.ddc-pricing__features { }
.ddc-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ddc-feature {
display: flex; gap: 12px; align-items: flex-start;
background: var(--ddc-panel); border: 1px solid var(--ddc-border);
border-radius: 12px; padding: 14px;
}
.ddc-feature__icon {
flex: none; font-size: 22px; width: 22px; height: 22px; color: var(--ddc-red-soft);
filter: drop-shadow(0 0 6px rgba(255, 30, 30, .5));
}
.ddc-feature__body { display: flex; flex-direction: column; gap: 3px; }
.ddc-feature__title { color: #fff; font-size: 14px; }
.ddc-feature__desc { color: var(--ddc-muted); font-size: 12.5px; line-height: 1.45; }
/* --------------------------------------------------- Prueba gratis */
.ddc-trial-banner {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
background: rgba(43, 255, 136, .07); border: 1px solid rgba(43, 255, 136, .35);
color: #d7ffe8; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px;
}
.ddc-trial-banner .dashicons { color: var(--ddc-green); }
.ddc-trial-banner strong { color: var(--ddc-green); }
.ddc-trial-banner__sep { color: var(--ddc-muted); }
.ddc-trial-banner a { color: var(--ddc-cyan); margin-left: auto; font-weight: 600; }
/* Recordatorio slim en rojo (resto de secciones). */
.ddc-trial-banner--red {
background: rgba(255, 30, 30, .07);
border-color: rgba(255, 30, 30, .4);
color: #ffd9d9;
}
.ddc-trial-banner--red .dashicons,
.ddc-trial-banner--red strong,
.ddc-trial-banner--red a { color: var(--ddc-red-soft); }
/* Cuenta atrás de prueba en el dashboard (estilo Free Dojo). */
.ddc-trial-countdown {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
background: linear-gradient(90deg, rgba(255, 30, 30, .15), rgba(255, 30, 30, .03));
border: 1px solid rgba(255, 30, 30, .5);
border-radius: 16px; padding: 18px 24px; margin-bottom: 22px;
box-shadow: inset 0 0 32px rgba(255, 30, 30, .08);
}
.ddc-trial-countdown__num {
flex: none;
font-family: var(--ddc-font-head); font-weight: 700; font-size: 56px; line-height: 1;
color: var(--ddc-red-soft); text-shadow: var(--ddc-glow-red);
}
.ddc-trial-countdown__body { flex: 1; min-width: 200px; }
.ddc-trial-countdown__body strong {
display: block; color: #fff; font-size: 17px;
font-family: var(--ddc-font-head); text-transform: uppercase; letter-spacing: .5px;
}
.ddc-trial-countdown__body p { margin: 5px 0 0; color: var(--ddc-muted); font-size: 13px; }
.ddc-trial-countdown .ddc-btn { flex: none; }
/* Contador de prueba SIEMPRE arriba del panel (todas las secciones). */
.ddc-trial-top {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
background: linear-gradient(90deg, rgba(255, 30, 30, .18), rgba(255, 30, 30, .03));
border: 1px solid rgba(255, 30, 30, .55);
border-radius: 14px; padding: 12px 18px; margin-bottom: 20px;
box-shadow: inset 0 0 26px rgba(255, 30, 30, .10);
}
.ddc-trial-top__num {
flex: none; min-width: 46px; text-align: center;
font-family: var(--ddc-font-head); font-weight: 700; font-size: 40px; line-height: 1;
color: var(--ddc-red-soft); text-shadow: var(--ddc-glow-red);
}
.ddc-trial-top__txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.ddc-trial-top__txt strong { color: #fff; font-family: var(--ddc-font-head); text-transform: uppercase; letter-spacing: .4px; font-size: 15px; }
.ddc-trial-top__txt span { color: var(--ddc-muted); font-size: 12.5px; }
.ddc-trial-top .ddc-btn { flex: none; }
.ddc-trial-hero {
display: flex; gap: 14px; align-items: center;
background: linear-gradient(90deg, rgba(43,255,136,.10), rgba(43,255,136,.02));
border: 1px solid rgba(43, 255, 136, .4); border-radius: 14px;
padding: 18px 20px; margin-bottom: 22px;
}
.ddc-trial-hero .dashicons { font-size: 30px; width: 30px; height: 30px; color: var(--ddc-green); flex: none; }
.ddc-trial-hero strong { display: block; font-size: 17px; color: #fff; }
.ddc-trial-hero p { margin: 4px 0 0; }
.ddc-sub-summary { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; margin-bottom: 22px; }
.ddc-ok { color: var(--ddc-green); }
/* ------------------------------------------------ Pantalla completa negra */
/* En la página del panel (/gestion) el plugin toma toda la pantalla con fondo
negro, igual que el resto de plugins del sitio (Sparring, etc.). Se conserva
la cabecera/menú del tema; solo se ocultan barras laterales y se rompe el
contenedor centrado del tema para que la app ocupe todo el ancho. */
body.ddc-gestion-page {
background: var(--ddc-bg) !important;
}
body.ddc-gestion-full .ddc-front.ddc-neon {
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
min-height: 100vh;
/* Centra el contenido hasta ~1280px dejando aire a los lados. */
padding: 40px max(20px, calc(50vw - 640px));
}
/* Fuerza el contenedor de contenido del tema a ancho completo (temas clásicos
y de bloques). */
body.ddc-gestion-full #primary,
body.ddc-gestion-full .content-area,
body.ddc-gestion-full .site-content,
body.ddc-gestion-full #content,
body.ddc-gestion-full .content-wrap,
body.ddc-gestion-full .entry-content,
body.ddc-gestion-full .wp-block-post-content,
body.ddc-gestion-full main {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
}
/* Oculta la columna lateral / widgets del tema en esta página. */
body.ddc-gestion-full #secondary,
body.ddc-gestion-full .widget-area,
body.ddc-gestion-full .sidebar,
body.ddc-gestion-full #sidebar,
body.ddc-gestion-full aside.sidebar,
body.ddc-gestion-full .sidebar-primary,
body.ddc-gestion-full .wp-block-sidebar {
display: none !important;
}
/* ------------------------------------------------- Documento legal */
.ddc-legal { padding-top: 8px; }
.ddc-legal-doc {
max-width: 820px; margin: 0 auto;
background: var(--ddc-panel); border: 1px solid var(--ddc-border);
border-radius: var(--ddc-radius); padding: 40px 44px 36px;
box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.ddc-legal-eyebrow { color: var(--ddc-red-soft); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; margin: 0 0 6px; }
.ddc-legal-doc .ddc-title { font-size: 28px; margin-bottom: 6px; }
.ddc-legal-sub { color: #fff; font-size: 16px; margin: 0 0 14px; }
.ddc-legal-meta { color: var(--ddc-muted); font-size: 12.5px; line-height: 1.7; border-bottom: 1px solid var(--ddc-border); padding-bottom: 18px; margin-bottom: 22px; }
.ddc-legal-doc h2 { font-family: var(--ddc-font-head); color: #fff; font-size: 19px; text-transform: uppercase; letter-spacing: .5px; margin: 28px 0 10px; }
.ddc-legal-doc h2.ddc-legal-hl { color: var(--ddc-red-soft); }
.ddc-legal-doc h3 { color: #fff; font-size: 15.5px; margin: 20px 0 8px; }
.ddc-legal-doc p { color: var(--ddc-text); font-size: 14px; line-height: 1.7; margin: 0 0 12px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.ddc-legal-doc strong { color: #fff; }
.ddc-legal-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ddc-border); color: var(--ddc-muted); font-size: 13px; }
.ddc-legal-back { text-align: center; margin: 22px 0 0; }
.ddc-legal-back a { color: var(--ddc-cyan); font-size: 13px; }
/* Enlace pequeño «Condiciones de uso» (escondido en Ajustes / Mi suscripción). */
.ddc-legal-link { display: inline-flex; align-items: center; gap: 5px; color: var(--ddc-muted); font-size: 11.5px; text-decoration: none; opacity: .75; transition: opacity .15s ease, color .15s ease; }
.ddc-legal-link:hover { opacity: 1; color: var(--ddc-cyan); }
.ddc-legal-link .dashicons { font-size: 13px; width: 13px; height: 13px; }
.ddc-sub-legal { text-align: center; margin: 16px 0 0; }
/* ------------------------------------------------- NO COMPARTIR
Oculta los botones de "compartir" que inyectan otros plugins (Jetpack,
AddToAny, Social Warfare, Sassy Social Share, Shareaholic, MashShare…) en
las páginas del plugin de gestión. La API los apaga cuando puede (ver
DDC_Public::disable_sharing); esto es la red de seguridad por CSS. */
body.ddc-gestion-noshare .sharedaddy,
body.ddc-gestion-noshare .sd-sharing,
body.ddc-gestion-noshare .jp-relatedposts,
body.ddc-gestion-noshare .addtoany_share_save_container,
body.ddc-gestion-noshare .a2a_kit,
body.ddc-gestion-noshare .swp_social_panel,
body.ddc-gestion-noshare .swp_social_panelSide,
body.ddc-gestion-noshare .heateor_sss_sharing_container,
body.ddc-gestion-noshare .heateorSssSharingContainer,
body.ddc-gestion-noshare .shareaholic-canvas,
body.ddc-gestion-noshare .mashsb-container,
body.ddc-gestion-noshare .social-warfare,
body.ddc-gestion-noshare .sharethis-inline-share-buttons,
body.ddc-gestion-noshare .essb_links,
body.ddc-gestion-noshare .ess-widget,
body.ddc-gestion-noshare [class*="share-buttons"],
body.ddc-gestion-noshare [class*="social-share"] {
display: none !important;
}
/* ============================================================= DEMO
Vista previa del panel (visitante no logueado) en /gestion: el panel se ve
completo pero inoperativo (atenuado y sin poder pulsarse) y una tarjeta
central superpuesta muestra el precio y los 30 días gratis. */
.ddc-demo { position: relative; padding: 0; }
.ddc-demo__preview {
pointer-events: none; /* Inoperativo: no se puede pulsar nada. */
user-select: none;
filter: blur(2px) saturate(.85) brightness(.75);
opacity: .9;
-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.ddc-demo__preview .ddc-navitem { cursor: default; }
/* Gráfico de barras de muestra. */
.ddc-demo__chart {
display: flex;
align-items: flex-end;
gap: 10px;
height: 160px;
padding-top: 8px;
}
.ddc-demo__bar {
flex: 1;
border-radius: 6px 6px 0 0;
background: linear-gradient(180deg, var(--ddc-red-soft), rgba(255,30,30,.15));
box-shadow: 0 0 10px rgba(255,30,30,.35);
min-width: 6px;
}
/* Capa central superpuesta. */
.ddc-demo__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
z-index: 5;
}
.ddc-demo__card {
width: 100%;
max-width: 460px;
background: linear-gradient(180deg, rgba(20,20,23,.98) 0%, rgba(10,10,12,.98) 100%);
border: 1px solid var(--ddc-border);
border-radius: 20px;
padding: 30px 30px 28px;
text-align: center;
box-shadow: 0 30px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(255,30,30,.15);
backdrop-filter: blur(3px);
}
.ddc-demo__tag {
display: block;
color: var(--ddc-muted);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
margin-bottom: 14px;
}
/* Precio arriba: «Después · 20 € · al mes». */
.ddc-demo__pricetop { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 10px; }
.ddc-demo__from { color: var(--ddc-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.ddc-demo__amount {
font-family: var(--ddc-font-head);
font-weight: 700;
font-size: 40px;
line-height: 1;
color: #fff;
text-shadow: var(--ddc-glow-red);
}
.ddc-demo__period { color: var(--ddc-muted); font-size: 15px; }
/* Reclamo «de diseñador». */
.ddc-demo__claim {
font-family: var(--ddc-font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
font-size: 25px;
line-height: 1.15;
margin: 0 auto 18px;
max-width: 380px;
color: #fff;
}
/* Banner rojo de la prueba gratis (protagonista). */
.ddc-demo__banner {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
background: linear-gradient(90deg, #ff2a2a, #b30000);
color: #fff;
font-family: var(--ddc-font-head);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 18px;
padding: 13px 18px;
border-radius: 12px;
box-shadow: var(--ddc-glow-red);
margin: 0 0 12px;
}
.ddc-demo__banner .dashicons { font-size: 20px; width: 20px; height: 20px; }
.ddc-demo__note { color: var(--ddc-muted); font-size: 12.5px; margin: 0 auto 16px; max-width: 360px; }
.ddc-demo__features {
list-style: none;
margin: 0 0 22px;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 14px;
text-align: left;
}
.ddc-demo__features li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #d7d7de; }
.ddc-demo__features .dashicons { color: var(--ddc-green); font-size: 16px; width: 16px; height: 16px; }
.ddc-demo__cta { width: 100%; text-align: center; }
.ddc-demo__login { margin: 14px 0 0; font-size: 12.5px; color: var(--ddc-muted); }
.ddc-demo__login a { color: var(--ddc-red); font-weight: 600; }
.ddc-demo__login a:hover { color: var(--ddc-red-soft); text-shadow: 0 0 10px rgba(255, 46, 46, .7); }
/* ----------------------------------------------- Acceso (estilo Free Dojo) */
.ddc-auth-screen {
display: flex;
align-items: center;
justify-content: center;
min-height: min(78vh, 720px);
padding: 10px 0 40px;
}
.ddc-auth-box {
width: 100%;
max-width: 440px;
background: linear-gradient(180deg, var(--ddc-panel) 0%, #0d0d10 100%);
border: 1px solid var(--ddc-border);
border-radius: 18px;
padding: 34px 30px 30px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.ddc-auth-brand {
text-align: center;
font-family: var(--ddc-font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 27px;
margin: 0 0 4px;
}
.ddc-auth-tagline {
text-align: center;
color: var(--ddc-muted);
font-size: 13px;
margin: 0 0 22px;
}
/* Tabs sin JavaScript (radios ocultos). */
.ddc-auth-tabs > input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.ddc-auth-tabbar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
background: #0e0e11;
border: 1px solid var(--ddc-border);
border-radius: 12px;
padding: 5px;
margin-bottom: 22px;
}
.ddc-auth-tabbar label {
text-align: center;
padding: 10px 8px;
border-radius: 9px;
cursor: pointer;
font-family: var(--ddc-font-head);
text-transform: uppercase;
letter-spacing: .5px;
font-size: 13px;
color: var(--ddc-muted);
transition: all .15s ease;
margin: 0;
}
#ddc-tab-login:checked ~ .ddc-auth-tabbar label[for=ddc-tab-login],
#ddc-tab-signup:checked ~ .ddc-auth-tabbar label[for=ddc-tab-signup] {
background: linear-gradient(180deg, #1c1c20, #121216);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 30, 30, .55), var(--ddc-glow-red);
}
.ddc-auth-pane { display: none; margin: 0; }
#ddc-tab-login:checked ~ .ddc-auth-pane--login { display: block; }
#ddc-tab-signup:checked ~ .ddc-auth-pane--signup { display: block; }
.ddc-auth-pane .ddc-btn { width: 100%; text-align: center; margin-top: 8px; }
.ddc-auth-foot { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--ddc-muted); }
.ddc-auth-foot a { color: #fff; text-decoration: underline; }
/* -------------------------------------------------------- Responsive */
@media (max-width: 960px) {
.ddc-app { grid-template-columns: 1fr; }
body.ddc-gestion-full .ddc-front.ddc-neon { padding: 24px 16px 40px; }
.ddc-sidebar { position: static; }
.ddc-sidebar__nav { flex-direction: row; flex-wrap: wrap; }
.ddc-auth-grid, .ddc-two-col, .ddc-field-grid { grid-template-columns: 1fr; }
.ddc-club-single { flex-direction: column; }
.ddc-pricing, .ddc-sub-summary { grid-template-columns: 1fr; }
.ddc-features-grid { grid-template-columns: 1fr; }
.ddc-pricing__card--panel { text-align: center; }
.ddc-pricing__card--panel .ddc-pricing__price { justify-content: center; }
.ddc-demo__features { grid-template-columns: 1fr; }
.ddc-demo__chart { height: 120px; }
}
/* =====================================================================
REDISEÑO PROFESIONAL v2 (basado en la maqueta de marca)
Fondo negro con textura roja facetada, tarjetas con borde neón rojo,
botones tipo pastilla, tipografía Inter. Sobrescribe los
componentes base manteniendo las mismas clases/markup.
===================================================================== */
/* ---- Fondo con textura (front + admin) ---- */
body.ddc-gestion-page {
background:
radial-gradient(1200px 720px at 8% -10%, rgba(255, 46, 46, .14), transparent 55%),
radial-gradient(1000px 720px at 112% 2%, rgba(255, 32, 32, .09), transparent 52%),
radial-gradient(1100px 820px at 92% 112%, rgba(255, 22, 22, .11), transparent 55%),
var(--ddc-bg) !important;
}
.ddc-neon {
background:
linear-gradient(62deg, rgba(255, 70, 70, .028) 1px, transparent 1.5px) 0 0 / 68px 68px,
linear-gradient(-62deg, rgba(255, 70, 70, .028) 1px, transparent 1.5px) 0 0 / 68px 68px,
radial-gradient(900px 520px at 14% -8%, rgba(255, 46, 46, .10), transparent 55%),
radial-gradient(800px 600px at 108% 6%, rgba(255, 30, 30, .07), transparent 52%),
var(--ddc-bg);
color: var(--ddc-text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.wrap.ddc-neon { border: 1px solid var(--ddc-border-2); border-radius: var(--ddc-radius); }
/* ---- Tipografía ---- */
.ddc-neon .ddc-title { font-family: var(--ddc-font-head); font-weight: 700; letter-spacing: .3px; text-transform: uppercase; font-size: 27px; }
.ddc-neon .ddc-subtitle { font-family: var(--ddc-font-head); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; font-size: 16px; }
.ddc-neon .ddc-glow { color: var(--ddc-red-soft); text-shadow: var(--ddc-glow-red); }
/* ---- Sidebar ---- */
.ddc-neon.ddc-app .ddc-sidebar,
.ddc-neon .ddc-sidebar {
background: linear-gradient(180deg, rgba(20, 14, 15, .82), rgba(10, 7, 8, .82));
border: 1px solid var(--ddc-border-2);
border-radius: 22px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 24px 60px rgba(0, 0, 0, .55);
backdrop-filter: blur(12px);
}
.ddc-neon .ddc-sidebar__logo { border-radius: 20px; box-shadow: 0 0 0 1px rgba(255, 60, 60, .25), 0 0 22px rgba(255, 46, 46, .28); border: none; }
.ddc-neon .ddc-sidebar__name { font-family: var(--ddc-font-head); font-weight: 700; }
.ddc-neon .ddc-navitem {
border: 1px solid rgba(255, 255, 255, .05);
background: rgba(255, 255, 255, .015);
border-radius: 13px;
margin-bottom: 2px;
font-family: var(--ddc-font-body);
font-weight: 500;
color: var(--ddc-muted);
}
.ddc-neon .ddc-navitem__bar { display: none; }
.ddc-neon .ddc-navitem:hover { background: rgba(255, 60, 60, .06); border-color: rgba(255, 60, 60, .28); color: #fff; }
.ddc-neon .ddc-navitem.is-active {
color: #fff;
background: linear-gradient(180deg, rgba(46, 22, 26, .7), rgba(22, 14, 15, .7));
border-color: rgba(255, 60, 60, .55);
box-shadow: 0 0 18px rgba(255, 46, 46, .30), inset 0 0 22px rgba(255, 46, 46, .10);
}
.ddc-neon .ddc-navitem.is-active .dashicons { color: var(--ddc-red-soft); text-shadow: var(--ddc-glow-red); }
.ddc-neon .ddc-navitem--logout { color: var(--ddc-red-soft); }
/* ---- Tarjetas KPI ---- */
.ddc-neon .ddc-card {
background: linear-gradient(158deg, rgba(44, 22, 26, .5), rgba(16, 11, 12, .5));
border: 1px solid rgba(255, 60, 60, .32);
border-radius: 20px;
box-shadow: 0 0 0 1px rgba(255, 46, 46, .12), 0 0 22px rgba(255, 46, 46, .16), inset 0 0 34px rgba(255, 46, 46, .05), 0 18px 40px rgba(0, 0, 0, .45);
backdrop-filter: blur(8px);
overflow: hidden;
}
.ddc-neon .ddc-card::before { display: none; }
.ddc-neon .ddc-card:hover { transform: translateY(-3px); border-color: rgba(255, 60, 60, .6); box-shadow: 0 0 0 1px rgba(255, 46, 46, .25), var(--ddc-glow-red), 0 22px 46px rgba(0, 0, 0, .5); }
.ddc-neon .ddc-card__value { font-family: var(--ddc-font-head); font-weight: 700; font-size: 44px; line-height: 1; }
.ddc-neon .ddc-card__label { font-weight: 500; }
/* ---- Paneles ---- */
.ddc-neon .ddc-panel {
background: linear-gradient(160deg, rgba(26, 19, 21, .62), rgba(14, 10, 11, .62));
border: 1px solid var(--ddc-border-2);
border-radius: 20px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 18px 44px rgba(0, 0, 0, .45);
backdrop-filter: blur(8px);
}
/* ---- Banner de prueba (contador) ---- */
.ddc-neon .ddc-trial-top {
background: linear-gradient(90deg, rgba(48, 20, 22, .55), rgba(16, 10, 11, .35));
border: 1px solid rgba(255, 60, 60, .55);
border-radius: 18px;
box-shadow: 0 0 0 1px rgba(255, 46, 46, .18), 0 0 30px rgba(255, 46, 46, .28), inset 0 0 46px rgba(255, 46, 46, .08);
padding: 16px 22px;
}
.ddc-neon .ddc-trial-top__num { font-family: var(--ddc-font-head); font-weight: 700; font-size: 50px; color: var(--ddc-red-soft); text-shadow: var(--ddc-glow-red); }
.ddc-neon .ddc-trial-top__txt strong { font-family: var(--ddc-font-head); font-weight: 700; }
/* ---- Botones (pastilla con glow) ---- */
.ddc-neon .ddc-btn {
font-family: var(--ddc-font-head);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .6px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(34, 24, 26, .92), rgba(18, 13, 14, .92));
border: 1px solid rgba(255, 60, 60, .5);
color: #fff;
box-shadow: 0 0 0 1px rgba(255, 46, 46, .10), 0 0 16px rgba(255, 46, 46, .22);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ddc-neon .ddc-btn:hover { transform: translateY(-1px); color: #fff; box-shadow: var(--ddc-glow-red-strong); }
.ddc-neon .ddc-btn--green { border-color: rgba(55, 227, 154, .55); box-shadow: 0 0 0 1px rgba(55, 227, 154, .10), 0 0 16px rgba(55, 227, 154, .25); }
.ddc-neon .ddc-btn--green:hover { box-shadow: 0 0 0 1px rgba(55, 227, 154, .4), 0 0 20px rgba(55, 227, 154, .45); }
.ddc-neon .ddc-btn--red { color: var(--ddc-red-soft); }
.ddc-neon .ddc-btn--yellow { border-color: rgba(255, 210, 30, .55); color: var(--ddc-yellow); box-shadow: 0 0 0 1px rgba(255, 210, 30, .1), 0 0 16px rgba(255, 210, 30, .25); }
.ddc-neon .ddc-btn--ghost { background: rgba(255, 255, 255, .03); border-color: var(--ddc-border-2); color: var(--ddc-muted); box-shadow: none; }
.ddc-neon .ddc-btn--ghost:hover { color: #fff; border-color: rgba(255, 60, 60, .4); box-shadow: 0 0 14px rgba(255, 46, 46, .2); }
/* ---- Inputs / selects / textarea ---- */
.ddc-neon .ddc-form input,
.ddc-neon .ddc-form select,
.ddc-neon .ddc-form textarea,
.ddc-neon .ddc-field input,
.ddc-neon .ddc-field select,
.ddc-neon .ddc-filters input,
.ddc-neon .ddc-filters select,
.ddc-neon .ddc-contable-add input {
background: rgba(255, 255, 255, .035);
border: 1px solid var(--ddc-border-2);
border-radius: 11px;
color: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.ddc-neon .ddc-form input:focus,
.ddc-neon .ddc-form select:focus,
.ddc-neon .ddc-form textarea:focus,
.ddc-neon .ddc-filters input:focus,
.ddc-neon .ddc-contable-add input:focus {
outline: none;
border-color: rgba(255, 60, 60, .6);
box-shadow: 0 0 0 3px rgba(255, 46, 46, .14);
}
/* ---- Tablas ---- */
.ddc-neon .ddc-table { width: 100%; border-collapse: collapse; }
.ddc-neon .ddc-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ddc-muted); padding: 10px 12px; border-bottom: 1px solid var(--ddc-border-2); font-weight: 600; }
.ddc-neon .ddc-table td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 14px; }
.ddc-neon .ddc-table tr:hover td { background: rgba(255, 60, 60, .04); }
/* ---- Badges / notices ---- */
.ddc-neon .ddc-badge { border-radius: 999px; font-weight: 600; }
.ddc-neon .ddc-notice { border-radius: 12px; }
/* ---- Contacto (imagen de marca) ---- */
.ddc-neon .ddc-contact__btn {
background: linear-gradient(120deg, rgba(48, 20, 22, .55), rgba(16, 10, 11, .55));
border: 1px solid rgba(255, 60, 60, .5);
border-radius: 18px;
box-shadow: 0 0 0 1px rgba(255, 46, 46, .12), 0 0 20px rgba(255, 46, 46, .22);
padding: 16px 18px;
}
.ddc-neon .ddc-contact__img { flex: none; width: 108px; height: 72px; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 60, 60, .3), 0 0 16px rgba(255, 46, 46, .25); }
.ddc-neon .ddc-contact__txt strong { font-family: var(--ddc-font-head); font-weight: 600; }
/* ---- Cabeceras de sección con acento ---- */
.ddc-neon .ddc-content > .ddc-title { position: relative; padding-left: 14px; }
.ddc-neon .ddc-content > .ddc-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 26px; border-radius: 3px; background: linear-gradient(180deg, var(--ddc-red), var(--ddc-red-deep)); box-shadow: var(--ddc-glow-red); }
.ddc-neon .ddc-content > .ddc-title--green::before { background: linear-gradient(180deg, var(--ddc-green), #14b866); box-shadow: 0 0 12px rgba(55, 227, 154, .5); }
/* =====================================================================
TIPOGRAFÍA FINA Y ESTERILIZADA (Inter, pesos ligeros + tracking amplio)
Aspecto limpio y minimalista. Va al final para prevalecer.
===================================================================== */
.ddc-neon,
.ddc-neon input,
.ddc-neon select,
.ddc-neon textarea,
.ddc-neon button {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ddc-neon { font-weight: 400; }
/* ---- TEXTOS GRANDES (se mantienen en negrita, estaban perfectos) ----
Títulos de sección («Altas», «PANEL DEL CLUB»), nombre del club y números
grandes (KPI, contador de días). NO se afinan. */
.ddc-neon .ddc-title { font-weight: 800; letter-spacing: .2px; text-transform: uppercase; font-size: 30px; }
.ddc-neon .ddc-sidebar__name { font-weight: 800; letter-spacing: .4px; font-size: 20px; }
.ddc-neon .ddc-card__value { font-weight: 800; font-size: 46px; letter-spacing: -1px; }
.ddc-neon .ddc-card__value.ddc-glow { text-shadow: var(--ddc-glow-red); }
.ddc-neon .ddc-trial-top__num { font-weight: 800; font-size: 52px; letter-spacing: -1px; text-shadow: var(--ddc-glow-red); }
.ddc-neon .ddc-demo__amount,
.ddc-neon .ddc-pricing__amount { font-weight: 800; letter-spacing: -1px; }
.ddc-neon .ddc-demo__claim { font-weight: 800; }
/* ---- MENÚS Y TEXTO GENERAL (finos y limpios) ---- */
.ddc-neon .ddc-navitem { font-weight: 400; font-size: 15px; letter-spacing: .2px; text-transform: none; }
.ddc-neon .ddc-navitem.is-active { font-weight: 500; }
.ddc-neon .ddc-subtitle { font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; font-size: 15px; color: #ececef; }
.ddc-neon .ddc-trial-top__txt strong { font-weight: 500; text-transform: uppercase; letter-spacing: 1px; font-size: 15px; }
.ddc-neon .ddc-card__label { font-weight: 400; text-transform: uppercase; letter-spacing: 1.3px; font-size: 11.5px; }
.ddc-neon .ddc-btn { font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; font-size: 12px; }
.ddc-neon .ddc-btn--lg { font-size: 13px; }
.ddc-neon .ddc-auth-brand { font-weight: 500; letter-spacing: 1px; }
.ddc-neon .ddc-donut__num,
.ddc-neon .ddc-contable-row__v,
.ddc-neon .ddc-impagados-total__num,
.ddc-neon .ddc-month-nav__label { font-weight: 500; }
/* Aspecto más esterilizado: bordes/hover un punto más suaves. */
.ddc-neon .ddc-card { border-radius: 16px; }
.ddc-neon .ddc-panel { border-radius: 16px; }
.ddc-neon .ddc-glow { text-shadow: 0 0 12px rgba(255, 46, 46, .4); }
.ddc-neon strong, .ddc-neon b { font-weight: 600; }
/* Quita el subrayado que algunos temas aplican a los enlaces del menú lateral
(aparecía una barra bajo el icono y otra bajo el texto) y a los botones. */
.ddc-neon .ddc-navitem,
.ddc-neon .ddc-navitem:hover,
.ddc-neon .ddc-navitem:focus,
.ddc-neon .ddc-navitem .dashicons,
.ddc-neon .ddc-navitem .ddc-navitem__lbl,
.ddc-neon a.ddc-btn,
.ddc-neon a.ddc-btn:hover,
.ddc-neon a.ddc-navitem:hover { text-decoration: none !important; }
/* Campo grande para la cuota personalizada. */
.ddc-neon input.ddc-input-lg { font-size: 20px; padding: 14px 16px; font-weight: 600; }
/* Filas de cobro pendiente / devuelto: acento rojo a la izquierda. */
.ddc-neon .ddc-row-due td { background: rgba(255, 46, 46, .06); }
.ddc-neon .ddc-row-due td:first-child { box-shadow: inset 3px 0 0 var(--ddc-red); }
/* Botón deshabilitado (mes anterior al alta del club). */
.ddc-neon .ddc-btn.is-disabled { opacity: .35; cursor: not-allowed; pointer-events: none; box-shadow: none; }
/* ---- Estadísticas: gráfico de área + barras horizontales ---- */
.ddc-neon .ddc-area { width: 100%; height: 150px; display: block; }
.ddc-neon .ddc-area polyline { filter: drop-shadow(0 0 6px rgba(255,46,46,.5)); }
.ddc-neon .ddc-area-x { display: flex; justify-content: space-between; margin-top: 6px; color: var(--ddc-muted); font-size: 11.5px; }
.ddc-neon .ddc-hbars { display: flex; flex-direction: column; gap: 12px; }
.ddc-neon .ddc-hbar { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 12px; }
.ddc-neon .ddc-hbar__lbl { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddc-neon .ddc-hbar__track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.ddc-neon .ddc-hbar__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ddc-red-soft), var(--ddc-red-deep)); box-shadow: 0 0 10px rgba(255,46,46,.5); }
.ddc-neon .ddc-hbar__val { text-align: right; font-weight: 600; color: #fff; font-size: 14px; }
@media (max-width: 560px) { .ddc-neon .ddc-hbar { grid-template-columns: 96px 1fr 32px; } }
/* ── Validación en vivo del alta (marcas verde / rojo) ── */
.ddc-small { font-size: 12.5px; margin-top: -4px; }
.ddc-vfield { position: relative; }
.ddc-vfield .ddc-vmark {
position: absolute;
right: 12px;
bottom: 12px;
width: 18px;
height: 18px;
border-radius: 999px;
opacity: 0;
transition: opacity .15s ease;
pointer-events: none;
}
.ddc-vfield .ddc-vmark::after {
content: '';
position: absolute;
inset: 0;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
.ddc-vfield.is-ok .ddc-vmark,
.ddc-vfield.is-bad .ddc-vmark { opacity: 1; }
.ddc-vfield.is-ok .ddc-vmark {
background: rgba(55, 227, 154, .18);
box-shadow: 0 0 8px rgba(55, 227, 154, .45);
}
.ddc-vfield.is-ok .ddc-vmark::after {
background-image: url("data:image/svg+xml;utf8,");
}
.ddc-vfield.is-bad .ddc-vmark {
background: rgba(255, 46, 46, .18);
box-shadow: 0 0 8px rgba(255, 46, 46, .4);
}
.ddc-vfield.is-bad .ddc-vmark::after {
background-image: url("data:image/svg+xml;utf8,");
}
.ddc-neon .ddc-vfield.is-ok input { border-color: rgba(55, 227, 154, .6); box-shadow: 0 0 0 1px rgba(55, 227, 154, .18); }
.ddc-neon .ddc-vfield.is-bad input { border-color: rgba(255, 46, 46, .6); box-shadow: 0 0 0 1px rgba(255, 46, 46, .18); }
.ddc-vfield input { padding-right: 40px; }
/* Lista de requisitos de la contraseña */
.ddc-pwreq { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ddc-pwreq li { position: relative; padding-left: 26px; font-size: 13px; color: var(--ddc-muted); transition: color .15s ease; }
.ddc-pwreq li::before {
content: '○';
position: absolute;
left: 6px;
top: 0;
font-weight: 700;
}
.ddc-pwreq li.ok { color: var(--ddc-green); }
.ddc-pwreq li.ok::before { content: '✓'; }
.ddc-pwreq li.bad { color: var(--ddc-red-soft); }
.ddc-pwreq li.bad::before { content: '✕'; }
/* Botón deshabilitado hasta que el formulario es válido */
.ddc-btn.is-disabled, .ddc-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* Formulario de alta: un poco más de aire entre secciones */
.ddc-alta-form .ddc-subtitle { margin-top: 22px; }
/* ── Marco de acceso «¿Ya tienes cuenta?» a TODO el ancho, rojo neón ── */
.ddc-auth-screen--full {
display: block;
min-height: 0;
padding: 0;
margin-bottom: 20px;
}
.ddc-auth-screen--full .ddc-auth-box--neon,
.ddc-auth-box--neon {
width: 100% !important;
max-width: none !important; /* mismo ancho que el bloque de arriba */
box-sizing: border-box;
margin: 0;
border-radius: var(--ddc-radius);
border: 1.5px solid rgba(255, 70, 70, .8);
padding: 40px 36px;
position: relative;
overflow: hidden;
/* Fondo ROJO con degradado + brillo neón. */
background:
radial-gradient(130% 160% at 50% -30%, rgba(255, 60, 60, .38), transparent 62%),
linear-gradient(180deg, rgba(150, 22, 26, .55) 0%, rgba(60, 10, 14, .85) 45%, rgba(22, 8, 10, .95) 100%);
box-shadow:
0 0 0 1px rgba(255, 60, 60, .35),
0 0 26px rgba(255, 46, 46, .45),
0 0 70px rgba(255, 46, 46, .25),
inset 0 0 40px rgba(255, 46, 46, .10);
animation: ddcNeonPulse 3s ease-in-out infinite;
}
/* Barra superior de neón que recorre el marco (luz en movimiento) */
.ddc-auth-box--neon::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--ddc-red) 20%, var(--ddc-red-soft) 50%, var(--ddc-red) 80%, transparent 100%);
background-size: 220% 100%;
box-shadow: var(--ddc-glow-red);
animation: ddcSweep 4s linear infinite;
}
/* Barrido de luz diagonal por encima del marco */
@keyframes ddcSweep {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
@keyframes ddcSheen {
0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
18% { opacity: .55; }
40% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
/* Resplandor rojo tenue en la esquina inferior */
.ddc-auth-box--neon::after {
content: "";
position: absolute;
right: -60px;
bottom: -80px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 46, 46, .22), transparent 65%);
pointer-events: none;
}
.ddc-auth-box--neon > * { position: relative; z-index: 1; }
.ddc-authneon__head { text-align: center; margin-bottom: 20px; }
.ddc-auth-box--neon .ddc-auth-brand { font-size: 30px; }
/* Título «¿Ya tienes cuenta?»: ambas partes en blanco (no rojo). */
.ddc-auth-box--neon .ddc-auth-brand,
.ddc-auth-box--neon .ddc-auth-brand .ddc-glow,
.ddc-neon .ddc-auth-box--neon .ddc-auth-brand .ddc-glow { color: #fff; text-shadow: none; }
.ddc-auth-box--neon .ddc-auth-tagline { margin-bottom: 0; }
.ddc-authgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ddc-authneon__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-top: 14px;
}
.ddc-authneon__actions .ddc-check { margin: 0; }
.ddc-authneon__actions .ddc-btn { margin: 0; min-width: 180px; text-align: center; }
@keyframes ddcNeonPulse {
0%, 100% {
box-shadow:
0 0 0 1px rgba(255, 46, 46, .25),
0 0 18px rgba(255, 46, 46, .30),
0 0 50px rgba(255, 46, 46, .15),
inset 0 0 30px rgba(255, 46, 46, .05);
}
50% {
box-shadow:
0 0 0 1px rgba(255, 46, 46, .50),
0 0 32px rgba(255, 46, 46, .60),
0 0 85px rgba(255, 46, 46, .32),
inset 0 0 42px rgba(255, 46, 46, .12);
}
}
/* Botón rojo neón llamativo (Entrar) */
.ddc-btn--neon {
border-color: var(--ddc-red);
background: linear-gradient(180deg, #2a1113, #17090b);
color: #fff;
text-shadow: 0 0 8px rgba(255, 90, 90, .6);
box-shadow: 0 0 10px rgba(255, 46, 46, .5), inset 0 0 0 1px rgba(255, 46, 46, .3);
animation: ddcBtnPulse 2.2s ease-in-out infinite;
}
.ddc-btn--neon:hover {
transform: translateY(-1px);
box-shadow: 0 0 20px rgba(255, 46, 46, .85), 0 0 40px rgba(255, 46, 46, .5);
}
@keyframes ddcBtnPulse {
0%, 100% { box-shadow: 0 0 8px rgba(255, 46, 46, .40), inset 0 0 0 1px rgba(255, 46, 46, .25); }
50% { box-shadow: 0 0 22px rgba(255, 46, 46, .80), inset 0 0 0 1px rgba(255, 46, 46, .55); }
}
@media (max-width: 700px) {
.ddc-authgrid { grid-template-columns: 1fr; }
.ddc-authneon__actions { flex-direction: column; align-items: stretch; }
.ddc-authneon__actions .ddc-btn { width: 100%; }
}
/* ── Demo: alternar pop de precios ↔ recuadro de acceso SIN salir de la página ──
El recuadro de acceso está oculto; al pulsar «Entrar» (href=#ddc-demo-login) se
muestra y oculta el pop de precios, manteniendo el fondo borroso del panel. */
.ddc-demo__overlay--login { display: none; }
.ddc-demo__overlay--login:target { display: flex; }
.ddc-demo__overlay--login:target ~ #ddc-demo-pricing { display: none; }
.ddc-demo__overlay--login.is-open { display: flex; } /* al volver tras un login fallido */
.ddc-demo__overlay.is-hidden { display: none; }
/* Recuadro de acceso de la demo: rojo neón (modal centrado sobre el fondo) */
.ddc-demo__card--login {
max-width: 480px;
text-align: left;
position: relative;
overflow: hidden;
border: 1.5px solid rgba(255, 70, 70, .8);
background:
radial-gradient(130% 160% at 50% -30%, rgba(255, 60, 60, .40), transparent 62%),
linear-gradient(180deg, rgba(150, 22, 26, .60) 0%, rgba(45, 10, 14, .92) 55%, rgba(20, 8, 10, .96) 100%);
box-shadow:
0 30px 90px rgba(0, 0, 0, .70),
0 0 26px rgba(255, 46, 46, .45),
0 0 70px rgba(255, 46, 46, .25),
inset 0 0 40px rgba(255, 46, 46, .12);
animation: ddcNeonPulse 3s ease-in-out infinite;
}
.ddc-demo__card--login::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--ddc-red) 20%, var(--ddc-red-soft) 50%, var(--ddc-red) 80%, transparent 100%);
background-size: 220% 100%;
box-shadow: var(--ddc-glow-red);
animation: ddcSweep 4s linear infinite;
}
.ddc-demo__card--login > * { position: relative; z-index: 1; }
.ddc-demo__card--login .ddc-auth-brand {
text-align: center;
font-family: var(--ddc-font-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 26px;
margin: 0 0 2px;
text-shadow: 0 0 14px rgba(255, 46, 46, .55);
}
.ddc-demo__card--login .ddc-demo__tag { text-align: center; }
.ddc-demo__card--login .ddc-demo__login { text-align: center; }
.ddc-demo__loginform { margin-top: 14px; }
.ddc-demo__loginform label { margin-bottom: 10px; }
.ddc-demo__card--login .ddc-btn--neon { width: 100%; text-align: center; margin-top: 6px; }
/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
.ddc-auth-box--neon, .ddc-btn--neon, .ddc-demo__card--login,
.ddc-auth-box--neon::before, .ddc-demo__card--login::before { animation: none; }
}