/* Negocio, Equipo y Perfil del Panel de Administración (ajustes.js).
   Prefijo aj- para no chocar con styles.css ni con Pedidos (pa-).

   Cliente visual P2: ya no es una ventana encima de la tienda sino una columna
   del panel (shell.css). Misma anchura y márgenes que Pedidos, para que el
   título no salte de sitio al cambiar de sección; los bloques son tarjetas
   (.cp-tarjeta) sobre el fondo del panel. */

.aj-caja {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 22px 28px 48px;
}

/* Mientras se recarga, el contenido se apaga en vez de saltar a "Cargando":
   la pantalla no se mueve y no se pierde el sitio donde estabas. */
.aj-caja.aj-ocupado { opacity: .55; pointer-events: none; }

.aj-cargando { padding: 50px 0; text-align: center; color: #5c6670; font-size: 15px; }
.aj-error { color: #e03131; }

/* ── Bloques ─────────────────────────────────────────────────────────── */
/* Cada bloque es una tarjeta separada de la siguiente por aire, no por una
   línea: es el mismo lenguaje que las de Pedidos. */
.aj-seccion { margin-bottom: 14px; }
.aj-seccion h3 { margin: 0 0 10px; font-size: 16px; font-weight: 650; color: #16181d; }
.aj-seccion > .aj-ayuda:first-of-type { margin-top: -4px; }

/* Un formulario de 1.100 px de ancho obliga a mover la vista de un lado a
   otro para leer una etiqueta y su campo. */
.aj-form, .aj-permisos { max-width: 760px; }
.aj-ayuda { margin: 0 0 14px; font-size: 13px; color: #5c6670; line-height: 1.45; }
/* Provincia fija (13/10): si Google ha confirmado la dirección del local. */
.aj-ayuda.aj-sello { margin-top: 8px; font-size: 14px; }

/* ── Rejilla de restaurantes ─────────────────────────────────────────── */
.aj-rejilla {
    display: grid;
    /* 340 px: con 258 la dirección salía cortada y «En uso ahora» en dos líneas (07/11). */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}

.aj-tarjeta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    font: inherit;
}
.aj-tarjeta.es-archivado { opacity: .62; background: #f8f9fa; }

.aj-avatar {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 13px;
    color: #fff;
    font-size: 16px; font-weight: 700; letter-spacing: .02em;
}
.aj-avatar-mini { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; background: #6c757d; }
.aj-avatar-nuevo { background: #dee2e6 !important; color: #495057; font-size: 24px; font-weight: 400; }

.aj-tarjeta-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aj-tarjeta-txt strong { font-size: 14.5px; font-weight: 650; color: #16181d; }
.aj-tarjeta-txt small  { font-size: 12px; color: #5c6670; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aj-etiqueta {
    align-self: flex-start;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f3f5;
    color: #5c6670;
    font-size: 12px; font-weight: 700;
}
.aj-etiqueta.es-activo { background: #eef4ff; color: #2563eb; }
.aj-etiqueta.es-aviso  { background: #fff4e6; color: #d9480f; }

.aj-nuevo { border: 2px dashed #ced4da; cursor: pointer; }
.aj-nuevo:hover { background: #f8f9fa; }

.aj-tarjeta:has(.aj-tarjeta-acciones) { padding-right: 112px; }

/* «Editar» escrito, no un lápiz: el icono solo lo entiende quien ya lo ha
   visto en otras aplicaciones. */
.aj-editar {
    flex-shrink: 0;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #dee2e6; border-radius: 9px;
    background: #fff; color: #2563eb;
    font: inherit; font-size: 13px; font-weight: 650;
    cursor: pointer;
}
.aj-editar:hover { background: #eef4ff; border-color: #c5d6fb; }
/* «Ver ficha» y «Editar», uno encima del otro a la derecha de la tarjeta. */
.aj-tarjeta-acciones { position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 6px; }
.aj-tarjeta-acciones .aj-editar { width: 100%; }

/* ── Ficha del local (06/11): la hoja de registro, en recuadros ──────── */
.aj-ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.aj-ficha-cab h3 { margin: 0; }
.aj-ficha-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-ficha-botones button { min-height: 44px; }
.aj-ficha { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.aj-ficha-bloque { grid-column: span 3; padding: 16px; border: 1px solid #e9ecef; border-radius: 14px; background: #fff; min-width: 0; }
.aj-ficha-bloque.es-entero { grid-column: 1 / -1; }
.aj-ficha-bloque.es-tercio { grid-column: span 2; }
.aj-ficha-bloque h4 { margin: 0 0 10px; font-size: 15px; font-weight: 750; color: #16181d; }
.aj-ficha-bloque .aj-ayuda { margin: -4px 0 10px; font-size: 14px; }
.aj-ficha-bloque dl { display: grid; grid-template-columns: minmax(110px, 42%) minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.aj-ficha-bloque dt { font-size: 14px; color: #5c6670; }
.aj-ficha-bloque dd { margin: 0; font-size: 15px; color: #16181d; white-space: pre-line; overflow-wrap: break-word; }
/* En los contactos (tres por fila) el rótulo va encima: al lado, en una caja
   estrecha, el correo y «Propietario (admin)» se partían a media palabra. */
.aj-ficha-bloque.es-tercio dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
.aj-ficha-bloque.es-tercio dt { margin-top: 8px; font-size: 14px; }
.aj-ficha-bloque.es-tercio dt:first-child { margin-top: 0; }
.aj-ficha-bloque.es-entero dl { grid-template-columns: minmax(110px, 22%) minmax(0, 1fr); }
.aj-ficha-vacio { color: #5c6670; }
.aj-ficha-bloque a { color: #2563eb; font-weight: 650; }
@media (max-width: 900px) {
    .aj-ficha-bloque.es-tercio { grid-column: span 3; }
}
@media (max-width: 640px) {
    .aj-ficha { grid-template-columns: minmax(0, 1fr); }
    .aj-ficha-bloque, .aj-ficha-bloque.es-tercio, .aj-ficha-bloque.es-entero { grid-column: 1 / -1; }
    .aj-ficha-bloque.es-entero dl, .aj-ficha-bloque dl { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
    .aj-ficha-botones { width: 100%; }
    .aj-ficha-botones button { flex: 1 1 0; }
    /* En un tercio partía en cuatro líneas y los tres botones salían altísimos
       (07/11): «Volver» y «Editar» juntos, y este debajo, a todo el ancho. */
    .aj-ficha-botones [data-ficha-otro-local] { flex-basis: 100%; order: 1; }
}

/* ── Personas ────────────────────────────────────────────────────────── */
.aj-personas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.aj-persona {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e9ecef;
    border-radius: 13px;
}
.aj-persona.es-pendiente { background: #fffdf7; border-color: #ffe8cc; }
.aj-persona-acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.aj-persona-acciones .aj-btn-sec { padding: 7px 12px; font-size: 13px; }

.aj-persona-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.aj-persona-txt strong { font-size: 14px; font-weight: 650; color: #16181d; }
.aj-persona-txt small  { font-size: 12px; color: #5c6670; }
.aj-persona-negocios   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El puesto (cliente C1): describe a la persona, no da permisos. Se parte en
   líneas en vez de cortarse: «Encargada de tienda y…» no dice nada. */
.aj-persona-txt .aj-persona-puesto { font-size: 13px; color: #495057; overflow-wrap: anywhere; }

.aj-persona-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }

.aj-rol {
    padding: 2px 9px;
    border-radius: 999px;
    background: #e7f5ff; color: #1971c2;
    font-size: 12px; font-weight: 650;
}

/* ── Formularios ─────────────────────────────────────────────────────── */
.aj-form { display: flex; flex-direction: column; gap: 12px; }

.aj-form label {
    display: block;
    /* 14 px (06/11): a 12,5 los rótulos de los campos se leían mal (reunión del 30/09: 60 años). */
    font-size: 14px; font-weight: 650; color: #3d444b;
}
.aj-form label small { font-size: 13px; font-weight: 400; color: #5c6670; }

.aj-form input:not([type="checkbox"]),
.aj-form select,
.aj-form textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    background: #fff;
    color: #16181d;
    font: inherit;
    font-size: 15px; font-weight: 400;
}
.aj-form textarea { resize: vertical; line-height: 1.4; }
.aj-form input:focus, .aj-form select:focus, .aj-form textarea:focus {
    outline: 2px solid #2563eb; outline-offset: -1px; border-color: transparent;
}
.aj-form input:disabled { background: #f8f9fa; color: #5c6670; }
.aj-form [aria-invalid="true"] { border-color: #e03131; background: #fff5f5; }
.aj-form [aria-invalid="true"]:focus { outline-color: #e03131; }

.aj-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aj-fila-3 { grid-template-columns: 1fr 1fr 1fr; }

.aj-checks, .aj-colores {
    margin: 0; padding: 12px 14px;
    border: 1px solid #e9ecef; border-radius: 12px;
}
.aj-checks legend, .aj-colores legend {
    padding: 0 6px; font-size: 12.5px; font-weight: 650; color: #495057;
}
.aj-checks legend small { font-weight: 400; color: #5c6670; }

.aj-check { display: flex !important; align-items: center; gap: 9px; padding: 5px 0; font-weight: 400 !important; cursor: pointer; }
.aj-check input { width: auto !important; margin: 0 !important; }
.aj-check span { font-size: 14px; color: #16181d; }
.aj-entrega { display: flex; flex-direction: column; gap: 10px; }
.aj-entrega .aj-ayuda { margin: 0; }
.aj-dias { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.aj-bloque { border: 1px solid #e9ecef; border-radius: 12px; padding: 6px 16px; background: #fff; }
.aj-bloque[open] { padding-bottom: 16px; }
/* Aire entre campo y campo con margen y no con `gap`: el contenido de un
   <details> va en su propia caja (::details-content) y el gap del details no
   le llega; unas etiquetas quedaban pegadas a la casilla de encima (07/11). */
.aj-bloque[open] > :not(summary) { margin-top: 12px; }
.aj-bloque .aj-ayuda { margin: 0; }
/* Las secciones de la hoja en «Editar» (06/11): títulos que se leen como
   títulos, con la flecha que dice si está abierta, y 44 px para pulsarlos. */
.aj-desplegable.aj-bloque > summary {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 4px 0; list-style: none;
    font-size: 16px; font-weight: 750; color: #16181d;
}
.aj-bloque > summary::-webkit-details-marker { display: none; }
.aj-bloque > summary::before {
    content: ''; flex-shrink: 0; width: 8px; height: 8px;
    border-right: 2px solid #2563eb; border-bottom: 2px solid #2563eb;
    transform: rotate(-45deg); transition: transform .15s;
}
.aj-bloque[open] > summary::before { transform: rotate(45deg); }
.aj-desplegable.aj-bloque[open] > summary { margin-bottom: 0; border-bottom: 1px solid #f1f3f5; padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .aj-bloque > summary::before { transition: none; } }

.aj-colores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aj-color {
    width: 30px; height: 30px;
    border: 2px solid transparent; border-radius: 9px;
    cursor: pointer;
}
.aj-color.es-activo { border-color: #16181d; box-shadow: 0 0 0 2px #fff inset; }

.aj-error-form { min-height: 18px; margin: 0; color: #e03131; font-size: 13px; }

.aj-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.aj-btn, .aj-btn-sec, .aj-btn-peligro {
    padding: 10px 18px;
    border: 0; border-radius: 10px;
    cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 650;
}
.aj-btn { background: #2563eb; color: #fff; }
.aj-btn:hover:not(:disabled) { background: #1d4ed8; }
.aj-btn:disabled { opacity: .55; cursor: default; }
.aj-btn-sec { background: #f1f3f5; color: #495057; }
.aj-btn-sec:hover:not(:disabled) { background: #e9ecef; }
.aj-btn-peligro { background: #fff5f5; color: #e03131; }
.aj-btn-peligro:hover:not(:disabled) { background: #ffe3e3; }

/* ── Solicitudes de proveedores ──────────────────────────────────────── */
.aj-cargando-inline, .aj-vacio, .aj-vinc-error {
    padding: 14px;
    border: 1px solid #e9ecef;
    border-radius: 13px;
    background: #fbfbfc;
    color: #5c6670;
    font-size: 13.5px;
}

.aj-vinc-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-color: #ffe3e3;
    background: #fff5f5;
    color: #c92a2a;
}
.aj-vinc-error p { margin: 0; }

.aj-vinc-lista { display: flex; flex-direction: column; gap: 8px; }

.aj-vinc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e9ecef;
    border-radius: 13px;
    background: #fff;
}

.aj-vinc-logo {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #f1f3f5;
    color: #495057;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
}
.aj-vinc-logo img { width: 100%; height: 100%; object-fit: cover; }

.aj-vinc-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.aj-vinc-txt strong { font-size: 14px; font-weight: 650; color: #16181d; }
.aj-vinc-txt small { font-size: 12px; color: #5c6670; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aj-vinc-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.aj-desplegable summary {
    padding: 4px 0; cursor: pointer;
    font-size: 14px; font-weight: 650; color: #2563eb;
}
.aj-desplegable[open] summary { margin-bottom: 8px; }

/* ── Interruptor ─────────────────────────────────────────────────────── */
.aj-interruptor {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px; border: 1px solid #e9ecef; border-radius: 13px;
}
.aj-interruptor span { display: flex; flex-direction: column; gap: 2px; }
.aj-interruptor input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; cursor: pointer; }   /* toda la fila es la etiqueta: se pulsa entera */
.aj-interruptor strong { font-size: 14px; font-weight: 650; color: #16181d; }
.aj-interruptor small  { font-size: 12.5px; color: #5c6670; }
.aj-interruptor input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #2563eb; }

/* ── Móvil ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .aj-caja { padding: 16px 16px 32px; }
}
@media (max-width: 640px) {
    /* minmax(0, …): con `1fr` la columna no bajaba del ancho del contenido y a
       320 px la tarjeta del local y «Editar» se salían de la pantalla (26/10). */
    .aj-rejilla { grid-template-columns: minmax(0, 1fr); }
    .aj-fila, .aj-fila-3 { grid-template-columns: 1fr; }
    .aj-persona { flex-wrap: wrap; }
    /* El rol y «Editar» comparten renglón debajo del nombre: en una columna
       estrecha, uno encima del otro alargaban cada persona sin necesidad. */
    /* Nombre y correo se quedan el primer renglón entero (sin esto, con
       `flex: 1` encogían a nada en vez de dejar bajar lo demás). */
    .aj-persona-txt { flex: 1 1 calc(100% - 60px); }
    /* flex-shrink 1: con el 0 de escritorio, tres etiquetas («Puede crear
       establecimientos»…) no bajaban de renglón y se salían de la tarjeta (26/10). */
    .aj-persona-estado { align-items: center; flex-direction: row; flex-wrap: wrap; margin-left: 50px;
        flex-shrink: 1; min-width: 0; }
    .aj-persona-acciones { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
    /* Cada persona ya es una ficha con su marco: la tarjeta de fuera solo
       sumaría otro borde alrededor (lo mismo que la lista de pedidos). */
    .aj-seccion.cp-tarjeta:has(> .aj-personas) { padding: 0; border: 0; background: none; box-shadow: none; }
    .aj-persona { background: #fff; }
    .aj-vinc { align-items: flex-start; flex-wrap: wrap; }
    .aj-vinc-acciones { width: 100%; justify-content: flex-end; }
    .aj-acciones { flex-direction: column-reverse; align-items: stretch; }
    .aj-acciones span { display: none; }
    .aj-acciones button { width: 100%; }
    .cp-cabecera .aj-btn { width: 100%; min-height: 44px; }
}

/* ── Movimiento ──────────────────────────────────────────────────────── */
/* Mismo criterio que el resto: curvas cortas de salida, escalonado suave y
   todo apagado con prefers-reduced-motion. */
/* Entra igual que Pedidos: sin escala, que ya no es una ventana que aparece. */
.aj-caja { animation: aj-entra .3s cubic-bezier(.22,.61,.36,1); }
@keyframes aj-entra { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.aj-tarjeta, .aj-persona {
    transition: background-color .16s ease, border-color .16s ease, transform .16s cubic-bezier(.22,.61,.36,1);
}
.aj-tarjeta:not(.aj-nuevo):hover, .aj-persona:hover { border-color: #dee2e6; }
.aj-nuevo:hover { transform: translateY(-2px); }

.aj-caja { transition: opacity .18s ease; }

.aj-btn, .aj-btn-sec, .aj-btn-peligro, .aj-editar, .aj-color {
    transition: background-color .14s ease, color .14s ease, border-color .14s ease,
                transform .14s cubic-bezier(.22,.61,.36,1);
}
.aj-btn:hover:not(:disabled), .aj-btn-sec:hover:not(:disabled) { transform: translateY(-1px); }
.aj-btn:active:not(:disabled) { transform: translateY(0); transition-duration: .06s; }
.aj-color:hover { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    .aj-caja { animation-duration: .01ms !important; }
    .aj-nuevo:hover, .aj-color:hover,
    .aj-btn:hover:not(:disabled), .aj-btn-sec:hover:not(:disabled) { transform: none; }
}

/* ── Foto de perfil ──────────────────────────────────────────────────── */
/* Fuera del formulario a propósito: se guarda al elegir el fichero, no con el
   botón "Guardar" de los datos de al lado. */
.aj-foto {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    background: #fbfbfc;
}

.aj-foto-marco {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: #e9ecef;
    color: #495057;
    font-size: 24px; font-weight: 700;
    overflow: hidden;
}
.aj-foto-marco img { width: 100%; height: 100%; object-fit: cover; }
/* Mientras sube, la vista previa se atenúa: se ve que aún no está confirmada. */
.aj-foto-marco.es-subiendo { opacity: .5; }

.aj-foto-texto { flex: 1; min-width: 0; }
.aj-foto-texto strong { display: block; font-size: 14.5px; font-weight: 650; color: #16181d; }
.aj-foto-texto small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: #5c6670; }

.aj-foto-botones { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* El <label> hace de botón porque el <input type=file> de verdad va oculto:
   su aspecto nativo no se puede estilar y cambia en cada navegador. */
.aj-foto-botones label { cursor: pointer; }

@media (max-width: 560px) {
    .aj-foto { flex-direction: column; align-items: center; text-align: center; }
    .aj-foto-botones { justify-content: center; }
}

/* Acción secundaria escrita como enlace. Se usa para lo que se puede deshacer
   fácil (quitar la foto), que no merece el peso visual de un botón. */
.aj-btn-link {
    padding: 9px 6px;
    border: 0;
    background: none;
    color: #5c6670;
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
}
.aj-btn-link:hover { color: #e03131; }

/* ── Qué puede hacer una persona (14G.1; en palabras desde la C2) ───────── */
.aj-permisos { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e9ecef; }
.aj-permisos h4 { margin: 0 0 6px; font-size: 15px; }
.aj-perm-lista { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aj-perm {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; border: 1px solid #e9ecef; border-radius: 10px; background: #fff;
}
.aj-perm.es-ajustado { border-color: #f0b429; background: #fffaf0; }
.aj-perm-txt { display: block; min-width: 0; flex: 1 1 auto; cursor: pointer; }
.aj-perm-txt strong { display: block; font-size: 13.5px; font-weight: 600; }
.aj-perm-txt small { display: block; font-size: 12px; color: #5c6670; overflow-wrap: anywhere; }
.aj-interruptor-perm { width: 22px; height: 22px; flex: 0 0 auto; cursor: pointer; }