/* comentarios.css — hoja de «Enviar comentarios» (comentarios.js, ESTANDAR §13b). Copia de /root/mando/plantilla/web/.
   Solo var(--…) de tokens.css; en apps con otros nombres de tokens se ajusta con las --cm-* (sin #hex: los respaldos
   son colores del sistema). Celular: hoja que sube desde abajo, respetando el indicador de inicio; ≥ 600 px: diálogo. */
.cm{
  --cm-fondo:var(--superficie,Canvas);--cm-tinta:var(--tinta,CanvasText);--cm-tinta-2:var(--tinta-2,GrayText);
  --cm-linea:var(--linea,GrayText);--cm-marca:var(--marca,LinkText);--cm-sobre-marca:var(--sobre-marca,Canvas);
  --cm-suave:var(--marca-suave,Canvas);--cm-error:var(--error,LinkText);--cm-radio:var(--radio-tarjeta,20px);
  position:fixed;inset:auto 0 0 0;margin:0;padding:0;border:0;width:100%;max-width:100%;
  max-height:calc(100dvh - env(safe-area-inset-top) - 12px);overflow:auto;overscroll-behavior:contain;
  background:var(--cm-fondo);color:var(--cm-tinta);border-radius:var(--cm-radio) var(--cm-radio) 0 0;
  box-shadow:var(--sombra-alta,0 -10px 40px -10px color-mix(in srgb,CanvasText 35%,transparent));
  font-family:var(--sans,system-ui,sans-serif);line-height:1.45}
.cm::backdrop{background:color-mix(in srgb,CanvasText 45%,transparent)}
.cm[open]{animation:cm-sube .28s cubic-bezier(.2,0,0,1)}
@keyframes cm-sube{from{transform:translateY(24px);opacity:0}}
.cm-hoja,.cm-gracias{display:flex;flex-direction:column;min-height:0}
.cm-cab{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:14px max(16px,env(safe-area-inset-right)) 8px max(20px,env(safe-area-inset-left));background:var(--cm-fondo)}
.cm-cab h2{margin:0 auto 0 0;font-family:var(--display,inherit);font-size:1.25rem;line-height:1.2}
.cm-x{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:var(--cm-tinta-2);cursor:pointer}
.cm-cuerpo{display:flex;flex-direction:column;gap:6px;padding:0 max(20px,env(safe-area-inset-right)) 4px max(20px,env(safe-area-inset-left))}
.cm-lead{margin:0 0 8px;color:var(--cm-tinta-2)}
.cm-tipos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:0;border:0}
.cm-tipos legend{padding:0;margin-bottom:6px;font-weight:700;font-size:.875rem}
.cm-tipos label{position:relative;display:inline-flex}
.cm-tipos input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cm-tipos span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--cm-linea);border-radius:999px;font-weight:600}
.cm-tipos input:checked+span{background:var(--cm-marca);border-color:var(--cm-marca);color:var(--cm-sobre-marca)}
.cm-tipos input:focus-visible+span{outline:3px solid var(--cm-marca);outline-offset:2px}
.cm-etq{font-weight:700;font-size:.875rem;margin-top:4px}
.cm-etq small{font-weight:400;color:var(--cm-tinta-2);font-size:.875rem}
.cm textarea,.cm input[type=email]{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--cm-linea);border-radius:var(--radio-chico,10px);background:var(--cm-fondo);color:var(--cm-tinta);font:inherit;font-size:16px}
.cm textarea{min-height:120px;resize:vertical}
.cm [aria-invalid="true"]{border-color:var(--cm-error);outline-color:var(--cm-error)}
.cm-ayuda{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--cm-tinta-2);margin-bottom:6px}
.cm-check{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:6px 0;font-size:.9375rem}
.cm-check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--cm-marca)}
.cm-check a{color:inherit}
.cm-ruta{font-size:.875rem;overflow-wrap:anywhere}
.cm-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cm-msg{min-height:1.4em;margin:4px 0 0;font-size:.9375rem;color:var(--cm-tinta-2)}
.cm-msg.cm-error{color:var(--cm-error);font-weight:600}
.cm-acc{position:sticky;bottom:0;display:flex;gap:10px;justify-content:flex-end;padding:12px max(20px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:var(--cm-fondo);border-top:1px solid var(--cm-linea)}
.cm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:0;border-radius:var(--radio-accion,999px);background:var(--cm-marca);color:var(--cm-sobre-marca);font:inherit;font-weight:800;cursor:pointer;-webkit-user-select:none;user-select:none}
.cm-btn.cm-claro{background:transparent;color:var(--cm-tinta);border:1px solid var(--cm-linea)}
.cm-btn[disabled]{opacity:.6;cursor:progress}
.cm :focus-visible{outline:3px solid var(--cm-marca);outline-offset:2px}
.cm-gracias{align-items:flex-start;gap:8px;padding:28px max(20px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.cm-ok-t{margin:0;font-family:var(--display,inherit);font-size:1.25rem;font-weight:800;outline:none}
.cm-ok-s{margin:0 0 12px;color:var(--cm-tinta-2)}
@media (min-width:600px){
  .cm{inset:0;margin:auto;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 48px);border-radius:var(--cm-radio)}
  .cm-acc{padding-bottom:12px}
  .cm-gracias{padding-bottom:20px}
}
@media (prefers-reduced-motion:reduce){.cm[open]{animation:none}}