/* Marca Owelign sobre Chatwoot.
 *
 * Se carga desde el layout (overrides/vueapp.html.erb) y se sirve desde el
 * volumen brand/ que ya existía para los logos.
 *
 * Dos partes: retematizar el azul de Chatwoot a dorado en toda la app, y
 * rediseñar el login.
 *
 * ponytail: se pisa la paleta con CSS en vez de recompilar el frontend. Chatwoot
 * define sus colores con variables CSS, así que esto alcanza y sobrevive a las
 * actualizaciones sin mantener un fork del bundle.
 */

/* Valores sacados pixel a pixel del mockup, no estimados. */
:root {
  --marca-dorado: #c3a358;
  --marca-dorado-hover: #b39248;
  --marca-negro: #0a0a0a;
  --marca-tarjeta: #141414;     /* tarjeta: un paso más claro que el fondo negro */
  --marca-campo: #1f1f1f;       /* campos: un paso sobre la tarjeta, o no se distinguen */
  --marca-fondo: #eaeae8;       /* fondo de la página, alrededor de la tarjeta */
  --marca-placeholder: #575757;
  --marca-tenue: #8f8f8f;       /* CRM, pie de página */
  --marca-borde: #262626;
}

/* --- 1. El azul de marca pasa a dorado ---------------------------------
 * `n-brand` no usa variable: está quemado como #2781f6 en el bundle, así que
 * hay que pisar cada utilidad a mano. Son siete.
 */
.bg-n-brand { background-color: var(--marca-dorado) !important; }
.text-n-brand { color: var(--marca-dorado) !important; }
.border-n-brand,
.border-t-n-brand { border-color: var(--marca-dorado) !important; }
.ring-n-brand { --tw-ring-color: var(--marca-dorado) !important; }
.outline-n-brand { outline-color: var(--marca-dorado) !important; }
.from-n-brand { --tw-gradient-from: var(--marca-dorado) !important; }

/* Sobre dorado, el texto blanco no contrasta: los botones llevan texto oscuro. */
.bg-n-brand,
.bg-n-brand * { color: var(--marca-negro) !important; }

/* El resto de la paleta sí usa variables. Se reapunta la rampa azul a la ámbar
 * que Chatwoot ya trae calibrada para claro y oscuro, en vez de inventar 12
 * pasos a mano y arriesgar contrastes ilegibles. */
:root, .dark {
  --blue-1: var(--amber-1);   --blue-2: var(--amber-2);
  --blue-3: var(--amber-3);   --blue-4: var(--amber-4);
  --blue-5: var(--amber-5);   --blue-6: var(--amber-6);
  --blue-7: var(--amber-7);   --blue-8: var(--amber-8);
  --blue-9: var(--amber-9);   --blue-10: var(--amber-10);
  --blue-11: var(--amber-11); --blue-12: var(--amber-12);
}

/* --- 2. El login ------------------------------------------------------
 * PASO 2: fondo negro + la tarjeta centrada, todavía vacía.
 *
 * El contenido sigue oculto a propósito. Se devuelve de a uno en los pasos
 * siguientes (logo → título → campos → botón → pie).
 *
 * OJO con la especificidad: `:has()` hereda la de su argumento, y el nuestro son
 * puros elementos → (0,0,4). Una sola clase de Tailwind vale (0,1,0) y le gana.
 * Por eso cada declaración de este bloque lleva !important.
 */
main:has(> section > img) {
  background: #000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 100vh !important;
  padding: 2rem 1.25rem !important;
}

/* Chatwoot parte el login en dos <section> hermanas, así que la tarjeta se arma
 * entre las dos: la primera cierra las esquinas de arriba, la última las de
 * abajo, y sin separación entre ellas se ve como una sola pieza. */
main:has(> section > img) > section {
  display: block !important;
  background: var(--marca-tarjeta) !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  flex: none !important;
}
main:has(> section > img) > section:first-of-type {
  border-radius: 22px 22px 0 0 !important;
}
main:has(> section > img) > section:last-of-type {
  border-radius: 0 0 22px 22px !important;
}

/* PASO 4: vuelve todo el contenido — título, campos, botón y pie.
 * Ya no se oculta nada salvo lo que no está en el diseño.
 */

