/* =====================================================================
   escritorio.css: la app en una ventana ancha (ordenador y la app de Windows, ≥1024 px).
   Es el diseño aprobado en sumora-escritorio/diseno: barra lateral en lugar de la barra de abajo,
   el contenido a lo ancho y las hojas (tarea, activo, Sumo…) y Ajustes como panel a la derecha,
   sin tapar la lista. En el móvil este archivo no cambia nada.
   ===================================================================== */

.lateral{display:none}
.atajos-lista{margin:0;padding:6px 16px;display:grid;grid-template-columns:1fr auto;gap:0 16px;font-size:15px}
.atajos-lista dt,.atajos-lista dd{margin:0;padding:10px 0;border-top:1px solid var(--linea)}
.atajos-lista dt:first-of-type,.atajos-lista dt:first-of-type + dd{border-top:0}
.atajos-lista kbd{display:inline-block;min-width:26px;padding:2px 7px;border-radius:7px;background:var(--relleno);box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--tinta) 18%,transparent);
  font:600 12.5px var(--letra-texto);text-align:center;color:var(--tinta)}

/* ---------- Con ratón: lo que se puede pulsar responde al pasar por encima ---------- */
@media (hover:hover) and (pointer:fine){
  .boton--suave:hover:not(:disabled),.boton-icono:hover,.ficha:hover,.dia-semana:hover{background:color-mix(in srgb,var(--tinta) 9%,var(--relleno))}
  .boton--principal:hover:not(:disabled),.boton-icono--principal:hover,.dia-semana[aria-pressed="true"]:hover{background:color-mix(in srgb,var(--ambar) 90%,var(--tinta))}
  .boton--oscuro:hover:not(:disabled),.boton-icono--oscuro:hover,.ficha[aria-pressed="true"]:hover{background:color-mix(in srgb,var(--boton-fondo) 84%,var(--fondo))}
  .boton--borde:hover:not(:disabled){background:var(--relleno)}
  .boton--peligro:hover:not(:disabled),.boton-icono--peligro:hover{background:color-mix(in srgb,var(--peligro) 17%,transparent)}
  .fila:has(> button.fila-cuerpo:hover:not([aria-current])),button.fila:hover:not([aria-current]),a.fila:hover{background:color-mix(in srgb,var(--relleno) 60%,transparent)}
  .casilla:hover .casilla-dibujo{border-color:var(--ok)}
  .mosaico:hover,.aviso-solicitudes:hover{box-shadow:var(--sombra-tarjeta),inset 0 0 0 1px color-mix(in srgb,var(--tinta) 24%,transparent)}
  .segmentos button:hover,.pestana:hover,.quitar:hover{color:var(--tinta)}
  .enlace:hover,.inicio-empresa--boton:hover{text-decoration:underline;text-underline-offset:3px}
}

