/*
 * KMO Legal — Portal de Membresía
 * Diseño: continuación de la identidad de marca del sitio principal
 * (fondo azul marino profundo, acentos azul eléctrico, plata, tipografía
 * Cormorant Garamond + Manrope), elevada a un panel de aplicación
 * sofisticado, futurista y de clase mundial: vidrio esmerilado, brillos
 * sutiles, microinteracciones y una jerarquía tipográfica clara.
 */

.kmo-portal-app{
	--kmo-bg:#060b14;
	--kmo-bg-alt:#0a1626;
	--kmo-card:#0d1a2c;
	--kmo-card-2:#101f34;
	--kmo-border:rgba(120,160,210,0.18);
	--kmo-border-strong:rgba(79,169,220,0.4);
	--kmo-blue-deep:#06294f;
	--kmo-blue-mid:#12508f;
	--kmo-blue:#1c74c9;
	--kmo-blue-bright:#1c8ee8;
	--kmo-blue-light:#4fa9dc;
	--kmo-silver:#c9d2db;
	--kmo-silver-bright:#eef2f6;
	--kmo-ink:#f3f6f9;
	--kmo-muted:#93a6bd;
	--kmo-green:#2ecc8f;
	--kmo-amber:#e8a93c;
	--kmo-red:#e8574f;
	--kmo-radius:18px;
	--kmo-radius-sm:12px;
	--kmo-serif:'Cormorant Garamond', Georgia, serif;
	--kmo-sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	all:initial;
	*, *::before, *::after{ box-sizing:border-box; }
	display:block;
	font-family:var(--kmo-sans);
	color:var(--kmo-ink);
	background:
		radial-gradient(ellipse at 85% -10%, rgba(28,142,232,0.16), transparent 55%),
		radial-gradient(ellipse at -10% 40%, rgba(18,80,143,0.22), transparent 50%),
		var(--kmo-bg);
	border-radius:22px;
	border:1px solid var(--kmo-border);
	padding:0;
	overflow:hidden;
	line-height:1.55;
	min-height:520px;
	position:relative;
}

.kmo-portal-app a{ color:inherit; text-decoration:none; }
.kmo-portal-app button{ font-family:inherit; cursor:pointer; }
.kmo-portal-app ul, .kmo-portal-app ol{ margin:0; padding:0; list-style:none; }
.kmo-portal-app h1, .kmo-portal-app h2, .kmo-portal-app h3, .kmo-portal-app h4{
	font-family:var(--kmo-serif); font-weight:700; margin:0 0 8px; color:var(--kmo-silver-bright);
}
.kmo-portal-app p{ margin:0 0 10px; color:var(--kmo-muted); }
.kmo-portal-app::-webkit-scrollbar{ width:8px; height:8px; }
.kmo-portal-app::-webkit-scrollbar-thumb{ background:rgba(79,169,220,0.35); border-radius:8px; }

/* ---------- Loading / empty states ---------- */
.kmo-loading, .kmo-empty{
	display:flex; align-items:center; justify-content:center; gap:10px;
	padding:40px 20px; color:var(--kmo-muted); font-size:14px;
}
.kmo-spinner{
	width:18px; height:18px; border-radius:50%;
	border:2px solid rgba(79,169,220,0.25); border-top-color:var(--kmo-blue-light);
	animation:kmo-spin 0.8s linear infinite;
}
@keyframes kmo-spin{ to{ transform:rotate(360deg); } }