/* Chatwoot pone DOS logos: uno para tema claro (`dark:hidden`) y otro para
 * oscuro (`hidden dark:block`). Como nuestra tarjeta siempre es oscura, se fuerza
 * uno solo — si no, en tema oscuro se mostrarían los dos apilados. */
main:has(> section > img) > section:first-of-type img {
  display: none !important;
}
main:has(> section > img) > section:first-of-type img:first-of-type {
  display: block !important;
  width: 232px !important;
  max-width: 76% !important;
  height: auto !important;
  margin: 0 auto !important;
}

main:has(> section > img) > section:first-of-type {
  padding: 2.5rem 1.75rem 0 !important;
}
main:has(> section > img) > section:last-of-type {
  padding: 0 1.75rem 1.75rem !important;
}

/* "Iniciar sesión" */
/* El título de Chatwoot es "Login to {nombre}" y sale en el idioma del navegador,
 * no en el de la instalación — por eso aparecía en inglés aunque DEFAULT_LOCALE
 * sea `es`. Ese texto vive en el paquete JS compilado, así que no se puede
 * traducir sin recompilar el frontend.
 *
 * Se anula el texto original con font-size: 0 y se escribe el nuestro en un
 * pseudo-elemento. Efecto secundario buscado: ahora dice "Iniciar sesión" sin
 * importar el idioma del navegador de quien entre. */
