/* Sami · capa visual «agua, vidrio y brillo» de las apps de la agencia (Proyectista, Turnos, Te Arrimo), en VERDE CLARO.
   Idea: agua clara color menta; la luz entra desde arriba y se mueve muy despacio; las tarjetas son vidrio esmerilado con un
   filo de luz; los botones son gotas verdes pulidas con un destello al pasar; Sami «respira» mientras piensa.
   Se carga después de sami.css y solo cambia la apariencia. Con «reducir movimiento» no se mueve nada. */

@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fuentes/plus-jakarta-sans.woff2') format('woff2');
}

/* ------------------------------------------------------------ tokens: agua menta (día) */
:root {
  --marca: #12452f;           /* verde profundo: títulos */
  --marca-2: #1f8a5b;         /* verde agua */
  --marca-3: #5fcf8f;         /* verde luz */
  --verde: #86d826;           /* verde del logo */
  --acento: #1a7f52; --acento-claro: #5fcf8f; --acento-fondo: rgba(95, 207, 143, .14);
  --tinta: #10291f; --tinta-2: #2f4f40; --tinta-3: #5b7a6a;
  --mal: #b4232f; --mal-fondo: rgba(220, 70, 80, .12);
  --adv: #8a5a06; --adv-fondo: rgba(232, 170, 60, .16);
  --radio: 20px;
  --tarjeta: rgba(255, 255, 255, .58);
  --tarjeta-fuerte: rgba(255, 255, 255, .82);
  --fondo: transparent;
  --borde: rgba(18, 69, 47, .12);
  --filo: rgba(255, 255, 255, .92);
  --sombra: 0 1px 1px rgba(18, 69, 47, .04), 0 10px 26px -12px rgba(18, 69, 47, .26), 0 28px 64px -34px rgba(18, 69, 47, .3);
  --sombra-alta: 0 2px 4px rgba(18, 69, 47, .06), 0 22px 46px -16px rgba(18, 69, 47, .32), 0 46px 100px -44px rgba(10, 48, 32, .4);
  --desenfoque: blur(20px) saturate(160%);
  --agua-1: #f2fbf5; --agua-2: #dff5e8; --agua-3: #c3ebd3; --agua-4: #9fdcb9;
  --luz: rgba(255, 255, 255, .62);
  --burbuja-u: #1a7f52; --texto-u: #f3fff8; --burbuja-a: var(--tarjeta-fuerte);
  color-scheme: light;
}

/* ------------------------------------------------------------ tokens: bosque de noche */
@media (prefers-color-scheme: dark) {
  :root {
    --marca: #e3f7ea; --marca-2: #6fdba0; --marca-3: #4cc485; --verde: #a4e65a;
    --acento: #7fe0a8; --acento-claro: #7fe0a8; --acento-fondo: rgba(127, 224, 168, .12);
    --tinta: #e4f3ea; --tinta-2: #b4d3c1; --tinta-3: #86a996;
    --mal: #ff9c9c; --mal-fondo: rgba(255, 110, 110, .12); --adv: #f2c66d; --adv-fondo: rgba(242, 198, 109, .12);
    --tarjeta: rgba(10, 40, 27, .58);
    --tarjeta-fuerte: rgba(12, 46, 31, .86);
    --borde: rgba(140, 230, 180, .14);
    --filo: rgba(170, 245, 205, .2);
    --sombra: 0 1px 1px rgba(0, 0, 0, .2), 0 12px 30px -12px rgba(0, 0, 0, .6), 0 32px 72px -36px rgba(0, 0, 0, .7);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .3), 0 22px 48px -16px rgba(0, 0, 0, .7), 0 48px 104px -44px rgba(0, 0, 0, .8);
    --agua-1: #0d2e20; --agua-2: #0a2519; --agua-3: #061b12; --agua-4: #03110b;
    --luz: rgba(110, 220, 160, .14);
    --burbuja-u: #1d7a50; --texto-u: #effff6; --burbuja-a: var(--tarjeta-fuerte);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------ el agua: fondo, luz que entra y cáusticas */
html { background: var(--agua-3); }
body {
  font-family: 'Jakarta', system-ui, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -.005em;
  color: var(--tinta);
  background:
    radial-gradient(120% 70% at 50% -10%, var(--luz), transparent 60%),
    linear-gradient(180deg, var(--agua-1) 0%, var(--agua-2) 40%, var(--agua-3) 80%, var(--agua-4) 100%) fixed;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after { content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none; }
/* Cáusticas: manchas de luz que se mueven muy despacio, como el sol a través del agua. */
body::before {
  background:
    radial-gradient(28% 18% at 22% 30%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(22% 14% at 72% 22%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(30% 20% at 60% 68%, rgba(255, 255, 255, .28), transparent 70%),
    radial-gradient(18% 12% at 30% 78%, rgba(255, 255, 255, .26), transparent 70%);
  filter: blur(30px); opacity: .5;
  animation: causticas 40s ease-in-out infinite alternate;
}
/* Rayos de luz suaves desde la superficie. */
body::after {
  inset: 0;
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(255, 255, 255, .15) 22%, transparent 30% 46%, rgba(255, 255, 255, .09) 52%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 45%);
  mix-blend-mode: soft-light;
  animation: rayos 26s ease-in-out infinite alternate;
}
@keyframes causticas {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.06) rotate(2deg); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.02) rotate(-1.5deg); }
}
@keyframes rayos { from { opacity: .7; transform: translateX(-2%); } to { opacity: 1; transform: translateX(2%); } }
@media (prefers-color-scheme: dark) {
  body::before { opacity: .18; }
  body::after { opacity: .4; mix-blend-mode: screen; }
}
::selection { background: rgba(95, 207, 143, .32); }
a { color: var(--acento); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { letter-spacing: -.02em; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(95, 207, 143, .6); outline-offset: 3px;
}

/* ------------------------------------------------------------ vidrio */
.entrada-caja, .modal-caja, .barra, .panel, .redactor, .m.a, .menu, .aviso {
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
}
.entrada-caja, .modal-caja {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, var(--tarjeta-fuerte) -20%, var(--tarjeta) 55%);
  border: 1px solid var(--borde);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 var(--filo), var(--sombra-alta);
}
/* Reflejo del vidrio: una franja de luz diagonal muy tenue. */
.entrada-caja::before, .modal-caja::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .06) 28%, transparent 46%);
}
@media (prefers-color-scheme: dark) {
  .entrada-caja::before, .modal-caja::before { background: linear-gradient(115deg, rgba(150, 245, 195, .08) 0%, transparent 40%); }
}

