/* Clientes e hospedagem: superfícies e tipos do aplicativo. */
#clientes-conteudo { min-width: 0; }
.cl-topo { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.cl-topo h2 { margin:0 0 8px; font-size:var(--txt-xl); }
.cl-topo p,.cl-ajuda { color:var(--tinta-suave); margin:4px 0 12px; }
.cl-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; }
.cl-clientes { padding:20px; align-self:start; }
.cl-clientes h3 { margin:0 0 16px; }
.cl-clientes label,.cl-topo label,.cl-modal label { display:grid; gap:8px; min-width:0; }
.cl-lista-clientes { display:grid; gap:8px; margin-top:16px; }
.cl-lista-clientes button { min-height:52px; border:1px solid transparent; border-radius:var(--raio-sm); background:transparent; color:var(--tinta); padding:12px; display:grid; gap:4px; text-align:left; font:inherit; cursor:pointer; }
.cl-lista-clientes button[aria-pressed=true] { border-color:var(--latao); background:var(--fundo); }
.cl-lista-clientes small { color:var(--tinta-suave); }
.cl-lista-clientes [hidden] { display:none; }
.cl-detalhe { display:grid; gap:20px; min-width:0; }
.cl-acoes { display:flex; gap:8px; flex-wrap:wrap; }
.cl-resumo { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px; }
.cl-resumo strong { display:block; font-family:var(--fonte-titulo); font-size:var(--txt-3xl); margin:8px 0; overflow-wrap:anywhere; }
.cl-resumo small { color:var(--tinta-suave); }
.cl-resumo dl { margin:0; display:grid; align-content:center; gap:12px; }
.cl-resumo dl div { display:flex; justify-content:space-between; gap:16px; }
.cl-resumo dd { margin:0; font-weight:700; font-variant-numeric:tabular-nums; }
.cl-bloco,.cl-vazio { padding:24px; }
.cl-bloco h3 { margin:0 0 12px; font-size:var(--txt-lg); }
.cl-linha { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; padding:16px 0; border-top:1px solid var(--linha); }
.cl-linha p { margin:4px 0; }
.cl-linha small { color:var(--tinta-suave); display:block; }
.cl-linha details { margin-top:12px; }
.cl-correcoes { padding:12px; background:var(--fundo); border-radius:var(--raio-sm); }
.cl-correcoes p { margin:8px 0; }
.cl-linha>.cl-acoes { flex-shrink:0; max-width:220px; }
.cl-linha summary { min-height:44px; display:flex; align-items:center; cursor:pointer; }
.cl-linha>div,.cl-topo>div,.cl-lista-clientes button,.cl-modal p,.cl-modal label,.cl-linha li { min-width:0; overflow-wrap:anywhere; }
.cl-aviso { background:var(--superficie); border-left:4px solid var(--atencao); border-radius:var(--raio-sm); padding:16px; display:grid; gap:8px; }
.cl-erro { color:var(--vermelho); padding:12px 20px; }
.cl-modal { border:0; border-radius:var(--raio); background:var(--superficie); color:var(--tinta); padding:0; width:min(640px,calc(100vw - 24px)); max-height:calc(var(--altura-visivel,100dvh) - 24px); box-shadow:var(--sombra-lg); }
.cl-modal::backdrop { background:color-mix(in srgb,var(--couro-950) 60%,transparent); }
.cl-modal form { display:flex; flex-direction:column; margin:0; min-height:0; max-height:inherit; overflow:hidden; }
.cl-modal-cab { display:flex; flex:0 0 auto; justify-content:space-between; gap:16px; align-items:center; padding:20px 24px; border-bottom:1px solid var(--linha); min-width:0; }
.cl-modal-cab h2 { margin:0; min-width:0; overflow-wrap:anywhere; font-size:var(--txt-xl); }
.cl-modal-corpo { display:grid; flex:1 1 auto; gap:16px; overflow-y:auto; overscroll-behavior:contain; padding:24px; min-height:0; scroll-padding-block:16px; }
.cl-modal-corpo p { margin:0; }
.cl-modal-rodape { display:flex; justify-content:flex-end; gap:12px; padding:16px 24px; border-top:1px solid var(--linha); flex-shrink:0; }
.cl-modal input,.cl-modal select,.cl-modal textarea,.cl-clientes input,.cl-topo input { background:var(--fundo); color:var(--tinta); border:1px solid var(--linha); padding:12px; border-radius:var(--raio-sm); font:inherit; width:100%; min-height:44px; box-sizing:border-box; min-width:0; }
.cl-modal fieldset { display:grid; gap:16px; border:0; padding:0; margin:0; min-width:0; }
.cl-modal legend { font-weight:700; padding:0 0 12px; }
.cl-modal .cl-check { display:flex; align-items:center; min-height:44px; gap:12px; }
.cl-modal .cl-check input { width:20px; min-height:20px; }
.cl-itens { list-style:none; margin:0; padding:0; }
.cl-itens li { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--linha); overflow-wrap:anywhere; }
.cl-total { font-size:var(--txt-xl); font-weight:700; }
.cl-modal button,.cl-linha button,.cl-topo button,.cl-acoes button { min-height:44px; }
.cl-modal :focus-visible,.cl-lista-clientes button:focus-visible { outline:3px solid var(--latao); outline-offset:3px; }
@media(max-width:900px) { .cl-layout { grid-template-columns:200px minmax(0,1fr); gap:16px; } }
@media(max-width:700px) { .cl-layout { display:block; }.cl-clientes { margin-bottom:20px; }.cl-lista-clientes { grid-template-columns:repeat(2,minmax(0,1fr)); }.cl-resumo { grid-template-columns:1fr; gap:16px; }.cl-linha { flex-direction:column; }.cl-topo,.cl-modal-cab { gap:12px; }.cl-bloco,.cl-resumo,.cl-vazio { padding:20px; }.cl-modal-corpo { padding:16px; }.cl-modal-cab,.cl-modal-rodape { padding:16px; }.cl-modal .linha-dupla { grid-template-columns:1fr; }.cl-modal-rodape { flex-wrap:wrap; }.cl-modal-rodape button { flex:1; }.cl-itens li { flex-wrap:wrap; } }
:root[data-viewport-baixo] .cl-modal-cab { padding:6px 12px; gap:8px; }
:root[data-viewport-baixo] .cl-modal-cab h2 { font-size:var(--txt-lg); line-height:1.2; }
:root[data-viewport-baixo] .cl-modal-corpo { padding:12px; gap:12px; }
:root[data-viewport-baixo] .cl-modal-rodape { flex-wrap:nowrap; padding:6px 12px; gap:8px; }
:root[data-viewport-baixo] .cl-modal-rodape button { flex:1 1 0; min-width:0; padding-inline:8px; }