main:has(> section > img) h2 {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 1.5rem 0 1.75rem !important;
  text-align: center !important;
}
main:has(> section > img) h2::after {
  content: 'Iniciar sesión' !important;
  display: block !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

/* Etiquetas.
 * Los textos vienen del paquete JS compilado y se resuelven con el idioma del
 * navegador, así que en un Chrome en inglés decían "Email" y "Password". Se
 * anulan y se escriben en español con pseudo-elementos, igual que el título.
 *
 * Dice "Correo" y no "Usuario": el campo de Chatwoot exige un correo, a
 * diferencia del panel donde el usuario es `admin`. Poner "Usuario" acá haría
 * que un agente intente entrar con un nombre y falle.
 */
main:has(> section > img) label {
  color: #f2f2f2 !important;
  font-weight: 600 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}
main:has(> section > img) label[for='email_address']::after { content: 'Correo' !important; }
main:has(> section > img) label[for='password']::after { content: 'Contraseña' !important; }
main:has(> section > img) label::after {
  display: block !important;
  color: #f2f2f2 !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

/* Espaciado igual al del panel: 0.5rem entre etiqueta y campo, 1.1rem entre
 * grupos. Chatwoot trae 0.25rem y 1.25rem con sus utilidades `space-y-*`, que
 * hay que neutralizar o se suman a nuestros márgenes. */
main:has(> section > img) .space-y-1 > * + * { margin-top: 0 !important; }
main:has(> section > img) form > * + * { margin-top: 1.1rem !important; }

/* Campos de texto */
main:has(> section > img) input {
  background: var(--marca-campo) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 1rem !important;
  padding: 0.85rem 1rem !important;
  width: 100% !important;
  /* Sin margen propio: el espaciado entre grupos lo pone `form > * + *`. Tener
   * los dos hacía que se sumaran y quedaba el doble de separación. */
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
main:has(> section > img) input::placeholder {
  color: var(--marca-placeholder) !important;
  opacity: 1 !important;
}
main:has(> section > img) input:focus {
  border-color: var(--marca-dorado) !important;
  box-shadow: 0 0 0 3px rgb(195 163 88 / 18%) !important;
  outline: none !important;
}

/* El ojito de "mostrar contraseña" es un botón de Chatwoot dentro del campo.
 * NO se toca su comportamiento, solo el color para que se vea sobre el fondo
 * oscuro: su icono viene pensado para tema claro. */
main:has(> section > img) button:not([type='submit']) {
  color: #9a9a9a !important;
  background: transparent !important;
}

/* Botón principal */
main:has(> section > img) button[type='submit'] {
  background: var(--marca-dorado) !important;
  color: #1a1508 !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  padding: 0.95rem 1rem !important;
  width: 100% !important;
  /* Antes eran 0.25rem, que sumados al hueco de grupo daban 22px y quedaba
   * pegado al campo. Con 1rem quedan 34px. */
  margin-top: 1rem !important;
  box-shadow: none !important;
}

/* El texto del botón es `$t('LOGIN.SUBMIT')`, del paquete JS compilado, y se
 * resuelve con el idioma del navegador: en inglés decía "Login". Se oculta ese
 * span y se escribe el nuestro.
 * Se apunta a `span.truncate`, que es el de la etiqueta, y NO al Spinner de
 * carga — así el botón sigue mostrando que está trabajando al enviar. */
main:has(> section > img) button[type='submit'] span.truncate {
  display: none !important;
}
main:has(> section > img) button[type='submit']::after {
  content: 'Iniciar sesión' !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #1a1508 !important;
  line-height: 1.4 !important;
}
main:has(> section > img) button[type='submit']:hover:not(:disabled) {
  background: var(--marca-dorado-hover) !important;
}
main:has(> section > img) button[type='submit']:disabled {
  opacity: 0.55 !important;
}

/* "¿Olvidaste tu contraseña?" no está en el diseño, y hoy tampoco funcionaría:
 * manda un correo y el servidor no tiene SMTP configurado. Se vuelve a mostrar
 * borrando esta regla cuando el correo esté puesto. */
main:has(> section > img) a[href*='password'] { display: none !important; }
/* Ocultar el enlace no alcanzaba: su <p> contenedor seguía ocupando alto y
 * márgenes, y eso descuadraba el bloque de la contraseña frente al del panel. */
main:has(> section > img) p:has(> a[href*='password']) { display: none !important; }

/* Firma del proveedor. Va en CSS para no tocar el componente Vue. */
main:has(> section > img) > section:last-of-type::after {
  content: 'Hecho por Owelign' !important;
  display: block !important;
  width: fit-content !important;
  margin: 1.5rem auto 0 !important;
  padding-left: 1.4rem !important;
  background: url('/brand-assets/logo_thumbnail.svg') no-repeat left center / 0.95rem 0.95rem !important;
  font-size: 0.9rem !important;
  color: var(--marca-tenue) !important;
}

/* --- 3. La barra lateral: nombre de la cuenta -------------------------
 * Arriba a la izquierda, Chatwoot muestra `currentAccount.name` como texto
 * simple. Se reemplaza por el lockup de dos líneas (PORCERÁMICA / CRM) para que
 * coincida con el login, sin tocar el nombre real de la cuenta ni el de la
 * instalación (que sigue siendo "Chat", el título de la pestaña).
 *
 * El selector está anclado al id del botón, así que la lista de cuentas del
 * desplegable no se ve afectada: ahí los nombres siguen siendo texto normal.
 */
#sidebar-account-switcher > span[aria-live='polite'] {
  display: none !important;
}
#sidebar-account-switcher {
  background-image: url('/brand-assets/wordmark_light.svg') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: auto 30px !important;
  min-height: 36px !important;
  min-width: 118px !important;
}
/* Chatwoot marca el tema oscuro con la clase `dark` en la raíz. Sin esta
 * variante, el texto blanco quedaría invisible sobre la barra clara. */
.dark #sidebar-account-switcher {
  background-image: url('/brand-assets/wordmark_dark.svg') !important;
}

/* --- 4. Lo que el agente no ve ----------------------------------------
 * El agente entra a atender, no a configurar; el layout marca `<html data-rol>`
 * con el rol real (ver overrides/vueapp.html.erb) y acá se esconde lo que no es
 * suyo. La lista de Equipos de la barra Chatwoot no la filtra por rol, así que
 * se filtra acá: el subgrupo de equipos es el único cuyos enlaces van a
 * /team/<id>, y ese gancho no depende del idioma.
 *
 * Ajustes SÍ se le deja. Chatwoot ya le esconde por permisos de ruta todo lo de
 * administrador (cuentas, bandejas, equipos, agentes, atributos): al vendedor
 * le quedan Macros y Respuestas predefinidas, que es justo lo que se pidió que
 * tuviera — ahí agrega sus propios mensajes personalizados y los usa en el chat
 * escribiendo "/". Antes se ocultaba la entrada entera y los vendedores no
 * tenían dónde crearlos.
 *
 * ponytail: es cosmético, no un permiso. Los Ajustes de verdad ya los bloquea
 * el servidor por rol, y eso no cambia.
 */
