/* Cuenta del cliente · D'Jesu COMER. Colores de la marca (snippet 20): amarillo #FFDE59, tinta #111827. */
.djcc { --djcc-tinta: #111827; --djcc-suave: #4b5563; --djcc-linea: #e5e7eb; --djcc-fondo: #ffffff; --djcc-marca: #FFDE59;
  --djcc-ok: #166534; --djcc-ok-fondo: #ecfdf3; --djcc-error: #991b1b; --djcc-error-fondo: #fef2f2; --djcc-camino: #1d4ed8; color: var(--djcc-tinta); }
.djcc *, .djcc *::before, .djcc *::after { box-sizing: border-box; }
/* La letra de los titulos y de las cifras, como en la maqueta. El tema declara
   League Spartan para h1-h5 pero no llega a cargarla; la pide pantallas.php. */
.djcc { --djcc-tipo-titulo: "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif; }
.djcc-app h1, .djcc-app h2, .djcc-app h3,
.djcc-app .djcc-estadisticas strong,
.djcc-app .djcc-identidad > b, .djcc-app .djcc-identidad em,
.djcc-app .djcc-avatar, .djcc-app .djcc-barras b,
.djcc-app a.djcc-nuevo, .djcc-app .djcc-whatsapp strong { font-family: var(--djcc-tipo-titulo); }
.djcc h2, .djcc h3 { margin: 0 0 .5rem; line-height: 1.25; text-wrap: balance; }
.djcc-caja { background: var(--djcc-fondo); border: 1px solid var(--djcc-linea); border-radius: 12px; padding: 1.25rem; margin: 0 0 1rem; }
.djcc-estrecha { max-width: 460px; margin-inline: auto; }
.djcc-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; align-items: start; }
.djcc-dos > * { min-width: 0; }
.djcc-invita { background: #fffbea; border-color: #f5e08a; }
.djcc input[type=text], .djcc input[type=email], .djcc input[type=password] { width: 100%; max-width: 100%; }
.djcc-codigo { font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.djcc .djcc-boton { background: var(--djcc-marca); color: var(--djcc-tinta); border: 0; font-weight: 700; border-radius: 8px; }
/* El tema pinta de amarillo todo .button: borrar la cuenta NO puede parecerse a «Entrar». */
.djcc .button.djcc-boton-peligro, .djcc button.djcc-boton-peligro { background: var(--djcc-error) !important; color: #fff !important; border: 0; border-radius: 8px; }
.djcc-enlace { font-size: .95rem; color: var(--djcc-suave); }
/* El color de enlace del tema es amarillo claro: sobre blanco no se lee. */
.djcc a:not(.button), .djcc .djcc-enlace-boton { color: var(--djcc-tinta); text-decoration: underline; text-underline-offset: 2px; }
.djcc a:not(.button):hover { color: #000; }
.djcc-enlace form { display: inline; }
.djcc-enlace-boton { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.djcc-aviso { border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1rem; }
.djcc-aviso-ok { background: var(--djcc-ok-fondo); color: var(--djcc-ok); }
.djcc-aviso-error { background: var(--djcc-error-fondo); color: var(--djcc-error); }
.djcc-nota, .djcc-vacio { color: var(--djcc-suave); }
.djcc-resumen { font-size: 1.05rem; margin: 0 0 .75rem; }
.djcc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.djcc-orden { border: 1px solid var(--djcc-linea); border-left: 4px solid var(--djcc-linea); border-radius: 10px; padding: .85rem 1rem; background: var(--djcc-fondo); }
.djcc-orden[hidden] { display: none; }
.djcc-espera { border-left-color: #d97706; }
.djcc-camino { border-left-color: var(--djcc-camino); }
.djcc-listo { border-left-color: var(--djcc-ok); }
.djcc-cancelado { border-left-color: #9ca3af; }
.djcc-orden-cab { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
.djcc-servicio { text-transform: uppercase; letter-spacing: .04em; color: var(--djcc-suave); }
.djcc-estado { font-weight: 700; }
.djcc-listo .djcc-estado { color: var(--djcc-ok); }
.djcc-camino .djcc-estado { color: var(--djcc-camino); }
.djcc-numero { font-weight: 700; font-size: 1.05rem; margin: .15rem 0; overflow-wrap: anywhere; }
.djcc-datos { color: var(--djcc-suave); font-size: .95rem; overflow-wrap: anywhere; }
.djcc-seguir { display: inline-block; margin-top: .4rem; font-weight: 600; }
.djcc-accesos { list-style: none; padding: 0; margin: 0 0 1rem; }
.djcc-accesos li { padding: .35rem 0; border-bottom: 1px solid var(--djcc-linea); }
.djcc-cuando { font-variant-numeric: tabular-nums; color: var(--djcc-suave); }
.djcc-peligro { border-color: #fecaca; }
@media (max-width: 600px) {
  .djcc-caja { padding: 1rem; }
  .djcc .button { width: 100%; text-align: center; }
}

/* Mi cuenta 0.2.0. Todo el marco nuevo queda aislado del tema bajo .djcc-app.
   23-sep: los colores ya NO se escriben aqui. Salen de djc-ui.css, la hoja comun de la
   casa (mu-plugin djc-ui), y este bloque solo los traduce a los nombres de Mi cuenta.
   El valor tras la coma es el de respaldo, por si la hoja comun no cargara.
   Ojo: el amarillo estaba en #ffd84d, que NO es el de la marca (#FFDE59). */
.djcc-app {
  --djcc-tinta: var(--djc-ink, #111827);
  --djcc-texto: var(--djc-mut, #626b79);
  --djcc-borde: var(--djc-line, #e0e4eb);
  --djcc-fondo-suave: var(--djc-soft, #f4f6fa);
  --djcc-amarillo: var(--djc-y, #FFDE59);
  --djcc-amarillo-suave: var(--djc-y2, #FFF8DE);
  --djcc-whatsapp: var(--djc-wa, #25d366);
  width: min(1160px, 100%);
  margin-inline: auto;
  background: var(--djcc-fondo-suave);
  color: var(--djcc-tinta);
}
.djcc-app, .djcc-app *, .djcc-app *::before, .djcc-app *::after { box-sizing: border-box; }
.djcc-app .djcc { --djcc-marca: var(--djcc-amarillo); --djcc-linea: var(--djcc-borde); --djcc-suave: var(--djcc-texto); }
.djcc-app svg { width: 1.35rem; height: 1.35rem; display: block; }
.djcc-app h1, .djcc-app h2, .djcc-app h3, .djcc-app p { margin-top: 0; }
.djcc-app h1, .djcc-app h2, .djcc-app h3 { color: var(--djcc-tinta); line-height: 1.08; text-wrap: balance; }
.djcc-app a { color: var(--djcc-tinta); }
.djcc-app .djcc-marco-cab {
  min-height: 76px;
  padding: 12px 18px;
  border: 1px solid var(--djcc-borde);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 13px 35px rgba(17,24,39,.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.djcc-app .djcc-identidad { display: flex; align-items: center; gap: 11px; min-width: 0; font-weight: 800; }
.djcc-app .djcc-identidad > b {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--djcc-amarillo);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 20px;
}
.djcc-app .djcc-identidad > span { display: flex; flex-direction: column; line-height: 1.15; }
.djcc-app .djcc-identidad em { font-style: normal; font-weight: 800; }
.djcc-app .djcc-solo-movil { display: none; }
.djcc-app .djcc-identidad small { color: var(--djcc-texto); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.djcc-app .djcc-tabs { display: flex; align-items: center; gap: 7px; }
.djcc-app .djcc-tabs a {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--djcc-texto);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.djcc-app .djcc-tabs a svg { width: 18px; height: 18px; }
.djcc-app .djcc-tabs a[aria-current="page"] { background: var(--djcc-amarillo); color: var(--djcc-tinta); }
.djcc-app .djcc-subtabs {
  margin: 12px 0 0;
  padding: 10px 16px;
  border: 1px solid var(--djcc-borde);
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.djcc-app .djcc-subtabs a { color: var(--djcc-tinta) !important; font-size: 14px; font-weight: 700; }
.djcc-app .djcc-contenido { padding: 38px 0 20px; }
/* 23-sep: el Inicio era una rejilla de 12 columnas y cada panel llevaba su fila escrita
   a mano (grid-row: 4, 5, 6, 7). Bastaba con que saliera UN bloque opcional arriba -el
   aviso, el recordatorio de confirmar el correo o la nota de envios que no se pueden
   mostrar- para que todo se corriera una fila y la pantalla quedara con un hueco enorme.
   Ahora el Inicio es una columna simple y las dos columnas de abajo son su propia
   rejilla, igual que en la maqueta: da lo mismo cuantos bloques opcionales salgan. */
.djcc-app .djcc-inicio { display: flex; flex-direction: column; gap: 24px; }
.djcc-app .djcc-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.djcc-app .djcc-col { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.djcc-app .djcc-inicio > .djcc-aviso,
.djcc-app .djcc-inicio > .djcc-verificar,
.djcc-app .djcc-inicio > .djcc-nota { margin: 0; }
/* La nota va en su caja, no como texto gris suelto encima del saludo. */
.djcc-app .djcc-inicio > .djcc-nota { padding: 11px 14px; border: 1px solid var(--djcc-borde); border-radius: 12px; background: #fff; color: var(--djcc-texto); font-size: 14px; }
.djcc-app .djcc-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.djcc-app .djcc-hero > div { max-width: 870px; }
.djcc-app .djcc-hero p, .djcc-app .djcc-ceja {
  margin-bottom: 8px;
  color: #5b6472;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.djcc-app .djcc-hero h1 { margin: 0; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.035em; }
.djcc-app .djcc-hero h1 span { padding: 0 9px; border-radius: 9px; background: var(--djcc-amarillo); white-space: nowrap; }
.djcc-app a.djcc-nuevo,
.djcc-app a.djcc-nuevo.button {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--djcc-amarillo) !important;
  color: var(--djcc-tinta) !important;
  box-shadow: 0 6px 16px rgba(244,196,0,.28);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-weight: 800;
  text-decoration: none;
}
.djcc-app .djcc-estadisticas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.djcc-app .djcc-estadisticas article,
.djcc-app .djcc-panel,
.djcc-app .djcc-contacto {
  border: 1px solid var(--djcc-borde);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 13px 35px rgba(17,24,39,.055);
}
.djcc-app .djcc-estadisticas article { min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 5px; }
.djcc-app .djcc-estadisticas p { margin: 0; color: var(--djcc-texto); font-size: 14px; font-weight: 600; }
.djcc-app .djcc-estadisticas strong { font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.djcc-app .djcc-estadisticas small { min-height: 1.2em; color: var(--djcc-texto); font-size: 13px; }
.djcc-app .djcc-contactos-inicio { min-width: 0; }
.djcc-app .djcc-titulo-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.djcc-app .djcc-titulo-fila h1, .djcc-app .djcc-titulo-fila h2 { margin-bottom: 0; }
.djcc-app .djcc-titulo-fila h2 { font-size: 27px; letter-spacing: -.02em; }
.djcc-app .djcc-titulo-fila > a { color: var(--djcc-tinta) !important; font-size: 14px; font-weight: 700; }
.djcc-app .djcc-ayuda { margin: 5px 0 14px; color: var(--djcc-texto); font-size: 14px; }
.djcc-app .djcc-contactos-lista, .djcc-app .djcc-contactos-todos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.djcc-app .djcc-contacto { min-width: 0; padding: 19px; display: flex; flex-direction: column; gap: 13px; }
.djcc-app .djcc-contacto-cab { display: flex; align-items: center; gap: 11px; min-width: 0; }
.djcc-app .djcc-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--djcc-amarillo); display: grid; place-items: center; flex: 0 0 auto; }
.djcc-app .djcc-contacto:nth-child(4n+2) .djcc-avatar { background: #fde2e4; }
.djcc-app .djcc-contacto:nth-child(4n+3) .djcc-avatar { background: #dbeafe; }
.djcc-app .djcc-contacto:nth-child(4n+4) .djcc-avatar { background: #dcfce7; }
.djcc-app .djcc-contacto h3 { margin: 0 0 3px; font-size: 17px; }
.djcc-app .djcc-contacto-cab p, .djcc-app .djcc-contacto-ultimo { margin: 0; color: var(--djcc-texto); font-size: 13px; overflow-wrap: anywhere; }
.djcc-app .djcc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.djcc-app .djcc-chips span { padding: 4px 9px; border-radius: 999px; background: var(--djcc-fondo-suave); color: #374151; font-size: 12px; font-weight: 700; }
.djcc-app a.djcc-repetir {
  min-height: 44px;
  margin-top: auto;
  border: 1px solid #f3e3a1;
  border-radius: 12px;
  background: var(--djcc-amarillo-suave) !important;
  color: var(--djcc-tinta) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.djcc-app .djcc-activos { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.djcc-app .djcc-activos > .djcc-titulo-fila > span { padding: 4px 11px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 12px; font-weight: 800; }
.djcc-app .djcc-activo { padding: 17px 19px; border: 1px solid var(--djcc-borde); border-radius: 16px; display: flex; flex-direction: column; gap: 15px; }
.djcc-app .djcc-activo-cab { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.djcc-app .djcc-activo-ident { display: flex; align-items: center; gap: 13px; min-width: 0; }
.djcc-app .djcc-icono { width: 46px; height: 46px; border-radius: 13px; background: var(--djcc-fondo-suave); display: grid; place-items: center; flex: 0 0 auto; color: var(--djcc-tinta); }
.djcc-app .djcc-activo-ident p { margin: 0 0 3px; color: #5b6472; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; overflow-wrap: anywhere; }
.djcc-app .djcc-activo-ident h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.djcc-app .djcc-seguir-activo { align-self: end; color: var(--djcc-tinta) !important; font-size: 13px; font-weight: 700; text-decoration: none; }
.djcc-app .djcc-seguir-activo:hover { text-decoration: underline; }
.djcc-app .djcc-pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.djcc-app .djcc-pasos > div { display: flex; flex-direction: column; gap: 7px; color: #6b7280; font-size: 11px; }
.djcc-app .djcc-pasos i { height: 8px; border-radius: 999px; background: var(--djcc-borde); }
.djcc-app .djcc-pasos .hecho i { background: var(--djcc-amarillo); }
.djcc-app .djcc-pasos .hecho { color: var(--djcc-tinta); }
.djcc-app .djcc-pasos .actual { font-weight: 800; }
.djcc-app .djcc-historial { padding: 24px; min-width: 0; }
.djcc-app .djcc-filtros { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.djcc-app .djcc-filtros button {
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--djcc-borde);
  border-radius: 999px;
  background: #fff;
  color: var(--djcc-tinta);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.djcc-app .djcc-filtros button.activo { border-color: var(--djcc-tinta); background: var(--djcc-tinta); color: #fff; }
.djcc-app .djcc-historial-lista > article { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 12px 0; border-top: 1px solid #eef0f4; }
.djcc-app .djcc-historial-lista > article[hidden] { display: none; }
.djcc-app .djcc-historial-lista .djcc-icono { width: 44px; height: 44px; }
.djcc-app .djcc-historial-lista h3 { margin: 0 0 3px; font-size: 15px; overflow-wrap: anywhere; }
.djcc-app .djcc-historial-lista h3 span { color: var(--djcc-texto); font-weight: 500; }
.djcc-app .djcc-historial-lista p { margin: 0; color: var(--djcc-texto); font-size: 13px; font-variant-numeric: tabular-nums; }
.djcc-app .djcc-estado { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.djcc-app .djcc-estado-listo { background: #dcfce7; color: #166534; }
.djcc-app .djcc-estado-camino { background: #dbeafe; color: #1d4ed8; }
.djcc-app .djcc-estado-espera { background: #fef3c7; color: #92400e; }
.djcc-app .djcc-estado-cancelado { background: #f3f4f6; color: #6b7280; }
.djcc-app .djcc-ver-todos { width: max-content; margin: 10px auto 0; display: block; color: var(--djcc-tinta) !important; font-size: 14px; font-weight: 700; }
.djcc-app .djcc-anio { padding: 23px; border-radius: 18px; background: var(--djcc-tinta); color: #fff; }
.djcc-app .djcc-anio h2 { color: #fff; font-size: 23px; }
.djcc-app .djcc-anio .djcc-titulo-fila > span { color: #c7ccd6; font-size: 12px; }
.djcc-app .djcc-anio > p { margin: 30px 0 8px; color: #e5e7eb; text-align: center; }
.djcc-app .djcc-barras { height: 178px; padding-top: 14px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; align-items: end; }
.djcc-app .djcc-barras > div { height: 150px; display: grid; grid-template-rows: 17px 1fr 18px; align-items: end; gap: 3px; text-align: center; }
.djcc-app .djcc-barras b { color: #e5e7eb; font-size: 10px; }
.djcc-app .djcc-barras i { width: 100%; max-height: 118px; border-radius: 5px 5px 0 0; background: #4b5563; }
.djcc-app .djcc-barras .maximo i { background: var(--djcc-amarillo); }
.djcc-app .djcc-barras span { color: #9ca3af; font-size: 9px; text-transform: capitalize; }
.djcc-app .djcc-acciones { padding: 22px; }
.djcc-app .djcc-acciones h2, .djcc-app .djcc-datos-cuenta h2 { margin-bottom: 14px; font-size: 21px; }
.djcc-app .djcc-acciones > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.djcc-app .djcc-acciones a { min-width: 0; padding: 10px; border: 1px solid var(--djcc-borde); border-radius: 13px; display: flex; align-items: center; gap: 9px; color: var(--djcc-tinta) !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.djcc-app .djcc-acciones .djcc-icono { width: 38px; height: 38px; }
.djcc-app .djcc-acciones a:nth-child(1) .djcc-icono { background: var(--djcc-amarillo-suave); }
.djcc-app .djcc-acciones a:nth-child(2) .djcc-icono { background: #dcfce7; }
.djcc-app .djcc-acciones a:nth-child(3) .djcc-icono { background: #dbeafe; }
.djcc-app .djcc-acciones a:nth-child(4) .djcc-icono { background: #fde2e4; }
.djcc-app .djcc-acciones a:nth-child(5) .djcc-icono { background: #ede9fe; }
.djcc-app .djcc-datos-cuenta { padding: 22px; }
.djcc-app .djcc-datos-cuenta dl { margin: 0 0 15px; }
.djcc-app .djcc-datos-cuenta dl > div { padding: 6px 0; display: flex; justify-content: space-between; gap: 14px; }
.djcc-app .djcc-datos-cuenta dt { color: var(--djcc-texto); }
.djcc-app .djcc-datos-cuenta dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.djcc-app .djcc-datos-cuenta dd span { color: #166534; font-size: 12px; font-weight: 700; }
.djcc-app .djcc-datos-enlaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.djcc-app .djcc-datos-enlaces a { min-height: 40px; padding: 6px; border: 1px solid var(--djcc-borde); border-radius: 11px; display: grid; place-items: center; color: var(--djcc-tinta) !important; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; }
.djcc-app a.djcc-whatsapp { padding: 18px 20px; border-radius: 18px; background: var(--djcc-whatsapp); color: #0b3d1f !important; display: flex; align-items: center; gap: 13px; text-decoration: none; }
.djcc-app .djcc-whatsapp > svg { width: 29px; height: 29px; }
.djcc-app .djcc-whatsapp span { display: flex; flex-direction: column; }
.djcc-app .djcc-whatsapp strong { font-size: 16px; }
.djcc-app .djcc-whatsapp small { font-size: 13px; }
.djcc-app .djcc-vacio { margin: 15px 0 0; color: var(--djcc-texto); }
.djcc-app .djcc-contactos-pagina > .djcc-titulo-fila { margin-bottom: 24px; }
.djcc-app .djcc-contactos-pagina > .djcc-titulo-fila h1 { margin: 0; font-size: 44px; }
.djcc-app .djcc-contactos-pagina > .djcc-titulo-fila > span { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; background: var(--djcc-amarillo); display: grid; place-items: center; font-weight: 800; }
.djcc-app .djcc-contactos-pagina > .djcc-verificar, .djcc-app .djcc-contactos-pagina > .djcc-nota { margin-bottom: 20px; }
.djcc-app .djcc-tabs-movil { display: none; }

/* Pantallas existentes dentro del marco nuevo. */
.djcc-app .djcc-contenido > .djcc:not(.djcc-inicio):not(.djcc-contactos-pagina),
.djcc-app .djcc-contenido > .woocommerce-EditAccountForm,
.djcc-app .djcc-contenido > form { max-width: 820px; margin-inline: auto; }
.djcc-app .djcc-contenido .button:not(.djcc-boton):not(.djcc-boton-peligro) { border: 1px solid var(--djcc-borde) !important; background: #fff !important; color: var(--djcc-tinta) !important; }

@media (max-width: 900px) {
  .djcc-app .djcc-tabs a { padding-inline: 10px; }
  .djcc-app .djcc-tabs a svg { display: none; }
  .djcc-app .djcc-contactos-lista, .djcc-app .djcc-contactos-todos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .djcc-app .djcc-cols { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 700px) {
  .djcc-app { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .djcc-app .djcc-marco-cab { min-height: 60px; padding: 9px 13px; border-radius: 0; }
  .djcc-app .djcc-identidad > b { width: 35px; height: 35px; border-radius: 10px; font-size: 17px; }
  .djcc-app .djcc-identidad small { display: none; }
  .djcc-app .djcc-identidad > span { font-size: 15px; }
  .djcc-app .djcc-tabs { display: none; }
  .djcc-app .djcc-subtabs { margin-inline: 12px; }
  .djcc-app .djcc-contenido { padding: 22px 16px 8px; }
  .djcc-app .djcc-inicio { gap: 22px; }
  /* En el celular no hay dos columnas: los envoltorios se borran para que cada panel
     vuelva a ser hijo directo del Inicio y siga mandando su order. */
  .djcc-app .djcc-cols, .djcc-app .djcc-col { display: contents; }
  .djcc-app .djcc-hero { order: 1; align-items: stretch; flex-direction: column; gap: 14px; }
  .djcc-app .djcc-hero h1 { font-size: 32px; }
  .djcc-app a.djcc-nuevo { width: 100%; min-height: 46px; justify-content: center; }
  .djcc-app .djcc-activos { order: 2; padding: 18px; }
  .djcc-app .djcc-estadisticas { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .djcc-app .djcc-estadisticas article { padding: 14px 15px; border-radius: 16px; box-shadow: none; }
  .djcc-app .djcc-estadisticas p { font-size: 12px; }
  .djcc-app .djcc-estadisticas strong { font-size: 27px; }
  .djcc-app .djcc-estadisticas small { font-size: 11px; }
  .djcc-app .djcc-contactos-inicio { order: 4; }
  .djcc-app .djcc-contactos-lista { margin-right: -16px; padding-right: 16px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .djcc-app .djcc-contactos-lista .djcc-contacto { flex: 0 0 180px; padding: 14px; border-radius: 16px; scroll-snap-align: start; box-shadow: none; }
  .djcc-app .djcc-contacto-cab { align-items: start; flex-direction: column; }
  .djcc-app .djcc-avatar { width: 44px; height: 44px; }
  /* En el carrusel caben los chips o la fecha, no las dos: gana la fecha, que dice más. */
  .djcc-app .djcc-contactos-lista .djcc-chips { display: none; }
  .djcc-app .djcc-contactos-lista .djcc-contacto-ultimo { font-size: 11px; }
  .djcc-app .djcc-acciones { order: 5; padding: 18px; }
  .djcc-app .djcc-acciones > div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .djcc-app .djcc-acciones a { padding: 11px 5px; flex-direction: column; gap: 7px; font-size: 12px; text-align: center; }
  .djcc-app .djcc-acciones .djcc-icono { width: 43px; height: 43px; }
  .djcc-app .djcc-anio { order: 6; padding: 18px; }
  .djcc-app .djcc-historial { order: 7; padding: 18px; }
  .djcc-app .djcc-datos-cuenta { order: 8; padding: 18px; }
  .djcc-app a.djcc-whatsapp { order: 9; }
  .djcc-app .djcc-inicio > .djcc-aviso, .djcc-app .djcc-inicio > .djcc-verificar { order: 0; }
  /* La nota va DESPUES del saludo tambien en el celular: sin order propio caeria la primera. */
  .djcc-app .djcc-inicio > .djcc-nota { order: 1; }
  .djcc-app .djcc-activo { padding: 14px; }
  .djcc-app .djcc-activo-cab { flex-direction: column; }
  .djcc-app .djcc-pasos > div { font-size: 9px; }
  .djcc-app .djcc-filtros { margin-top: 10px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .djcc-app .djcc-historial > .djcc-titulo-fila { display: block; }
  .djcc-app .djcc-historial-lista > article { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .djcc-app .djcc-historial-lista .djcc-icono { display: none; }
  .djcc-app .djcc-historial-lista p { font-size: 12px; }
  .djcc-app .djcc-datos-enlaces { grid-template-columns: 1fr; }
  .djcc-app .djcc-contactos-todos { grid-template-columns: 1fr; }
  .djcc-app .djcc-contactos-todos .djcc-contacto-cab { flex-direction: row; }
  .djcc-app .djcc-contactos-pagina > .djcc-titulo-fila h1 { font-size: 34px; }
  .djcc-app .djcc-tabs-movil {
    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(72px + env(safe-area-inset-bottom));
    padding: 6px 8px env(safe-area-inset-bottom);
    border-top: 1px solid var(--djcc-borde);
    background: #fff;
    box-shadow: 0 -8px 24px rgba(17,24,39,.06);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .djcc-app .djcc-tabs-movil a { padding: 4px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--djcc-texto) !important; font-size: 11px; font-weight: 600; text-decoration: none; }
  .djcc-app .djcc-tabs-movil a > span { width: 43px; height: 29px; border-radius: 999px; display: grid; place-items: center; }
  .djcc-app .djcc-tabs-movil a svg { width: 19px; height: 19px; }
  .djcc-app .djcc-tabs-movil a[aria-current="page"] { color: var(--djcc-tinta) !important; font-weight: 800; }
  .djcc-app .djcc-tabs-movil a[aria-current="page"] > span { background: var(--djcc-amarillo); }
}

@media (prefers-reduced-motion: reduce) {
  .djcc-app *, .djcc-app *::before, .djcc-app *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Cliente recién registrado: bienvenida con los accesos, sin tarjetas en cero. */
.djcc-app .djcc-bienvenida { padding: 26px; }
.djcc-app .djcc-bienvenida h2 { margin: 0 0 8px; font-size: 22px; }
.djcc-app .djcc-bienvenida > p { margin: 0 0 18px; max-width: 640px; color: var(--djcc-texto); font-size: 15px; }
.djcc-app .djcc-bienvenida > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.djcc-app .djcc-bienvenida a { min-width: 0; padding: 14px; border: 1px solid var(--djcc-borde); border-radius: 15px; display: flex; align-items: center; gap: 11px; color: var(--djcc-tinta) !important; font-size: 15px; font-weight: 700; text-decoration: none; }
.djcc-app .djcc-bienvenida a:hover { border-color: var(--djcc-tinta); }
.djcc-app .djcc-bienvenida .djcc-icono { width: 42px; height: 42px; }
.djcc-app .djcc-bienvenida a:nth-child(1) .djcc-icono { background: var(--djcc-amarillo-suave); }
.djcc-app .djcc-bienvenida a:nth-child(2) .djcc-icono { background: #dcfce7; }
.djcc-app .djcc-bienvenida a:nth-child(3) .djcc-icono { background: #dbeafe; }
.djcc-app .djcc-bienvenida a:nth-child(4) .djcc-icono { background: #fde2e4; }
.djcc-app .djcc-bienvenida a:nth-child(5) .djcc-icono { background: #ede9fe; }
.djcc-app .djcc-bienvenida a:nth-child(6) .djcc-icono { background: #e5e7eb; }

/* La pestaña Envíos usa el panel del historial a lo ancho. */
.djcc-app .djcc-envios .djcc-historial { grid-column: 1 / -1; }
.djcc-app .djcc-envios h1 { margin: 0; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.03em; }
.djcc-app .djcc-envios > .djcc-titulo-fila > span { padding: 5px 12px; border-radius: 999px; background: var(--djcc-amarillo-suave); font-size: 13px; font-weight: 800; }
.djcc-app .djcc-historial-lista .djcc-seguir { margin-top: 4px; display: inline-block; color: var(--djcc-tinta) !important; font-size: 13px; font-weight: 700; }
.djcc-app .djcc-mas-caja { margin: 14px 0 0; text-align: center; }
.djcc-app button.djcc-ver-todos { padding: 9px 18px; border: 1px solid var(--djcc-borde); border-radius: 999px; background: #fff; cursor: pointer; font: inherit; }

@media (max-width: 700px) {
  .djcc-app .djcc-solo-movil { display: inline; }
  .djcc-app .djcc-bienvenida { padding: 18px; }
  .djcc-app .djcc-bienvenida > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .djcc-app .djcc-bienvenida a { padding: 11px; font-size: 13px; }
  .djcc-app .djcc-envios .djcc-historial { order: 2; }
}