.kmo-toast-stack{ position:absolute; top:18px; right:18px; z-index:50; display:flex; flex-direction:column; gap:10px; max-width:320px; }
.kmo-toast{
	background:rgba(13,26,44,0.96); border:1px solid var(--kmo-border-strong); border-radius:12px;
	padding:12px 16px; font-size:13px; color:var(--kmo-silver-bright); box-shadow:0 12px 30px rgba(0,0,0,0.4);
	animation:kmo-toast-in 0.25s ease;
}
.kmo-toast.kmo-toast-error{ border-color:rgba(232,87,79,0.55); }
.kmo-toast.kmo-toast-success{ border-color:rgba(46,204,143,0.5); }
@keyframes kmo-toast-in{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- Header / membership status ---------- */
.kmo-header{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:22px 28px; border-bottom:1px solid var(--kmo-border);
	background:linear-gradient(180deg, rgba(28,142,232,0.06), transparent);
}
.kmo-brand{ display:flex; align-items:center; gap:12px; }
.kmo-brand-mark{
	width:40px; height:40px; border-radius:50%;
	background:linear-gradient(135deg, var(--kmo-blue-bright), var(--kmo-blue-deep));
	display:flex; align-items:center; justify-content:center;
	font-family:var(--kmo-serif); font-weight:700; font-size:16px; color:#fff;
	box-shadow:0 6px 18px rgba(28,142,232,0.4);
}
.kmo-brand-text strong{ display:block; font-family:var(--kmo-serif); font-size:18px; color:var(--kmo-silver-bright); }
.kmo-brand-text span{ display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--kmo-muted); }

