/* Panel del dueño: menú lateral izquierdo, estética Escucha Radio. */
.escucha-panel{--red:#b30000;--bright:#df262c;--ink:#202022;--muted:#77777e;--line:#e9e9ec;--paper:#f8f8fa;--side:#141416;--font:'DM Sans',Arial,sans-serif;--heading:'Manrope',Arial,sans-serif;display:grid;grid-template-columns:250px minmax(0,1fr);min-height:480px;margin:18px 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;color:var(--ink);font:14px/1.6 var(--font);position:relative}
.escucha-panel *,.escucha-auth *{box-sizing:border-box}
.escucha-panel button,.escucha-panel input,.escucha-panel select,.escucha-panel textarea,.escucha-auth button,.escucha-auth input{font:inherit}
.escucha-panel h1,.escucha-panel h2,.escucha-panel h3,.escucha-auth h2,.escucha-auth h3{font-family:var(--heading);line-height:1.3;letter-spacing:-.5px}
.escucha-panel p,.escucha-auth p{margin:0}
.icon{width:19px;height:19px;flex-shrink:0;vertical-align:-4px}
.icon-check{width:14px;height:14px;color:#3f9c6b;stroke-width:2.4}

/* --- Barra móvil superior (Desktop: oculta) --- */
.panel-mobile-bar{display:none}
.panel-backdrop{display:none}

/* --- Lateral Desktop --- */
.panel-side{background:var(--side);color:#fff;display:flex;flex-direction:column;padding:26px 18px;gap:4px;min-height:100%}
.panel-side-head{display:flex;align-items:center;justify-content:space-between}
.panel-close-btn{display:none}
.panel-brand{color:#fff;text-decoration:none!important;font-family:var(--heading);font-weight:800;font-size:22px;letter-spacing:-1px;display:inline-flex;align-items:center;gap:9px}
.panel-brand b{color:#ed3c40;font-weight:800}
.brand-wave{display:inline-flex;align-items:center;gap:3px;height:24px}
.brand-wave i{display:block;width:3px;height:10px;background:#ed3c40;border-radius:3px}
.brand-wave i:nth-child(2),.brand-wave i:nth-child(4){height:18px}
.brand-wave i:nth-child(3){height:25px}
.brand-wave i:last-child{height:7px}
.panel-side-tag{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:#8d8d94;margin:7px 0 22px}
.panel-nav{display:flex;flex-direction:column;gap:4px}
.panel-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:8px;color:#b7b7bd;font-size:12.5px;font-weight:600;text-decoration:none!important;transition:background .15s,color .15s}
.panel-nav a:hover{color:#fff;background:#ffffff0d}
.panel-nav a.activa{background:var(--red);color:#fff}
.panel-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:13px 6px 6px;border-top:1px solid #ffffff14}
.panel-avatar{width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--heading);flex-shrink:0}
.panel-user-datos{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.panel-user-datos strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-user-datos small{font-size:10px;color:#8d8d94}
.panel-salir{display:flex;align-items:center;gap:9px;color:#9a9aa1;font-size:11px;font-weight:600;text-decoration:none!important;padding:9px 6px;border-radius:7px;transition:background .15s,color .15s}
.panel-salir:hover{color:#fff;background:#ffffff0d}

/* --- Contenido Principal --- */
.panel-main{padding:30px 32px 40px;background:var(--paper);min-width:0}

/* --- Encabezado estándar y uniforme de todas las secciones del panel --- */
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:54px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.panel-head-titles{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.panel-kicker{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);margin:0;line-height:1.2}
.panel-head h1{font-size:24px;font-weight:800;letter-spacing:-.5px;margin:0;line-height:1.25}
.panel-head-action{display:flex;align-items:center;gap:10px;flex-shrink:0}
.panel-head-action-empty{min-height:0}

.msg{padding:12px 15px;border-radius:8px;font-size:12.5px;font-weight:500;margin-bottom:18px;border:1px solid}
.msg-ok{background:#e9f5ee;color:#1c6b40;border-color:#bfe3cd}
.msg-mal{background:#fbeaea;color:#9c1d1d;border-color:#f0c9c9}
.msg-info{background:#eef1f8;color:#33427c;border-color:#c9d3ef}
.panel-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:18px}
.panel-card h2{font-size:16px;margin:0 0 14px}
.panel-card h3{margin:20px 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-size:10.5px}
.vacio{text-align:center;padding:44px 24px}
.vacio h2{margin-bottom:8px}
.vacio p{color:var(--muted);font-size:13px;max-width:420px;margin:0 auto 18px}

/* stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:3px}
.stat-card strong{font-family:var(--heading);font-size:22px;letter-spacing:-.5px}
.stat-card span{font-size:11px;color:var(--muted);font-weight:600}
.stat-card small,.stat-card a{font-size:11px;color:var(--red);font-weight:600;text-decoration:none}
.acciones-grid{display:flex;gap:11px;flex-wrap:wrap}

/* botones y chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:8px;border:1px solid transparent;font-weight:600;font-size:12.5px;text-decoration:none!important;cursor:pointer;transition:background .15s,color .15s,border-color .15s;line-height:1.4}
.btn .icon{width:16px;height:16px}
.btn-primary{background:var(--red);color:#fff!important}
.btn-primary:hover{background:#8f0000;color:#fff!important}
.btn-outline{border-color:#dedee3;background:#fff;color:var(--ink)!important}
.btn-outline:hover{border-color:var(--red);color:var(--red)!important}
.btn-dark{background:#242426;color:#ffffff!important;border-color:#242426}
.btn-dark:hover{background:#000000;color:#ffffff!important;border-color:#000000}
.btn-danger{border-color:#eec9c9;color:#9c1d1d!important;background:#fff}
.btn-danger:hover{background:#b30000;border-color:#b30000;color:#fff!important}
.btn-small,.btn-sm{padding:8px 12px;font-size:11.5px}
.btn-block{width:100%}
.btn-disabled{opacity:.55;cursor:default}

/* Botón Ver página con tipografía blanca garantizada */
.btn-ver-pagina,
a.btn-ver-pagina,
a.btn-ver-pagina:link,
a.btn-ver-pagina:visited,
a.btn-ver-pagina:hover,
a.btn-ver-pagina:active,
a.btn-ver-pagina:focus,
.emisora-acciones a.btn-dark,
.emisora-acciones a.btn-dark:link,
.emisora-acciones a.btn-dark:visited,
.emisora-acciones a.btn-dark:hover,
.emisora-acciones a.btn-dark:focus,
.escucha-panel .btn-dark,
.escucha-panel a.btn-dark{
	color:#ffffff!important;
	background:#242426!important;
	border-color:#242426!important;
	text-decoration:none!important;
}
.btn-ver-pagina:hover,
a.btn-ver-pagina:hover,
.emisora-acciones a.btn-dark:hover,
.escucha-panel a.btn-dark:hover{
	background:#000000!important;
	border-color:#000000!important;
	color:#ffffff!important;
}
.btn-ver-pagina .icon,
.btn-ver-pagina svg,
.btn-dark .icon,
.btn-dark svg,
.emisora-acciones a.btn-dark .icon,
.emisora-acciones a.btn-dark svg{
	color:#ffffff!important;
	stroke:#ffffff!important;
	fill:none;
}
.btn-ver-pagina span,
.emisora-acciones a.btn-dark span{
	color:#ffffff!important;
}

.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:30px;font-size:10px;font-weight:700;letter-spacing:.4px}
.chip-ok{background:#e9f5ee;color:#1c6b40}
.chip-warn{background:#fbf3e2;color:#8a6414}
.chip-mal{background:#fbeaea;color:#9c1d1d}
.chip-neutral{background:#eeeff2;color:#5c5c63}

/* formularios */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:11px;font-weight:700;color:#55555c;letter-spacing:.3px}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid #d9d9df;border-radius:8px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #b3000040;border-color:var(--red)}
.field small{font-size:10.5px;color:var(--muted)}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field-full{grid-column:1/-1}
.field-check{flex-direction:row;align-items:center}
.field-check label{font-size:12px;font-weight:500;color:var(--muted)}
.field-check input{width:auto}
.form-foot{display:flex;gap:11px;margin-top:8px;flex-wrap:wrap}
.form-nota{font-size:11.5px;color:var(--muted);margin:6px 0 16px}
.radios-tipo{display:flex;gap:16px;padding:4px 0;flex-wrap:wrap}
.radios-tipo label{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink)}
.logo-upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-upload img{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#f7f7f9;padding:5px}

/* listas emisoras / piezas */
.grid-emisoras,.grid-piezas{display:flex;flex-direction:column;gap:12px}
.emisora-row,.pieza-row{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;flex-wrap:wrap}
.emisora-logo,.pieza-thumb{width:52px;height:52px;border-radius:9px;background:#f7f7f9;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.emisora-logo img,.pieza-thumb img{width:100%;height:100%;object-fit:contain}
.logo-fallback{font-family:var(--heading);font-weight:800;color:#b3b3ba;font-size:20px}
.logo-fallback em{font-style:normal;font-size:12px}
.emisora-datos{flex:1;min-width:160px}
.emisora-datos h3{margin:0 0 2px;font-size:14.5px}
.emisora-datos p{font-size:11px;color:var(--muted)}
.emisora-estado{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.emisora-estado .motivo{font-size:10px;color:var(--muted)}
.emisora-acciones{display:flex;gap:8px;flex-wrap:wrap}

/* planes */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:18px}
.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 21px;display:flex;flex-direction:column;gap:10px}
.plan-card.plan-actual{border-color:var(--red);box-shadow:0 10px 26px #b3000012}
.plan-gratis{background:linear-gradient(180deg,#fff, #fdf5f5)}
.plan-etiqueta{position:absolute;top:16px;right:16px;font-size:8.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:5px 9px;border-radius:30px;background:#f1f1f4;color:#68686e}
.plan-actual .plan-etiqueta,.plan-card:first-child .plan-etiqueta{background:#e9f5ee;color:#1c6b40}
.plan-card h3{font-size:19px;margin:6px 0 0}
.plan-precio{font-family:var(--heading);font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--red);margin-bottom:6px}
.plan-card ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.plan-card li{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:#4c4c53}
.plan-card li .icon{margin-top:2px}
.servicio-card{position:relative;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.servicio-card .plan-etiqueta{position:static;display:inline-block}
.servicio-info{max-width:560px}
.servicio-info h3{font-size:19px;text-transform:none;letter-spacing:-.4px;color:var(--ink);margin:8px 0 2px;font-family:var(--heading);font-size:17px}
.servicio-info .plan-precio{font-size:20px;margin-bottom:8px}
.servicio-info ul{list-style:none;padding:0;margin:0 0 0;display:flex;flex-direction:column;gap:7px}
.servicio-info li{display:flex;gap:9px;font-size:12px;color:#4c4c53;align-items:flex-start}
.servicio-estado{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.planes-nota{font-size:11px;color:var(--muted);max-width:640px}

/* auth (login/registro) */
.escucha-auth{min-height:55vh;display:grid;place-items:center;padding:34px 16px;background:#f8f8fa}
.auth-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.auth-card h2{margin:0;font-size:23px}
.auth-sub{font-size:12.5px;color:var(--muted)}
.auth-alt{font-size:12px;color:var(--muted)}
.auth-alt a{color:var(--red);font-weight:700;text-decoration:none}
.auth-card .btn{margin-top:4px}

/* Facturación y pop-up de pago */
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:18px}
.fact-card{display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.fact-card.fact-activa{border-color:var(--ok,#2e7d32)}
.fact-datos h3{margin:4px 0 2px;font-size:18px}
.fact-accion{display:flex;flex-direction:column;gap:8px;align-items:flex-start}

.panel-table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0}
.fact-historial{width:100%;min-width:480px;border-collapse:collapse}
.fact-historial th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#666;padding:8px 10px;border-bottom:1px solid #e3e3e3}
.fact-historial td{padding:10px;border-bottom:1px solid #f0f0f0;vertical-align:middle}
.fact-pill{display:inline-block;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:700;text-transform:capitalize}
.fact-ok{background:#e9f5ee;color:#1c6b40}
.fact-wait{background:#fbf3e2;color:#8a6414}
.fact-bad{background:#fbeaea;color:#9c1d1d}

.panel-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px}
.panel-modal[hidden]{display:none}
.panel-modal-fondo{position:absolute;inset:0;background:rgba(12,12,14,.62);backdrop-filter:blur(2px)}
.panel-modal-caja{position:relative;background:#fff;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.4);width:min(860px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.panel-modal-cabecera{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #ececec}
.panel-modal-cerrar{border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:#555}
.panel-modal-cuerpo{display:flex;flex-direction:column;gap:8px;padding:12px 16px 16px}
.panel-modal-cuerpo iframe{width:100%;height:min(70vh,640px);border:1px solid #e5e5e5;border-radius:10px;background:#fafafa}
.panel-modal-alternativa{font-size:13px;color:#555;margin:0}

/* Barra de formato de la descripción */
.editor-bar{display:flex;align-items:center;gap:6px;margin:-2px 0 8px;flex-wrap:wrap}
.editor-btn{border:1px solid var(--linea,#ddd);background:#fff;border-radius:6px;min-width:34px;padding:4px 8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--texto,#1a1a1a)}
.editor-btn:hover{border-color:var(--red,#B30000);color:var(--red,#B30000)}
.editor-ayuda{font-size:11px;color:#777;margin-left:4px}

/* ==========================================================================
   Responsive: Mobile y Tablets (< 860px)
   ========================================================================== */
@media(max-width:860px){
	.escucha-panel{grid-template-columns:1fr;margin:8px 0;border-radius:12px}

	/* Barra superior exclusiva móvil */
	.panel-mobile-bar{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:12px 16px;
		background:#141416;
		color:#fff;
		border-bottom:1px solid rgba(255,255,255,.08);
		position:sticky;
		top:0;
		z-index:90;
	}
	.panel-mobile-toggle{
		display:inline-flex;
		align-items:center;
		gap:8px;
		background:rgba(255,255,255,.08);
		color:#fff;
		border:1px solid rgba(255,255,255,.15);
		padding:7px 11px;
		border-radius:8px;
		cursor:pointer;
		font-size:12px;
		font-weight:700;
		text-transform:uppercase;
		letter-spacing:.5px;
		transition:background .2s;
	}
	.panel-mobile-toggle:hover,.panel-mobile-toggle:active{background:rgba(255,255,255,.16)}
	.panel-mobile-icon{
		display:inline-flex;
		flex-direction:column;
		justify-content:space-between;
		width:15px;
		height:11px;
	}
	.panel-mobile-icon span{
		display:block;
		width:100%;
		height:2px;
		background:#fff;
		border-radius:2px;
	}
	.panel-mobile-user .panel-avatar{
		width:32px;
		height:32px;
		font-size:13px;
	}

	/* Telón / Backdrop */
	.panel-backdrop{
		display:block;
		position:fixed;
		inset:0;
		background:rgba(12,12,14,.65);
		backdrop-filter:blur(3px);
		z-index:998;
		opacity:0;
		pointer-events:none;
		transition:opacity .25s ease;
	}
	.escucha-panel.menu-open .panel-backdrop{
		opacity:1;
		pointer-events:auto;
	}

	/* Menú Lateral Drawer Móvil */
	.panel-side{
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		width:min(300px, 86vw);
		height:100vh;
		background:#141416;
		z-index:999;
		transform:translateX(-100%);
		transition:transform .3s cubic-bezier(.16,1,.3,1);
		box-shadow:6px 0 30px rgba(0,0,0,.45);
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		padding:20px 18px 26px;
		display:flex;
		flex-direction:column;
		gap:8px;
	}
	.escucha-panel.menu-open .panel-side{
		transform:translateX(0);
	}
	.panel-side-head{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding-bottom:12px;
		border-bottom:1px solid rgba(255,255,255,.08);
		margin-bottom:6px;
	}
	.panel-close-btn{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:32px;
		height:32px;
		border-radius:8px;
		background:rgba(255,255,255,.08);
		border:0;
		color:#fff;
		font-size:22px;
		line-height:1;
		cursor:pointer;
		transition:background .2s,color .2s;
	}
	.panel-close-btn:hover,.panel-close-btn:active{
		background:rgba(237,60,64,.2);
		color:#ed3c40;
	}
	.panel-side-tag{
		margin:2px 0 12px;
	}
	.panel-nav{
		gap:5px;
	}
	.panel-nav a{
		padding:12px 14px;
		font-size:13.5px;
		min-height:46px;
		border-radius:9px;
	}
	.panel-user{
		margin-top:auto;
		padding-top:14px;
		border-top:1px solid rgba(255,255,255,.08);
	}
	.panel-salir{
		padding:12px 14px;
		font-size:12.5px;
		min-height:44px;
		color:#ef5350;
	}
	.panel-salir:hover{
		background:rgba(239,83,80,.12);
	}

	/* Main y elementos */
	.panel-main{
		padding:20px 14px 30px;
	}
	.panel-head{
		display:flex;
		align-items:center;
		justify-content:space-between;
		min-height:48px;
		margin-bottom:18px;
		padding-bottom:12px;
		gap:10px;
	}
	.panel-head h1{
		font-size:20px;
	}
	.panel-kicker{
		font-size:9.5px;
		letter-spacing:1.3px;
	}
	.panel-card{
		padding:18px 14px;
		border-radius:10px;
	}
	.stats-grid{
		grid-template-columns:1fr 1fr;
		gap:10px;
	}
	.stat-card{
		padding:14px;
	}
	.stat-card strong{
		font-size:18px;
	}
	.field-grid{
		grid-template-columns:1fr;
		gap:0;
	}
	.plan-grid{
		grid-template-columns:1fr;
		gap:14px;
	}
	.fact-grid{
		grid-template-columns:1fr;
	}
	.emisora-row,.pieza-row{
		padding:12px;
		gap:12px;
	}
	.emisora-acciones,.emisora-estado{
		width:100%;
		justify-content:flex-start;
	}
	.servicio-card{
		flex-direction:column;
		align-items:flex-start;
		gap:14px;
	}
}

@media(max-width:480px){
	.stats-grid{
		grid-template-columns:1fr;
	}
	.panel-main{
		padding:16px 12px 24px;
	}
	.btn{
		width:100%;
	}
	.acciones-grid .btn{
		width:100%;
	}
	.form-foot .btn{
		width:100%;
	}
}