/* ============================================================
   Tema Diglixo — identidad de marca aplicada con criterio:
   · Login/registro: acogedor, con un toque de personalidad.
   · Panel/dashboard: limpio y profesional (herramienta de uso diario).
   Misma paleta, logo y tipografia que la landing; peso adecuado a cada medio.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --dg-teal:#17A08B; --dg-teal-d:#0F7C6C; --dg-teal-dd:#0B5F52; --dg-teal-soft:#E7F4F1;
  --dg-ink:#1B1A17; --dg-muted:#6B675E; --dg-faint:#726C61;
  --dg-yellow:#FFC900; --dg-red:#E8482A;
  --dg-bg:#F7F6F2; --dg-surface:#FFFFFF; --dg-line:#EAE7DE; --dg-line-2:#DED9CC;
  --dg-font:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --dg-display:'Bricolage Grotesque','Plus Jakarta Sans', sans-serif;
  --dg-shadow:0 1px 2px rgba(27,26,23,.04), 0 12px 28px -16px rgba(27,26,23,.22);
  --dg-shadow-sm:0 1px 2px rgba(27,26,23,.05), 0 6px 16px -12px rgba(27,26,23,.2);
}

/* Tipografia coherente */
body, .sb-admin, .sb-cloud-box, .sb-account-box, input, textarea, select, button, .sb-btn, .sb-text{
  font-family:var(--dg-font) !important;
}
.sb-title, .sb-account-box .sb-top-bar h2, .addons-title, h1,h2,h3,h4{ font-family:var(--dg-display) !important; }

body{ background:var(--dg-bg) !important; color:var(--dg-ink) !important; }

/* ============================================================
   1) PANTALLAS DE ACCESO (login / registro / reset)
   Acogedor: fondo con un leve tinte de marca, tarjeta limpia con
   sombra suave, acento teal. Sin bordes duros.
   ============================================================ */
body:not(:has(.sb-account-box)){
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; padding:70px 16px 50px;
  background:
    radial-gradient(60% 60% at 85% 5%, rgba(23,160,139,.08), transparent 60%),
    radial-gradient(55% 55% at 8% 95%, rgba(255,201,0,.10), transparent 60%),
    var(--dg-bg) !important;
}

.sb-cloud-box{
  width:100% !important; max-width:440px !important; box-sizing:border-box;
  background:var(--dg-surface) !important;
  border:1px solid var(--dg-line) !important;
  border-radius:20px !important;
  box-shadow:var(--dg-shadow) !important;
  padding:38px 34px !important;
}
.sb-registration-box.sb-cloud-box{ max-width:460px !important; }
.sb-cloud-box .sb-top-bar{ text-align:left; }
.sb-cloud-box .sb-top-bar a.dg-logo{ display:inline-block; }
.sb-cloud-box .sb-top-bar img{ height:34px !important; width:auto !important; margin-bottom:20px; }
.sb-cloud-box .sb-title{ font-weight:700 !important; color:var(--dg-ink) !important; letter-spacing:-.02em; font-size:1.5rem !important; }
.sb-cloud-box .sb-text{ color:var(--dg-muted) !important; }

.sb-cloud-box .sb-input input{
  width:100% !important; box-sizing:border-box;
  border:1px solid var(--dg-line-2) !important; border-radius:11px !important;
  background:var(--dg-surface) !important; transition:border-color .15s, box-shadow .15s;
}
.sb-cloud-box .sb-input input:focus{
  border-color:var(--dg-teal) !important; box-shadow:0 0 0 3px var(--dg-teal-soft) !important; outline:none !important;
}

/* Un toque de personalidad, sutil: mascota pequena sobre la tarjeta activa */
.sb-cloud-box.active{ position:relative; margin-top:34px; }
.sb-cloud-box.active::before{
  content:''; position:absolute; top:-46px; left:50%; transform:translateX(-50%);
  width:78px; height:72px; z-index:2; pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(23,160,139,.28));
  background:no-repeat center/contain url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 120'><path d='M30 22 Q16 22 16 40 L16 74 Q16 90 34 90 L44 90 L40 108 Q58 96 60 90 L96 90 Q114 90 114 72 L114 40 Q114 22 96 22 Z' fill='%2317A08B'/><circle cx='52' cy='54' r='6' fill='%23fff'/><circle cx='78' cy='54' r='6' fill='%23fff'/><circle cx='53' cy='55' r='2.6' fill='%231B1A17'/><circle cx='79' cy='55' r='2.6' fill='%231B1A17'/><path d='M50 67 Q65 79 80 67' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/></svg>");
}

/* ============================================================
   2) BOTONES (limpios, con acento de marca — sin sombra dura)
   ============================================================ */
