:root{
	--cw-bg:#0d1117;
	--cw-panel:#161b22;
	--cw-panel-2:#1c232c;
	--cw-line:#2a323d;
	--cw-text:#e6edf3;
	--cw-dim:#8b98a5;
	--cw-accent:#2f81f7;
	--cw-live:#3fb950;
	--cw-hot:#f85149;
	--cw-warn:#d29922;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* Debe ir antes que .cw-screen: si no, display:flex anula el atributo hidden. */
[hidden]{display:none !important}

html,body{height:100%}

body.cw-body{
	margin:0;
	background:var(--cw-bg);
	color:var(--cw-text);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size:16px;
	line-height:1.45;
	overscroll-behavior:none;
	padding-top:env(safe-area-inset-top);
	padding-bottom:env(safe-area-inset-bottom);
}

.cw-screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* ---------- Login ---------- */
#cw-login{align-items:center;justify-content:center;padding:24px}

.cw-card{
	width:100%;max-width:380px;background:var(--cw-panel);
	border:1px solid var(--cw-line);border-radius:18px;padding:28px 24px 24px;text-align:center;
	box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.cw-logo{color:var(--cw-accent);margin-bottom:6px}
.cw-card h1{font-size:20px;margin:0 0 4px;font-weight:650;letter-spacing:-.01em}
.cw-sub{margin:0 0 22px;color:var(--cw-dim);font-size:13px}

.cw-card label{display:block;text-align:left;font-size:12px;color:var(--cw-dim);margin:14px 0 6px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.cw-card input{
	width:100%;padding:14px 14px;border-radius:11px;border:1px solid var(--cw-line);
	background:var(--cw-panel-2);color:var(--cw-text);font-size:17px;outline:none;
}
.cw-card input:focus{border-color:var(--cw-accent);box-shadow:0 0 0 3px rgba(47,129,247,.18)}
#cw-pin{letter-spacing:.35em;text-align:center;font-size:22px}

.cw-btn-primary{
	width:100%;margin-top:22px;padding:15px;border:0;border-radius:11px;
	background:var(--cw-accent);color:#fff;font-size:16px;font-weight:650;cursor:pointer;
}
.cw-btn-primary:active{transform:translateY(1px)}
.cw-btn-primary[disabled]{opacity:.55}

.cw-msg{min-height:20px;margin-top:12px;font-size:13.5px;color:var(--cw-hot)}
.cw-msg.ok{color:var(--cw-live)}

.cw-warn{
	background:rgba(210,153,34,.12);border:1px solid rgba(210,153,34,.4);
	color:#f0c674;border-radius:10px;padding:11px 13px;font-size:13px;text-align:left;margin-bottom:6px;
}

/* ---------- App ---------- */
.cw-top{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:12px 14px;border-bottom:1px solid var(--cw-line);background:var(--cw-panel);
	position:sticky;top:0;z-index:5;
}
.cw-top-left{display:flex;align-items:center;gap:9px;min-width:0}
.cw-top-right{display:flex;align-items:center;gap:6px}

.cw-dot{width:9px;height:9px;border-radius:50%;background:var(--cw-hot);flex:0 0 auto;transition:background .3s}
.cw-dot.on{background:var(--cw-live);box-shadow:0 0 0 3px rgba(63,185,80,.16)}

#cw-channel{
	background:var(--cw-panel-2);color:var(--cw-text);border:1px solid var(--cw-line);
	border-radius:9px;padding:8px 10px;font-size:15px;max-width:190px;
}

.cw-icon-btn{
	background:var(--cw-panel-2);border:1px solid var(--cw-line);color:var(--cw-text);
	border-radius:9px;width:40px;height:38px;font-size:16px;cursor:pointer;line-height:1;
}
.cw-icon-btn[aria-pressed="true"]{background:rgba(248,81,73,.18);border-color:rgba(248,81,73,.45)}

.cw-status{
	text-align:center;font-size:13px;color:var(--cw-dim);padding:10px 14px 2px;min-height:34px;
}
.cw-status.live{color:var(--cw-live);font-weight:600}
.cw-status.tx{color:var(--cw-hot);font-weight:600}

.cw-people{
	display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:6px 14px 0;
}
.cw-chip{
	font-size:12px;background:var(--cw-panel-2);border:1px solid var(--cw-line);
	border-radius:999px;padding:4px 10px;color:var(--cw-dim);
}
.cw-chip.talking{border-color:var(--cw-live);color:var(--cw-live)}
.cw-chip.me{color:var(--cw-text)}

.cw-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 16px}

.cw-ptt-wrap{position:relative;display:grid;place-items:center;width:250px;height:250px}

.cw-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cw-rings span{
	position:absolute;border-radius:50%;border:2px solid var(--cw-live);opacity:0;
	width:190px;height:190px;
}
.cw-rings.on span{animation:cw-pulse 1.9s ease-out infinite}
.cw-rings.on span:nth-child(2){animation-delay:.63s}
.cw-rings.on span:nth-child(3){animation-delay:1.26s}
@keyframes cw-pulse{
	0%{transform:scale(.86);opacity:.55}
	100%{transform:scale(1.32);opacity:0}
}

.cw-ptt{
	position:relative;width:200px;height:200px;border-radius:50%;
	border:none;cursor:pointer;color:#fff;
	background:radial-gradient(circle at 50% 32%,#3d8bfd,#1f6feb 55%,#144a9e);
	box-shadow:0 14px 34px rgba(31,111,235,.4),inset 0 -6px 14px rgba(0,0,0,.28);
	touch-action:none;user-select:none;-webkit-user-select:none;
	transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.cw-ptt:active{transform:scale(.97)}
.cw-ptt.tx{
	background:radial-gradient(circle at 50% 32%,#ff7b72,#f85149 55%,#a5241d);
	box-shadow:0 14px 40px rgba(248,81,73,.5),inset 0 -6px 14px rgba(0,0,0,.28);
	transform:scale(1.03);
}
.cw-ptt[disabled]{opacity:.5;filter:grayscale(.5)}

.cw-ptt-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
.cw-ptt-label{font-size:12.5px;font-weight:700;letter-spacing:.07em;line-height:1.35}

.cw-lock{
	margin-top:20px;display:flex;align-items:center;gap:9px;
	color:var(--cw-dim);font-size:13.5px;
}
.cw-lock input{width:18px;height:18px;accent-color:var(--cw-accent)}

.cw-log-wrap{padding:0 14px 14px}
.cw-log-wrap h2{
	font-size:11px;text-transform:uppercase;letter-spacing:.09em;
	color:var(--cw-dim);margin:0 0 8px;font-weight:700;
}
.cw-log{
	list-style:none;margin:0;padding:0;max-height:170px;overflow-y:auto;
	background:var(--cw-panel);border:1px solid var(--cw-line);border-radius:12px;
	-webkit-overflow-scrolling:touch;
}
.cw-log li{
	display:flex;align-items:center;gap:10px;padding:10px 13px;
	border-bottom:1px solid var(--cw-line);font-size:14px;
}
.cw-log li:last-child{border-bottom:0}
.cw-log-empty{color:var(--cw-dim);justify-content:center;font-size:13px}
.cw-log .cw-who{font-weight:650;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-log .cw-when{color:var(--cw-dim);font-size:12px;font-variant-numeric:tabular-nums}
.cw-log .cw-replay{
	background:var(--cw-panel-2);border:1px solid var(--cw-line);color:var(--cw-text);
	border-radius:7px;padding:4px 9px;font-size:12px;cursor:pointer;
}
.cw-log li.now{background:rgba(63,185,80,.08)}

.cw-foot{
	text-align:center;padding:12px 14px 20px;color:var(--cw-dim);font-size:12px;
}
.cw-foot a{color:var(--cw-dim)}

@media (max-height:680px){
	.cw-ptt-wrap{width:200px;height:200px}
	.cw-ptt{width:164px;height:164px}
	.cw-rings span{width:156px;height:156px}
	.cw-log{max-height:110px}
}