/* ============================================================
   SKY Coach — Estilo tipo iOS
   Tipografía del sistema Apple, tarjetas redondeadas, fondo
   agrupado gris, acento azul #007AFF y controles tipo iOS.
   ============================================================ */

.sre-panel {
	--ios-fondo: #f2f2f7;
	--ios-tarjeta: #ffffff;
	--ios-azul: #007aff;
	--ios-azul-oscuro: #0a5dc2;
	--ios-verde: #34c759;
	--ios-naranja: #ff9500;
	--ios-rojo: #ff3b30;
	--ios-texto: #1c1c1e;
	--ios-texto-2: #6e6e73;
	--ios-texto-3: #aeaeb2;
	--ios-borde: rgba(60, 60, 67, 0.12);
	--ios-radio: 16px;
	--ios-sombra: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);

	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: var(--ios-fondo);
	color: var(--ios-texto);
	max-width: 1060px;
	margin: 0 auto;
	padding: 20px 16px 48px;
	border-radius: 22px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.sre-panel * { box-sizing: border-box; }
.sre-panel h3 { font-size: 1.05em; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--ios-texto); }
.sre-panel h4 { margin: 14px 0 8px; }
.sre-panel a { color: var(--ios-azul); text-decoration: none; }
.sre-panel a:hover { opacity: 0.75; }

/* ---------- Encabezado con avatar ---------- */
.sre-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.sre-header-perfil { display: flex; align-items: center; gap: 14px; }
.sre-avatar, .sre-avatar-xl {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; color: #fff; font-weight: 700;
	background: linear-gradient(135deg, #0a84ff, #5e5ce6);
	box-shadow: 0 4px 12px rgba(10, 132, 255, 0.35);
	flex: 0 0 auto;
}
.sre-avatar { width: 46px; height: 46px; font-size: 17px; }
.sre-avatar-xl { width: 62px; height: 62px; font-size: 23px; }
.sre-header h2, .sre-perfil-top h2 { margin: 0; font-size: 1.55em; font-weight: 800; letter-spacing: -0.02em; }
.sre-header-sub { color: var(--ios-texto-2); font-size: 0.86em; }
.sre-salir { font-size: 0.88em; color: var(--ios-azul); white-space: nowrap; }

/* ---------- Navegación tipo segmented control ---------- */
.sre-nav {
	display: flex; gap: 4px; flex-wrap: wrap;
	background: rgba(118, 118, 128, 0.12);
	padding: 4px; border-radius: 12px;
	margin: 0 0 20px; border-bottom: 0;
}
.sre-nav a {
	flex: 1 1 auto; text-align: center;
	padding: 8px 14px; border-radius: 9px;
	font-size: 0.9em; font-weight: 600; color: var(--ios-texto-2);
	border: 0; transition: all 0.15s ease;
}
.sre-nav a:hover { color: var(--ios-texto); opacity: 1; }
.sre-nav a.sre-nav-activo, .sre-nav a.activo, .sre-nav a[aria-current] {
	background: #fff; color: var(--ios-texto);
	box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.06);
}