.btn-login, .btn-register, .btn-reset-password, .btn-reset-password-2,
.sb-account-box .sb-btn:not(.sb-btn-text), .sb-cloud-box .sb-btn:not(.sb-btn-text),
.sb-btn-dashboard{
  background:var(--dg-teal-d) !important; color:#fff !important;
  border:0 !important; border-radius:11px !important; font-weight:700 !important;
  box-shadow:0 3px 0 var(--dg-teal-dd) !important;
  transition:background .14s, transform .1s, box-shadow .1s !important;
}
.btn-login:hover, .btn-register:hover, .btn-reset-password:hover, .btn-reset-password-2:hover,
.sb-account-box .sb-btn:not(.sb-btn-text):hover, .sb-cloud-box .sb-btn:not(.sb-btn-text):hover,
.sb-btn-dashboard:hover{ background:var(--dg-teal) !important; transform:translateY(-1px); box-shadow:0 4px 0 var(--dg-teal-dd) !important; }
.btn-login:active, .btn-register:active, .btn-reset-password:active, .btn-reset-password-2:active,
.sb-account-box .sb-btn:not(.sb-btn-text):active, .sb-cloud-box .sb-btn:not(.sb-btn-text):active,
.sb-btn-dashboard:active{ transform:translateY(2px) !important; box-shadow:0 1px 0 var(--dg-teal-dd) !important; }

/* Enlaces / textos-boton */
.sb-text.btn-registration-box, .sb-text.btn-forgot-password, .sb-text.btn-cancel-reset-password,
.sb-btn-login-box, .btn-text, a{
  color:var(--dg-teal-d) !important; cursor:pointer;
  transition:color .14s, text-decoration-color .14s;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
}
.sb-text.btn-registration-box:hover, .sb-text.btn-forgot-password:hover,
.sb-text.btn-cancel-reset-password:hover, .sb-btn-login-box:hover, .btn-text:hover, a:hover{
  color:var(--dg-teal-dd) !important; text-decoration-color:var(--dg-teal-dd);
}
.sb-cloud-box .sb-text.btn-registration-box, .sb-cloud-box .sb-btn-login-box{ font-weight:700 !important; }

/* ============================================================
   3) PANEL / DASHBOARD — limpio y profesional
   ============================================================ */
/* Barra superior */
.sb-account-box .sb-top-bar{
  background:var(--dg-surface) !important; border-bottom:1px solid var(--dg-line) !important;
  padding:14px 24px !important; align-items:center;
}
.sb-account-box .sb-top-bar h2{ color:var(--dg-ink) !important; font-weight:700 !important; }

/* Menu lateral */
.sb-account-box .sb-nav{ border-right:1px solid var(--dg-line) !important; background:var(--dg-surface) !important; }
.sb-account-box .sb-nav ul li{
  font-weight:600 !important; color:var(--dg-muted) !important; border-radius:9px;
  padding:10px 12px !important; margin:1px 6px !important; transition:background .14s, color .14s;
}
.sb-account-box .sb-nav ul li:hover{ color:var(--dg-ink) !important; background:rgba(27,26,23,.04); }
.sb-account-box .sb-nav ul li.sb-active{ color:var(--dg-teal-d) !important; background:var(--dg-teal-soft) !important; }
.sb-account-box .sb-nav ul li.sb-active:after{ display:none !important; }

/* Titulos de seccion */
.sb-tab .sb-content .addons-title{
  color:var(--dg-ink) !important; font-weight:700 !important;
  border-bottom:1px solid var(--dg-line) !important; padding-bottom:16px !important;
}
.sb-tab .sb-content p{ color:var(--dg-muted) !important; }