@media (min-width:1024px){
  :root{--ancho-lateral:252px;--ancho-panel:420px;--margen:36px}

  /* ---------- Barra lateral ---------- */
  .lateral{position:absolute;top:var(--alto-titulo,0px);left:0;bottom:0;width:var(--ancho-lateral);z-index:var(--capa-barra);
    display:flex;flex-direction:column;gap:6px;padding:16px 12px;border-right:1px solid var(--linea);background:var(--fondo);overflow-y:auto}
  .barra{display:none}

  .lateral-empresa{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:14px;text-align:left;color:var(--tinta)}
  button.lateral-empresa:hover{background:var(--relleno)}
  .lateral-empresa > svg{width:16px;height:16px;transform:rotate(90deg);color:var(--tinta-3)}
  .lateral-empresa-textos{flex:1;min-width:0;display:grid}
  .lateral-empresa-textos b{font-family:var(--letra-titulo);font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lateral-empresa-textos span{font-size:12.5px;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .nav-lateral{display:grid;gap:2px;margin-top:10px}
  .nav-item{display:flex;align-items:center;gap:12px;height:42px;padding:0 10px;border-radius:12px;color:var(--tinta-2);font-size:15px;font-weight:500;text-align:left}
  .nav-item svg{width:20px;height:20px}
  .nav-item:hover{background:var(--relleno);color:var(--tinta)}
  .nav-item[aria-current="page"]{background:var(--tarjeta-ambar);color:var(--tinta);box-shadow:inset 0 0 0 1px var(--borde-ambar)}
  .nav-item[aria-current="page"] svg{color:var(--ambar-texto)}
  .nav-item > span{flex:1}
  .nav-cuenta{min-width:22px;height:20px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:var(--relleno);color:var(--tinta-2);
    font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
  .nav-cuenta--aviso{background:var(--ambar);color:var(--sobre-ambar)}

  .lateral-grupo{margin:18px 10px 4px;font-size:12px;font-weight:600;color:var(--tinta-3)}
  .nav-equipos{display:grid;gap:2px}
  .nav-equipo{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:10px;color:var(--tinta-2);font-size:14px;text-align:left}
  .nav-equipo svg{width:17px;height:17px;color:var(--tinta-3)}
  .nav-equipo:hover{background:var(--relleno);color:var(--tinta)}
  .nav-equipo[aria-pressed="true"]{background:var(--relleno);color:var(--tinta);font-weight:600}
  .nav-equipo[aria-pressed="true"] svg{color:var(--ambar-texto)}

  .lateral-pie{margin-top:auto;display:grid;gap:8px;padding-top:14px;min-width:0}
  /* Sumo: el protagonista de la barra lateral, como el botón central del móvil */
  .boton-sumo-lateral{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px 10px 10px;border-radius:16px;text-align:left;
    background:var(--ambar);color:var(--sobre-ambar);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--ambar) 80%,transparent)}
  .boton-sumo-lateral:hover{filter:brightness(1.04)}
  .boton-sumo-lateral-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(23,24,26,.1);flex:none}
  .boton-sumo-lateral-texto{display:grid;min-width:0}
  .boton-sumo-lateral-texto b{font-family:var(--letra-titulo);font-weight:700;font-size:15px}
  .boton-sumo-lateral-texto span{font-size:12.5px;opacity:.78}
  .fila-usuario{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:14px;text-align:left;color:var(--tinta)}
  .fila-usuario:hover,.fila-usuario[aria-current="page"]{background:var(--relleno)}
  .fila-usuario > svg{width:18px;height:18px;color:var(--tinta-3);flex:none}
  .fila-usuario-textos{flex:1;min-width:0;display:grid;font-size:14px}
  .fila-usuario-textos b,.fila-usuario-textos span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fila-usuario-textos span{font-size:12.5px;color:var(--tinta-3)}

  /* ---------- Contenido ---------- */
  .pantalla-principal{top:var(--alto-titulo,0px);left:var(--ancho-lateral);padding:28px var(--margen) 48px;
    padding-right:max(var(--margen),calc(100% - var(--ancho-lateral) - 1440px));
    background:radial-gradient(70% 300px at 0 0,var(--brillo),transparent 70%) no-repeat local,var(--fondo);transition:right 320ms var(--curva-salida)}
  #app.con-hoja .pantalla-principal{right:var(--ancho-panel)}
  .pantalla-principal .titulo-pantalla{font-size:38px}
  .pantalla-principal .cabecera{margin-bottom:22px}
  .pantalla-principal .segmentos-pantalla{max-width:420px}
  /* Las fichas no necesitan deslizarse de lado: caben, y se alinean con el contenido */
  .pantalla-principal .fichas{margin-inline:0;padding-inline:0;flex-wrap:wrap}

  /* Inicio: saludo con botones y dos columnas */
  .inicio-escritorio .inicio-cabecera{display:none}
  .inicio-escritorio-cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
  .inicio-escritorio-cabecera .inicio-saludo{margin:0}
  .acciones-escritorio{display:flex;gap:10px;flex:none}
  .acciones-escritorio .boton{gap:8px}
  .inicio-columnas{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:24px;align-items:start}
  /* Si el contenido se queda estrecho (ventana mediana con un panel abierto), una sola columna. */
  .pantalla-principal{container-type:inline-size}
  @container (max-width:780px){
    .inicio-columnas{grid-template-columns:minmax(0,1fr)}
    .inicio-escritorio-cabecera{flex-wrap:wrap;align-items:flex-start}
  }

  /* Equipo: la gente a la izquierda y el plan a la derecha (sin plan, los que no administran: una columna). */
  .equipo-columnas{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:28px;align-items:start}
  .equipo-columnas:has(.equipo-col--lado:empty){grid-template-columns:minmax(0,1fr)}
  .equipo-col--lado:empty{display:none}
  .equipo-col{display:grid;align-content:start;min-width:0}
  .equipo-col > .seccion:first-child{margin-top:0}
  .equipo-col--lado{order:2;position:sticky;top:0}
  .equipo-col--lado .resumen-activos{margin:0 0 12px}

  /* ---------- Panel del superadmin (Empresas y Estadísticas) ---------- */
  .panel-marca,.panel-salir,.panel-pestanas{display:none}
  .lateral-empresa .marca{font-size:17px;padding:6px 2px}
  .panel-empresas .cabecera-empresas{margin-top:0}
  .panel-cabecera{align-items:flex-end;margin-bottom:24px}
  .panel-resumen{gap:14px;margin-top:0}
  .cifras-empresas,.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .kpis--seis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cifra-empresas,.kpi{padding:20px 22px;gap:10px}
  .cifra-empresas b,.kpi-valor{font-size:36px}
  /* Periodo gratis: una franja con el texto a la izquierda y el botón a la derecha */
  .tarjeta-gratis{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px;padding:18px 22px}
  .tarjeta-gratis .seccion-cabecera{justify-content:flex-start;margin-bottom:6px}
  .tarjeta-gratis .plan-nota{grid-column:1;margin:0;max-width:80ch}
  .tarjeta-gratis .boton{grid-column:2;grid-row:1 / 3;width:auto}
  .panel-herramientas{grid-template-columns:minmax(240px,340px) minmax(0,1fr);align-items:center;gap:14px;margin-bottom:14px}
  .panel-herramientas .fichas{margin:0;padding:2px 0}
  /* La tabla: una rejilla por fila, con la cabecera alineada a las columnas. */
  /* La última columna (botones) mide lo mismo en todas las filas, también en la cabecera. */
  .fila-empresa{display:grid;grid-template-columns:36px minmax(200px,2fr) 110px minmax(130px,1fr) minmax(170px,1.2fr) 212px;gap:18px;min-height:60px}
  .fila-empresa .celda-empresa{display:block;min-width:0;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fila-empresa .empresa-resumen{display:none}
  .fila-empresa .boton-entrar{display:inline-flex}
  .fila-empresa .boton-icono{width:38px;height:38px}
  .fila-empresa:not(.tabla-cabecera):hover{background:color-mix(in srgb,var(--relleno) 55%,transparent)}
  .tabla-cabecera{display:grid;min-height:42px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--tinta-3);background:color-mix(in srgb,var(--relleno) 45%,transparent)}
  .fila-empresa + .fila-empresa::before{left:16px}
  .empresa-acciones{align-items:center;justify-content:flex-end}

  .kpis,.tarjeta-aprende{margin-top:0}
  .graficas{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
  .tarjeta-grafica{padding:20px 22px 16px}
  .tarjeta-grafica--ancha{grid-column:1 / -1}
  .tarjeta-grafica--ancha .grafica{height:240px;gap:10px}
  .grafica{height:200px}
  .grafica-mes:not(.grafica-mes--actual) .grafica-valor{visibility:visible}

  /* Contenido estrecho (ventana mediana o con un panel abierto): menos columnas. */
  @container (max-width:980px){
    .graficas,.panel-herramientas{grid-template-columns:minmax(0,1fr)}
    .kpis,.cifras-empresas{grid-template-columns:repeat(2,minmax(0,1fr))}
    .tarjeta-gratis{grid-template-columns:minmax(0,1fr)}
    .tarjeta-gratis .boton{grid-column:1;grid-row:auto;margin-top:12px}
    .equipo-columnas{grid-template-columns:minmax(0,1fr)}
    .equipo-col--lado{order:0;position:static}
    .fila-empresa{grid-template-columns:36px minmax(160px,1fr) 100px 212px}
    .fila-empresa .celda--extra{display:none}
  }

  /* Barras de desplazamiento finas, del color de la marca (las de Windows son grises y gruesas). */
  *{scrollbar-width:thin;scrollbar-color:var(--relleno-activo) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--relleno);border-radius:10px;border:3px solid var(--fondo)}
  ::-webkit-scrollbar-thumb:hover{background:var(--tinta-3)}
  .inicio-columna{display:grid;gap:4px;align-content:start;min-width:0}
  .inicio-columna > .seccion:first-child{margin-top:0}

  /* ---------- Hojas y Ajustes: panel a la derecha, sin velo (la lista sigue a la vista y se puede tocar) ---------- */
  .velo{background:transparent;pointer-events:none}
  .hoja{top:var(--alto-titulo,0px);bottom:0;left:auto;right:0;width:var(--ancho-panel);max-height:none;border-radius:0;
    padding:22px 24px 28px;border-left:1px solid var(--linea);box-shadow:-24px 0 48px -28px rgba(17,18,20,.3)}
  .hoja--abriendo{animation:panel-entra 360ms var(--curva-salida) both}
  .velo--abriendo{animation:none}
  .hoja-asa{display:none}
  @keyframes panel-entra{from{transform:translateX(28px);opacity:0}}

  /* La fila cuya ficha está abierta en el panel queda marcada: se ve de un vistazo qué se está mirando. */
  .fila:has(> [aria-current="true"]),.fila[aria-current="true"]{background:var(--tarjeta-ambar);box-shadow:inset 0 0 0 1px var(--borde-ambar)}

  /* El aviso flotante, abajo en el centro del contenido (no hay barra de pestañas) */
  .aviso{bottom:24px;left:calc(50% + var(--ancho-lateral) / 2)}

  /* Pantallas sin barra (entrar, unirse, pausa): en una columna centrada */
  .pantalla--sin-barra:not(.pantalla-principal){padding-inline:max(24px,calc(50% - 300px))}
  .login{flex-direction:row}
  .login-escenas{flex:1 1 55%;--max-orbita:400px;--ancho-escena:460px}
  .login-tarjeta{flex:0 0 min(460px,45%);margin:0;border-radius:0;display:flex;flex-direction:column;justify-content:center;padding:48px 44px;
    box-shadow:-1px 0 0 var(--linea)}

  /* ---------- Ajustes: página completa (la barra lateral sigue a la vista), lista de apartados y apartado ---------- */
  .capa{top:var(--alto-titulo,0px);left:var(--ancho-lateral)}
  .capa--abriendo{animation:aparecer 240ms var(--curva-salida) both}
  .capa > .pantalla{padding:28px var(--margen) 48px;container-type:inline-size}
  .ajustes .ajustes-cabecera{align-items:center;margin:0 0 26px}
  .ajustes .titulo-pantalla{padding-top:0;font-size:38px}
  .ajustes-columnas{display:grid;grid-template-columns:236px minmax(0,640px);gap:44px;align-items:start}
  .ajustes-indice{gap:2px;position:sticky;top:0}
  .ajustes-resumen{margin:4px 0 26px}
  .ajustes-apartado > .seccion:first-of-type{margin-top:0}
  .ajustes-apartado .perfil{align-items:flex-start;text-align:left;padding:0 0 26px}
  /* A lo ancho, los botones miden lo que su texto: uno de 640 px pesa demasiado. */
  .ajustes-apartado .botones{display:flex;flex-wrap:wrap}
  .ajustes-apartado .boton--ancho{width:auto}
  .ajustes-apartado .botones-fila{display:flex;flex-wrap:wrap}
  @container (max-width:760px){
    .ajustes-columnas{grid-template-columns:200px minmax(0,1fr);gap:28px}
  }
}

