@font-face { font-family: 'Clarity City'; src: url('/publico/fuentes/clarity-city-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Clarity City'; src: url('/publico/fuentes/clarity-city-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Clarity City'; src: url('/publico/fuentes/clarity-city-900.ttf') format('truetype'); font-weight: 900; font-display: swap; }
:root { font-family: 'Clarity City', Arial, sans-serif; color: #17152c; background: #faf7f0; }
* { box-sizing: border-box; }
body { margin: 0; }
header { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px max(24px, calc((100vw - 1100px)/2)); background: #111123; color: #fff9ee; }
header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg,#eea000 0% 17%,#e94821 17% 34%,#ee2480 34% 51%,#61aa39 51% 68%,#32a8db 68% 85%,#51448f 85%); }
header a { color: #fff9ee; }
.marca { display: inline-flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-decoration: none; }
.marca img { width: 80px; height: 68px; object-fit: contain; }
.marca span { display: block; color: #fff9ee; }
.marca strong, .marca small { display: block; }
.marca strong { color: #f5ed36; font-size: 13px; letter-spacing: 2px; }
.marca small { font-size: 9px; letter-spacing: 1.8px; margin-top: 7px; }
main { max-width: 1100px; margin: auto; padding: 44px 24px 80px; }
.encabezado, .campana, .acciones { display: flex; gap: 20px; align-items: center; }
.encabezado, .campana { justify-content: space-between; }
.encabezado h1 { font-size: clamp(36px, 6vw, 64px); margin: 8px 0; }
.encabezado p, .bloque p, .tarjeta span { color: #56536a; }
.etiqueta { text-transform: uppercase; font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #68479a; }
.sello { border: 1px solid #beb0d7; border-radius: 100px; padding: 12px 20px; color: #51448f; font-weight: bold; }
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0; }
.tarjeta, .bloque { background: #fff; border: 1px solid #e0dcec; border-radius: 18px; padding: 25px; box-shadow: 0 8px 25px #211b3d0a; }
.tarjeta span, .tarjeta strong { display: block; }
.tarjeta strong { font-size: 29px; margin-top: 12px; overflow-wrap: anywhere; }
.bloque { margin: 18px 0; }
.bloque h2 { margin: 0 0 10px; }
.bloque p { line-height: 1.5; }
label { display: block; font-weight: bold; margin: 18px 0; }
input, textarea, select { display: block; width: 100%; margin-top: 8px; border: 1px solid #bdb7cd; border-radius: 10px; padding: 12px; font: inherit; background: #fff; }
[hidden] { display: none !important; }
button, .boton { display: inline-block; border: 0; border-radius: 30px; padding: 12px 18px; background: #17152c; color: #f5ed36; font: inherit; font-weight: bold; cursor: pointer; text-decoration: none; }
.secundario { background: #f0ecf6; color: #32284e; }
.campana { border-top: 1px solid #e0dcec; padding: 18px 0; }
.campana h3 { margin: 6px 0; }
.acciones { gap: 8px; }
.aviso { padding: 14px 18px; border-radius: 10px; }
.exito { background: #e5f4e8; }
.error { background: #fff0f1; }
.acceso-expositor { max-width: 620px; margin: 28px auto; padding: clamp(24px, 5vw, 44px); }
.acceso-expositor h1 { font-size: clamp(34px, 5vw, 48px); margin: 10px 0; }
.acceso-expositor > p { line-height: 1.6; }
.acceso-expositor form { margin-top: 26px; }
.acceso-expositor button { min-width: 180px; padding: 16px 24px; }
.ayuda-acceso { font-size: 14px; border-top: 1px solid #e0dcec; padding-top: 22px; margin-top: 30px; }
.panel-equipo main { max-width: 1260px; }
.sesion-equipo { display: flex; align-items: center; gap: 18px; font-size: 13px; }
.sesion-equipo a { border: 1px solid #ffffff55; border-radius: 30px; padding: 11px 17px; text-decoration: none; }
.portada-panel { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(28px, 5vw, 54px); border-radius: 24px; background: linear-gradient(120deg, #111123, #30204a); color: #fff9ee; border-bottom: 5px solid #f5ed36; }
.portada-panel h1 { color: #fff9ee; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; max-width: 700px; margin: 12px 0 18px; }
.portada-panel p { color: #e5ddec; line-height: 1.55; max-width: 660px; }
.portada-panel .etiqueta { color: #f5ed36; }
.portada-panel img { max-width: 26%; height: auto; object-fit: contain; }
.indicadores-equipo { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.indicadores-equipo > div { background: #fff; border: 1px solid #e0dcec; border-radius: 18px; padding: 22px; }
.indicadores-equipo span, .indicadores-equipo small { display: block; color: #56536a; }
.indicadores-equipo strong { display: block; font-size: 38px; margin: 6px 0; }
.rejilla-panel { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.herramientas-equipo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.herramientas-equipo a { display: block; padding: 20px; border: 1px solid #e0dcec; border-radius: 14px; color: #17152c; text-decoration: none; background: #faf8fd; }
.herramientas-equipo a:hover, .herramientas-equipo a:focus-visible { border-color: #8754bb; background: #f2ebf9; }
.herramientas-equipo strong, .herramientas-equipo span { display: block; }
.herramientas-equipo span { color: #56536a; font-size: 13px; line-height: 1.5; margin-top: 8px; }
.estado-operativo { margin: 22px 0; }
.estado-operativo div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e0dcec; }
.estado-operativo dt { color: #56536a; }
.estado-operativo dd { font-weight: 700; margin: 0; text-align: right; }
.nota-panel { font-size: 13px; }
.tabla-panel { overflow-x: auto; }
.tabla-panel table { width: 100%; border-collapse: collapse; }
.tabla-panel th, .tabla-panel td { text-align: left; border-bottom: 1px solid #e0dcec; padding: 12px; }
.tabla-panel th { background: #f0ecf6; }
.formulario-perfil { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.formulario-perfil label { margin: 0; min-width: 210px; }
.formulario-perfil button { white-space: nowrap; }
:focus-visible { outline: 3px solid #8754bb; outline-offset: 3px; }
@media (max-width: 700px) {
  .tarjetas { grid-template-columns: 1fr; }
  .encabezado, .campana { display: block; }
  .acciones { margin-top: 15px; flex-wrap: wrap; }
  .sello { display: none; }
  header { flex-wrap: wrap; }
  .sesion-equipo { flex-wrap: wrap; }
  .portada-panel img { display: none; }
  .indicadores-equipo { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rejilla-panel, .herramientas-equipo { grid-template-columns: 1fr; }
}
.editor-cabecera { display:block; clear:both; margin:26px 0 10px; }
.etiqueta-campo { display:flex; align-items:center; gap:9px; margin:0; }
.etiqueta-campo svg, .editor-cabecera h3 svg, .ayuda-editor svg, .barra-editor svg, .boton-accion svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
label small { display:block; margin-top:7px; color:#625e70; font-size:13px; font-weight:400; line-height:1.45; }
.editor-cabecera h3 { display:flex; align-items:center; gap:9px; margin:0 0 5px; color:#17152c; font-size:18px; }
.bloque .editor-cabecera p { margin:0; color:#5d5a6d; font-size:14px; }
.barra-editor { display:flex; align-items:center; flex-wrap:wrap; gap:8px; width:100%; clear:both; margin:0; padding:12px; background:#f0ecf6; border:1px solid #dcd5ec; border-radius:12px 12px 0 0; }
.bloque .barra-editor button { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; min-height:42px; margin:0; padding:9px 14px; border:1px solid #d0c8e2 !important; border-radius:9px !important; background:#fff !important; box-shadow:none !important; color:#17152c !important; font:inherit; font-size:14px; line-height:1.2; white-space:nowrap; }
.barra-editor button > strong, .barra-editor button > em { width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; font-size:17px; }
.bloque .barra-editor button:hover { border-color:#51448f !important; background:#fff9ee !important; }
.editor-correo { display:block; position:relative; clear:both; width:100%; min-height:320px; margin:0; padding:20px; overflow:auto; border:1px solid #cfc5e2; border-top:0; border-radius:0 0 12px 12px; background:#fff; color:#17152c; line-height:1.65; }
.editor-correo:empty::before { content:attr(data-placeholder); color:#888499; }
.editor-correo:focus { outline:3px solid rgba(238,36,128,.22); border-color:#ee2480; }
.editor-correo h2 { font-size:1.5rem; }
.editor-correo blockquote { margin:16px 0; padding:10px 16px; border-left:4px solid #ee2480; background:#faf7f0; }
.ayuda-editor { display:flex; align-items:flex-start; gap:8px; }
.ayuda-editor svg { color:#51448f; margin-top:2px; }
.bloque .boton-accion { display:inline-flex; align-items:center; gap:9px; }
.destino-prueba { padding:12px 15px; border-radius:10px; background:#f0ecf6; }
.dialogo-preview { width:min(760px,94vw); height:min(850px,90vh); border:1px solid #dcd5ec; border-radius:16px; padding:12px; }
.dialogo-preview::backdrop { background:rgba(17,17,35,.68); }
.dialogo-preview form { display:flex; justify-content:flex-end; margin-bottom:8px; }
.dialogo-preview .cerrar-preview { margin:0; }
.dialogo-preview iframe { width:100%; height:calc(100% - 52px); border:0; background:#faf7f0; }
.dialogo-alerta { width:min(480px, calc(100% - 32px)); border:1px solid #e0dcec; border-radius:20px; padding:30px; color:#17152c; text-align:center; box-shadow:0 24px 80px #1111233d; }
.dialogo-alerta::backdrop { background:rgba(17,17,35,.62); backdrop-filter:blur(3px); }
.dialogo-alerta .alerta-icono { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 16px; border:4px solid #56a56a; border-radius:50%; color:#267044; font-size:34px; font-weight:700; }
.dialogo-alerta.alerta-error .alerta-icono { border-color:#b33a4c; color:#a02035; }
.dialogo-alerta h2 { margin:0 0 10px; }
.dialogo-alerta p { margin:0 0 22px; line-height:1.55; }
.dialogo-alerta form { margin:0; }
.dialogo-alerta .alerta-acciones { display:flex; justify-content:center; gap:10px; }
.dialogo-alerta button.secundario { background:#f0ecf6; color:#32284e; }
.dialogo-alerta button:focus-visible { outline:3px solid #8754bb; outline-offset:3px; }
.estado-autoguardado { display:inline-flex; align-items:center; min-height:44px; margin:12px 14px 12px 0; color:#56536a; font-size:14px; }
.estado-autoguardado[data-estado="guardando"], .estado-autoguardado[data-estado="pendiente"] { color:#51448f; }
.estado-autoguardado[data-estado="guardado"] { color:#267044; }
.estado-autoguardado[data-estado="error"] { color:#a02035; font-weight:700; }
.boton-peligro { background:#fff1f1; border:1px solid #d9a5ad; color:#8b1e2d; }
.boton-peligro:hover, .boton-peligro:focus-visible { background:#ffe4e7; border-color:#a83245; }
.boton-preview-actual[aria-disabled="true"] { opacity:.55; pointer-events:none; }
@media (max-width: 700px) {
  .barra-editor { gap:6px; padding:9px; }
  .bloque .barra-editor button { flex:1 1 120px; white-space:normal; }
  .editor-correo { min-height:280px; }
}

/* Comunicaciones: jerarquía visual y lectura rápida. */
.pagina-comunicaciones main { max-width: 1180px; }
.pagina-comunicaciones .paso-comunicacion { display:block; margin-bottom:8px; color:#6c508f; font-size:11px; font-weight:700; letter-spacing:.13em; }
.pagina-comunicaciones .preparacion-comunicacion { border-left:4px solid #8a63b7; }
.pagina-comunicaciones .preparacion-comunicacion > div > p { margin:4px 0 14px; }
.pagina-comunicaciones .destino-prueba { display:inline-block; margin:4px 0 16px; font-size:14px; }
.pagina-comunicaciones .compositor-principal > p, .pagina-comunicaciones .subtitulo-campanas { margin:0 0 18px; font-size:14px; }
.pagina-comunicaciones .compositor-principal label small { display:block; margin-top:6px; color:#686477; font-size:13px; font-weight:400; }
.pagina-comunicaciones .panel-adjuntos { display:flex; align-items:center; gap:16px; margin:20px 0 14px; padding:18px; border:1px solid #e2dced; border-radius:14px; background:#faf8fd; }
.pagina-comunicaciones .adjuntos-icono { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:12px; background:#ede6f5; color:#65488c; }
.pagina-comunicaciones .adjuntos-icono svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pagina-comunicaciones .adjuntos-descripcion { flex:1; min-width:0; }
.pagina-comunicaciones .adjuntos-descripcion h3 { margin:0 0 4px; font-size:16px; }
.pagina-comunicaciones .adjuntos-descripcion p { margin:0; color:#5d5870; font-size:13px; }
.pagina-comunicaciones .adjuntos-descripcion small { display:block; margin-top:5px; color:#6b5e7c; font-size:12px; }
.pagina-comunicaciones .panel-adjuntos .boton { text-align:center; white-space:nowrap; }
.pagina-comunicaciones .panel-adjuntos .boton[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.pagina-comunicaciones .listado-campanas .campana { display:block; margin:14px 0; padding:20px; border:1px solid #e1dcea; border-radius:14px; background:#fff; }
.pagina-comunicaciones .estado-campana { display:inline-block; max-width:100%; padding:5px 10px; border-radius:20px; background:#f1ecf7; color:#594279; font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.pagina-comunicaciones .campana h3 { margin:10px 0 5px; font-size:19px; }
.pagina-comunicaciones .campana-destino { margin:0; font-size:14px; }
.pagina-comunicaciones .campana-metricas { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0; font-size:13px; }
.pagina-comunicaciones .campana-metricas span { padding:6px 10px; border-radius:8px; background:#f7f5fa; }
.pagina-comunicaciones .campana-metricas strong { color:#211b3d; }
.pagina-comunicaciones .campana .acciones { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.pagina-comunicaciones .campana .acciones form { margin:0; }
.pagina-comunicaciones .campana .acciones p { flex-basis:100%; margin:4px 0; font-size:13px; }
.pagina-comunicaciones .campana .acciones .boton, .pagina-comunicaciones .campana .acciones button { font-size:13px; }
@media (max-width:700px) {
  .pagina-comunicaciones .panel-adjuntos { flex-wrap:wrap; }
  .pagina-comunicaciones .panel-adjuntos .boton { width:100%; }
  .pagina-comunicaciones .campana .acciones .boton, .pagina-comunicaciones .campana .acciones form, .pagina-comunicaciones .campana .acciones button { width:100%; text-align:center; }
}