:root {
	--primary: #818cf8;
	--bg: #0f172a;
	--card-bg: rgba(30, 41, 59, 0.7);
	--text-main: #f8f8f8;
	--text-muted: #b8b8b8;
	--danger: #ef4444;
	--success: #10b981;
	--warning: #f17e1f;
	--info: #6366f1;
	--info-light: #438bdd;
	--border-color: rgba(255, 255, 255, 0.1);
	--border-radius: 12px;
	--mini-border-radius: 6px;
	--card-border-radius: 20px;
	--sidebar-bg: rgba(30, 41, 59, 0.5);
	--input-bg: rgba(15, 23, 42, 0.6);
	--table-header-bg: rgba(15, 23, 42, 0.4);
	--table-hover-bg: rgba(255, 255, 255, 0.02);
	--nav-active-bg: color-mix(in srgb, var(--primary) 20%, transparent);
	--nav-active-text: #ffffff;
	--overlay-bg: rgba(15, 23, 42, 0.6);
	--transition: all 0.3s ease;
	--card-shadow: 0 15px 25px -6px rgba(0, 0, 0, 0.5);
	--hamburger-bg: rgba(15, 23, 42, 0.85);
	--superadmin-primary: #1F74FC;
	--btn-shadow: 0 5px 15px -6px rgba(0, 0, 0, 0.4);
	--contrast: #ffffff;
	--dark-grey:#444444;
	--margin-bottom: 24px;
}

