/* Configuración: la comanda blanca con una sección por tema y el talón para pedir la cuenta. Lo común está en cuenta.css. */
.config{width:min(1040px,100%);margin:8px auto 72px}
.config-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;padding:0}
.config-cab .nota{flex:1 1 280px;margin:0;max-width:none}
.volver{display:inline-flex;align-items:center;min-height:44px;font-size:15px}

.papel{margin-top:22px;filter:drop-shadow(0 18px 28px rgba(40,40,40,.10)) drop-shadow(0 2px 3px rgba(40,40,40,.06))}
/* Las reglas de móvil de cuenta.css son para la hoja pequeña de entrar: aquí la comanda es el formulario entero. */
.config .comanda{display:block;padding:18px 20px 24px;border-radius:var(--radio) var(--radio) 0 0;
  -webkit-mask:radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--muesca) at 0 100%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--muesca) at 100% 100%,#0000 98%,#000) right/51% 100% no-repeat}
.config .talon{display:block;padding:14px 20px 18px}
.config .membrete{justify-content:flex-start;min-height:44px;margin-bottom:10px}
.config .hormigas{width:44px;height:44px}

.filas{margin:0;padding:0;border-top:1px solid #000}
.fila{display:grid;grid-template-columns:8.2em minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:11px 0 10px;border-bottom:1px dotted #000}
.fila dt{font:400 15px/18px var(--t-greed);text-transform:uppercase;letter-spacing:.04em}
.fila dd{margin:0;font-size:16px;line-height:22px;overflow-wrap:anywhere}
.fila small{display:block;margin-top:3px;font-size:14px;line-height:19px;color:var(--tinta-suave)}

.columnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;align-items:start}
.columna{min-width:0}
.grupo{margin:30px 0 0;min-width:0}
.grupo-titulo{margin:0;padding-bottom:8px;border-bottom:1px solid #000;font:400 30px/32px var(--t-hue);letter-spacing:-.5px}
.suelto{min-width:0;margin:0;padding:0;border:0}
.config .campo:first-child{border-top:0}
.config .campo:has(+[hidden]){border-bottom:1px dotted #000}
.pista{margin:6px 0 0;font-size:14px;line-height:19px;color:var(--tinta-suave)}
.pista.firme{color:#000}
.campo:has(.fallo:not([hidden])) .pista{display:none}
.entrada:disabled{color:var(--tinta-suave)}
select.entrada{appearance:none;-webkit-appearance:none;padding-right:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 2px center/12px 8px no-repeat}

.aviso.ok{display:flex;align-items:center;gap:10px}
.aviso.ok::after{content:"";flex:none;width:40px;height:40px;background:url("/mi-eito/cuenta/simbolo.svg") center/contain no-repeat;rotate:-6deg;animation:sella .2s var(--sal)}
@keyframes sella{from{scale:1.6;opacity:0}}

.guardar-todo{margin-top:30px;padding-top:4px;border-top:1px solid #000}
.config .botones{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 18px;margin-top:16px}
.config .botones:not(:has(>:not([hidden]))){display:none}
.config .seguir{flex:0 1 auto;width:auto;min-width:180px}
.texto{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:inherit;cursor:pointer;font:400 16px/20px var(--t-suisse);text-decoration:underline;text-underline-offset:3px}
.texto:disabled{color:var(--tinta-suave);cursor:default}
.borde{min-height:44px;padding:8px 20px;border:1px solid #000;border-radius:var(--pastilla);background:none;color:#000;cursor:pointer;font:400 15px/20px var(--t-suisse);transition:background-color .16s ease}
.borde:disabled{color:var(--tinta-suave);border-color:var(--tinta-suave);cursor:default}

/* La foto: en vertical, como en la comanda del perfil. */
.foto-fila{display:flex;align-items:center;gap:16px;padding:14px 0 4px}
.foto-marco{flex:none;display:grid;place-items:center;width:88px;height:108px;border:1px dashed #000;border-radius:8px;overflow:hidden;font:400 13px/16px var(--t-greed);text-transform:uppercase;letter-spacing:.04em;text-align:center}
.foto-marco:has(img,canvas){border:1px solid #000}
.foto-marco :is(img,canvas){display:block;width:100%;height:100%;object-fit:cover}
.foto-acciones{display:grid;justify-items:start;gap:2px;min-width:0}
.subir{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;cursor:pointer;font-size:16px;line-height:20px;text-decoration:underline;text-underline-offset:3px}
.subir input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.subir:has(:focus-visible){outline:2px solid #000;outline-offset:3px}
.subir:has(:disabled){color:var(--tinta-suave);cursor:not-allowed;text-decoration:none}
.subir input:disabled{cursor:not-allowed}

.casilla{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;border-bottom:1px dotted #000;font-size:16px;line-height:22px;cursor:pointer}
.casilla small{display:block;font-size:14px;line-height:19px;color:var(--tinta-suave)}
.casilla input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;width:22px;height:22px;margin:0;border:1px solid #000;border-radius:2px;background:transparent;cursor:pointer}
.casilla input::after{content:"";width:16px;height:16px;opacity:0;background:currentColor;-webkit-mask:url("/mi-eito/cuenta/simbolo.svg") center/contain no-repeat;mask:url("/mi-eito/cuenta/simbolo.svg") center/contain no-repeat}
.casilla input:checked::after{opacity:1}
@media (prefers-reduced-motion:no-preference){.casilla input:checked::after{animation:sella-casilla .24s var(--sal)}}
.casilla input:focus-visible{outline:2px solid #000;outline-offset:3px}
.suelto:disabled .casilla{color:var(--tinta-suave);cursor:default}
.suelto:disabled .casilla input{border-color:var(--tinta-suave);cursor:default}

.pedir{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:44px;padding:0;border:0;background:none;color:#000;cursor:pointer;text-align:left}
.pedir b{font:400 30px/34px var(--t-hue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.pedir span{margin-top:8px;font:400 15px/20px var(--t-suisse)}
.pedir:disabled{color:var(--tinta-suave);cursor:default}

/* Borrar la cuenta: fuera de la comanda y sin peso, lejos de lo que se usa a diario. */
.baja{max-width:560px;margin-top:64px}
.baja>p{margin:12px 0 0;font-size:15px;line-height:22px}
.baja .borde{margin-top:18px}
.baja-panel{margin-top:14px}
.baja-panel .campo{padding-top:4px}
.baja-panel>.texto{margin-top:6px;padding-left:0;font-size:15px}

@media (hover:hover) and (pointer:fine){.borde:hover:not(:disabled){background:rgba(0,0,0,.06)}.texto:hover:not(:disabled),.subir:hover:not(:has(:disabled)),.volver:hover{text-decoration-thickness:2px}}
@media (max-width:991px){
  .columnas{grid-template-columns:minmax(0,1fr)}
  .config .comanda{padding:14px 16px 22px}
  .config .talon{padding:14px 16px 16px}
  .config-cab .nota{flex-basis:100%}
  .config .seguir{flex:1 1 100%;width:100%}
  .fila{grid-template-columns:minmax(0,1fr)}
  .baja{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){.aviso.ok::after{animation:aparece .2s ease}}