/* Agenda, panel de la cita y salidas de la plataforma central. Usa la paleta y los botones existentes (.btn, .eyebrow).
   El color solo marca el estado de la visita; lo demás es tipografía y espacio. */

.ag { color: #17343b; }
.ag-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.ag-head h1 { font-size: 28px; line-height: 1.18; letter-spacing: -1.2px; font-weight: 800; margin: 7px 0 6px; }
.ag-head p { margin: 0; font-size: 13px; color: #607b80; }
.ag-head-actions { display: flex; gap: 9px; }
.ag .btn[disabled], .ag-panel .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Barra de la agenda: fecha a la izquierda, profesional y vista a la derecha */
.ag-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.ag-nav { display: flex; align-items: center; gap: 8px; }
.ag-nav input, .ag-nav select { border: 1px solid #e2e9e9; background: #fff; border-radius: 9px; color: #39555a; min-height: 38px; padding: 0 12px; font-size: 12px; font-weight: 700; }
.ag .ag-icon { width: 38px; padding: 0; font-size: 18px; line-height: 1; }
.ag-seg { display: flex; border: 1px solid #dfe9e9; border-radius: 9px; overflow: hidden; background: #fff; }
.ag-seg button { border: 0; background: none; color: #6d858a; padding: 0 14px; min-height: 36px; font-size: 12px; font-weight: 800; }
.ag-seg button.active { background: #183e46; color: #fff; }

/* Cuadrícula: una columna por profesional (día) o por día (semana) */
.ag-board { background: #fff; border: 1px solid #e4ebeb; border-radius: 15px; overflow: hidden; }
.ag-scroll { overflow-x: auto; }
.ag-grid { display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(var(--col-min, 170px), 1fr)); min-width: min-content; }
.ag-hours > div { font-size: 11px; font-weight: 700; color: #93a5a8; text-align: right; padding-right: 10px; }
.ag-hours > div:not(.ag-col-head) { transform: translateY(-7px); }
.ag-col { border-left: 1px solid #edf1f1; min-width: 0; }
.ag-col-head { height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 14px; border-bottom: 1px solid #e4ebeb; background: #fff; }
.ag-col-head b { font-size: 13px; }
.ag-col-head span { font-size: 11px; color: #80979b; }
button.ag-col-head { width: 100%; border: 0; border-bottom: 1px solid #e4ebeb; align-items: center; cursor: pointer; color: #17343b; }
button.ag-col-head span { text-transform: uppercase; letter-spacing: .8px; font-weight: 800; }
button.ag-col-head b { font-size: 18px; }
button.ag-col-head.is-today b { color: #a5784d; }
.ag-canvas { position: relative; background-image: linear-gradient(#edf1f1 1px, transparent 1px); background-size: 100% 90px; }
.ag-closed { position: absolute; left: 0; right: 0; background: #f6f8f8; }
.ag-slot { position: absolute; left: 0; right: 0; border: 0; background: none; text-align: left; padding: 0 10px; color: #5e8a85; }
.ag-slot span { opacity: 0; font-size: 11px; font-weight: 800; }
.ag-slot:hover, .ag-slot:focus-visible { background: #f0f7f5; }
.ag-slot:hover span, .ag-slot:focus-visible span { opacity: 1; }
.ag-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #c79b67; z-index: 3; pointer-events: none; }
.ag-now span { position: absolute; left: 4px; top: -17px; font-size: 10px; font-weight: 800; color: #a5784d; background: #fff; padding: 0 4px; border-radius: 4px; }
.ag-col ~ .ag-col .ag-now span { display: none; }

/* Cita: hora, paciente y servicio. El estado va en el borde y el fondo, sin íconos */
.ag-ev, .ag-block { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 1px; text-align: left; overflow: hidden; border-radius: 8px; padding: 6px 9px; border: 1px solid #cfe1dc; border-left: 3px solid #468f81; background: #e8f3f0; color: #24525a; }
.ag-ev span, .ag-block span { font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.ag-ev b, .ag-block b { font-size: 12.5px; color: #17343b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ev small, .ag-block small { font-size: 11px; color: #5f7a80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ev.is-short { flex-direction: row; align-items: center; gap: 8px; padding-block: 0; }
.ag-ev.is-short small { display: none; }
.ag-ev:hover { box-shadow: 0 5px 16px #17343b1c; }
.ag-ev.is-por_confirmar, .ag-ev.is-cambio { background: #fff; border-color: #ead8b6; border-left-color: #d2a474; border-style: dashed; border-left-style: solid; color: #aa7744; }
.ag-ev.is-llego { background: #eaf1f9; border-color: #cfdcea; border-left-color: #426b94; color: #426b94; }
.ag-ev.is-en_atencion { background: #fbf1e7; border-color: #ecd8be; border-left-color: #c99b66; color: #8d6a3f; }
.ag-ev.is-salida { background: #edf1f2; border-color: #dbe3e4; border-left-color: #72868a; color: #5a7074; }
.ag-ev.is-completa { background: #f6f8f8; border-color: #e4ebeb; border-left-color: #b9c8ca; color: #80979b; }
.ag-ev.is-completa b { color: #5f7a80; }
.ag-ev.is-no_asistio { background: #fbeaec; border-color: #f0d3d7; border-left-color: #a34854; color: #a34854; }
.ag-ev.is-no_asistio b { text-decoration: line-through; color: #a34854; }
.ag-block { background: #f6f8f8; border-color: #e4ebeb; border-left-color: #c79b67; color: #a5784d; }

/* Etiqueta de estado */
.ag-tag { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 30px; padding: 4px 9px; white-space: nowrap; background: #e9f6f0; color: #358270; }
.ag-tag.is-por_confirmar, .ag-tag.is-cambio { background: #fff3e4; color: #aa7744; }
.ag-tag.is-llego { background: #eaf1f9; color: #426b94; }
.ag-tag.is-en_atencion { background: #fbf1e7; color: #8d6a3f; }
.ag-tag.is-salida, .ag-tag.is-completa { background: #edf1f2; color: #72868a; }
.ag-tag.is-no_asistio, .ag-tag.is-cancelada { background: #fbeaec; color: #a34854; }

/* Lista: celular, y canceladas o ausencias en cualquier pantalla */
.ag-list { display: none; }
.ag-row { width: 100%; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 4px; border: 0; border-bottom: 1px solid #e8eeee; background: none; text-align: left; color: #17343b; }
.ag-row:hover { background: #f9fbfb; }
.ag-row-time { font-size: 13px; font-weight: 800; }
.ag-row-time small { display: block; font-size: 11px; font-weight: 600; color: #80979b; text-transform: capitalize; }
.ag-row-main b { display: block; font-size: 14px; }
.ag-row-main small { display: block; font-size: 12px; color: #607b80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-off, .ag-protected { margin-top: 26px; }
.ag-off h2, .ag-protected summary { font-size: 13px; font-weight: 800; color: #526d72; margin: 0 0 4px; }
.ag-protected summary { cursor: pointer; }
.ag-protected-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid #e8eeee; }
.ag-protected-row b { display: block; font-size: 13px; }
.ag-protected-row small { font-size: 12px; color: #607b80; }
.ag-empty { color: #80979b; font-size: 13px; padding: 26px 4px; margin: 0; }

/* Panel lateral: se abre sobre la agenda, sin salir de ella */
.ag-scrim { position: fixed; inset: 0; background: #102d3640; z-index: 34; }
.ag-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #fff; z-index: 35; overflow-y: auto; padding: 26px 28px 30px; box-shadow: -20px 0 45px #102e3626; color: #17343b; animation: agPanelIn .22s cubic-bezier(.2, .7, .2, 1) both; }
.ag-panel[hidden], .ag-scrim[hidden] { display: none; }
@keyframes agPanelIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ag-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ag-panel-head h2 { font-size: 23px; letter-spacing: -.7px; line-height: 1.25; margin: 10px 0 3px; }
.ag-panel-head p { margin: 0; font-size: 14px; color: #607b80; }
.ag-close { flex: none; width: 36px; height: 36px; border: 1px solid #e2e9e9; border-radius: 10px; background: #fff; color: #526d72; font-size: 22px; line-height: 1; }
.ag-facts { margin: 20px 0 0; display: grid; gap: 0; }
.ag-facts > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf1f1; }
.ag-facts dt { font-size: 12px; color: #80979b; }
.ag-facts dd { margin: 0; font-size: 13.5px; font-weight: 700; }
.ag-focus { margin-top: 22px; padding: 18px; border-radius: 13px; background: #f3f8f6; }
.ag-focus p { margin: 0 0 14px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.ag-panel .ag-main { width: 100%; min-height: 48px; font-size: 14px; }
.ag-others { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; }
.ag-link { border: 0; background: none; padding: 6px 0; font-size: 13px; font-weight: 800; color: #a5774b; }
.ag-link:hover { text-decoration: underline; }
.ag-section { margin-top: 26px; }
.ag-section h3 { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; color: #80979b; margin: 0 0 10px; }
.ag-section p { font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.ag-hint { font-size: 12.5px !important; color: #607b80; }
.ag-error { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: #a34854; }
.ag-check { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #edf1f1; background: none; padding: 11px 0; font-size: 14px; text-align: left; color: #17343b; }
.ag-check i { flex: none; width: 20px; height: 20px; border: 1.5px solid #c1cdcf; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; }
.ag-check.done i { background: #2f7d70; border-color: #2f7d70; }
.ag-metrics { color: #607b80; font-size: 12.5px !important; }
.ag-timeline { list-style: none; margin: 0; padding: 0; }
.ag-timeline li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf1f1; }
.ag-timeline time { font-size: 12.5px; font-weight: 800; color: #526d72; }
.ag-timeline b { display: block; font-size: 13.5px; }
.ag-timeline small { display: block; font-size: 12px; color: #80979b; }
.ag-panel-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.ag-panel-foot { position: sticky; bottom: -30px; margin: 26px -28px -30px; padding: 16px 28px 22px; background: #fff; border-top: 1px solid #edf1f1; }

/* Reserva: campos mínimos y horarios como botones */
.ag-field { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: #526f75; margin-top: 14px; }
.ag-field input, .ag-field select, .ag-search { width: 100%; border: 1px solid #dce7e6; border-radius: 9px; padding: 11px 12px; font-size: 14px; color: #2b4a50; background: #fff; min-height: 44px; }
.ag-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ag-two .ag-field { margin-top: 0; }
.ag-result, .ag-service { width: 100%; display: block; text-align: left; border: 0; border-bottom: 1px solid #edf1f1; background: none; padding: 12px 4px; color: #17343b; }
.ag-result:hover, .ag-service:hover { background: #f9fbfb; }
.ag-result b, .ag-service b { display: block; font-size: 14px; }
.ag-result small, .ag-service small { font-size: 12px; color: #607b80; }
.ag-result.is-new b { color: #a5774b; }
.ag-services { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ag-service { border: 1px solid #dfe9e9; border-radius: 10px; padding: 11px 12px; }
.ag-service.active { border-color: #183e46; background: #f3f8f6; }
.ag-picked { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #f3f8f6; }
.ag-picked b { display: block; font-size: 14px; }
.ag-picked small { font-size: 12px; color: #607b80; }
.ag-times { margin-top: 16px; display: grid; gap: 12px; }
.ag-times > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; }
.ag-times > div > span { font-size: 12.5px; font-weight: 800; padding-top: 10px; }
.ag-times > div > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-times em { font-size: 12.5px; color: #80979b; font-style: normal; padding-top: 10px; }
.ag-time, .ag-option { border: 1px solid #dfe9e9; background: #fff; color: #24454b; border-radius: 9px; min-height: 40px; padding: 0 14px; font-size: 13px; font-weight: 800; }
.ag-time:hover, .ag-option:hover { border-color: #b9cbc8; }
.ag-time.active, .ag-option.active { background: #183e46; border-color: #183e46; color: #fff; }
.ag-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

/* Salidas: una fila por paciente, sin tarjetas */
.ag-out { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 26px 0; border-top: 1px solid #e4ebeb; }
.ag-out h2 { font-size: 19px; letter-spacing: -.4px; margin: 0 0 4px; }
.ag-out p { margin: 0; font-size: 13px; color: #607b80; }
.ag-exit .ag-facts { max-width: 520px; margin-top: 14px; }
.ag-exit .ag-facts > div { grid-template-columns: 190px minmax(0, 1fr); }
.ag-out-actions { display: flex; flex-direction: column; gap: 9px; min-width: 190px; }

.toast { z-index: 50; }
body.professional-mode .ag-panel, body.professional-mode .ag-scrim { display: none; }

@media (max-width: 760px) {
  .ag-head { flex-direction: column; align-items: stretch; margin-bottom: 18px; }
  .ag-head h1 { font-size: 24px; }
  .ag-head-actions .btn { flex: 1; min-height: 46px; }
  .ag-board, .ag-seg { display: none; }
  .ag-list { display: block; }
  .ag-nav { flex-wrap: wrap; }
  .ag-nav select { flex: 1; min-width: 0; }
  /* El panel sube desde abajo, al alcance del pulgar */
  .ag-panel { top: auto; left: 0; width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; padding: 22px 20px calc(26px + env(safe-area-inset-bottom)); animation-name: agSheetIn; }
  .ag-panel-foot { margin: 22px -20px calc(-26px - env(safe-area-inset-bottom)); padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); bottom: calc(-26px - env(safe-area-inset-bottom)); }
  .ag-services { grid-template-columns: 1fr; }
  .ag-out { grid-template-columns: 1fr; gap: 16px; }
  .ag-exit .ag-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .ag-out-actions .btn { min-height: 46px; }
}
@keyframes agSheetIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ag-panel { animation: none; } }

.ag-near { margin: 18px 0 0 !important; font-weight: 800; }

/* Contactos: lista de conversaciones y chat. La acción principal vive al pie de la conversación */
.in-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); background: #fff; border: 1px solid #e4ebeb; border-radius: 15px; overflow: hidden; min-height: 520px; }
.in-list { border-right: 1px solid #edf1f1; }
.in-item { width: 100%; display: grid; gap: 4px; text-align: left; border: 0; border-bottom: 1px solid #edf1f1; background: none; padding: 20px 22px; color: #17343b; }
.in-item:hover { background: #f9fbfb; }
.in-item.active { background: #f3f8f6; }
.in-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.in-top b { font-size: 14px; }
.in-top time { font-size: 11px; color: #80979b; white-space: nowrap; }
.in-item.unread .in-top b::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c79b67; margin-left: 8px; vertical-align: middle; }
.in-item small { font-size: 12px; color: #607b80; }
.in-preview { font-size: 13px; color: #526d72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-item.unread .in-preview { color: #17343b; font-weight: 700; }
.in-item .ag-tag { justify-self: start; margin-top: 4px; }
.in-chat { display: flex; flex-direction: column; min-width: 0; }
.in-chat > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px; border-bottom: 1px solid #edf1f1; }
.in-chat h2 { font-size: 18px; letter-spacing: -.4px; margin: 0 0 2px; }
.in-chat header p { margin: 0; font-size: 12.5px; color: #607b80; }
.in-back { display: none; }
.in-messages { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; overflow-y: auto; max-height: 420px; background: #f9fbfb; }
.in-msg { max-width: min(460px, 82%); padding: 11px 14px; border-radius: 14px; background: #fff; border: 1px solid #e4ebeb; align-self: flex-start; animation: agMsgIn .24s cubic-bezier(.2, .7, .2, 1) both; }
.in-msg.is-out { align-self: flex-end; background: #e8f3f0; border-color: #d3e6e0; }
.in-msg p { margin: 0; font-size: 14px; line-height: 1.5; color: #17343b; }
.in-msg time { display: block; margin-top: 4px; font-size: 11px; color: #80979b; }
.in-sys { align-self: center; margin: 4px 0; font-size: 12px; font-weight: 700; color: #607b80; background: #edf1f2; border-radius: 30px; padding: 5px 12px; }
.in-chat > footer { padding: 24px 28px 28px; border-top: 1px solid #edf1f1; display: grid; gap: 14px; }
.in-visit { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.in-visit b { display: block; font-size: 14px; }
.in-visit small { font-size: 12.5px; color: #607b80; }
@keyframes agMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Confirmaciones breves: cita reservada y salida finalizada */
.ag-done { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 46px 6px 10px; }
.ag-done-mark { width: 54px; height: 54px; border-radius: 50%; background: #e8f3f0; color: #2f7d70; display: grid; place-items: center; font-size: 24px; font-weight: 800; margin-bottom: 14px; animation: agPop .32s cubic-bezier(.2, 1.3, .4, 1) both; }
.ag-done h2 { font-size: 24px; letter-spacing: -.7px; margin: 10px 0 6px; }
.ag-done p { margin: 0; font-size: 14px; color: #526d72; }
.ag-done .ag-done-when { margin: 12px 0 26px; font-size: 16px; font-weight: 800; color: #17343b; }
.ag-done .ag-link { margin-top: 10px; }
@keyframes agPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.ag-flash { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 22px 24px; margin-bottom: 8px; border-radius: 15px; background: #f3f8f6; border: 1px solid #dce9e4; animation: agMsgIn .3s both; }
.ag-flash .ag-done-mark { margin: 0; }
.ag-flash h2 { font-size: 19px; letter-spacing: -.4px; margin: 6px 0 8px; }
.ag-flash p { margin: 0; font-size: 14px; line-height: 1.55; color: #39555a; }
.fu-text { margin-top: 8px !important; font-size: 15px !important; color: #17343b !important; font-weight: 700; }
.ag-out.is-fresh { background: #f3f8f6; margin: 0 -18px; padding-inline: 18px; border-radius: 13px; border-top-color: transparent; }

@media (max-width: 760px) {
  .in-grid { grid-template-columns: 1fr; min-height: 0; }
  .in-list { border-right: 0; }
  .in-chat { display: none; }
  .in.is-open .in-list { display: none; }
  .in.is-open .in-chat { display: flex; }
  .in-back { display: inline-block; padding: 0; margin-bottom: 6px; }
  .in-chat > header { flex-wrap: wrap; padding: 14px 16px; }
  .in-chat > header > div { order: 2; flex: 1 1 100%; }
  .in-messages { padding: 16px; max-height: 46dvh; }
  .in-chat > footer { padding: 14px 16px 18px; }
  .in-visit { flex-direction: column; align-items: stretch; }
  .ag-flash { grid-template-columns: 1fr; justify-items: start; }
  .ag-out.is-fresh { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .in-msg, .ag-done-mark, .ag-flash { animation: none; } }

/* Contactos: el encabezado respira; la respuesta es un composer editable y, al enviarla, aparece el siguiente paso */
.in .ag-head { margin-bottom: 40px; }
.in-composer { display: grid; gap: 10px; }
.in-composer > small, .in-next > small { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; color: #80979b; }
.in-field { border: 1px solid #dce7e6; border-radius: 14px; background: #fff; padding: 14px 16px 12px 18px; transition: border-color .15s, box-shadow .15s; }
.in-field:focus-within { border-color: #9fc3bb; box-shadow: 0 0 0 3px #468f8122; }
.in-field textarea { display: block; width: 100%; min-height: 76px; border: 0; outline: 0; resize: none; background: none; font: inherit; font-size: 14.5px; line-height: 1.55; color: #17343b; }
.in-field .btn { display: flex; margin: 8px 0 0 auto; min-height: 38px; padding: 0 24px; }
.in-next { display: grid; gap: 4px; }
.in-next b { font-size: 17px; letter-spacing: -.3px; margin-top: 4px; }
.in-next > span { font-size: 13px; color: #607b80; }
.in-next-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.in-next-actions .btn { min-height: 42px; padding: 0 24px; }
.in-muted { font-size: 12.5px; font-weight: 700; color: #607b80; }

/* Salida: arriba lo que se hizo y se recomendó; debajo, lo que falta resolver antes de que el paciente se vaya */
.ag-exit { padding: 26px 0 32px; border-top: 1px solid #e4ebeb; }
.ag-exit h2 { font-size: 19px; letter-spacing: -.4px; margin: 0 0 4px; }
.ag-exit-head p { margin: 0; font-size: 13px; color: #607b80; }
.ag-todo-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border-top: 1px solid #e4ebeb; }
.ag-todo { padding: 22px 28px 4px 0; }
.ag-todo + .ag-todo { padding: 22px 0 4px 28px; border-left: 1px solid #e4ebeb; }
.ag-todo-label { display: block; margin-bottom: 12px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #80979b; }
.ag-todo-hint { display: block; font-size: 13px; color: #607b80; }
.ag-todo-value { margin: 2px 0 16px; font-size: 26px; font-weight: 800; letter-spacing: -.8px; }
.ag-todo-text { margin: 0 0 16px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.ag-todo-ok { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 800; color: #2f7d70; }
.ag-todo-ok i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #e8f3f0; display: grid; place-items: center; font-style: normal; font-size: 12px; animation: agPop .32s cubic-bezier(.2, 1.3, .4, 1) both; }
.ag-todo-note { margin: 6px 0 0 31px; font-size: 13px; color: #607b80; }
.ag-todo .btn { min-height: 42px; padding: 0 22px; }
.ag-exit-foot { display: flex; justify-content: flex-end; margin-top: 28px; }
.ag-exit-foot .btn { min-height: 46px; padding: 0 28px; }

@media (max-width: 760px) {
  .ag-todo-grid { grid-template-columns: 1fr; }
  .ag-todo, .ag-todo + .ag-todo { padding: 20px 0 4px; border-left: 0; }
  .ag-todo + .ag-todo { border-top: 1px solid #e4ebeb; margin-top: 16px; }
  .ag-exit-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ag-todo-ok i { animation: none; } }