[data-rol='agente'] nav li.group\/sidebar-section:has(a[href*='/team/']) { display: none !important; }

/* Dentro de Conversaciones, los filtros que la rutina del agente no usa
 * (MANUAL-SISTEMAS §3.8: Mías, Sin asignar, Todas):
 *
 * - **Participar** y **Desatendido** son vistas de supervisión. El
 *   administrador las conserva.
 * - **Canales** filtra por bandeja, y hay una sola: la misma lista que
 *   "Todas las conversaciones", con un clic más.
 *
 * **Menciones se queda a propósito**: el aviso de los 2 minutos es una mención,
 * así que esa es la pantalla donde el agente encuentra lo que le reclaman.
 *
 * Las hojas también llevan `name`; el subgrupo de canales no, pero es el único
 * cuyos enlaces van a /inbox/<id> ("Mi bandeja de entrada" va a /inbox-view,
 * que no coincide).
 */
[data-rol='agente'] nav li[name='Participating'],
[data-rol='agente'] nav li[name='Unattended'],
[data-rol='agente'] nav li.group\/sidebar-section:has(a[href*='/inbox/']) { display: none !important; }

/* --- 5. Lo que no se usa ----------------------------------------------
 * Capitán y Calls no llevan a ningún lado en esta instalación:
 *
 * - **Capitán** es la IA de Chatwoot. Su bandera `captain_integration` está
 *   apagada en la cuenta, así que no hay nada detrás. Igual aparece porque la
 *   imagen se considera "enterprise" con plan `community`, y en ese caso
 *   Chatwoot muestra a propósito las funciones de pago para vender el upgrade.
 * - **Calls** corre contra la API enterprise, que esta instalación no sirve.
 *
 * O sea que esconderlos no apaga nada: saca dos entradas que terminan en una
 * pantalla vacía o en un anuncio. Se ocultan para todos, no solo para agentes.
 *
 * El gancho es el mismo que arriba y no depende del idioma: el encabezado de
 * cada grupo lleva su `name`.
 */
nav li:has(> [name='Captain']),
nav li:has(> [name='Calls']) { display: none !important; }

/* --- 6. Los avisos del sistema, a la vista de todos --------------------
 * Chatwoot intercala en el hilo mensajes de actividad: "Asignado a X por Y",
 * "La conversación fue reabierta por Z", "fue pospuesta por…".
 *
 * Antes se le ocultaban al agente, para que no se mezclaran con lo que escribe
 * el cliente. Se revirtió a propósito: sin ellos, al vendedor le reasignaban un
 * chat, se lo resolvían o se lo posponían y no se enteraba de nada — que es
 * justo lo que se pidió arreglar. Saber quién movió qué vale más que el ruido.
 *
 * Si algún día molestan de nuevo, la respuesta NO es volver a esconderlos: es
 * pedirle a Chatwoot que los agrupe. Esconderlos deja al vendedor a ciegas.
 */

/* --- 7. El botón de desactivar agentes ---------------------------------
 * Lo inyecta brand/agentes.js en Ajustes > Agentes. Se le da estilo propio en
 * vez de copiar las clases de Tailwind de los botones de Chatwoot: esas clases
 * cambian entre versiones, estas no.
 */
.crm-baja {
  padding: 0.25rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--marca-dorado, #c3a358);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
}
.crm-baja:hover { background: rgba(195, 163, 88, 0.12); }
.crm-baja:disabled { opacity: 0.5; cursor: default; }
/* Reactivar es la acción segura: se distingue de la que cierra el acceso. */
.crm-baja.alta { color: #2f855a; }
.crm-baja.alta:hover { background: rgba(47, 133, 90, 0.1); }

/* La etiqueta de la fila que dibujamos nosotros para los desactivados: Chatwoot
 * ya no los lista, porque dejaron de ser miembros de la cuenta. */
.crm-tag {
  padding: 0.05rem 0.4rem;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  color: #c53030;
  background: rgba(197, 48, 48, 0.12);
}
/* El avatar de esa fila postiza: mismo tamaño que el de Chatwoot, en gris, para
 * que la columna del nombre arranque donde arranca en las demás filas. */
.crm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #a0aec0;
  background: rgba(160, 174, 192, 0.16);
}