/* Cajas resumen (uso mensual / membresia activa) */
.sb-tab .sb-content .box-black{
  background:var(--dg-surface) !important; color:var(--dg-ink) !important;
  border:1px solid var(--dg-line) !important; border-radius:16px !important;
  box-shadow:var(--dg-shadow-sm) !important; padding:22px 26px !important;
}
.box-membership .box-black:first-child{
  background:linear-gradient(135deg, var(--dg-teal), var(--dg-teal-d)) !important; border-color:transparent !important;
}
.sb-tab .sb-content .box-black h2{
  color:var(--dg-muted) !important; font-weight:700 !important; font-size:.8rem !important;
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px 0 !important;
}
.sb-tab .sb-content .box-black div{ color:var(--dg-ink) !important; }
.sb-tab .sb-content .box-black .membership-name{ color:var(--dg-teal-d) !important; }
.sb-tab .sb-content .box-black div span + span{ color:var(--dg-muted) !important; font-weight:600 !important; }
/* La caja teal: TODO el texto en blanco (va despues para ganar en cascada) */
.sb-tab .sb-content .box-membership .box-black:first-child h2,
.sb-tab .sb-content .box-membership .box-black:first-child div,
.sb-tab .sb-content .box-membership .box-black:first-child div span + span,
.sb-tab .sb-content .box-membership .box-black:first-child span{ color:#fff !important; }
.sb-tab .sb-content .box-membership .box-black:first-child .membership-quota{ color:rgba(255,255,255,.9) !important; }
@media (max-width:640px){ .sb-tab .sb-content .box-membership .box-black{ width:100% !important; } }

/* Inputs del panel */
.sb-account-box .sb-setting input, .sb-account-box .sb-setting textarea, .sb-account-box .sb-setting select,
.sb-account-box .sb-input input, .sb-account-box .sb-input select, .sb-account-box .sb-input textarea{
  border:1px solid var(--dg-line-2) !important; border-radius:10px !important;
  background:var(--dg-surface) !important; color:var(--dg-ink) !important;
}
.sb-account-box .sb-setting input:focus, .sb-account-box .sb-setting textarea:focus,
.sb-account-box .sb-input input:focus{ border-color:var(--dg-teal) !important; box-shadow:0 0 0 3px var(--dg-teal-soft) !important; outline:none !important; }
.sb-direct-link input{ cursor:pointer; }

/* Tablas */
.sb-account-box .sb-table{ border:1px solid var(--dg-line) !important; border-radius:14px !important; overflow:hidden; border-collapse:separate !important; border-spacing:0; }
.sb-account-box .sb-table thead, .sb-account-box .sb-table tr:first-child{ background:var(--dg-bg) !important; }
.sb-account-box .sb-table thead th, .sb-account-box .sb-table tr:first-child > *{ color:var(--dg-muted) !important; font-weight:700 !important; text-transform:uppercase; font-size:.76rem; letter-spacing:.04em; }
.sb-account-box .sb-table td, .sb-account-box .sb-table th{ border-color:var(--dg-line) !important; }
.sb-account-box .sb-table .sb-invoice-row{ cursor:pointer; }
.sb-account-box .sb-table .sb-invoice-row:hover{ background:var(--dg-teal-soft) !important; }

/* Grafico de uso */
#chart-usage{ border:1px solid var(--dg-line) !important; border-radius:14px !important; background:var(--dg-surface) !important; padding:12px !important; box-shadow:var(--dg-shadow-sm) !important; }

/* ============================================================
   4) PLANES — tarjetas limpias con acento de marca
   ============================================================ */
#plans{ display:flex !important; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:8px; }
#plans > div{
  position:relative; flex:1 1 210px; max-width:270px; display:flex; flex-direction:column;
  background:var(--dg-surface) !important; color:var(--dg-ink) !important;
  border:1px solid var(--dg-line) !important; border-radius:16px !important;
  box-shadow:var(--dg-shadow-sm) !important; padding:26px 24px !important;
  cursor:pointer; transition:transform .15s, box-shadow .2s, border-color .15s !important;
}
#plans > div:hover{ transform:translateY(-3px); box-shadow:var(--dg-shadow) !important; border-color:var(--dg-line-2) !important; }
#plans > div h4{ order:-1; font-weight:700 !important; font-size:1.05rem !important; color:var(--dg-ink) !important; margin:0 0 4px !important; }
#plans > div h3{ font-weight:800 !important; font-size:2.1rem !important; color:var(--dg-ink) !important; line-height:1 !important; margin:2px 0 14px !important; }
#plans > div h3 .plan-per{ font-family:var(--dg-font) !important; font-size:.82rem !important; font-weight:600; color:var(--dg-muted) !important; letter-spacing:0; }
#plans > div p{ color:var(--dg-muted) !important; font-size:.9rem !important; line-height:1.7 !important; margin:0 !important; }

/* Toda la paleta: franja superior de color distinta por tarjeta */
#plans > div{ border-top-width:5px !important; border-top-style:solid !important; overflow:hidden; }
#plans > div:nth-child(3n+1){ border-top-color:var(--dg-teal) !important; }
#plans > div:nth-child(3n+2){ border-top-color:var(--dg-yellow) !important; }
#plans > div:nth-child(3n+3){ border-top-color:var(--dg-pink, #FF90E8) !important; }
/* punto de color junto al nombre, a juego con la franja */
#plans > div h4::before{ content:''; display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
#plans > div:nth-child(3n+1) h4::before{ background:var(--dg-teal); }
#plans > div:nth-child(3n+2) h4::before{ background:var(--dg-yellow); }
#plans > div:nth-child(3n+3) h4::before{ background:var(--dg-pink, #FF90E8); }