.kmo-membership-pill{
	display:flex; align-items:center; gap:10px;
	background:rgba(28,142,232,0.1); border:1px solid var(--kmo-border-strong);
	padding:8px 16px; border-radius:40px; font-size:12.5px; font-weight:600;
}
.kmo-membership-pill.is-inactive{ background:rgba(232,87,79,0.1); border-color:rgba(232,87,79,0.4); color:#ffd9d6; }
.kmo-dot{ width:8px; height:8px; border-radius:50%; background:var(--kmo-green); box-shadow:0 0 8px var(--kmo-green); }
.kmo-membership-pill.is-inactive .kmo-dot{ background:var(--kmo-red); box-shadow:0 0 8px var(--kmo-red); }

/* ---------- Identificación del profesional en su propio panel ---------- */
.kmo-pro-profile-pill{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:2px; }
.kmo-pro-profile-pill strong{ font-family:var(--kmo-serif); font-size:15px; font-weight:700; color:var(--kmo-silver-bright); }
.kmo-pro-profile-pill span{ font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:var(--kmo-muted); }

/* ---------- Tabs ---------- */
.kmo-tabs{
	display:flex; gap:4px; padding:14px 28px 0; overflow-x:auto; border-bottom:1px solid var(--kmo-border);
}
.kmo-tab{
	background:none; border:none; color:var(--kmo-muted); font-weight:700; font-size:13.5px;
	padding:12px 18px; border-radius:12px 12px 0 0; white-space:nowrap; position:relative;
	transition:color .2s ease, background .2s ease;
}
.kmo-tab:hover{ color:var(--kmo-silver-bright); background:rgba(79,169,220,0.08); }
.kmo-tab.is-active{ color:#fff; }
.kmo-tab.is-active::after{
	content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:2px;
	background:linear-gradient(90deg, var(--kmo-blue-bright), var(--kmo-blue-light)); border-radius:2px;
}

.kmo-panel{ padding:26px 28px 34px; }
.kmo-panel[hidden]{ display:none; }

/* ---------- Cards / grids ---------- */
.kmo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px; margin-top:6px; }
.kmo-card{
	background:linear-gradient(180deg, var(--kmo-card), rgba(13,26,44,0.55));
	border:1px solid var(--kmo-border); border-radius:var(--kmo-radius); padding:20px;
	transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kmo-card:hover{ transform:translateY(-3px); border-color:var(--kmo-border-strong); box-shadow:0 16px 34px rgba(4,10,25,0.45); }

.kmo-pro-card{ display:flex; flex-direction:column; gap:12px; }
.kmo-pro-head{ display:flex; align-items:center; gap:12px; }
.kmo-pro-avatar{
	width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--kmo-blue-deep);
	border:2px solid rgba(79,169,220,0.35); flex:none;
}
.kmo-pro-name{ font-family:var(--kmo-serif); font-size:17px; font-weight:700; color:#fff; }
.kmo-pro-rating{ font-size:12px; color:var(--kmo-amber); }
.kmo-chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.kmo-chip{
	font-size:11px; font-weight:700; letter-spacing:0.3px; text-transform:uppercase;
	background:rgba(79,169,220,0.12); border:1px solid rgba(79,169,220,0.3); color:var(--kmo-blue-light);
	padding:4px 10px; border-radius:20px;
}
.kmo-pro-bio{ font-size:13px; color:var(--kmo-muted); }
.kmo-card-actions{ display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }

/* ---------- Buttons ---------- */
.kmo-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	background:linear-gradient(135deg, var(--kmo-blue-bright), var(--kmo-blue-mid));
	color:#fff; font-weight:700; font-size:13px; padding:10px 18px; border-radius:30px; border:none;
	box-shadow:0 8px 20px rgba(28,142,232,0.3); transition:transform .15s ease, box-shadow .15s ease;
}
.kmo-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(28,142,232,0.45); }
.kmo-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
.kmo-btn-ghost{
	background:transparent; border:1.5px solid var(--kmo-border); color:var(--kmo-silver-bright);
	box-shadow:none;
}
.kmo-btn-ghost:hover{ border-color:var(--kmo-border-strong); background:rgba(79,169,220,0.08); }
.kmo-btn-danger{ background:linear-gradient(135deg,#e8574f,#a8352f); box-shadow:0 8px 20px rgba(232,87,79,0.25); }
.kmo-btn-sm{ padding:7px 14px; font-size:12px; }
.kmo-btn-block{ width:100%; justify-content:center; }

/* ---------- Forms ---------- */
.kmo-field{ margin-bottom:14px; }
.kmo-field label{ display:block; font-size:12px; font-weight:700; color:var(--kmo-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.kmo-input, .kmo-select, .kmo-textarea{
	width:100%; background:rgba(6,11,20,0.6) !important; border:1px solid var(--kmo-border); color:var(--kmo-ink) !important;
	padding:10px 14px; border-radius:10px; font-size:14px; font-family:inherit; outline:none;
	transition:border-color .15s ease;
	/* !important en fondo/color: algunos temas de WordPress traen sus
	   propios estilos globales para inputs/textarea (fondo claro con
	   texto oscuro) que, al tener mayor especificidad o cargarse después,
	   pueden dejar el texto claro de este panel sobre un fondo también
	   claro y volverlo ilegible — se fuerza aquí el look oscuro propio. */
}
.kmo-input:focus, .kmo-select:focus, .kmo-textarea:focus{ border-color:var(--kmo-border-strong); }
.kmo-textarea{ resize:vertical; min-height:70px; }
.kmo-select option{ background:#0d1a2c; color:var(--kmo-ink); }

/* ---------- Appointment / consultation list rows ---------- */
.kmo-row-list{ display:flex; flex-direction:column; gap:10px; }
.kmo-row{
	display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
	background:var(--kmo-card); border:1px solid var(--kmo-border); border-radius:var(--kmo-radius-sm); padding:14px 18px;
}
.kmo-row-main{ display:flex; flex-direction:column; gap:2px; }
.kmo-row-title{ font-weight:700; color:#fff; font-size:14px; }
.kmo-row-sub{ font-size:12.5px; color:var(--kmo-muted); }
.kmo-status{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:4px 10px; border-radius:20px; }
.kmo-status-confirmed{ background:rgba(46,204,143,0.12); color:var(--kmo-green); border:1px solid rgba(46,204,143,0.35); }
.kmo-status-pending{ background:rgba(232,169,60,0.12); color:var(--kmo-amber); border:1px solid rgba(232,169,60,0.35); }
.kmo-status-cancelled{ background:rgba(232,87,79,0.12); color:#ff9d97; border:1px solid rgba(232,87,79,0.35); }
.kmo-status-completed{ background:rgba(79,169,220,0.12); color:var(--kmo-blue-light); border:1px solid rgba(79,169,220,0.35); }

/* ---------- Availability calendar ---------- */
.kmo-slots{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.kmo-slot{
	background:rgba(28,142,232,0.08); border:1px solid var(--kmo-border-strong); color:var(--kmo-silver-bright);
	font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:10px; transition:background .15s ease, transform .15s ease;
}
.kmo-slot:hover{ background:rgba(28,142,232,0.22); transform:translateY(-1px); }
.kmo-slot.is-selected{ background:linear-gradient(135deg, var(--kmo-blue-bright), var(--kmo-blue-mid)); border-color:transparent; color:#fff; }

/* ---------- Modal ---------- */
.kmo-modal-backdrop{
	position:absolute; inset:0; background:rgba(2,5,10,0.72); backdrop-filter:blur(4px);
	display:flex; align-items:center; justify-content:center; z-index:40; padding:20px;
}
.kmo-modal{
	width:100%; max-width:460px; max-height:86%; overflow-y:auto;
	background:var(--kmo-card-2); border:1px solid var(--kmo-border-strong); border-radius:var(--kmo-radius);
	padding:26px; box-shadow:0 30px 70px rgba(0,0,0,0.55);
}
/* Variante más ancha para contenido que necesita más espacio (el chat del
   agente de consulta dentro de un modal, por ejemplo). */
.kmo-modal-wide{ max-width:640px; }
.kmo-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.kmo-modal-close{ background:none; border:none; color:var(--kmo-muted); font-size:20px; line-height:1; }

/* ---------- Chat (agente de consulta) ---------- */
.kmo-chat{ display:flex; flex-direction:column; height:440px; background:var(--kmo-card); border:1px solid var(--kmo-border); border-radius:var(--kmo-radius); overflow:hidden; }
.kmo-chat-messages{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; }
.kmo-msg{ max-width:78%; padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.5; }
.kmo-msg-user{ align-self:flex-end; background:linear-gradient(135deg, var(--kmo-blue-bright), var(--kmo-blue-mid)); color:#fff; border-bottom-right-radius:4px; }
.kmo-msg-assistant{ align-self:flex-start; background:rgba(255,255,255,0.06); color:var(--kmo-silver-bright); border-bottom-left-radius:4px; }
.kmo-msg-escalated{ align-self:center; background:rgba(232,169,60,0.12); border:1px solid rgba(232,169,60,0.4); color:#ffe3ad; font-size:12.5px; text-align:center; max-width:90%; }
.kmo-chat-input{ display:flex; gap:10px; padding:14px; border-top:1px solid var(--kmo-border); }
.kmo-chat-input textarea{ flex:1; }
.kmo-consent-banner{
	display:flex; flex-direction:column; gap:10px; align-items:flex-start;
	background:rgba(79,169,220,0.08); border:1px solid var(--kmo-border-strong); border-radius:var(--kmo-radius-sm);
	padding:16px 18px; font-size:12.5px; color:var(--kmo-muted);
}

/* ---------- Weekly availability editor (panel profesional) ---------- */
.kmo-week-grid{ display:grid; grid-template-columns:110px repeat(3,1fr); gap:8px; align-items:center; }
.kmo-week-grid .kmo-week-head{ font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--kmo-muted); font-weight:700; }
.kmo-week-day{ font-size:13px; font-weight:700; color:var(--kmo-silver-bright); }

/* ---------- Misc ---------- */
.kmo-section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.kmo-muted-note{ font-size:12px; color:var(--kmo-muted); }
.kmo-divider{ height:1px; background:var(--kmo-border); margin:18px 0; }
.kmo-star{ color:var(--kmo-amber); }
.kmo-progress-ring{ position:relative; width:46px; height:46px; }
.kmo-progress-ring svg{ transform:rotate(-90deg); }

@media (max-width:720px){
	.kmo-header{ flex-direction:column; align-items:flex-start; }
	.kmo-week-grid{ grid-template-columns:1fr; }
	.kmo-panel{ padding:20px 16px 28px; }
	.kmo-tabs{ padding:12px 16px 0; }
}