/* ---------- App de Windows ---------- */
/* Barra de título: se arrastra para mover la ventana; a la derecha quedan los botones de Windows (unos 140 px). */
/* Con la escala de pantallas grandes (abajo), sus 44 px se dividen por la escala para seguir midiendo lo mismo que los botones de Windows. */
.barra-titulo-app{position:fixed;top:0;left:0;right:0;height:calc(44px / var(--escala));z-index:100;display:flex;align-items:center;
  padding:0 calc(150px / var(--escala)) 0 18px;background:var(--fondo);border-bottom:1px solid var(--linea);-webkit-app-region:drag;user-select:none}
.barra-titulo-app .marca{font-size:calc(15px / var(--escala))}
.barra-titulo-version{margin-left:10px;padding:2px 8px;border-radius:999px;background:var(--relleno);color:var(--tinta-2);
  font-size:calc(11.5px / var(--escala));font-weight:600;font-variant-numeric:tabular-nums}
/* Ajustes: "Versión 1.0.2 para Windows", debajo del logo */
.version-app{display:block;margin-top:6px}
html.app-escritorio #app{top:calc(44px / var(--escala))}

/* ---------- Pantallas grandes (2K, 4K) ----------
   El diseño está pensado para unos 1300-1600 px de ancho. En pantallas más grandes todo se ve diminuto,
   así que se amplía entero (como el zoom del navegador): 2560 px se ven como 2048 px.
   El tamaño de letra de Ajustes (<html data-letra>) multiplica esa escala, en el móvil y en el ordenador. */