/* ------------------------------------------------------------ entrar: una tarjeta suspendida en el agua */
.entrada-caja { animation: emerger .9s cubic-bezier(.2, .7, .2, 1) both; }
.logo-caja { box-shadow: 0 14px 30px -16px rgba(18, 69, 47, .45); animation: flotar 7s ease-in-out infinite; }
.lema { color: var(--tinta-2); }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes emerger { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ botones: gotas verdes pulidas con destello */
button.primario {
  position: relative; overflow: hidden; border-radius: 14px; border: 0; letter-spacing: .005em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .06) 48%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #34b277 0%, var(--marca-2) 42%, #136640 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 6px rgba(5, 40, 25, .25), 0 10px 22px -10px rgba(18, 69, 47, .6);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, filter .3s;
}
/* El destello: una franja de luz que cruza la gota al pasar el cursor. */
button.primario::after {
  content: ''; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg) translateX(-120%); transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
button.primario:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .44), inset 0 -2px 6px rgba(5, 40, 25, .25), 0 16px 30px -12px rgba(18, 69, 47, .62); }
button.primario:hover::after { transform: skewX(-18deg) translateX(420%); }
button.primario:active { transform: translateY(1px) scale(.99); }
button.primario:disabled { opacity: .45; transform: none; filter: grayscale(.4); }
@media (prefers-color-scheme: dark) {
  button.primario { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #5fd497 0%, #2b9a64 42%, #176a44 100%); color: #fff; }
}
/* botones secundarios: vidrio con borde verde */
.sugerencias button, .acc-msg button, .item .acc button, #p-cerrar, .chip {
  background: color-mix(in srgb, var(--tarjeta-fuerte) 72%, transparent);
  border-color: rgba(31, 138, 91, .28);
  box-shadow: inset 0 1px 0 var(--filo);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s;
}
.sugerencias button:hover, .acc-msg button:hover, #p-cerrar:hover { transform: translateY(-1px); border-color: rgba(95, 207, 143, .7); box-shadow: inset 0 1px 0 var(--filo), 0 8px 18px -10px rgba(18, 69, 47, .45); }
button.icono { color: var(--marca); }
button.peligro { background: transparent; }

/* ------------------------------------------------------------ campos: vidrio esmerilado */
input, select, textarea {
  background: color-mix(in srgb, var(--tarjeta-fuerte) 90%, transparent);
  border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(18, 69, 47, .07);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(95, 207, 143, .7);
  box-shadow: inset 0 1px 2px rgba(18, 69, 47, .07), 0 0 0 4px rgba(95, 207, 143, .18);
  background: var(--tarjeta-fuerte);
}
.acepto input { accent-color: var(--marca-2); }