/* --- 8. La ficha del contacto, sin el panel de la derecha ---------------
 * En Contactos → un contacto, Chatwoot repite a la derecha lo mismo que ya está
 * en el formulario, más pestañas de historial y media. Se pide ver la ficha y
 * nada más.
 *
 * El selector es de la pantalla del contacto y de ninguna otra: en la
 * conversación y en la lista de contactos no coincide con nada (comprobado). Los
 * atributos del lead —Estado del lead entre ellos, del que sale el embudo del
 * Dashboard— se siguen viendo y editando en la conversación, que es donde el
 * asesor los llena.
 *
 * Si al actualizar Chatwoot vuelve a aparecer el panel, es que cambiaron estas
 * clases de Tailwind. Es cosmético: no rompe nada.
 */
section > div.max-w-md.border-l.bg-n-solid-2 {
  display: none !important;
}

/* --- 9. El panel del chat, solo con lo que se usa ----------------------
 * En la conversación, el panel de la derecha trae ocho secciones. El vendedor
 * usa dos: los atributos del contacto (donde llena estado del lead y cómo nos
 * conoció) y las acciones de conversación (asignar, equipo, prioridad). Las
 * otras seis son ruido que empuja las dos útiles hacia abajo.
 *
 * Las secciones no tienen nada que las distinga en el HTML —todas son el mismo
 * div— así que hay que ir por posición. El seguro es la condición de arriba:
 * la regla SOLO aplica si el panel tiene exactamente las ocho secciones
 * conocidas. Si una actualización de Chatwoot agrega o quita una, el selector
 * deja de coincidir y se ven todas otra vez, en vez de esconder la que no era.
 *
 * Se quedan: 1 Acciones de conversación · 4 Atributos de contacto
 * Se ocultan: 2 Macros · 3 Información · 5 Notas · 6 Adjuntos ·
 *             7 Conversaciones anteriores · 8 Participantes
 */
div.flex.flex-col.gap-3:has(> .conversation--actions):has(> :nth-child(8)):not(:has(> :nth-child(9))) > :nth-child(2),
div.flex.flex-col.gap-3:has(> .conversation--actions):has(> :nth-child(8)):not(:has(> :nth-child(9))) > :nth-child(3),
div.flex.flex-col.gap-3:has(> .conversation--actions):has(> :nth-child(8)):not(:has(> :nth-child(9))) > :nth-child(5),
div.flex.flex-col.gap-3:has(> .conversation--actions):has(> :nth-child(8)):not(:has(> :nth-child(9))) > :nth-child(6),
div.flex.flex-col.gap-3:has(> .conversation--actions):has(> :nth-child(8)):not(:has(> :nth-child(9))) > :nth-child(7),
div.flex.flex-col.gap-3:has(> .conversation--actions):has(> :nth-child(8)):not(:has(> :nth-child(9))) > :nth-child(8) {
  display: none !important;
}

/* --- 10. Los iconos del contacto, quietos en el celular ----------------
 * Pedido: "que no se muevan los iconos en el celular de la parte de contacto".
 *
 * No se pudo reproducir un salto de posición en la web móvil: el bloque de
 * datos del contacto mide lo mismo tenga o no correo —Chatwoot escribe "No
 * Disponible" en lugar de esconder la línea— y un nombre largo se trunca en vez
 * de saltar de renglón. Lo que sí se mueve es al hacer scroll: la fila se va
 * hacia arriba con todo lo demás, y al volver hay que buscarla.
 *
 * Se la fija arriba del panel. Importa porque en esa fila está el botón rojo de
 * BORRAR contacto pegado a los otros tres: en una pantalla de 6 pulgadas, un
 * dedo que apunta a "editar" mientras la lista se mueve puede darle a borrar.
 *
 * Solo en pantallas chicas: en el escritorio la fila ya se ve siempre.
 */
@media (max-width: 1023px) {
  div.flex.items-center.w-full.mt-0\.5.gap-2:has(> button) {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-block: 0.35rem;
    background: var(--n-solid-2, #16161a);
  }
}

/* Los atributos ya no se arrastran (ver brand/interfaz.js): que el cursor no
   prometa lo contrario. */
.drag-handle { cursor: default !important; }