:root{--letra:1;--escala:var(--letra)}
:root[data-letra="grande"]{--letra:1.12}
:root[data-letra="enorme"]{--letra:1.25}
@media (min-width:1800px){:root{--escala:calc(1.125 * var(--letra))}}
@media (min-width:2200px){:root{--escala:calc(1.25 * var(--letra))}}
@media (min-width:3000px){:root{--escala:calc(1.5 * var(--letra))}}
body{zoom:var(--escala)}

/* Aviso de versión nueva: abajo a la derecha */
.aviso-actualizacion{position:absolute;right:22px;bottom:22px;z-index:var(--capa-aviso);width:min(380px,calc(100% - 44px));display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:18px;border-radius:20px;background:var(--superficie);box-shadow:var(--sombra-flotante),inset 0 0 0 1px var(--linea);animation:subir 420ms var(--curva-salida) both}
.aviso-actualizacion-icono{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--tarjeta-ambar);color:var(--ambar-texto);box-shadow:inset 0 0 0 1px var(--borde-ambar)}
.aviso-actualizacion-titulo{margin:0;font-family:var(--letra-titulo);font-weight:700;font-size:16px;letter-spacing:-.015em}
.aviso-actualizacion-texto{margin:4px 0 12px;font-size:14px;line-height:1.45;color:var(--tinta-2)}
.aviso-actualizacion-botones{display:flex;gap:8px;flex-wrap:wrap}
.aviso-actualizacion-novedades{margin:-6px 0 12px;padding-left:18px;display:grid;gap:4px;font-size:14px;line-height:1.4;color:var(--tinta)}
.aviso-actualizacion-novedades li::marker{color:var(--ambar)}