/* Plan activo: acento teal limpio + etiqueta (sin ovalo desplegable) */
#plans > div[data-active-membership]{ border:1.5px solid var(--dg-teal) !important; box-shadow:0 0 0 4px var(--dg-teal-soft), var(--dg-shadow-sm) !important; }
#plans > div .active-membership-info{
  display:inline-block !important; position:static !important; animation:none !important;
  background:var(--dg-teal-d) !important; color:#fff !important;
  left:auto; right:auto; bottom:auto; border-radius:100px !important;
  font-size:.64rem !important; font-weight:700 !important; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 12px !important; margin:0 0 12px 0 !important; width:max-content !important; max-width:100%;
}
#plans > div[data-expired] .active-membership-info{ background:var(--dg-red) !important; }

/* Add-ons: mismas tarjetas limpias */
#addons > div{ background:var(--dg-surface) !important; border:1px solid var(--dg-line) !important; border-radius:16px !important; box-shadow:var(--dg-shadow-sm) !important; padding:24px !important; }
#addons > div h3{ color:var(--dg-teal-d) !important; }

/* Banner de aviso */
.banner{ border-radius:12px !important; }

/* Menu desplegable de planes (Monthly / Annually) */
.plans-box-menu{ margin:0 auto 20px !important; }

/* Pie de las tarjetas de acceso: boton a todo el ancho + textos centrados en una linea */
.sb-cloud-box .sb-bottom{
  display:flex !important; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:6px; margin-top:6px;
}
.sb-cloud-box .sb-bottom .sb-btn{
  flex:1 1 100%; text-align:center; margin:0 0 14px 0 !important; padding:13px 0 !important;
}
.sb-cloud-box .sb-bottom .sb-text{ margin:0 !important; white-space:nowrap; }
/* El enlace de accion pegado a su frase */
.sb-cloud-box .sb-bottom div + .sb-btn-login-box,
.sb-cloud-box .sb-bottom div + .btn-registration-box{ margin-left:4px !important; }

/* ============================================================
   Boton "Cancel subscription": estilo de marca (accion destructiva)
   + despegado del fondo. Los <hr><hr> dobles se compactan.
   ============================================================ */
#tab-membership{ padding-bottom:36px; }
#tab-membership hr{ border:0; border-top:1px solid var(--dg-line); margin:28px 0; }
#tab-membership hr + hr{ display:none; }
#cancel-subscription{
  display:inline-flex !important; align-items:center; gap:8px;
  margin:6px 0 28px 0 !important; padding:12px 22px !important;
  border:1.5px solid var(--dg-red) !important; border-radius:11px !important;
  color:#B5321A !important; background:#FDEEEA !important;
  font-weight:700 !important; font-size:.95rem !important; cursor:pointer;
  box-shadow:0 3px 0 rgba(181,50,26,.3) !important;
  transition:background .15s, color .15s, transform .1s, box-shadow .1s !important;
}
#cancel-subscription:hover{
  background:#C93A1F !important; color:#fff !important;
  transform:translateY(-1px); box-shadow:0 4px 0 #8F2814 !important;
}
#cancel-subscription:active{ transform:translateY(2px); box-shadow:0 1px 0 #8F2814 !important; }
#cancel-subscription i{ font-size:.8em !important; }
/* Aviso de renovacion cancelada tambien con aire */
#tab-membership > p:last-child{ margin:6px 0 28px !important; }
@media (max-width:640px){
  #cancel-subscription{ width:100%; justify-content:center; box-sizing:border-box; margin-bottom:34px !important; }
}



/* Iconos invisibles hasta que su fuente carga (lista COMPLETA autogenerada) */
html.dg-icons-loading [class^="sb-icon-"]:before,
html.dg-icons-loading [class*=" sb-icon-"]:before,
html.dg-icons-loading .sb-list .sb-message-attachments a:before,
html.dg-icons-loading .sb-editor .sb-bar-icons>div:before,
html.dg-icons-loading .sb-editor.sb-drag:before,
html.dg-icons-loading .sb-loading:before,
html.dg-icons-loading .sb-loader:before,
html.dg-icons-loading .sb-input>input[type="checkbox"]:checked:before,
html.dg-icons-loading .sb-input-image .image:before,
html.dg-icons-loading .sb-select p:after,
html.dg-icons-loading .sb-table input[type="checkbox"]:checked:before,
html.dg-icons-loading .sb-collapse>.sb-collapse-btn:after,
html.dg-icons-loading .sb-admin>.sb-header>.sb-admin-nav>div>a:before,
html.dg-icons-loading .sb-enlarger:not(.sb-active):before,
html.dg-icons-loading .sb-table-users th.sb-active:after,
html.dg-icons-loading .sb-setting input[type="checkbox"]:checked:before,
html.dg-icons-loading .sb-setting.sb-type-upload-image .image:before,
html.dg-icons-loading .sb-setting [data-type="upload-image"] .image:before,
html.dg-icons-loading .sb-timetable>div>div>div:after,
html.dg-icons-loading .codex-editor:after,
html.dg-icons-loading .sb-onboarding-box .sb-setting .sb-btn.sb-active:after{ opacity:0 !important; }