/* ---------- Tarjetas ---------- */
.sre-card {
	background: var(--ios-tarjeta);
	border: 0; border-radius: var(--ios-radio);
	box-shadow: var(--ios-sombra);
	padding: 18px 20px; margin: 0 0 16px;
}
.sre-destacado { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 8px; }
.sre-card-hoy, .sre-card-carrera { border-left: 0; position: relative; overflow: hidden; }
.sre-card-hoy::before, .sre-card-carrera::before {
	content: ''; position: absolute; inset: 0 auto 0 0; width: 5px;
	background: linear-gradient(180deg, #0a84ff, #5e5ce6);
}
.sre-card-carrera::before { background: linear-gradient(180deg, #30d158, #66d4cf); }
.sre-eyebrow { display: block; font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ios-texto-3); margin-bottom: 4px; }
.sre-hoy-tipo { font-size: 1.25em; font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 6px; }
.sre-hoy-desc { color: var(--ios-texto-2); font-size: 0.92em; margin: 0; }
.sre-carrera-dias { font-size: 1.6em; font-weight: 800; }
.sre-titulo-seccion { font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ios-texto-2); margin: 22px 4px 10px; }

/* ---------- Mensaje del coach ---------- */
.sre-coach { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #eef4ff, #f5f0ff); }
.sre-coach-icono { font-size: 26px; line-height: 1; background: #fff; border-radius: 12px; padding: 9px; box-shadow: var(--ios-sombra); }
.sre-coach-titulo { display: block; font-size: 0.74em; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ios-azul); margin-bottom: 3px; }
.sre-coach p { margin: 0; font-size: 0.96em; font-style: italic; color: var(--ios-texto); }
.sre-coach-mini { padding: 10px 14px; border-radius: 12px; margin: 0 0 12px; }

/* ---------- Métricas "De un vistazo" ---------- */
.sre-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.sre-metrica {
	background: var(--ios-tarjeta); border-radius: 14px; box-shadow: var(--ios-sombra);
	padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.sre-metrica-label { font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ios-texto-3); }
.sre-metrica-valor { font-size: 1.45em; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sre-metrica-nota { font-size: 0.74em; color: var(--ios-texto-2); }

/* ---------- Botones ---------- */
.sre-btn {
	display: inline-block; background: var(--ios-azul); color: #fff !important;
	border: 0; border-radius: 12px; padding: 11px 20px;
	font-size: 0.95em; font-weight: 600; font-family: inherit;
	cursor: pointer; transition: transform 0.1s ease, opacity 0.15s ease;
	-webkit-appearance: none;
}
.sre-btn:hover { opacity: 0.85; }
.sre-btn:active { transform: scale(0.97); }
.sre-btn-sec { background: rgba(118, 118, 128, 0.16); color: var(--ios-azul) !important; }
.sre-btn-grande { font-size: 1.02em; padding: 14px 26px; width: 100%; max-width: 440px; border-radius: 14px; }
.sre-btn-chico { padding: 7px 13px; font-size: 0.84em; border-radius: 10px; }
.sre-btn-peligro { background: var(--ios-rojo); color: #fff !important; }
.sre-btn-wa { background: #25d366; }
.sre-btn-borrar, .sre-btn-x {
	background: rgba(255, 59, 48, 0.12); color: var(--ios-rojo); border: 0;
	border-radius: 9px; width: 28px; height: 28px; line-height: 1;
	font-size: 15px; font-weight: 700; cursor: pointer;
}
.sre-btn-borrar:hover, .sre-btn-x:hover { background: var(--ios-rojo); color: #fff; }

/* ---------- Formularios ---------- */
.sre-subtitulo { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ios-texto-2); margin: 24px 0 10px; border-bottom: 1px solid var(--ios-borde); padding-bottom: 6px; font-weight: 700; }
.sre-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; }
.sre-form-grid label { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; font-size: 0.8em; font-weight: 600; color: var(--ios-texto-2); }
.sre-form-inline { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end; }
.sre-form-inline label { font-size: 0.8em; font-weight: 600; color: var(--ios-texto-2); }
.sre-panel input[type="text"], .sre-panel input[type="email"], .sre-panel input[type="password"],
.sre-panel input[type="number"], .sre-panel input[type="date"], .sre-panel input[type="time"],
.sre-panel select, .sre-panel textarea {
	width: 100%; max-width: none;
	background: rgba(118, 118, 128, 0.10);
	border: 1px solid transparent; border-radius: 11px;
	padding: 11px 13px; font-size: 1rem; font-family: inherit; color: var(--ios-texto);
	margin-top: auto; transition: border-color 0.15s, background 0.15s;
	-webkit-appearance: none; appearance: none;
}
.sre-panel select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.sre-panel input:focus, .sre-panel select:focus, .sre-panel textarea:focus {
	outline: none; background: #fff; border-color: var(--ios-azul);
	box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.18);
}
.sre-panel input[type="file"] { background: transparent; border: 1.5px dashed var(--ios-borde); padding: 14px; border-radius: 12px; }
.sre-panel input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ios-verde); margin: 0; }
.sre-check { display: flex; align-items: center; gap: 9px; font-size: 0.9em; color: var(--ios-texto); flex-direction: row !important; }
.sre-form-perfil { border-top: 1px solid var(--ios-borde); margin-top: 16px; padding-top: 16px; }

/* ---------- Píldoras de días ---------- */
.sre-dias { border: 0; padding: 0; margin: 18px 0 0; }
.sre-dias legend { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ios-texto-2); font-weight: 700; margin-bottom: 10px; }
.sre-dias-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sre-dia-pill { position: relative; cursor: pointer; }
.sre-dia-pill input { position: absolute; opacity: 0; pointer-events: none; }
.sre-dia-pill span {
	display: inline-block; padding: 9px 16px; border-radius: 999px;
	background: rgba(118, 118, 128, 0.12); color: var(--ios-texto);
	font-size: 0.88em; font-weight: 600; transition: all 0.15s ease;
}
.sre-dia-pill input:checked + span { background: var(--ios-azul); color: #fff; box-shadow: 0 3px 10px rgba(0, 122, 255, 0.35); }
.sre-dia-pill:active span { transform: scale(0.95); }

/* ---------- Tablas estilo lista iOS ---------- */
.sre-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9em; }
.sre-tabla th {
	text-align: left; font-size: 0.76em; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.05em; color: var(--ios-texto-3);
	padding: 8px 10px; border-bottom: 1px solid var(--ios-borde);
}
.sre-tabla td { padding: 12px 10px; border-bottom: 1px solid var(--ios-borde); vertical-align: top; }
.sre-tabla tbody tr:last-child td { border-bottom: 0; }
.sre-fila-hoy td { background: rgba(0, 122, 255, 0.07); }
.sre-fila-hoy td:first-child { border-radius: 10px 0 0 10px; }
.sre-fila-hoy td:last-child { border-radius: 0 10px 10px 0; }
.sre-pill-hoy { display: inline-block; background: var(--ios-azul); color: #fff; font-size: 0.68em; font-weight: 700; padding: 3px 9px; border-radius: 999px; vertical-align: middle; letter-spacing: 0.04em; }

/* ---------- Navegación de semanas del plan ---------- */
.sre-semanas-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sre-semana-pill {
	display: inline-block; border-radius: 999px; padding: 8px 15px;
	font-size: 0.83em; font-weight: 600;
	background: rgba(118, 118, 128, 0.12); color: var(--ios-texto);
}
.sre-semana-pill:hover { opacity: 1; background: rgba(118, 118, 128, 0.2); }
.sre-semana-pill.sre-semana-activa { background: var(--ios-azul); color: #fff; box-shadow: 0 3px 10px rgba(0, 122, 255, 0.35); }
.sre-meta-plan { color: var(--ios-texto-2); font-size: 0.92em; }

/* ---------- Avisos ---------- */
.sre-aviso { border-radius: 13px; padding: 13px 16px; margin: 0 0 14px; font-size: 0.92em; font-weight: 500; }
.sre-aviso-ok { background: rgba(52, 199, 89, 0.14); color: #1d7d3f; }
.sre-aviso-error { background: rgba(255, 59, 48, 0.12); color: #c22b23; }

/* ---------- Alertas y estados ---------- */
.sre-alertas li { list-style: none; border-left: 3px solid var(--ios-azul); background: rgba(118, 118, 128, 0.07); border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 0 0 8px; font-size: 0.9em; }
.sre-alertas { padding-left: 0; }
.sre-sev-alta { border-left-color: var(--ios-rojo); }
.sre-sev-media { border-left-color: var(--ios-naranja); }
.sre-sev-baja { border-left-color: var(--ios-azul); }
.sre-estado { display: inline-block; font-size: 0.74em; font-weight: 700; padding: 4px 11px; border-radius: 999px; text-transform: capitalize; }
.sre-estado-realista { background: rgba(52, 199, 89, 0.15); color: #1d7d3f; }
.sre-estado-en_riesgo, .sre-estado-pendiente { background: rgba(255, 149, 0, 0.15); color: #a05e00; }
.sre-estado-irreal { background: rgba(255, 59, 48, 0.13); color: #c22b23; }
.sre-badge { display: inline-block; background: var(--ios-rojo); color: #fff; font-size: 0.7em; font-weight: 700; min-width: 19px; text-align: center; padding: 2px 6px; border-radius: 999px; }

/* ---------- Gráficos de barras ---------- */
.sre-grafico { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 22px; }
.sre-barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; min-width: 0; }
.sre-barra { width: 100%; max-width: 46px; background: linear-gradient(180deg, #0a84ff, #5e5ce6); border-radius: 8px 8px 3px 3px; min-height: 5px; }
.sre-barra-ritmo { background: linear-gradient(180deg, #30d158, #66d4cf); }
.sre-barra-valor { font-size: 0.68em; font-weight: 700; color: var(--ios-texto-2); white-space: nowrap; }
.sre-barra-fecha { font-size: 0.66em; color: var(--ios-texto-3); white-space: nowrap; }

/* ---------- Metas ---------- */
.sre-lista-metas { list-style: none; padding: 0; margin: 0; }
.sre-lista-metas > li { border-bottom: 1px solid var(--ios-borde); padding: 13px 0; }
.sre-lista-metas > li:last-child { border-bottom: 0; }

/* ---------- Perfil ---------- */
.sre-perfil-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.sre-perfil-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px 18px; margin: 0; }
.sre-perfil-datos dt { font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ios-texto-3); margin: 0; }
.sre-perfil-datos dd { margin: 1px 0 0; font-weight: 600; font-size: 0.95em; }
.sre-inscripcion { background: rgba(118, 118, 128, 0.07); border: 0; border-radius: 14px; padding: 14px 16px; margin-top: 16px; }
.sre-inscripcion h4 { margin: 0 0 10px; font-size: 0.76em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ios-texto-2); }
.sre-resumen-semana { display: flex; flex-wrap: wrap; gap: 10px 22px; background: rgba(0, 122, 255, 0.07); border-radius: 12px; padding: 11px 15px; font-size: 0.9em; margin-bottom: 12px; }
.sre-nota { color: var(--ios-texto-2); font-size: 0.84em; }

/* ---------- Onboarding ---------- */
.sre-pasos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sre-paso { border-radius: 999px; padding: 8px 17px; font-size: 0.86em; font-weight: 600; background: rgba(118, 118, 128, 0.12); color: var(--ios-texto-2); }
.sre-paso-hecho { background: rgba(52, 199, 89, 0.15); color: #1d7d3f; }
.sre-paso-actual { background: var(--ios-azul); color: #fff; box-shadow: 0 3px 10px rgba(0, 122, 255, 0.35); }
.sre-onboarding h3 { font-size: 1.35em; letter-spacing: -0.02em; }
.sre-politica { background: rgba(118, 118, 128, 0.07); border-radius: 12px; padding: 12px 15px; margin-top: 16px; }
.sre-politica summary { cursor: pointer; font-weight: 600; font-size: 0.9em; color: var(--ios-azul); }
.sre-politica-texto { font-size: 0.85em; color: var(--ios-texto-2); margin-top: 8px; }

/* ---------- Zonas ---------- */
.sre-zonas summary { cursor: pointer; font-weight: 700; font-size: 1.02em; }
.sre-zonas[open] summary { margin-bottom: 10px; }

/* ---------- Zona de peligro ---------- */
.sre-peligro { background: #fff; }
.sre-peligro summary { cursor: pointer; font-weight: 700; color: var(--ios-rojo); list-style: none; }
.sre-peligro summary::-webkit-details-marker { display: none; }
.sre-peligro summary::before { content: '⚠ '; }
.sre-peligro form { margin-top: 12px; }

/* ---------- Diccionario ---------- */
.sre-dicc details { border-bottom: 1px solid var(--ios-borde); padding: 11px 2px; }
.sre-dicc details:last-child { border-bottom: 0; }
.sre-dicc summary { cursor: pointer; font-weight: 600; }
.sre-dicc summary::marker { color: var(--ios-azul); }
.sre-dicc p { color: var(--ios-texto-2); font-size: 0.92em; margin: 8px 0 2px; }

/* ---------- Ubicación en cascada ---------- */
.sre-geo { margin-top: 4px; }

/* ---------- Utilidades ---------- */
.sre-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.sre-tiempo { display: inline-flex; gap: 6px; align-items: center; }
.sre-tiempo input { width: 74px !important; text-align: center; }
.sre-oculto { display: none; }
.sre-js .sre-seccion { display: none; }
.sre-js .sre-seccion.sre-visible,
.sre-js .sre-seccion.sre-activa { display: block; }
.sre-seccion { animation: sre-aparecer 0.25s ease; }
@keyframes sre-aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
	.sre-panel { padding: 14px 10px 40px; border-radius: 0; }
	.sre-nav { overflow-x: auto; flex-wrap: nowrap; }
	.sre-nav a { white-space: nowrap; flex: 0 0 auto; }
	.sre-grafico { height: 120px; }
	.sre-header h2 { font-size: 1.25em; }
}

/* ---------- Clases de compatibilidad ---------- */
.sre-nav a.sre-activa { background: #fff; color: var(--ios-texto); box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.06); }
.sre-mini { width: 76px !important; text-align: center; }
.sre-metrica-valor.sre-ok { color: var(--ios-verde); }
.sre-metrica-valor.sre-riesgo { color: var(--ios-rojo); }

/* ============================================================
   SKY Coach — Tema iOS
   Capa de diseño inspirada en el sistema operativo del iPhone:
   tipografía del sistema, tarjetas redondeadas, colores iOS,
   navegación tipo "segmented control" y separadores sutiles.
   ============================================================ */

.sre-panel {
	--ios-bg: #F2F2F7;
	--ios-card: #FFFFFF;
	--ios-texto: #1C1C1E;
	--ios-sec: #8E8E93;
	--ios-sep: #E5E5EA;
	--ios-azul: #007AFF;
	--ios-azul-tinte: #EAF3FF;
	--ios-verde: #34C759;
	--ios-naranja: #FF9500;
	--ios-rojo: #FF3B30;
	--ios-teal: #30B0C7;
	--ios-radio: 18px;
	--ios-sombra: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: var(--ios-bg);
	color: var(--ios-texto);
	padding: 18px;
	border-radius: 22px;
	-webkit-font-smoothing: antialiased;
}
.sre-panel h2, .sre-panel h3, .sre-panel h4 {
	font-family: inherit;
	letter-spacing: -0.02em;
	color: var(--ios-texto);
}

/* ---- Encabezado con avatar ---- */
.sre-header { border: 0; padding: 6px 4px 14px; }
.sre-header-perfil h2 { font-size: 1.7em; font-weight: 700; margin: 0; }
.sre-header-sub { color: var(--ios-sec); font-size: 0.88em; }
.sre-avatar, .sre-avatar-xl {
	background: linear-gradient(135deg, #0A84FF, #30B0C7);
	box-shadow: 0 4px 12px rgba(10,132,255,.35);
	border: 2.5px solid #fff;
}
.sre-salir { color: var(--ios-azul); text-decoration: none; font-weight: 500; }

/* ---- Navegación estilo segmented control de iOS ---- */
.sre-nav {
	display: flex;
	gap: 4px;
	background: #E9E9EB;
	padding: 4px;
	border-radius: 13px;
	border: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 4px 0 20px;
}
.sre-nav::-webkit-scrollbar { display: none; }
.sre-nav button {
	flex: 1 0 auto;
	border: 0;
	background: transparent;
	padding: 9px 15px;
	border-radius: 10px;
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	color: #3A3A3C;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.sre-nav button:hover { color: var(--ios-azul); }
.sre-nav button.sre-activa {
	background: #FFFFFF;
	color: var(--ios-texto);
	box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 0.5px 1px rgba(0,0,0,.06);
	border-bottom: 0;
}
.sre-badge { background: var(--ios-rojo); border-radius: 999px; box-shadow: 0 1px 3px rgba(255,59,48,.4); }

/* ---- Tarjetas ---- */
.sre-card, .sre-metrica {
	background: var(--ios-card);
	border: 0;
	border-radius: var(--ios-radio);
	box-shadow: var(--ios-sombra);
}
.sre-card { padding: 18px 20px; }
.sre-card h3 { font-size: 1.05em; font-weight: 700; }
.sre-titulo-seccion {
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ios-sec);
	margin: 22px 4px 10px;
}
.sre-eyebrow { color: var(--ios-sec); letter-spacing: 0.05em; }
.sre-card-hoy { border-left: 0; background: linear-gradient(135deg, #0A84FF, #0066DD); color: #fff; }
.sre-card-hoy .sre-eyebrow { color: rgba(255,255,255,.75); }
.sre-card-hoy .sre-hoy-tipo, .sre-card-hoy h3, .sre-card-hoy strong { color: #fff; }
.sre-card-hoy .sre-hoy-desc, .sre-card-hoy p { color: rgba(255,255,255,.92); }
.sre-card-carrera { border-left: 0; }

/* Mensaje del coach: burbuja tipo iMessage */
.sre-coach {
	background: #E9F0FF;
	border: 0;
	border-radius: var(--ios-radio);
	border-bottom-left-radius: 6px;
	box-shadow: var(--ios-sombra);
}
.sre-coach-titulo { color: var(--ios-azul); font-weight: 700; }

/* ---- Métricas ---- */
.sre-metrica { padding: 14px 16px; }
.sre-metrica-label { color: var(--ios-sec); font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.sre-metrica-valor { font-size: 1.55em; font-weight: 700; letter-spacing: -0.03em; }
.sre-metrica-nota { color: var(--ios-sec); }

/* ---- Semáforo ---- */
.sre-sev-baja, .sre-sev-media, .sre-sev-alta { border-radius: 12px; }
.sre-sev-baja  { background: #EAF9EF; color: #1F7A38; }
.sre-sev-media { background: #FFF4E5; color: #B25E00; }
.sre-sev-alta  { background: #FFEBEA; color: #C0271D; }

/* ---- Botones estilo iOS ---- */
.sre-btn {
	background: var(--ios-azul);
	border: 0;
	border-radius: 12px;
	padding: 11px 20px;
	font: inherit;
	font-size: 0.95em;
	font-weight: 600;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,122,255,.28);
	transition: transform .12s ease, filter .15s ease;
}
.sre-btn:hover { filter: brightness(1.07); }
.sre-btn:active { transform: scale(0.97); }
.sre-btn-sec { background: var(--ios-azul-tinte); color: var(--ios-azul); box-shadow: none; }
.sre-btn-peligro { background: var(--ios-rojo); box-shadow: 0 2px 8px rgba(255,59,48,.28); }
.sre-btn-wa { background: #25D366; box-shadow: 0 2px 8px rgba(37,211,102,.3); }
.sre-btn-borrar { color: var(--ios-rojo); border-color: transparent; background: #FFEBEA; border-radius: 10px; }

/* ---- Formularios ---- */
.sre-panel input[type="text"], .sre-panel input[type="email"], .sre-panel input[type="password"],
.sre-panel input[type="number"], .sre-panel input[type="date"], .sre-panel input[type="time"],
.sre-panel select, .sre-panel textarea {
	background: #FFFFFF;
	border: 1px solid var(--ios-sep);
	border-radius: 11px;
	padding: 11px 13px;
	font: inherit;
	font-size: 0.95em;
	color: var(--ios-texto);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sre-panel input:focus, .sre-panel select:focus, .sre-panel textarea:focus {
	outline: none;
	border-color: var(--ios-azul);
	box-shadow: 0 0 0 3.5px rgba(0,122,255,.18);
}
.sre-form-grid label { color: var(--ios-sec); font-weight: 500; }
.sre-subtitulo { border-bottom: 1px solid var(--ios-sep); color: var(--ios-sec); }
.sre-nota { color: var(--ios-sec); }

/* ---- Píldoras de días y semanas ---- */
.sre-dia-pill span, .sre-semana-pill {
	border-radius: 999px;
	border: 1.5px solid var(--ios-sep);
	background: #fff;
	color: var(--ios-texto);
	transition: all .15s ease;
}
.sre-dia-pill input:checked + span {
	background: var(--ios-azul);
	border-color: var(--ios-azul);
	color: #fff;
	box-shadow: 0 2px 8px rgba(0,122,255,.3);
}
.sre-semana-pill:hover { border-color: var(--ios-azul); color: var(--ios-azul); }
.sre-semana-pill.sre-semana-activa { background: var(--ios-azul); border-color: var(--ios-azul); color: #fff; box-shadow: 0 2px 8px rgba(0,122,255,.3); }
.sre-dias { border: 1px dashed var(--ios-sep); border-radius: 14px; }

/* ---- Tablas estilo lista agrupada de iOS ---- */
.sre-tabla { border-radius: 14px; overflow: hidden; }
.sre-tabla th {
	background: transparent;
	color: var(--ios-sec);
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--ios-sep);
}
.sre-tabla td { border-bottom: 1px solid #EFEFF4; }
.sre-tabla tr:last-child td { border-bottom: 0; }
.sre-fila-hoy { background: var(--ios-azul-tinte); }
.sre-fila-hoy td:first-child { box-shadow: inset 3px 0 0 var(--ios-azul); }
.sre-pill-hoy { background: var(--ios-azul); border-radius: 999px; }

/* ---- Avisos ---- */
.sre-aviso { border: 0; border-radius: 14px; box-shadow: var(--ios-sombra); font-weight: 500; }
.sre-aviso-ok { background: #EAF9EF; color: #1F7A38; }
.sre-aviso-error { background: #FFEBEA; color: #C0271D; }

/* ---- Estados de metas ---- */
.sre-estado { border-radius: 999px; font-weight: 600; }
.sre-estado-realista { background: #EAF9EF; color: #1F7A38; }
.sre-estado-en_riesgo { background: #FFF4E5; color: #B25E00; }
.sre-estado-irreal { background: #FFEBEA; color: #C0271D; }

/* ---- Gráficos ---- */
.sre-grafico { border-radius: 14px; }
.sre-barra { background: linear-gradient(180deg, #0A84FF, #66B2FF); border-radius: 6px 6px 3px 3px; }
.sre-barra-ritmo { background: linear-gradient(180deg, #30B0C7, #7ADCEB); }
.sre-barra-valor { color: var(--ios-sec); font-weight: 600; }
.sre-barra-fecha { color: var(--ios-sec); }

/* ---- Onboarding ---- */
.sre-paso { border-radius: 999px; border: 1.5px solid var(--ios-sep); background: #fff; color: var(--ios-sec); }
.sre-paso-hecho { background: #EAF9EF; border-color: #BDEBC9; color: #1F7A38; }
.sre-paso-actual { background: var(--ios-azul); border-color: var(--ios-azul); color: #fff; box-shadow: 0 2px 8px rgba(0,122,255,.3); }

/* ---- Zona de peligro, política y detalles plegables ---- */
.sre-peligro { background: #FFF7F7; border: 1px solid #FFD9D7; border-radius: var(--ios-radio); }
.sre-peligro summary { color: var(--ios-rojo); }
.sre-politica, .sre-inscripcion { background: #F7F8FA; border: 1px solid var(--ios-sep); border-radius: 14px; }
.sre-panel details summary { cursor: pointer; font-weight: 600; }

/* ---- Diccionario ---- */
.sre-dicc details { background: var(--ios-card); border: 0; border-radius: 14px; box-shadow: var(--ios-sombra); margin-bottom: 10px; padding: 4px 14px; }

/* ---- Transición de secciones ---- */
.sre-js .sre-seccion.sre-activa { animation: sre-ios-entrar .28s ease; }
@keyframes sre-ios-entrar {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
	.sre-panel { padding: 12px; border-radius: 0; }
	.sre-nav button { padding: 8px 12px; font-size: 0.85em; }
}

/* ============================================================
   Blindaje del tema iOS: reglas reforzadas para que ningún
   tema de WordPress sobreescriba la tipografía ni el diseño
   (los temas suelen aplicar serif a h2/h3 dentro del contenido).
   ============================================================ */

.sre-panel, .sre-panel h1, .sre-panel h2, .sre-panel h3, .sre-panel h4,
.sre-panel p, .sre-panel span, .sre-panel a, .sre-panel li, .sre-panel td,
.sre-panel th, .sre-panel dt, .sre-panel dd, .sre-panel label, .sre-panel small,
.sre-panel button, .sre-panel input, .sre-panel select, .sre-panel textarea,
.sre-panel summary, .sre-panel legend {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.sre-panel .sre-header-perfil h2 {
	font-size: 1.7em !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	margin: 0 !important;
	color: #1C1C1E !important;
}
div.sre-panel nav.sre-nav {
	display: flex !important;
	background: #E9E9EB !important;
	padding: 4px !important;
	border-radius: 13px !important;
	border: 0 !important;
	border-bottom: 0 !important;
}
div.sre-panel nav.sre-nav button {
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent;
	border-radius: 10px !important;
}
div.sre-panel nav.sre-nav button.sre-activa {
	background: #FFFFFF !important;
	color: #1C1C1E !important;
	box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 0.5px 1px rgba(0,0,0,.06) !important;
}
div.sre-panel .sre-card, div.sre-panel .sre-metrica {
	border-radius: 18px !important;
	border: 0 !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05) !important;
	background: #FFFFFF;
}
div.sre-panel .sre-card-hoy { background: linear-gradient(135deg, #0A84FF, #0066DD) !important; }
div.sre-panel .sre-coach { background: #E9F0FF !important; }
div.sre-panel .sre-btn {
	border-radius: 12px !important;
	border: 0 !important;
	text-decoration: none !important;
}
.sre-panel a { text-decoration: none; }