/* Tema Business (Light Mode) */
[data-theme="business"] {
	--bg: #f8f8f8;
	--card-bg: #ffffff;
	--text-main: #383838;
	--text-muted: #777777;
	--border-color: #e2e8f0;
	--sidebar-bg: #ffffff;
	--input-bg: #ffffff;
	--table-header-bg: #f1f5f9;
	--table-hover-bg: rgba(0, 0, 0, 0.02);
	--nav-active-bg: color-mix(in srgb, var(--primary) 10%, transparent);
	--nav-active-text: var(--primary);
	--overlay-bg: rgba(255, 255, 255, 0.7);
	--card-shadow: 0 15px 25px -6px rgba(0, 0, 0, 0.1);
	--hamburger-bg: rgba(255, 255, 255, 0.95);
	--contrast: #000000;
	--dark-grey:#444444;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
a { transition: var(--transition); color:var(--text-muted)}
button{font-family:Outfit;font-style:normal;font-weight:300;text-decoration: none;border: none;cursor: pointer;}
body{font-family:Outfit,sans-serif;background-color:var(--bg);color:var(--text-main);min-height:100vh;font-weight:300}
h1,h2,h3,h4,h5 { font-weight: 300;}
.display-block{display:block !important}
.text-muted{color:var(--text-muted)}
.form-hint{font-size:.75rem;color:var(--text-main);opacity:.65;display:block;margin-top:4px}
.text-xs{font-size:.75rem}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.text-center{text-align:center}
.mt-10{margin-top:10px !important}
.mt-20{margin-top:20px !important}
.pb-20{padding-bottom:20px !important}

.mb-0{margin-bottom:0px !important}
.mb-10{margin-bottom:10px !important}
.mb-20{margin-bottom:20px !important}
.mb-40{margin-bottom:40px !important}
.ml-auto{margin-left:auto !important}
.p-20{padding:20px !important}
.p-40{padding:40px !important}
.b-0{border:0!important}
.p-0{padding:0!important}
.p-5{padding:5px!important}
.pb-0{padding-bottom:0px !important}

.flex{display:flex;align-items:center;gap:10px;/*justify-content:space-between*/}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.items-start {align-items: flex-start;}
.justify-between{justify-content:space-between}
.justify-start{justify-content:flex-start}
.justify-center{justify-content:center}
.gap-0{gap:0px !important}
.gap-12{gap:12px !important}
.gap-16{gap:16px !important}
.gap-20{gap:20px !important}

.border-bottom{border-bottom:1px solid var(--border-color);padding-bottom:8px!important}
.dark-grey{color:var(--dark-grey) !important}

/* ESTILOS BOTONES POR DEFECTO */
[class^="btn-"] {
	padding: 10px 16px;border-radius: var(--mini-border-radius);font-weight: 300;color: #fff;text-decoration: none;transition: all 0.2s ease; 
	justify-content: center; display: inline-flex; 
	align-items: center;
	gap: 8px;
	font-size: 1rem;
}
[class^=btn-]:hover{filter:brightness(1.1)}
[class^=btn-]:not(.disable-hover):hover{box-shadow:var(--btn-shadow);transform:translateY(-2px)}

/* Botones */

.btn-superadmin{background:var(--superadmin-primary);display:inline-block;align-self:flex-start;font-size:.8rem;margin:0 auto}
.sidebar .btn-superadmin, .sidebar .btn-logout-link{position:static;margin-top:40px}
.btn-superadmin span{font-size:1.3rem;font-weight:600}

.btn-ver-escaparate{display:flex;align-items:center;font-size:.85rem;background-color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);margin-left:auto;padding:4px 8px}
.btn-ver-escaparate .material-symbols-outlined{font-size:1.2rem}
.btn-add {background:var(--dark-grey);color:#fff;text-transform:uppercase;font-size:.9rem;font-weight:400;margin-left:auto}
.btn-add .material-symbols-outlined {font-size: 1.1rem;font-weight: 600;}

.btn-submit {background: var(--success);font-weight: 600;font-size: 1rem; border-radius: 25px;}

.btn-uppercase {text-transform: uppercase;}

.btn-download{background:var(--info-light);border:none;font-weight:600;}

.btn-cancel{background:color-mix(in srgb,var(--text-muted) 10%,transparent);color:var(--text-muted);border:1px solid var(--border-color)}
.btn-save{background:var(--success);color:#fff;border:1px solid transparent;flex:1}
.btn-link{background:0 0;border:none;color:var(--primary);font-weight:400;cursor:pointer;text-decoration:underline;transition:var(--transition);padding:0}.btn-link:hover{box-shadow:none!important;transform:none!important;filter:brightness(.6)!important}
.btn-suscripcion {background:var(--primary);
text-align:center;padding:14px;text-decoration:none;border-radius:var(--border-radius);font-weight:600}
.btn-locked{background-color:#d1d5db!important;color:#9ca3af!important;cursor:not-allowed!important;pointer-events:none!important;box-shadow:none!important;transform:none!important;border:1px solid #e5e7eb!important;opacity:.6}
.btn-delete,.btn-edit{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;transition:all .2s ease;text-decoration:none}
.btn-edit{color:#fff;background:var(--superadmin-primary)}
.btn-edit:hover, .btn-delete:hover{box-shadow:none !important;transform: scale(1.1) !important;}
.btn-delete{color:#fff;background:#ef4444}

/* BOTONES */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-ghost {
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.btn-secondary/*,
.btn-cancel*/ {
	display: inline-block;
	padding: 14px 24px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-main);
	border-radius: 12px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

.btn-secondary:hover/*,
.btn-cancel:hover */{
	background: rgba(255, 255, 255, 0.1);
}


.btn-back{background:var(--text-muted);border:none;font-weight:600}

.btn-logout-link{margin:0 auto;color:#fff;background-color:var(--danger);font-size:.9rem;text-transform:uppercase}


.btn-select {  border: 1px solid var(--border-color); border-radius: var(--mini-border-radius); background: var(--bg-body); cursor: pointer; transition: all 0.2s; color:var(--primary); font-size: .8rem; }
.btn-select.active { background: var(--primary); color: white; border-color: var(--primary); }


.btn-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:var(--transition);background:var(--table-header-bg)}

/* Categorias */

.category-handle{border:1px solid transparent;border-radius:var(--mini-border-radius);color:var(--primary);background:#fff;padding:8px;color:var(--contrast);opacity:.3}
.category-handle, .drag-handle {transition: var(--transition);cursor: grab;opacity:.3;}
.category-item:hover .category-handle, .category-group:hover .category-handle { border:1px solid color-mix(in srgb, var(--primary) 25%, transparent);opacity:1;}
.category-item:hover .drag-handle{opacity:1}
.category-handle:hover, .drag-handle:hover {color: var(--text-main);transform: scale(1.1)}
.drag-handle { padding: 4px;}
#categories-list > p { padding:24px;border: 1px solid var(--border-color);border-radius: var(--card-border-radius)}
.category-item{display:flex;align-items:center;justify-content:space-between;padding:10px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:0;transition:background .2s}
.category-group {transition: background 0.2s;}
.category-group.card{padding:10px;border-radius:var(--border-radius)}
.category-item:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}
.category-item:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}
.category-item:only-child{border-radius:var(--border-radius)}
.category-item:not(:last-child){border-bottom:none}
.category-item:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.category-group:hover{background:0 0!important;border-color:color-mix(in srgb,var(--primary) 25%,transparent)}
.category-item:hover .category-name{color:var(--text-main)}
.category-name{font-weight:600;color:var(--text-muted);transition:var(--transition)}
.category-desc{display:block;font-size:.8rem;color:var(--text-muted)}
.category-name.flex{justify-content:flex-start!important;gap:0}
.material-symbols-outlined.folder{color:#ecd074;margin-right:6px;transition:var(--transition)}
.category-group:hover .material-symbols-outlined.folder,.ghost .material-symbols-outlined.folder{color:var(--text-main);margin-left:6px}
.category-id{color:var(--text-muted);margin-top:2px}
.category-item:active { cursor: grabbing; }
.category-item.ghost { border: 1px dashed var(--primary);}
.cat-actions{display: flex;align-items: center;gap: 8px;}
.empty-category-msg{padding:10px;text-align:center;border:1px dashed var(--border-color);border-radius:var(--mini-border-radius);background:#fff}


/* .user-avatar {
	width: 40px;
	height: 40px;
	background: var(--primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}*/

.card{background:var(--card-bg);padding:24px;border-radius:var(--card-border-radius);border:1px solid var(--border-color);box-shadow:var(--card-shadow)}
.card.p-10{padding:10px !important}
.card-title{color:var(--primary);/*text-transform:uppercase;*/font-size:1.2rem;/*letter-spacing:.1em;*/font-weight:600;line-height:1.4}
.card-subtitle{/*font-size:.9rem;*/color:var(--text-main);/*opacity:.8*/}

/* Dashboard Action Cards */
.card-action,.card-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;text-decoration:none;transition:all .3s ease;min-height:140px;cursor:pointer}
.card-add{border:2px dashed var(--primary);background:0 0}
.card-action{border:1px solid var(--border-color);background:var(--card-bg)}
.card-action:hover,.card-add:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,transparent);transform:translateY(-4px)}
.card-button-icon{width:60px;height:60px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:600;transition:all .3s ease}
.card-button-icon .material-symbols-outlined {font-size: 2.5rem;}
.card-action:hover .card-button-icon,.card-add:hover .card-button-icon{background:var(--primary);color:#fff}
.card-tip{display:flex;flex-direction:column;justify-content:center; padding:10px;}
.tip-text .material-symbols-outlined{display:flex;align-items:center;gap:10px;color:#ffc200;justify-content:center;font-size:2rem}
.tip-text{font-size:1rem;color:#555;line-height:1.2;margin:0;font-style:italic;display:flex;gap:5px;align-items:center}


/* Dashboard header */
.dashboard-header{padding:24px 0;margin-bottom:24px}
.dashboard-header h1{font-size:1.6rem;font-weight:400;color:var(--primary);}
.dashboard-header h1 span{color:var(--primary);font-weight:600}
.dashboard-header-text {line-height: 1.2;}
.welcome {
	padding: 24px;
	border-radius: var(--card-border-radius);
	border: 1px dashed var(--border-color);
	font-size: 1.4rem;
}

.dashboard-header.flex{justify-content:flex-start;gap:5px}
/* USADO EN QR-EDITOR */
.header-icon-container{color:#9bbfd3;display:flex;align-items:center;justify-content:center;background-color:#fff;padding:6px;border-radius:50%;border:1px solid var(--border-color);box-shadow:0 2px 5px rgba(0,0,0,.1)}
.header-icon-container .material-symbols-outlined{font-size:2.2rem;transform: translateY(2px);}
.dashboard-header-text h1{line-height:1.2;margin-bottom:4px}

/* Plan del Escaparate actual */
.current-plan-banner{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--border-radius);margin-bottom:auto;transition:all .3s ease;box-shadow:0 8px 8px -10px rgba(0,0,0,.3);border:2px solid #fff}.current-plan-banner .plan-actual-info{line-height:1}
.current-plan-banner .plan-actual-label{display: flex;
    flex-direction: column;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .5px;
    font-weight: 400;
    line-height: 1;
    color: var(--text-muted);}
.current-plan-banner.plan-plus .plan-actual-label{color:#fceabb}
.current-plan-banner .plan-actual-name{font-size:1.1rem;text-transform:none;letter-spacing:0;font-weight:600;}
	
.current-plan-banner.plan-basic .plan-actual-name {text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);}
.plan-plus{background:linear-gradient(-5deg,#1a1a1a 0,#333 100%);color:#fff}
.plan-plus .dot{background:#e6b94d;box-shadow:0 0 12px #e6b94d}
.plan-plus .dot span{text-shadow:0 0 8px rgba(255,255,255,.8)}
.plan-plus .plan-actual-name{background:linear-gradient(135deg,#fceabb 0,#f8b500 50%,#fceabb 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.plan-basic{background:linear-gradient(-5deg, #c5cece 0, #f1f3f3 100%)}
.plan-basic .dot{background:#95a5a6;box-shadow:0 0 8px rgba(0,0,0,.1)}
.plan-basic strong{color:#2c3e50}
.plan-prueba{background:color-mix(in srgb,#6366f1 10%,transparent);color:#6366f1;border:1px solid #bbdefb}
.plan-prueba .dot{background:#6366f1}
.plan-inactivo{background:#fff5f5;color:#c53030;border:1px solid #fed7d7}
.plan-inactivo .dot{background:#e53e3e}
.current-plan-banner .dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 -2px 4px rgba(0,0,0,.2),0 2px 10px rgba(0,0,0,.1);color:#fff}
.current-plan-banner.plan-plus .dot{color:#1a1a1a}

/*
.estado-badge{display:flex;align-items:center;gap:5px;padding:20px 8px;border-radius:var(--mini-border-radius);border:1px solid transparent;height: 100%;
	justify-content: center;}
	.dashboard-header .estado-badge {height: auto; padding: 6px 12px;margin-left:auto;}
.estado-info{display:flex;flex-direction:column;gap:2px; line-height:1.2;}
.estado-label{font-size:1.4rem;font-weight:600;line-height:1}
.estado-subtitle {font-size: 1rem;color:var(--text-main);opacity:.75}*/

/* Estados */
.estado-online{background:color-mix(in srgb,#10b981 10%,transparent);border-color:color-mix(in srgb,#10b981 25%,transparent);color:#10b981}
.estado-pendiente{background:color-mix(in srgb,#f59e0b 10%,transparent);border-color:color-mix(in srgb,#f59e0b 25%,transparent);color:#f59e0b}
.estado-inactivo{background:color-mix(in srgb,#ef4444 10%,transparent);border-color:color-mix(in srgb,#ef4444 25%,transparent);color:#ef4444}
.estado-prueba{background:color-mix(in srgb,#6366f1 10%,transparent);border-color:color-mix(in srgb,#6366f1 25%,transparent);color:#6366f1}
.material-symbols-outlined.estado-icon{font-size:3rem;flex-shrink:0}

/* Layouts */
.login-page{display:flex;justify-content:center;align-items:center;padding:20px; font-size: 1.1rem;background:var(--primary);}
[data-theme="business"] .login-page{background:color-mix(in srgb, var(--primary) 10%, transparent);}
.dashboard-layout{display:grid;grid-template-columns:280px 1fr;grid-template-rows:auto 1fr;min-height:100vh}
.main-content{flex:1;max-width:1024px;margin:0 auto;width:100%}
.main-content-wrapper{padding:40px 40px 0;display:flex;flex-direction:column;/*min-height:100vh;*/grid-column:2;grid-row:2}

.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:16px;background:var(--sidebar-bg);border-right:1px solid var(--border-color);gap:8px;grid-row:1/-1}

a.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px;margin-bottom:16px;/*background-color:var(--bg);*/border-radius:var(--border-radius);border:1px solid color-mix(in srgb,var(--contrast) 10%,transparent);text-decoration: none;transition:var(--transition)}
a.sidebar-brand:hover{transform:translateY(-2px);box-shadow:0 7px 8px -10px rgba(0,0,0,.3)}
.sidebar-brand-logo img{width:38px;height:38px;object-fit:cover;border-radius:5px;display: block;}
a.sidebar-brand .sidebar-brand-name{font-weight:400;color:var(--text-muted);line-height:1.2;transition:var(--transition);font-size: 1.1rem;}
a.sidebar-brand:hover .sidebar-brand-name{color:var(--primary)}
.sidebar-brand:not(:has(.sidebar-brand-logo)) {padding:10px;}
.sidebar-brand:has(.sidebar-brand-logo) .sidebar-brand-name > span {display:none;}
.sidebar-brand:not(:has(.sidebar-brand-logo)) .sidebar-brand-name > span {font-size: 1.5rem; color:var(--primary)}
.sidebar-brand:not(:has(.sidebar-brand-logo)) .sidebar-brand-name  { display:flex; gap:6px;align-items: center;}

.nav-links{list-style:none;display:flex;flex-direction:column;gap:4px;/*flex:1*/margin-bottom:4px;}
.nav-links li{margin-bottom: 5px;}
.nav-links li a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--border-radius);font-size:1.1rem;font-weight:500;color:var(--text-muted);text-decoration:none;transition:all .2s ease}
.nav-links li a:hover{color:var(--text-main);background-color:var(--bg)}
.nav-links li a.active{background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary);font-weight:600}
.nav-links li a .material-symbols-outlined{font-size:1.4rem;opacity:.6; transition: var(--transition);}
.nav-links li a.active .material-symbols-outlined{opacity:1;
	font-variation-settings: 'FILL' 1, 'wght' 400;}
.nav-links li:hover .material-symbols-outlined,.nav-links li a.active .material-symbols-outlined {transform:scale(1.2); opacity: 1;}

.nav-links-close {
	display: none; 
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--border-radius);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--text-muted);
	background: color-mix(in srgb, var(--text-muted) 8%, transparent);
	border: none;
	cursor: pointer;
	width: 100%;
	margin-top: 8px;
	transition: all .2s ease;
}

.nav-links-close:hover {
	background: color-mix(in srgb, var(--text-muted) 15%, transparent);
	color: var(--text-main);
}

.nav-links-close .material-symbols-outlined {
	font-size: 1.2rem;
	transition: transform .2s ease;
}

.nav-links-close:hover .material-symbols-outlined {
	transform: translateX(-3px);
}

/* Alertas de suscripción */

.msg-suscripcion{display:flex;align-items:center;gap:5px;padding:10px;border-radius:var(--border-radius);border:1px solid transparent;}
.msg-suscripcion .material-symbols-outlined.msg-icon{font-size:2.5rem;flex-shrink:0}
.msg-body{display:flex;flex-direction:column;text-align:left;gap:4px;line-height:1}
.msg-title{font-size:1.4rem;font-weight:600;display:flex;align-items:baseline;gap:10px}
.msg-title span{color:var(--text-muted);font-weight: 300;
opacity: 0.9;}
.msg-text{margin:0;font-size:.875rem;opacity:.9;color:var(--text-main)}
/*.msg-link{color:inherit;font-weight:700}*/
.msg-active{/*background:color-mix(in srgb,#10b981 10%,transparent);*/border-color:color-mix(in srgb,#10b981 25%,transparent);color:#10b981}
.msg-warning{/*background:color-mix(in srgb,var(--warning) 10%,transparent);*/border-color:color-mix(in srgb,var(--warning) 25%,transparent);color:var(--warning)}
.msg-danger{/*background:color-mix(in srgb,var(--danger) 10%,transparent);*/border-color:color-mix(in srgb,var(--danger) 25%,transparent);color:var(--danger)}
.msg-info{/*background:color-mix(in srgb,var(--info) 10%,transparent);*/border-color:color-mix(in srgb,var(--info) 25%,transparent);color:var(--info)}
.msg-link-btn{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0;padding:8px 14px;border-radius:var(--mini-border-radius);font-weight:600;text-decoration:none;color:inherit;border:1px solid currentColor;background:var(--bg);transition:all .2s ease;white-space:nowrap}
.msg-link-btn:hover{background:color-mix(in srgb,currentColor 18%,transparent);background-color:#fff}
.msg-link-btn .material-symbols-outlined{font-size:1.2rem}
.suscripcion-info {display: inline;}
.suscripcion-info .material-symbols-outlined {font-size: 1.1rem; vertical-align: sub;margin-top: -3px;}
.suscripcion-norenew {color:var(--danger); }
.suscripcion-renew {color:var(--success); }

/* ALERTS */
.alert{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 24px;padding:12px 16px;font-size:1rem;border-radius:var(--border-radius);animation:fadeIn .8s ease-out}
.alert-warning{background:color-mix(in srgb,var(--warning) 5%,transparent);border:1px solid color-mix(in srgb, var(--warning) 50%,transparent);color:var(--warning)}
.alert-info{background:color-mix(in srgb,var(--info-light) 5%,transparent);border:1px solid color-mix(in srgb, var(--info-light) 50%,transparent);color:var(--info-light)}
.alert-danger{background:color-mix(in srgb,var(--danger) 5%,transparent);border:1px solid color-mix(in srgb, var(--danger) 50%,transparent);color:var(--danger)}
.alert-success{background:color-mix(in srgb,var(--success) 5%,transparent);border:1px solid color-mix(in srgb, var(--success) 50%,transparent);color:var(--success)}
.alert-limite{background:color-mix(in srgb,#54d1b9  5%,transparent);border:1px solid color-mix(in srgb, #54d1b9  50%,transparent);color:#54d1b9 }

.alert .material-symbols-outlined{color:currentColor;flex-shrink:0;font-size:1.5rem;}
.alert .btn-link {color: currentColor;text-decoration: underline;transition: all 0.2s ease;}
.alert .btn-link:hover {color: color-mix(in srgb,currentColor 80%,var(--contrast)) !important;}

/* Form styles */

.form-group{margin-bottom:var(--margin-bottom)}
.form-group.break-row{grid-column-start:1}
.form-group label{display:block;margin-bottom:8px;font-size:1rem;color:var(--text-main);font-weight:300}
.form-group label.text-xs{font-size:.8rem;line-height:1.2}
.form-group label+.card-subtitle{font-size:.9rem;color:var(--text-muted)}
.form-group label:has(+.card-subtitle){margin-bottom:2px}
.form-group input:not([type=color]),.form-group select,.form-group textarea,.social-input,.social-select{width:100%;padding:12px 16px;background:var(--input-bg);border:1px solid var(--border-color);border-radius:12px;color:var(--text-main);font-size:1rem;font-family:inherit;transition:all .3s ease}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.social-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px rgba(99,102,241,.15)}
.form-group input.input-readonly{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--text-muted);cursor:not-allowed}
.form-group label.flex{justify-content:flex-start;display:flex;align-items:start}
.checkbox-container.flex{gap:4px!important}
.form-group input[type=checkbox]{width:auto;padding:0;accent-color:var(--primary-color);width:20px;height:20px;cursor:pointer}
.checkmark{margin-right:8px}
.form-group input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.form-group input[type=color]::-webkit-color-swatch{border:none;border-radius:10px}

.form-section-wrapped { padding: 20px; background: color-mix(in srgb, var(--primary) 5%, transparent);border:1px solid color-mix(in srgb, var(--primary) 25%, transparent);border-radius: 8px;}
.form-section-wrapped .border-bottom, #horario_excepcional, #horario_excepcional_desde, #horario_excepcional_hasta {    border-color:color-mix(in srgb, var(--primary) 25%, transparent);}

/* CAPA FIJA */
.form-actions {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  z-index: 100;

  display: flex;
  justify-content: center; /* 👈 CLAVE */
  pointer-events: none;
}

.form-actions {
  pointer-events: none;
	position: sticky; bottom: 20px; z-index: 99; display: flex; justify-content: flex-end; padding: 10px 20px 10px 0;
}

.form-actions button {
  pointer-events: auto;
	box-shadow: 0 0 15px 12px rgba(255,255,255,1)
}

.form-actions button:hover {transform: scale(1.05)}

/* Login */
.login-container{width:100%;max-width:420px;animation:fadeIn .8s ease-out}
.login-logo{display:flex;justify-content:center;margin-bottom:-90px;position:relative;z-index:1}
.login-logo img{width:128px;height:128px;object-fit:cover;border-radius:50%;border:3px solid var(--card-bg);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.login-title{font-size:1.8rem;font-weight:600;color:var(--text-main)}
[data-theme="dark"] .login-title{color:var(--primary)}
.login-subtitle{font-size:1rem;color:var(--text-muted)}
.space{height:80px}
.input-icon-wrapper{position:relative;display:flex;align-items:center}
.input-icon{position:absolute;left:12px;font-size:1.1rem;color:var(--text-muted);pointer-events:none;transition:color .2s}
.input-icon-wrapper input{padding-left:40px}
.input-icon-wrapper:focus-within .input-icon{color:var(--primary)}
.form-group .input-icon-wrapper input{padding-left:40px !important}
.login-footer-text{text-align: center; font-size: 0.8rem; color: var(--text-muted); opacity: 0.6;}

/* SUSCRIPCIÓN */





.subscription-status-container {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}

.subscription-status-card {
    max-width: 550px;
    width: 100%;
    text-align: center;
    position: relative;
    /*overflow: hidden;*/
}

/* --- CABECERA: BADGES --- */
.status-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}





.plan-illustration {
    max-width: 120px;
    height: auto; /* Contenedor cuadrado para centrar */
    margin-bottom: 0; /* Espacio con el badge "Activo" ajustado por gap del padre */
    display: flex;
    align-items: center;
    justify-content: center;
	margin-top:-50px
}

.plan-illustration img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Asegura que la ilustración no se corte */
}




.pricing-title-wrap { display: flex;justify-content: center; gap:4px; align-items: center; margin-bottom:20px; border-bottom:1px solid var(--border-color); padding-bottom:12px;}
.pricing-title-wrap > img {width: 100px; transform: translateX(-10px); }

.pricing-title h2 { font-weight: 400;margin-bottom:4px; line-height: 1}

.title-plan-basic { color:#74898b}
.title-plan-plus {color:#f8b500}
.pricing-title {color:var(--text-muted)}




/* --- ESTILOS DE PLAN (Dorado vs Gris) --- */
.plan-tag {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 12px;
}

/* BASIC */
.subscription-status-card.subscription-plan-basic .plan-tag {
    background: linear-gradient(-5deg, #74898b 0, #95a5a6 100%);
    color: white;
}

/* PLUS (Degradado Dorado) */
.subscription-status-card.subscription-plan-plus .plan-tag {
    background: linear-gradient(135deg, #fceabb 0%, #f8b500 100%);
    color: #5d4000; /* Marrón oscuro para legibilidad sobre oro */
    box-shadow: 0 4px 15px rgba(248, 181, 0, 0.3);
}




/* Detalle PLUS: Badge desbloqueado */
.unlocked-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f8b500;
    font-weight: 600;
    font-size: 0.9rem;
    background: color-mix(in srgb, #f8b500 10%, transparent);
    padding: 8px 16px;
    border-radius: 50px;
}
/* Estilo para el BASIC (Llamativo pero elegante) */
.btn-upsell-link {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    color: var(--primary);
    font-weight: 400;
	border-radius: 25px
}

.btn-upsell-link:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.05) !important;
}

.btn-golden {
	background: linear-gradient(135deg, #fceabb 0%, #f8b500 100%);
	color:#000;
}

/* Estilo para el PLUS (Sutil y Premium) */
.info-link {
    display: inline-block;
    margin-top: 15px;
    color: #f8b500; /* Color dorado del plan */
    text-decoration: none;
    font-weight: 400;
    font-size: 0.95rem;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s;
}

.info-link:hover {
    border-color: #f8b500;
}

/* --- RECUERDA ESTE AJUSTE PARA EL PLAN PLUS --- */
.subscription-status-card.plan-plus {
    border: 1px solid color-mix(in srgb, #f8b500 30%, transparent);
    box-shadow: 0 15px 40px rgba(248, 181, 0, 0.1);
}

/* El Badge "Activo" en el plus puede ser dorado también si quieres */
.subscription-status-card.plan-plus .status-badge-active,
.subscription-status-card.plan-plus .status-badge-active::before {
    color: #f8b500;
    background-color: #f8b500;
    box-shadow: 0 0 8px #f8b500;
}
/* --- ACCIONES --- */
.status-actions {
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
}

.btn-manage {
    display: flex;
    background: var(--text-main); /* Botón oscuro elegante */
    color: var(--card-bg);
    padding: 14px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s;
}

.status-tip {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    text-align: left;
    background: var(--bg);
    padding: 15px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
	align-items: center;
}

.status-tip > span {
	font-size: 1.5rem;
}

/* FIN SUSCRIPCIÓN */


.pricing-toggle-container{
	justify-content: center;
}
.pricing-toggle {
	background: rgba(0,0,0,0.05); border-radius: 50px; padding: 4px; display: inline-flex; position: relative; gap: 6px;
}
.pricing-toggle button.active {
	border: none; background: #fff; padding: 10px 24px; border-radius: 50px; font-weight: 600; cursor: pointer; color: var(--text-main); box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease;
}
.pricing-toggle button{border:none;background:0 0;padding:10px 24px;border-radius:50px;font-weight:600;cursor:pointer;color:var(--text-muted);transition:all .3s ease;font-size:1rem;display:flex;flex-direction:column;justify-content:center}
.pricing-toggle button span {
	font-size: 0.8rem;
	font-weight: 300;
}
/* Grid de Precios */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 30px;
}

/* Tarjetas de Precio */
.pricing-card {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 30px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Plan Destacado (Anual) */
.pricing-card.highlighted {
	border: 2px solid var(--primary);
	background: color-mix(in srgb, var(--primary) 2%, white);
}

.badge-saving {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary);
	color: white;
	padding: 4px 16px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 400;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	text-transform: uppercase;
}


.pricing-header h3 {
	font-size: 1.2rem;
	color: #444;
}

.pricing-price {
	font-size: 2.5rem;
	font-weight: 800;
    color: var(--dark-grey);
	margin-bottom: 20px;
	line-height: 1;
}

.price-period {
	font-size: 1rem;
	color: var(--text-muted);
	font-weight: 400;
}

/* Lista de Características */
.pricing-features {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
	flex-grow: 1; /* Para que el botón siempre quede abajo */
}

.pricing-features li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	color:var(--text-muted);
	font-size: 0.95rem;
}

.pricing-features .material-symbols-outlined {
	color: var(--primary);
	font-size: 1.6rem;
}


/* Animaciones */
@keyframes experiment-status-anim {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(1deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(-1deg); }
	100% { transform: rotate(0deg); }
}

@keyframes bubble-float {
	0% { opacity: .4; transform: translateY(0) scale(0.5); }
	50% { opacity: 1; transform: translateY(-12px) scale(1.2); }
	100% { opacity: .4; transform: translateY(-22px) scale(0.8); }
}

@keyframes vibrate-potente {
	0% { transform: translate(0); }
	10% { transform: translate(-1px, -1px); }
	20% { transform: translate(1px, 0px); }
	30% { transform: translate(-1px, 1px); }
	40% { transform: translate(1px, -1px); }
	50% { transform: translate(-1px, 0px); }
	60% { transform: translate(1px, 1px); }
	70% { transform: translate(-1px, -1px); }
	80% { transform: translate(1px, 0px); }
	90% { transform: translate(-1px, 1px); }
	100% { transform: translate(0); }
}
@keyframes hourglass-flip {
	0% { transform: rotate(0deg); }
	10%, 30% { transform: rotate(180deg); }
	40%, 60% { transform: rotate(180deg); }
	70%, 90% { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}

@keyframes jump-ok {
	0%, 10% {transform: translateY(0);animation-timing-function: ease-out;}
	20% {transform: translateY(-6px);animation-timing-function: ease-in;}
	30% {transform: translateY(0);animation-timing-function: ease-out;}
	35% {transform: translateY(-1.5px);}
	40%, 100% {transform: translateY(0);}
}
.danger-status{display:inline-block;animation:vibrate-potente .15s linear infinite;color:var(--inactivo)}
.pending-status{display:inline-block;animation:hourglass-flip 6s ease-in-out infinite;color:var(--warning)}
.online-status{display:inline-block;animation:jump-ok 2s infinite}
.experiment-status{position:relative;display:inline-block;animation:experiment-status-anim .3s ease-in-out infinite;transform-origin:bottom center}
.experiment-status::after,.experiment-status::before{content:'circle';font-family:'Material Symbols Outlined';position:absolute;left:70%;top:4px;font-size:6px;color:#6366f1;opacity:0;pointer-events:none}
.experiment-status::before{animation:bubble-float 1.8s ease-in-out infinite;margin-left:-12px}
.experiment-status::after{animation:bubble-float 1.8s ease-in-out infinite .9s;margin-left:6px;font-size:4px;left:30%}



/*


Forms
CHECKEAR ESTILOS:


*/

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* Grid */
.grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-cols-2-1{display:grid;gap:24px}
.grid-cols-2{grid-template-columns:1fr 1fr}
.grid-cols-3{grid-template-columns:1fr 1fr 1fr}
.grid-cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
.grid-cols-2-1{grid-template-columns:2fr 1fr}

.full-width {
	grid-column: span 2;
}

.header-content{grid-column:2;grid-row:1;position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 0;height:48px;background:color-mix(in srgb,var(--card-bg) 80%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);gap:20px}
.header-breadcrumb{display:flex;align-items:center;gap:8px;margin-right:auto;padding-left:24px}
.header-breadcrumb-title{font-weight:600;color:var(--text-main)}
.header-breadcrumb .material-symbols-outlined {font-size:1.8rem}
.header-breadcrumb-subtitle{display:inline}

.header-breadcrumb-subtitle::before{content:'|';margin-right:8px;color:var(--border-color)}

.header-breadcrumb-subtitle{color:var(--text-muted);font-weight:300}
.header-breadcrumb .material-symbols-outlined{color:var(--primary)}
.hamburger-btn{display:none;background:var(--primary);border:none;cursor:pointer;padding:8px;transition:background .2s;flex-shrink:0;align-self:stretch;align-items:center;aspect-ratio:1/1;justify-content:center}
.hamburger-btn svg{width:24px;height:auto;fill:#fff;display: block;}

.hamburger-btn:hover{background:color-mix(in srgb,var(--primary) 80%,transparent)}

/* Tables CHECKEAR ESTILOS */
.admin-table-container {
	background: var(--card-bg);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
}

.admin-table th {
	text-align: left;
	padding: 16px 20px;
	background: var(--table-header-bg);
	color: var(--text-main);
	/* Cambiado de muted a main para que los encabezados se lean bien */
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.admin-table td {
	padding: 20px;
	border-bottom: 1px solid var(--border-color);
}

.admin-table tr:last-child td {
	border-bottom: none;
}

.admin-table tr:hover {
	background: var(--table-hover-bg);
}

/* Badges & Icons */
.badge {
	padding: 6px 12px;
	border-radius: 99px;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
}

.badge-info {
	background: color-mix(in srgb, var(--primary) 15%, transparent);
	color: var(--primary);
	border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.badge-info:hover {
	background: color-mix(in srgb, var(--primary) 25%, transparent);
}

.badge-admin {
	background: color-mix(in srgb, var(--danger) 15%, transparent);
	color: var(--danger);
	border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}

.badge-admin:hover {
	background: color-mix(in srgb, var(--primary) 25%, transparent);
}

.square-16 {
	width: 16px;
	height: 16px;
	border-radius: 4px;
}

/* Pagination Styles */
.pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
}

.page-link {
	padding: 10px 18px;
	background: var(--table-header-bg);
	border-radius: 10px;
	color: var(--text-muted);
	text-decoration: none;
	transition: var(--transition);
	cursor: pointer;
	border: 1px solid var(--border-color);
	font-weight: 500;
}

.page-link:hover {
	background: var(--table-hover-bg);
	color: var(--text-main);
	transform: translateY(-1px);
}

.page-link.active {
	background: var(--primary);
	color: white;
	border-color: var(--primary);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Search Bar Styles */
.search-container {
	margin-bottom: var(--margin-bottom);
	position: relative;
	max-width: 500px;
}

.search-input {
	width: 100%;
	padding: 14px 20px 14px 52px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	color: var(--text-main);
	font-size: 1rem;
	outline: none;
	transition: var(--transition);
}

.search-input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.search-icon {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
	font-size: 1.2rem;
}

.loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-bg);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10;
	backdrop-filter: blur(4px);
	border-radius: 20px;
	color: var(--text-main);
	font-weight: 600;
}



.cat-actions { display: flex; gap: 12px; align-items: center; }
/*.btn-edit-cat { color: var(--primary); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.btn-delete-cat { color: var(--danger); text-decoration: none; font-size: 0.9rem; font-weight: 600; }*/

/* Switch Estilo */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--success); }
input:checked + .slider:before { transform: translateX(20px); }

.modal-cat {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	align-items: center;
	justify-content: center;
	z-index: 1200;
	padding: 20px;
	transition: opacity 0.25s ease;
	pointer-events: none;
	opacity: 0;
}
.modal-cat.visible {
	opacity: 1;
	pointer-events: all;
}
.modal-cat .card {
	width: 100%;
	max-width: 420px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: modalIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalIn {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.modal-content h2 {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 4px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border-color);
}




@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
	
.powered-by img {
	width: 220px;
	height: auto;
	margin-top: 6px;
}

.powered-by {
	color: var(--text-muted);
	font-size: 0.75rem;
}

/* Contenedor Principal */
.stats-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

/* Estilo General de los Items */
.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 15px;
	border-radius: 15px; /* Ajusta según tu var(--mini-border-radius) */
	border: 1px solid transparent;
	transition: transform 0.2s;
}

/* 1. Estilos para las 4 tarjetas superiores */
.stat-item:nth-child(-n+4) {
	color: #444; /* Color de texto por defecto */
}

/* Iconos de Material Design (Añádelos en el HTML) */
.stat-item .material-symbols-outlined {
	background: white;
	border-radius: 50%;
	padding: 10px;
	margin-bottom: 15px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	font-size: 2.4rem;
}

/* Colores específicos según la imagen */
/* Directo (Verde) */
.stat-item:nth-child(-n+4) {
	background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, white), var(--primary));
	color: white;
}
.stat-item .material-symbols-outlined { color: var(--primary); }

.stat-item:nth-child(1) { filter: hue-rotate(0deg); }
/* QR (Amarillo) */
.stat-item:nth-child(2) { filter: hue-rotate(45deg); }  /* Un color análogo */
/* NFC (Azul) */
.stat-item:nth-child(3) { filter: hue-rotate(180deg); } /* Un color complementario */
/* Social (Morado) */
.stat-item:nth-child(4) { filter: hue-rotate(270deg); } /* Otro color análogo */

/* 2. Textos dentro de las tarjetas */
.stat-item .label {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.8rem;
	margin-bottom: 15px; /* Espacio para el icono flotante si no quieres cambiar HTML */
}

.stat-item .count {
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1;
}

.stat-item small {
	opacity: 0.8;
	margin-top: 5px;
	font-size: 0.75rem;
}

/* 3. Las dos tarjetas inferiores (Total e Histórico) */
.stat-item:nth-last-child(-n+2) {
	grid-column: span 2;
	flex-direction: row; /* En horizontal según la imagen */
	justify-content: space-between;
	padding: 20px 40px;
	border: 1px solid #eee;
	background: #fff;
}

.stat-item:nth-last-child(-n+2) .label {
	margin-bottom: 0;
	text-transform: none;
	font-size: 1.1rem;
	color: #666;
}

.stat-item:nth-last-child(-n+2) .count {
	color: var(--primary);
	font-size: 1.8rem;
}

/* Color especial para el último cuadro (Últimos 30 días) */
.stat-item:last-child {
	background-color: color-mix(in srgb, #46d3b1 6%, transparent);
	border-color: color-mix(in srgb, #46d3b1 15%, transparent);
}

.item-tags-inline svg { /*MIRAR*/
	width: 20px;
	height: 20px;
	color: #888;
	fill: currentColor;
}

canvas#visitsChart {width: 100% !important;}

/* Estilos para Subida de Imágenes y Cropper */
.image-upload-wrapper {
	display: flex;
	flex-direction: column;
	gap: 15px;
	background: var(--bg);
	padding: 20px;
	border-radius: 12px;
	border: 1px solid var(--border-color);
	align-items: center;
	transition: all 0.3s ease;
	width: 100%;
}



.preview-box {
    border-radius: 12px;
    border: 1px solid var(--border-color); /* Un gris azulado más moderno que #ddd */
    background: var(--bg); /* Un fondo casi blanco para dar profundidad */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.no-image-placeholder {
    display: flex;
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espacio elegante entre icono y texto */
    color: var(--text-muted);
    opacity: 0.6; /* Un poco más sutil que 0.8 */
	padding: 10px;
}

.no-image-placeholder span {
    font-size: 2rem; /* Icono grande como pedías */
}

.no-image-placeholder p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Le da un toque "UI" de sistema */
}




/*
.image-upload-wrapper:hover {
	border-color: var(--primary);
	background: rgba(99, 102, 241, 0.05);
}*/

/*
.preview-box {
	width: 120px;
	height: 120px;
	background: var(--input-bg);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color);
}*/

	/* CONTENEDOR */
.design-module {
  margin-top: 16px;
}

/* ACCIONES A LA DERECHA */
.logo-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0; /* quitamos el margin anterior */
}

/* BOTONES FULL WIDTH */
.logo-actions .btn-primary,
.logo-actions .btn-ghost {
  width: 180px;
  justify-content: center;
}

/* CTA DERECHA */
.design-aside {
  display: flex;
}

.design-cta {
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	display: flex;
    flex-direction: column;
    justify-content: center;
	background: #fef7e7;
	border:2px dashed #f8b500; 
}
.design-cta.is-basic {border:1px solid  var(--border-color);
	background: #fff;
}
.cta-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background:#f8b500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-icon span {font-size: 2.4rem;color:#fff;}
.design-cta.is-basic .cta-icon {background: #9bbfd3;}

.design-cta h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.design-cta p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 16px;
}


/* GRID */
.design-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}

/* BLOQUES IZQUIERDA */
.design-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.design-block {
  background: var(--sheet);
  border-radius: var(--border-radius);
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
border:1px solid var(--border-color);
/*border:1px solid var(--primary);*/
}

/* TITULOS */
.design-block h4 {
  font-size: 0.9rem;
  color: var(--text-muted);
	color:var(--primary);
	font-weight: 400;
	text-transform: uppercase
}

/* DESCRIPCION */
.block-desc {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 12px;
}

/* COLOR */
.color-row {
  display: flex;
  gap: 16px;
}
.color-row-content {
	font-size: .9em;
padding-top:3px;
}
.preview-box.ratio-16-9 {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}

.preview-box img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	width: 120px;
}
.preview-box.ratio-16-9 img { width: 100%}

.preview-box .placeholder-icon {
	font-size: 2rem;
	opacity: 0.3;
}


.color-preview {display: flex; align-items:center; justify-content: center;}

.material-symbols-outlined.check-color-acento-icon { font-size: 3rem; color:#fff;pointer-events: none;}
.color-preview input[type="color"] {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--primary);
  flex-shrink: 0;
    border: 0;
	cursor: pointer;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
	transition: var(--transition);
	border:1px solid transparent;
}

/* Opcional: Un efecto extra cuando se hace click */
.color-preview input[type="color"]:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.9);
	animation: none;
}

.color-preview span { position: absolute;}
.design-block .logo-preview > div {
	justify-content: center
}

/* Elimina el borde/relleno interno en Chrome, Edge y Safari */
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 8px; /* Aquí puedes darle la forma que quieras */
}

/* Elimina el borde interno en Firefox */
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 8px;
}
.check-color-acento {
	color:var(--danger);
	font-weight: 600
}
.form-group .visual-option-card {margin-bottom:0}

.btn-upload-label {
	background: var(--primary);
	color: #ffffff !important;
	padding: 10px 20px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.85rem;
	display: inline-block;
	text-align: center;
	transition: transform 0.2s ease;
}

.btn-upload-label:hover {
	transform: translateY(-2px);
	filter: brightness(1.1);
}

/* Modal de Cropper */
.cropper-modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(0, 0, 0, 0.9) !important;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 999999 !important;
	padding: 20px;
	backdrop-filter: blur(10px);
}

.cropper-container-box {
	background: var(--card-bg);
	width: 100%;
	max-width: 800px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.cropper-header {
	padding: 15px 25px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cropper-body {
	padding: 20px;
	max-height: 70vh;
	overflow: hidden;
	background: #000;
}

.cropper-body img {
	max-width: 100%;
	display: block;
}

.cropper-footer {
	padding: 15px 25px;
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: flex-end;
	gap: 15px;
}

.square-16 {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid var(--border-color);
}


li.plan-plus-highlight {
	position: relative;
}
li.plan-plus-highlight::before {
	content: '';
	position: absolute;
	right: 8px; /* Un poco más a la derecha para centrar el conjunto */
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	background-color: #fff;
	border-radius: 50%;
	transition: var(--transition);
	pointer-events: none;
	z-index: 1; 
}
li.plan-plus-highlight::after {
	content: 'diamond';
	font-family: 'Material Symbols Outlined';
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.2rem;
	color: #9bbfd3;
	pointer-events: none;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	display: inline-block;
	white-space: nowrap;
	transition: var(--transition);
	z-index: 2; 
}

li.plan-plus-highlight a {
	padding-right: 40px !important; 
}

.plan-plus-highlight-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 28px;
	height: 28px;
	vertical-align: middle; /* Alinea con el texto circundante */
}

/* El círculo de fondo */
.plan-plus-highlight-icon::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff; /* O color-mix(in srgb, var(--primary) 10%, white) */
	border-radius: 50%;
	z-index: 1;
	box-shadow: 0 2px 3px rgba(0,0,0,0.04); /* Un poco de profundidad */
	transition: var(--transition);
}
/* El diamante */
.plan-plus-highlight-icon::after {
	content: 'diamond';
	font-family: 'Material Symbols Outlined';
	font-size: 1.4rem;
	color: #9bbfd3;
	z-index: 2;
	line-height: 1;
}

/* Efecto hover si quieres que reaccione al pasar el ratón por encima */
.plan-plus-highlight-icon:hover::before {
	background-color: var(--primary);
}

.plan-plus-highlight-icon:hover::after {
	color: #fff;
}



/* Contenedor QR en Edición */
.qr-preview-container {
	padding: 5px;
}

.qr-preview-container canvas,
.qr-preview-container img {
	max-width: 100%;
	height: auto;
}

.qr-editor-container { display: grid; grid-template-columns: 300px 1fr; gap: 24px; }

.qr-info {display: flex;
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--border-color); justify-items: center;}
.qr-info .qr-preview-container  { max-width: 101px;}
#qr-result-canvas-container {display: flex; flex-direction: column; align-items: center; }

#text-canvas-preview:empty {
	display: none;
}

.qr-text-preview { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 24px; color: #333; margin-bottom: 20px; text-align: center; width: 100%; min-height: 35px; }
.select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qr-preview-area { display: flex; flex-direction: column; align-items: center; justify-content: center; position: sticky;  }


/* Modal Genérica para QR */
.modal-qr-content {
	text-align: center;
	padding: 30px;
}

#qrcode-modal {
	background: white;
	padding: 20px;
	border-radius: 12px;
	display: inline-block;
	margin-bottom: 20px;
	border: 1px solid #eee;
}

#qrcode-modal canvas,
#qrcode-modal img {
	max-width: 250px;
	height: auto;
}

.btn-qr {	border:1px solid var(--text-muted);	font-size: .9rem;color:var(--text-muted);padding:2px 6px;font-weight: 400; text-transform: uppercase;}
.btn-qr:hover { border-color:var(--text-main); color:var(--text-main)}
/*
.btn-qr:hover {
	background: rgba(16, 185, 129, 0.2);
}*/

/*.edit-container {
	max-width: 800px;
	margin: 0 auto;
}*/
/*
.image-preview-container {
	border: 2px dashed var(--border-color);
	border-radius: 16px;
	padding: 24px;
	text-align: center;
	background: var(--bg);
	margin-bottom: 20px;
	position: relative;
}
*/
#cropper-area {
	max-width: 100%;
	height: 450px;
	margin-top: 20px;
	display: none;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}

.crop-controls {
	display: none;
	justify-content: center;
	gap: 12px;
	margin-top: 15px;
}

.btn-crop-mode {
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	background: white;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 500;
	transition: all 0.2s;
	color:var(--info-light)
}

.btn-crop-mode.active {
	background: var(--info-light);
	color: white;
	border-color: var(--info-light);
}

.btn-crop,
.btn-crop-cancel {font-weight: 400}

.btn-crop {border:2px solid var(--success); background: var(--success); color:#fff; opacity: .8;}
.btn-crop-cancel {border:2px solid var(--text-muted); background: #fff; color:var(--text-muted); opacity: .6;}
.btn-crop:hover, .btn-crop-cancel:hover { opacity: 1; filter:none}
.btn-crop:hover {filter: brightness(.95);}

.current-images {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-bottom: 15px;
}

.img-label {
	font-size: 0.7rem;
	color: #64748b;
	margin-top: 5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Category Buttons */
.category-btn-list {
	display: flex;
	gap: 10px;
	padding: 5px 2px 10px 2px;
	flex-wrap: wrap;
}

.category-btn-list::-webkit-scrollbar {
	height: 4px;
}

.category-btn-list::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10px;
}

.cat-btn {
	white-space: nowrap;
	padding: 10px 20px;
	border-radius: 20px;
	border: 1px solid var(--border-color);
	background: white;
	color: var(--text-muted);
	font-weight: 500;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.2s;
}

.cat-btn.active {
	background: var(--primary);
	color: white;
	border-color: var(--primary);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Fix for checkbox row alignment */
.checkbox-row {
	display: flex;
	align-items: center;
	gap: 6px;
	/*padding-top: 35px;*/
}

.checkbox-row input[type="checkbox"] {
	width: 20px;
	height: 20px;
}
/* Tags Selector Grid */
.tags-selector-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin-top: 5px;
}

.tag-checkbox-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 8px;
	background: var(--input-bg);
	border: 2px solid var(--border-color);
	border-radius: 12px;
	cursor: pointer;
	transition: var(--transition);
	text-align: center;
	position: relative;
	user-select: none;
	line-height: 1;
}

.tag-checkbox-card input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.tag-checkbox-card.selected {
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 10%, var(--card-bg));
}

.tag-icon-box {
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
	transition: var(--transition);
}

.tag-checkbox-card.selected .tag-icon-box {
	opacity: 1;
	transform: scale(1.2);
}

.tag-name {
	font-size: 0.7rem;
	font-weight: 400;
	text-transform: uppercase;
    line-height: 1 !important;
	color: var(--text-muted);
	transition: var(--transition);
}

.tag-checkbox-card.selected .tag-name {
	color: var(--text-main);
}
.tags-selector-grid svg {width: 28px;height: 28px;fill: currentColor;}
.tags-selector-grid .picante-2 svg, .tags-selector-grid .picante-3 svg {width: unset;}

.tags-selector-grid .picante-1 svg,
.tags-selector-grid .picante-2 svg,
.tags-selector-grid .picante-3 svg {fill: #ef4444;}

.tags-selector-grid .vegano svg,
.tags-selector-grid .vegetariano svg {fill: #29bd2e;}

.tags-selector-grid .sin-gluten svg {fill: #f2c10f;}

.tags-selector-grid .sin-lactosa svg {fill: #40b0ec;}

.tags-selector-grid label {display:flex;justify-content: center;}
.tag-type-alergeno > label {background: #f4f4f4;} 
/*.tag-type-alergeno .tag-checkbox-card.selected { border:2px solid var(--primary); }*/


.tag-type-alergeno .tag-name {font-size: 0.8rem;}
/*
.picante-3 .tag-name { font-size: .6rem;}
*/

/* Categorias */
.category-header {margin-bottom: 10px;}
.category-handle .material-symbols-outlined {
	font-size: 1.4rem;
}
.category-count {
	margin-left: 4px;
	font-weight: 300;
	font-size: .75rem;
	color:var(--text-main);
	margin-left:6px;
}

.product-card {
	background: white;
	padding: 10px;
	border-radius: var(--mini-border-radius);
	border: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: grab;
	transition: all 0.2s;
}

.product-card:hover { border-color: var(--primary); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.product-info { display: flex; align-items: center; gap: 15px; }
.product-thumb {
	width: 48px; height: 48px;
	border-radius: var(--mini-border-radius);
	object-fit: cover;
	border:2px solid #fff;
	display: flex;
    align-items: center;
    justify-content: center;
	color: var(--primary);
    background: color-mix(in srgb,var(--primary) 5%,transparent);
}
.product-thumb .material-symbols-outlined {
    font-size: 1.8rem;
}
.product-price{font-weight:300;color:var(--dark-grey);padding:4px 8px;border-radius:6px;font-size:.75rem;background-color:var(--bg);border:1px solid var(--border-color);}
.ghost { opacity: 0.3; background: color-mix(in srgb, var(--primary) 50%, transparent)}

footer.footer {
	margin-top: auto;
	padding: 20px 40px;
	font-size: 0.875rem;
	color: var(--text-muted);
	border-top: 1px solid var(--border-color);    margin-top: 40px;
}
/* Rich Editor UI */
.rich-editor-container {
	border: 1px solid var(--border-color);
	border-radius: 12px;
	background: var(--input-bg);
	overflow: hidden;
	margin-top: 5px;
	transition: var(--transition);
}

.rich-editor-container:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}

.rich-editor-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: rgba(0,0,0,0.03);
	border-bottom: 1px solid var(--border-color);
	user-select: none;
}

.toolbar-group {
	display: flex;
	gap: 2px;
}

.toolbar-separator {
	width: 1px;
	height: 18px;
	background: var(--border-color);
	margin: 0 4px;
}

.rich-editor-toolbar button {
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	border-radius: 4px;
	font-size: 0.85rem;
	font-weight: 600;
	transition: var(--transition);
}

.rich-editor-toolbar button:hover {
	background: rgba(0,0,0,0.08);
	color: var(--text-main);
}

.rich-editor-toolbar button.active {
	background: var(--primary);
	color: #fff;
}

.rich-editor-content {
	min-height: 120px;
	max-height: 400px;
	padding: 12px 15px;
	color: var(--text-main);
	outline: none;
	overflow-y: auto;
	/*font-size: 0.95rem;*/
	line-height: 1.5;
}

.rich-editor-content b, .rich-editor-content strong { font-weight: 600; }
.rich-editor-content div { min-height: 1.5em; }

/* Social Admin List */
.social-admin-card, .schedule-block {width:100%;padding:12px 16px;background:var(--input-bg);border:1px solid var(--border-color);border-top:0;border-radius:0;font-size:1rem}
.social-admin-list:empty::after {
    content: "Haz clic en el botón \"Añadir Red\" para agregar tu primer enlace.";
    display: block;
    padding: 21px;
    background: var(--bg);
    border: 1px dashed #ccc;
    color: var(--text-muted);
    font-size: 1rem;
    text-align: center;
    border-radius: 12px;
}
.social-admin-card:first-child, .schedule-block:first-child{border-radius:12px 12px 0 0;border-top:1px solid var(--border-color)}
.social-admin-card:last-child, .schedule-block:last-child{border-radius:0 0 12px 12px;border-top:0}
.social-admin-card:only-child, .schedule-block:only-child{border-radius:12px}
.social-admin-card:only-child, .schedule-block:only-child{border-radius:12px;border-top:1px solid var(--border-color)}
.social-row-item{display:flex;align-items:center;gap:12px;padding:12px 16px!important;background:var(--card-bg)}
.social-icon-preview{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.social-icon-preview img,.social-icon-preview svg{width:100%;height:100%;object-fit:contain;fill:var(--primary)}
.social-select{width:155px!important;padding:8px 12px!important;}
.social-input{flex-grow:1;padding:8px 12px!important;}
.social-data-group{flex-grow:1;}

.schedule-block .form-group {
    flex: 1;
    width: 0;
}
.form-group.horario-horas {width: 120px;}


.social-icon-instagram svg { fill: #E1306C; }
.social-icon-facebook svg  { fill: #1877F2; }
.social-icon-tiktok svg    { fill: #000000; }
.social-icon-youtube svg   { fill: #FF0000; }
.social-icon-twitter svg   { fill: #000000; }
.social-icon-linkedin svg  { fill: #0A66C2; }
.social-icon-whatsapp svg  { fill: #25D366; }
.social-icon-telegram svg  { fill: #2AABEE; }
.social-icon-web svg       { fill: var(--text-muted); }

/* --- PLAN STATUS & LIMITS --- */
/*.plan-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--margin-bottom);padding-bottom:16px;border-bottom:1px solid var(--border-color)}
/*.plan-title{font-size:1.25rem;font-weight:700}*/
.limit-info{display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:8px}
.limit-label{font-weight:300;color:var(--text-muted)}
.limit-count{font-weight:600}
.progress-bar-container{height:10px;background:rgba(0,0,0,.05);border-radius:99px;overflow:hidden}
.progress-bar-fill{height:100%;background:var(--primary);border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.progress-bar-fill.warning{background:#f59e0b}
.progress-bar-fill.danger{background:var(--danger)}
.plan-actions{margin-top:24px;text-align:center}

.form-row { display: flex; gap: 16px; margin-bottom: 12px; }
.flex-1 { flex: 1; } /* para superadmin, ampliamos width 100% */
.bg-success-light { background-color: #f0fdf4; border: 1px solid #bbf7d0; }
		.border-success { border-color: #bbf7d0; color:#444}
.resumen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;     font-size: 1.2rem;}
.resumen-item label { display: block; font-size: 11px; text-transform: uppercase; color: #666; margin-bottom: 4px; }
.text-mono { font-family: monospace; background: #fff; padding: 2px 6px; border-radius: 4px; border: 1px solid #ddd; }
.btn-whatsapp { background: #25D366; color: white; border: none; }
.btn-whatsapp:hover { background: #128C7E; color: white; }
.btn-close { border: none; background: none; font-size: 24px; color: #999; cursor: pointer; }
.input-with-prefix { display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 8px; padding-left: 12px;background: var(--input-bg); }
.input-with-prefix span { color: #999; font-weight: 600; }
.input-with-prefix input { border: none; flex: 1; outline: none; }
.material-symbols-outlined { vertical-align: middle; }

.status-content h1 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--text-main);
	line-height: 1;
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.status-content p {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 25px;
}
.status-date {color:var(--text-muted); display: flex; gap:4px; align-items: center; font-size:1rem}
.status-date .material-symbols-outlined { font-size:1.2rem}
.status-date.status-date-canceled {
	color:var(--danger)
}
.status-date strong {white-space: nowrap;}
.status-date.status-date-autorenewal {}


/* ####################
#   SUPERADMIN SOLO   #
#################### */
.negocio-added { position:relative; }
.negocio-added .btn-close { position:absolute; top:0; right:0;}
.negocio-added h2 { display:flex; align-items:center; gap:12px; justify-content: center; padding:0 20px 20px;}
.negocio-added label { color:#fff}
/* ####################
# FIN SUPERADMIN SOLO #
#################### */

/* PERSONALIZACIÓN */


/* Estilos específicos para el Editor de Temas */

.premium-card-section.locked {
    position: relative;
    overflow: hidden;
	padding: 20px;
	margin:0 -20px 0;
}

.lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    
    /* FLEXBOX CONFIGURACIÓN */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* CAMBIO CLAVE: Cambiamos 'center' por 'flex-start' para que el panel suba */
    justify-content: flex-start; 
    
    /* ESPACIADO SUPERIOR */
    /* Aquí controlas cuántos píxeles quieres que baje el panel desde el borde de arriba */
    padding-top: 60px; 
    padding-left: 20px;
    padding-right: 20px;

    /* FONDO Y DEGRADADO */
    background: linear-gradient(180deg, 
        color-mix(in srgb, var(--bg) 35%, transparent) 0%, 
        color-mix(in srgb, var(--bg) 35%, transparent) 30%, 
        var(--bg) 90%
    );
    backdrop-filter: blur(5px);
    border-radius: var(--card-border-radius);
    
    /* IMPORTANTE: Permitir scroll a través del overlay */
    pointer-events: none; 
}

/* El contenedor del panel informativo */
.lock-overlay-content {
    position: relative;
    z-index: 21;
    width: 100%;
    max-width: 400px;
    display: flex;
    justify-content: center;
}

.premium-card-panel {
    pointer-events: all; text-align:center
}
.premium-card-panel h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}
.premium-card-panel p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.2;
    margin: 20px 0 20px 0;
}
.premium-card-panel > span { font-size: 3rem; color: var(--primary);  }

.premium-card-section { position: relative; }
.premium-card-section.locked .card-body, 
.premium-card-section.locked .card-header {pointer-events: none; user-select: none; opacity: 0.5; }


.section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text-main); }
.section-divider { border: 0; border-top: 1px solid var(--border-color); margin: 2rem 0; }

/*.personalization-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}*/

.font-preview-box {
    margin-top: 10px;
    padding: 15px;
    background: var(--bg);
    border-radius: 8px;
    border: 2px dashed var(--border-color);
}

.title-preview { font-size: 1.4rem; font-weight: 600; color: var(--text-main); line-height: 1.2;}
.body-preview {color: var(--text-main); }

.option-image {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    border-radius: 4px;
}

.visual-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.visual-option-card {
    cursor: pointer;
    position: relative;
}

.visual-option-card input {
    position: absolute;
    opacity: 0;
}

.option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
	height: 100%;
}

.visual-option-card:hover .option-content {	
    border-color: var(--primary);
}
.visual-option-card:hover:not(.theme-dark) .option-content {
    background: rgba(255,255,255,0.05);
}
.visual-option-card:hover:is(.theme-dark) .option-content {
    border-color: #fff;
}

.visual-option-card:checked:is(.theme-dark) .option-content {	
	border-style: dashed;
}
.visual-option-card:checked:not(.theme-dark) .option-content {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.option-preview {
    width: 100%;
    height: 60px;
    background: #444;
    border-radius: 4px;
    display: flex;
    padding: 10px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}
.item-schematic {
    border: 2px solid var(--primary);
    background: #fff;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.img-preview-card {
    background: rgba(0,0,0,0.1);
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* --- ESTILO LISTA --- */
.type-list {
    gap: 3px;
}
.type-list .item-schematic {
    width: 80px;
    height: 22px;
}

/* --- ESTILO CUADRÍCULA --- */
.type-grid {display: grid !important;
    grid-template-columns: repeat(2, 30px);
    /* El truco está aquí: definimos el tamaño de las filas según su contenido */
    grid-template-rows: auto auto; 
    /* Alineamos el contenido al principio para que el espacio sobrante quede abajo */
    align-content: start; 
    gap: 3px;
    justify-content: center;
}
.type-grid .item-schematic {
    width: 30px;
    height: 35px;
    flex-direction: column; /* Foto arriba en el esquema de rejilla */
	    align-items: center;
}
/* En rejilla, el "cuadradito-foto" puede ser un pelín más grande */
.type-grid .img-preview-card {
    width: 17px;
    height: 17px;
}
.type-list .text-preview-card {border:3px solid rgba(0,0,0,0.1); width: 40px; height: 8px;margin-right: auto;border-left: 0; border-right: 0}
.type-grid .text-preview-card { border-top: 3px solid rgba(0, 0, 0, 0.1);
    width: 14px;
    height: 8px;
    margin-top: 3px;
    display: flex;
}

/* El label siempre debajo del grid/flex */
.option-label {
    grid-column: span 2; /* Para que en el grid ocupe toda la fila inferior */
	margin:0 auto;
    /*margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 600;*/
}

/* --- Estilos para el Tema CLARO --- */
.theme-light .option-content {
    background: #ffffff;
    color: #334155; /* Un gris oscuro azulado profesional */
}

.theme-light .material-symbols-outlined {
    color: #f59e0b; /* Color ámbar/sol para el modo claro */
}

/* --- Estilos para el Tema OSCURO --- */
.theme-dark .option-content {
    background: #1e293b; /* Un fondo azul noche profundo */
}
.theme-dark .option-label {
    color: #f1f5f9;
}

.theme-dark .material-symbols-outlined {
    color: #94a3b8; /* Un gris plateado/luna para el modo oscuro */
}

/* --- Mejoras al estar SELECCIONADO --- */
.visual-option-card input:checked + .option-content {
    /* Mantenemos tu base pero ajustamos el brillo según el tema */
    box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(0,0,0,0.1);
}

/* Si el oscuro está seleccionado, podemos darle un brillo sutil al borde */
.theme-dark input:checked + .option-content {
    border-color: #60a5fa;
}


.visual-option-card .material-symbols-outlined {
    font-size: 2.5rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Activamos el relleno (fill) cuando esté seleccionado */
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.visual-option-card input:checked + .option-content .material-symbols-outlined:not(.preview-position *, .logo-visual-preview *)
{
	transform: scale(1.1) rotate(5deg); /* Ligera rotación al marcarlo */
    font-variation-settings: 'FILL' 1, 'wght' 400; /* Se rellena el icono al seleccionar */
}

.preview-style.compacto {border: 2px solid var(--primary);border-bottom:0; padding:2px; width: 100px;}
.preview-style.compacto.last {border-bottom:2px solid var(--primary);}
.preview-style.compacto .img-preview-card { background: rgba(0,0,0,0.15); width: 14px; height: 14px;border-radius:2px;}
.preview-style.tarjetas {border: 2px solid var(--primary); padding:4px; width: 100px; margin-bottom:2px;border-radius:5px; }
.preview-style.tarjetas .img-preview-card { background: rgba(0,0,0,0.15); width: 14px; height: 14px;border-radius:2px;}

@media (max-width: 1200px) {
.preview-style.compacto, .preview-style.tarjetas {width: 100%;}
}
@media (max-width: 768px) {
.preview-style.compacto, .preview-style.tarjetas {width: 100px;}
}

/* Upsell Styles */

.btn-upgrade {
    display: inline-block;
    padding: 12px 24px;
    background: var(--primary);
    color: #fff;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
	margin-left: auto;
}
.btn-upgrade:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* Color Picker Custom */
.color-picker-wrapper { display: flex; align-items: center; gap: 12px; }
.color-input { width: 60px; height: 40px; padding: 0; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; background: transparent; }
.color-value { font-family: monospace; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }

/* Sticky Footer */
.sticky-footer {
    position: sticky;
    bottom: 20px;
    background: var(--card-bg);
    padding: 15px 30px;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    z-index: 100;
    margin-top: 40px;
}
.btn-primary-large {
    background: var(--primary);
    color: #fff;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}
.btn-primary-large:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

/* Previsualizaciones específicas */
.theme-light-preview { background: #f1f5f9; }
.theme-light-preview .preview-line { background: #cbd5e1; height: 4px; width: 30px; }
.theme-light-preview .preview-box { background: #fff; height: 20px; width: 20px; border-radius: 2px; }

.theme-dark-preview { background: #1e293b; }
.theme-dark-preview .preview-line { background: #475569; height: 4px; width: 30px; }
.theme-dark-preview .preview-box { background: #0f172a; height: 20px; width: 20px; border-radius: 2px; }
  
.logo-visual-preview .material-symbols-outlined {color:#fff;font-size:2rem; }
.logo-visual-preview {width: 64px; height: 64px; border:2px solid var(--primary);background:color-mix(in srgb, var(--primary) 50%, transparent); }
.logo-square { border-radius: 3px; }
.logo-rounded {  border-radius: 16px; }
.logo-circle {  border-radius: 50%; }

.preview-radius {border: 2px solid var(--primary); width: 70px; padding:5px; width: 100px;}
.radius-0 { border-radius: 0; }
.radius-16 { border-radius: 8px; }
.preview-radius .img-preview-card { background: rgba(0,0,0,0.15); width: 24px; height: 24px;}
.preview-position .img-preview-card { background: var(--primary); width: 24px; height: 24px;border-radius:2px;}
.img-preview-card {color:#fff;}

.preview-position {border: 2px solid rgba(0,0,0,0.15); width: 70px;padding:5px; width: 100px; }
.layout-right .img-preview-card {margin-left: auto;}

.option-label { font-size: 0.8rem; font-weight: 600; color: var(--primary); }
/*.visual-option-card input:checked + .option-content .option-label { color: var(--primary); }*/

/* RESPONSIVE */
		
@media (max-width: 992px) {
	.card { padding:16px;}
	.nav-links-close{display:flex}
	.header-breadcrumb{padding-left:0}
	.grid-2-1{grid-template-columns:1fr}
	.form-row{flex-direction:column;gap:0}    
	.hamburger-btn{display:flex;align-items:center;justify-content:center}
	.dashboard-layout{grid-template-columns:0}
	.main-content-wrapper{padding:30px}
	.sidebar{position:fixed;top:0;left:-280px;width:280px;height:100%;z-index:1000;transition:left .3s ease;overflow-y:auto;background:var(--hamburger-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-right:1px solid var(--border-color)}
	.sidebar.open{left:0!important;display:flex!important}
	.sidebar-overlay{position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	
	/* EL TRUCO ESTÁ AQUÍ */
	opacity: 0;
	visibility: hidden; 
	transition: opacity 0.3s ease, visibility 0.3s ease;
	
	pointer-events: none; /* Evita que bloquee clics mientras es invisible */}
	.sidebar-overlay.open{opacity: 1;
	visibility: visible;
	pointer-events: all; /* Permite que al hacer clic fuera se cierre el menú */}
}
		
@media (max-width:768px){
	.grid-cols-2, .grid-cols-3 { grid-template-columns: 1fr; }
	.grid-cols-4 { grid-template-columns: 1fr 1fr; }
	.form-grid{grid-template-columns:1fr}
	.full-width{grid-column:span 1}
	.btn-ver-escaparate{display:none}
	.qr-editor-container{grid-template-columns:1fr;gap:20px}
	.select-grid{grid-template-columns:1fr 1fr}
	.image-preview-container.flex {flex-direction: column;}
	.main-content-wrapper{padding:10px}
	.subscription-status-container {padding-left: 10px; padding-right: 10px;}
	.design-grid{grid-template-columns:1fr}
}

@media (max-width: 600px) {
	.msg-suscripcion{flex-wrap:wrap}
	.msg-body{flex:1}
	.msg-link-btn{width:100%;justify-content:center;margin-top:8px}
	.dashboard-header-text h1{font-size:1.4rem}
	/*.header-breadcrumb{font-size:.85rem}*/
	.product-price,.status-text{display:none}
	.cat-actions{gap:8px}
	.cat-actions>div{margin-right:0!important}
	.header-breadcrumb-subtitle,.header-breadcrumb-subtitle::before{display:none}
	.stats-summary-grid,.tags-selector-grid{grid-template-columns:repeat(2,1fr)}
	.stats-summary-grid .stat-item:last-child{grid-column:1/-1}
	.btn-add{border-radius:50%;width:50px;height:50px}
	.btn-add .text-hidden{display:none}
	.resumen-grid {grid-template-columns: 1fr;}
	.status-date {display:block;}
    .personalization-grid { grid-template-columns: 1fr; }
    /*.visual-options-grid { grid-template-columns: repeat(2, 1fr); }*/
	.social-row-item{padding:8px !important;gap:8px;}
	.social-select {width:inherit !important;padding: 6px !important }
	.social-input {padding: 6px !important; }
	.social-icon-preview { width: 18px; height: 18px;}

	.social-data-group{flex-direction:column;gap:8px;width:100%;order:10}.social-row-item{flex-wrap:wrap}.btn-delete{margin-left:auto}

	.premium-card-section.locked {padding: 0px;margin: 0 -10px 0;}

	.social-icon-preview { width: 18px; height: 18px;}
	.social-data-group {flex-direction: column; gap: 8px; width: 100%; order: 10;}
	.social-row-item .btn-delete, .schedule-block .btn-delete {width: 28px;   height: 28px;  border-radius: 6px;}
	.social-row-item .btn-delete .material-symbols-outlined, .schedule-block .btn-delete .material-symbols-outlined {font-size: 1.4rem; }
	.logo-actions .btn-primary, .logo-actions .btn-ghost {width: inherit !important;}
	.design-block .preview-box {margin-right: auto;}
	.form-section-wrapped {padding:10px}
	.form-grid {gap:12px;}
	.form-group { margin-bottom: calc(var(--margin-bottom)/2);}
	.social-input, .social-select, .form-group input:not([type="color"]), .form-group textarea, .form-group select { padding: 8px 12px;}
	.social-admin-card:first-child, .schedule-block:first-child, .schedule-block {padding:8px;}
	.title-preview { font-size: 1.3rem; }
	.design-cta {padding:12px;}
	.schedule-block{flex-wrap:wrap;gap:8px}.schedule-block .form-group:nth-of-type(1){flex:1;order:1}.schedule-block .btn-delete{order:2;flex-shrink:0}.schedule-block .form-group:nth-of-type(2){flex:1 0 100%;order:3}
}

@media (max-width: 480px) {
	.sidebar{left:-100%;width:100%}
	.select-grid { grid-template-columns: 1fr; }
	#qr-result-canvas-container { transform: scale(0.8); transform-origin: center center;}    
}