/* Escenas de Alojamiento (2026-09-24).
   Las piezas comunes (.esc, .ui, la posada, los iconos) están en
   paginas-servicio.css; este archivo lo encola mdd-ajustes.php solo en
   las páginas que lo usan (MDD_ESCENAS_PAGINA).
   Es lo que el cliente nunca ve y le da tranquilidad ver: el panel del
   servidor, las copias, el mantenimiento y la persona que atiende. */

/* Cloud: los recursos del servidor, dedicados al sitio */
.cl-panel { inset: 12px 14px; padding: 8px 10px; display: grid; gap: 6px; align-content: start; }
.cl-cab { display: flex; align-items: center; gap: 5px; font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.cl-cab i { width: 6px; height: 6px; border-radius: 50%; background: #0CCE6B; box-shadow: 0 0 0 2px rgba(12,206,107,.2); animation: cl-vivo 2s ease-in-out infinite; }
@keyframes cl-vivo { 50% { box-shadow: 0 0 0 4px rgba(12,206,107,.08); } }
.cl-cab small { margin-left: auto; font-size: 6.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border-radius: 99px; padding: 1px 6px; }
.cl-rec { display: grid; grid-template-columns: 52px 1fr 34px; gap: 6px; align-items: center; font-size: 7px; white-space: nowrap; }
.cl-rec span { color: #64748b; font-weight: 700; }
.cl-rec b { font-weight: 800; text-align: right; }
.cl-rec i { height: 5px; border-radius: 3px; background: #EEF2F6; position: relative; overflow: hidden; }
.cl-rec i::after { content: ""; position: absolute; inset: 0; width: var(--p); border-radius: 3px; background: var(--c); animation: cl-uso 3.4s ease-in-out infinite alternate; animation-delay: var(--d); transform-origin: left; }
@keyframes cl-uso { from { transform: scaleX(.8); } to { transform: scaleX(1.12); } }
.cl-graf { height: 30px; border-top: 1px solid #EEF2F6; padding-top: 4px; }
.cl-graf svg { width: 100%; height: 100%; }
.cl-graf path { fill: none; stroke: var(--c); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.cl-graf path.es-area { fill: color-mix(in srgb, var(--c) 14%, transparent); stroke: none; }

/* Copias: las tres, con su hora, listas para volver atrás */
.bk-lista { inset: 12px 14px; padding: 8px 10px; display: grid; gap: 4px; align-content: start; }
.bk-cab { display: flex; justify-content: space-between; font-size: 7.5px; font-weight: 800; white-space: nowrap; margin-bottom: 2px; }
.bk-cab small { font-size: 6.5px; color: #64748b; font-weight: 700; }
.bk-fila { display: grid; grid-template-columns: 11px 1fr auto auto; gap: 6px; align-items: center; font-size: 7px; padding: 4px 6px; border: 1px solid #EEF2F6; border-radius: 4px; white-space: nowrap; }
.bk-fila b { font-weight: 800; }
.bk-fila small { color: #64748b; font-weight: 600; }
.bk-fila em { font-style: normal; font-size: 6.5px; font-weight: 800; color: #fff; background: #1E293B; border-radius: 3px; padding: 2px 6px; visibility: hidden; }
.bk-fila.is-sel { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, #fff); }
.bk-fila.is-sel em { visibility: visible; background: var(--c); animation: bk-rest 3s ease-in-out infinite; }
@keyframes bk-rest { 0%, 60%, 100% { transform: none; } 70% { transform: scale(.94); } }
.bk-nueva { animation: bk-nueva 6s ease-out infinite; }
@keyframes bk-nueva { 0%, 8% { opacity: 0; transform: translateY(-4px); } 16%, 100% { opacity: 1; transform: none; } }

/* Velocidad: el tiempo de respuesta de las últimas 24 horas */
.tr-graf { inset: 12px 14px; padding: 8px 10px 6px; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; }
.tr-cab { display: flex; align-items: baseline; gap: 6px; font-size: 7px; font-weight: 700; color: #64748b; white-space: nowrap; }
.tr-cab b { font-size: 14px; font-weight: 800; color: #1E293B; }
.tr-cab em { margin-left: auto; font-style: normal; font-size: 6.5px; font-weight: 800; color: #0B8A63; background: #E7F6EF; border-radius: 99px; padding: 1px 6px; }
.tr-area { position: relative; background: repeating-linear-gradient(180deg, transparent 0 13px, #EEF2F6 13px 14px); }
.tr-area svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-area path { fill: none; stroke: var(--c); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tr-area path.es-area { fill: color-mix(in srgb, var(--c) 12%, transparent); stroke: none; }
.tr-area path.es-traza { stroke-dasharray: 100; stroke-dashoffset: 100; animation: tr-traza 5s ease-out infinite; }
@keyframes tr-traza { 0% { stroke-dashoffset: 100; } 50%, 100% { stroke-dashoffset: 0; } }
.tr-area small { position: absolute; left: 2px; font-size: 5.5px; font-weight: 700; color: #94a3b8; }
.tr-eje { display: flex; justify-content: space-between; font-size: 6px; font-weight: 700; color: #94a3b8; }

/* Estados Unidos: el servidor allá, el visitante acá */
.us-mapa { position: absolute; inset: 12px 16px 26px; }
.us-mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.us-mapa .us-arco { fill: none; stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; animation: us-flujo 1.2s linear infinite; }
@keyframes us-flujo { to { stroke-dashoffset: -14; } }
.us-pin { position: absolute; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.us-pin.es-aca { background: #FF1632; box-shadow: 0 0 0 3px rgba(255,22,50,.3); }
.us-pin::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid currentColor; color: var(--c); animation: us-onda 2s ease-out infinite; }
.us-pin.es-aca::after { color: #FF1632; animation-delay: 1s; }
@keyframes us-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.us-rot { position: absolute; transform: translateY(-50%); display: grid; font-size: 7px; font-weight: 800; padding: 3px 7px; white-space: nowrap; }
.us-rot small { font-size: 6px; font-weight: 700; color: #64748b; }
.us-pie { position: absolute; left: 14px; right: 14px; bottom: 9px; display: flex; justify-content: center; gap: 12px; font-size: 6.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.us-pie span::before { content: "●"; color: #0CCE6B; margin-right: 3px; }
/* El continente americano debajo de los dos puntos (Emir, 2026-09-25: sin mapa quedaban en el
   aire). Es una máscara (imagenes/america-escena.svg, generada con herramientas/america-escena.mjs)
   calibrada para que el servidor y Mar del Plata caigan en su lugar; se estira con la caja, igual
   que el arco, así los puntos siguen encima en cualquier ancho. */
.us-mapa::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--c) 20%, #fff); -webkit-mask: url("../imagenes/america-escena.svg") 0 0 / 100% 100% no-repeat; mask: url("../imagenes/america-escena.svg") 0 0 / 100% 100% no-repeat; }

/* Seguridad y mantenimiento: la lista del día, que se va tildando */
.mt-lista { inset: 12px 14px; padding: 8px 10px; display: grid; gap: 5px; align-content: start; }
.mt-cab { display: flex; justify-content: space-between; font-size: 7.5px; font-weight: 800; white-space: nowrap; margin-bottom: 1px; }
.mt-cab small { font-size: 6.5px; color: #64748b; font-weight: 700; }
.mt-f { display: grid; grid-template-columns: 11px 1fr auto; gap: 6px; align-items: center; font-size: 7px; font-weight: 700; white-space: nowrap; }
.mt-f small { font-size: 6.5px; color: #64748b; font-weight: 600; }
.mt-f .ok-v { animation: mt-tilde 6s infinite both; animation-delay: var(--d); }
@keyframes mt-tilde { 0%, 8% { transform: scale(0); } 14%, 92% { transform: none; } 100% { transform: scale(0); } }
.mt-escudo { position: absolute; right: 20px; bottom: 16px; display: flex; align-items: center; gap: 4px; font-size: 7px; font-weight: 800; background: var(--c); color: #1E293B; border-radius: 99px; padding: 3px 9px 3px 6px; box-shadow: 0 8px 18px -6px rgba(0,0,0,.4); }
.mt-escudo svg { width: 9px; height: 9px; }

/* Alguien que te atiende: una persona, con nombre, que responde */
.at-chat { left: 50%; top: 10px; bottom: 10px; width: 72%; transform: translateX(-50%); background: #EFEAE2; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.at-cab { display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: #075E54; color: #fff; font-size: 7.5px; font-weight: 800; white-space: nowrap; }
.at-cab i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-style: normal; font-size: 7px; }
.at-cab span { display: grid; line-height: 1.15; }
.at-cab small { font-size: 6px; font-weight: 600; opacity: .8; }
.at-cab svg { width: 10px; height: 10px; margin-left: auto; color: #25D366; }
.at-msgs { display: grid; grid-template-rows: auto auto; align-content: start; gap: 5px; padding: 7px 8px; }
.at-msg { font-size: 7px; line-height: 1.35; padding: 4px 6px 3px; border-radius: 6px; max-width: 84%; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.at-msg small { display: block; text-align: right; font-size: 5.5px; color: #64748b; margin-top: 1px; }
.at-msg.es-in { background: #fff; justify-self: start; border-top-left-radius: 1px; }
.at-msg.es-out, .at-escribe { grid-row: 2; grid-column: 1; justify-self: end; }
.at-msg.es-out { background: #D9FDD3; border-top-right-radius: 1px; animation: at-resp 7s ease-out infinite; }
.at-msg.es-out small b { color: #53BDEB; }
@keyframes at-resp { 0%, 42% { opacity: 0; transform: translateY(4px); } 48%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.at-escribe { display: flex; gap: 2px; background: #D9FDD3; border-radius: 6px; padding: 5px 7px; animation: at-escribe 7s infinite; }
.at-escribe i { width: 3px; height: 3px; border-radius: 50%; background: #64748b; animation: at-punto .9s ease-in-out infinite; }
.at-escribe i:nth-child(2) { animation-delay: .15s; }
.at-escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes at-escribe { 0%, 12% { opacity: 0; } 16%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes at-punto { 0%, 100% { transform: none; opacity: .5; } 50% { transform: translateY(-2px); opacity: 1; } }