/* ------------------------------------------------------------ superficie: encabezado, panel y redactor */
.barra {
  background: color-mix(in srgb, var(--tarjeta-fuerte) 72%, transparent);
  border-bottom: 1px solid var(--borde);
  box-shadow: inset 0 -1px 0 var(--filo), 0 8px 24px -18px rgba(18, 69, 47, .4);
}
.titulo strong {
  font-weight: 800;
  background: linear-gradient(120deg, var(--marca) 10%, var(--marca-2) 60%, var(--marca-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.avatar { box-shadow: 0 4px 12px -4px rgba(18, 69, 47, .45); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.barra:hover .avatar { transform: rotate(-6deg) scale(1.05); }
.uso-pista { background: rgba(18, 69, 47, .1); }
.uso-pista i { background: linear-gradient(90deg, var(--marca-3), var(--marca-2)); box-shadow: 0 0 10px rgba(95, 207, 143, .55); }
.panel { background: color-mix(in srgb, var(--tarjeta-fuerte) 80%, transparent); border-right: 1px solid var(--borde); }
@media (min-width: 860px) { .panel { background: color-mix(in srgb, var(--tarjeta) 70%, transparent); } }
.velo { background: rgba(6, 30, 20, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.item { background: color-mix(in srgb, var(--tarjeta-fuerte) 60%, transparent); border-color: var(--borde); transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s; }
.item:hover { transform: translateY(-2px); border-color: rgba(95, 207, 143, .5); box-shadow: inset 0 1px 0 var(--filo), var(--sombra); }
.item.activa { background: linear-gradient(90deg, var(--acento-fondo), transparent); border-color: rgba(31, 138, 91, .55); }
.item .abrir b { color: var(--marca); }
.redactor { background: color-mix(in srgb, var(--tarjeta-fuerte) 72%, transparent); border-top: 1px solid var(--borde); box-shadow: inset 0 1px 0 var(--filo); }
.menu { background: color-mix(in srgb, var(--tarjeta-fuerte) 88%, transparent); border-color: var(--borde); box-shadow: var(--sombra-alta); border-radius: 16px; }
.menu button:hover { background: var(--acento-fondo); }
.aviso { border-bottom: 1px solid var(--borde); }

/* ------------------------------------------------------------ conversación */
.vacio h2 {
  font-size: 1.35rem;
  background: linear-gradient(120deg, var(--marca), var(--marca-2) 60%, var(--marca-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vacio .mascota { animation: flotar 7s ease-in-out infinite; box-shadow: 0 16px 34px -18px rgba(18, 69, 47, .55); }
.m { border-radius: 18px; animation: emerger .5s cubic-bezier(.2, .7, .2, 1) both; line-height: 1.6; }
.m.u {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 50%),
    linear-gradient(160deg, #23955f, #145a3c 85%);
  color: var(--texto-u); border-bottom-right-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 22px -14px rgba(18, 69, 47, .7);
}
.m.a {
  background: linear-gradient(160deg, var(--tarjeta-fuerte), var(--tarjeta) 70%);
  border: 1px solid var(--borde); border-bottom-left-radius: 6px;
  box-shadow: inset 0 1px 0 var(--filo), var(--sombra);
}
.m.a h3, .m.a strong { color: var(--marca); }
.m.a.err { background: var(--mal-fondo); }
/* Sami «respira» mientras trabaja: tres gotas que suben y bajan con calma. */
.m.a.pensando { font-style: normal; }
.m.a.pensando::after {
  content: ''; display: inline-block; width: 30px; height: 8px; margin-left: 8px; vertical-align: middle;
  background:
    radial-gradient(circle 3.5px at 4px 50%, var(--marca-3) 98%, transparent),
    radial-gradient(circle 3.5px at 15px 50%, var(--marca-2) 98%, transparent),
    radial-gradient(circle 3.5px at 26px 50%, var(--marca-3) 98%, transparent);
  animation: respirar 2.8s ease-in-out infinite;
}
@keyframes respirar { 0%, 100% { opacity: .35; transform: translateY(1px); } 50% { opacity: 1; transform: translateY(-2px); } }
.m.a table { border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0; border: 1px solid var(--borde); }
.m.a th { background: linear-gradient(180deg, #1f7a52, #145a3c); color: #f3fff8; border-color: transparent; }
.m.a td { background: color-mix(in srgb, var(--tarjeta-fuerte) 60%, transparent); }
.m.a tr:nth-child(even) td { background: color-mix(in srgb, var(--acento-fondo) 70%, transparent); }
.m.a code, .m.a pre { background: var(--acento-fondo); }
@media (prefers-color-scheme: dark) {
  .m.u { background: linear-gradient(160deg, #279160, #0f3f2a 85%); }
  .m.a th { background: linear-gradient(180deg, #1d6a47, #0f3f2a); }
}

/* ------------------------------------------------------------ ventana del perfil */
.modal { background: rgba(6, 30, 20, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal-caja { animation: emerger .45s cubic-bezier(.2, .7, .2, 1); }
.modal-cabeza h2 { color: var(--marca); }

/* ------------------------------------------------------------ calma: sin movimiento para quien lo pide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}