@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  .hoja--abriendo,.capa--abriendo{animation:none}
  .pantalla-principal{transition:none}
}

/* ---------- Temas de contraste de Windows ----------
   Va al final de la última hoja de estilos para ganar a todo lo anterior.
   Windows quita los fondos y las sombras: lo que se distinguía por el fondo (botones, tarjetas, lo elegido)
   pasa a distinguirse por un borde, y lo elegido por el color de resalte del sistema. */
@media (forced-colors:active){
  .boton,.boton-icono,.ficha,.entrada,.buscador,.segmentos,.dia-semana,.pastilla,.nav-cuenta,.insignia,.avatar,.icono-tipo,.casilla-dibujo,.interruptor,
  .lista,.hoja,.capa,.mosaico,.tu-dia,.equipo-hoy,.aviso-solicitudes,.resumen-activos,.avance-tareas,.llevas-vacio,.sin-avisos,.invitacion,.activo-estado,
  .kpi,.cifra-empresas,.tarjeta-gratis,.tarjeta-grafica,.tarjeta-aprende,.sumo-respuesta,.sumo-propuesta,.login-error,
  .boton-central,.boton-sumo-cabecera,.boton-sumo-lateral,.sumo-boton,.aviso,.aviso-actualizacion,.progreso{border:1px solid}
  .ficha[aria-pressed="true"],.segmentos button[aria-pressed="true"],.dia-semana[aria-pressed="true"],.nav-item[aria-current="page"],.nav-equipo[aria-pressed="true"],
  .pestana[aria-current="page"] .pestana-icono,.casilla--hecha .casilla-dibujo,[aria-checked="true"] > .interruptor,.fila:has(> [aria-current="true"]),.fila[aria-current="true"],.progreso-relleno{
    forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .nav-item[aria-current="page"] svg,.nav-equipo[aria-pressed="true"] svg,.fila:has(> [aria-current="true"]) *,.fila[aria-current="true"] *{color:inherit;background:none}
  .interruptor::after{forced-color-adjust:none;background:CanvasText;box-shadow:none}
  [aria-checked="true"] > .interruptor::after{background:HighlightText}
  .fila--en-curso::after,.fila--vencida::after{forced-color-adjust:none;background:CanvasText}
  /* El QR tiene que seguir siendo negro sobre blanco para poder leerse; las gráficas conservan sus colores. */
  .qr,.grafica-barra,.grafica-punto{forced-color-adjust:none}
}

/* ---------- Tareas en el ordenador: segmentos más anchos y el Tablero ---------- */
@media (min-width:1024px){
  .pantalla-principal .segmentos-pantalla{max-width:720px}
  .pantalla-principal .rapida,.pantalla-principal .buscador-tareas,.pantalla-principal .rapida-ayuda{max-width:720px}
  .tablero{display:grid;grid-template-columns:repeat(var(--columnas,3),minmax(0,1fr));gap:14px;align-items:start}
  .tablero-columna{min-height:240px;padding:10px;border-radius:var(--radio-tarjeta);background:color-mix(in srgb,var(--relleno) 70%,transparent);
    transition:box-shadow .15s ease-out,background-color .15s ease-out}
  .tablero-columna--encima{background:var(--tarjeta-ambar);box-shadow:inset 0 0 0 2px var(--borde-ambar)}
  .tablero-cabecera{display:flex;align-items:center;gap:8px;margin:4px 6px 12px;font-family:var(--letra-titulo);font-weight:600;font-size:15px;letter-spacing:-.01em}
  .tablero-cabecera .pastilla{margin-left:auto}
  .tablero-tarjeta{margin-bottom:8px;border-radius:16px;background:var(--superficie);box-shadow:var(--sombra-tarjeta);cursor:grab}
  .tablero-tarjeta .fila{border-radius:16px}
  .tablero-tarjeta.arrastrando{opacity:.45;cursor:grabbing}
  .tablero-vacia{margin:6px;padding:18px 12px;border:1.5px dashed color-mix(in srgb,var(--tinta) 16%,transparent);border-radius:16px;color:var(--tinta-3);font-size:13.5px;text-align:center;text-wrap:pretty}
}