/* Dicto — identidad Arbitrade 2026
   Paleta V3, gradientes líquidos animados, Fraunces + DM Sans. */

:root {
  /* Naranja Arbitrade */
  --naranja-100: #FFE9D4;
  --naranja-300: #FFA770;
  --naranja: #FF5F15;        /* 500, brand puro */
  --naranja-700: #C72D07;
  /* Neutrales */
  --beige-50: #F4F0EA;       /* lienzo */
  --beige-100: #EFE2DC;      /* surface elevada / hover */
  --beige-300: #D49E98;      /* borders cream-rosados */
  --blanco: #FFFFFF;
  --tinta: #38191A;          /* texto principal cálido */
  --tinta-800: #221011;
  --gris: #8a6f6a;           /* texto secundario tintado */
  /* Apoyo (para gradientes líquidos) */
  --amarillo: #F0E959;
  --rosa: #F9C2E9;
  --rosa-500: #DD66AD;
  /* Sombras tintadas marrón */
  --sombra-sm: 0 2px 8px -2px rgba(56,25,26,.12);
  --sombra-md: 0 10px 28px -10px rgba(56,25,26,.18);
  --sombra-brand: 0 16px 36px -12px rgba(255,95,21,.35);
  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--beige-50);
  color: var(--tinta);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}

/* ===== Gradiente líquido de marca (naranja · amarillo · rosa, en movimiento) ===== */
.gradiente-marca {
  background-color: var(--beige-50);
  background-image:
    radial-gradient(38% 44% at 18% 28%, rgba(255,95,21,.85) 0%, transparent 60%),
    radial-gradient(42% 48% at 82% 22%, rgba(255,167,112,.80) 0%, transparent 62%),
    radial-gradient(46% 50% at 74% 82%, rgba(221,102,173,.62) 0%, transparent 60%),
    radial-gradient(44% 46% at 22% 84%, rgba(240,233,89,.70) 0%, transparent 60%),
    radial-gradient(40% 42% at 50% 50%, rgba(255,138,61,.55) 0%, transparent 65%);
  background-size: 170% 170%;
  background-repeat: no-repeat;
  animation: drift 34s var(--ease) infinite alternate;
}
@keyframes drift {
  0%   { background-position:  0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%; }
  50%  { background-position: 26% 18%, 70% 30%, 64% 68%, 36% 78%, 44% 56%; }
  100% { background-position: 10% 6%, 92% 12%, 86% 90%, 12% 88%, 56% 46%; }
}
@media (prefers-reduced-motion: reduce) { .gradiente-marca { animation: none; } }

/* ===== Cabecera ===== */
.cabecera {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 1rem 1.25rem;
}
.marca {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 1.3rem;
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0;
  color: var(--naranja);
  text-decoration: none;
  letter-spacing: -.02em;
  line-height: 1;
}
.logo-arbitrade { height: 12px; width: auto; color: var(--tinta); opacity: .42; display: block; }

/* Menú de usuario (avatar arriba a la derecha) */
.menu-usuario { margin-left: auto; position: relative; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  color: var(--blanco); font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--naranja) 0%, var(--rosa-500) 130%);
  box-shadow: var(--sombra-sm); transition: box-shadow .14s var(--ease);
}
.avatar:hover { box-shadow: var(--sombra-md); }
.menu-desplegable {
  position: absolute; right: 0; top: 48px; z-index: 30;
  background: var(--blanco); border: 1.5px solid var(--beige-300); border-radius: 16px;
  box-shadow: var(--sombra-md); min-width: 230px; padding: .4rem; display: none;
}
.menu-desplegable.abierto { display: block; }
.menu-cabecera { padding: .7rem .8rem .5rem; }
.menu-cabecera .nombre { font-weight: 600; color: var(--tinta); }
.menu-cabecera .correo { color: var(--gris); font-size: .82rem; word-break: break-all; }
.menu-separador { height: 1px; background: var(--beige-300); margin: .35rem .3rem; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .65rem .8rem; border-radius: 10px; color: var(--tinta); text-decoration: none; font-size: .95rem; }
.menu-item:hover { background: var(--beige-50); }
.menu-item.salir { color: var(--naranja-700); }
.menu-item .pronto { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris); background: var(--beige-100); padding: .12rem .45rem; border-radius: 999px; }

/* ===== Contenido ===== */
.contenido { max-width: 600px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.inicio { text-align: center; padding-top: 2.5rem; }

.kicker {
  display: inline-block;
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--naranja-700); margin-bottom: 1rem;
}
.titular {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  font-size: clamp(2.4rem, 8.5vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--tinta);
}
.entradilla {
  font-size: 1.1rem; color: var(--gris);
  max-width: 30rem; margin: 1rem auto 2.5rem; line-height: 1.5;
}
.nota { color: var(--gris); font-size: .95rem; margin-top: 1rem; }
.detalle-id { color: var(--gris); font-size: .85rem; margin-top: 1.5rem; }
.detalle-id code { background: var(--blanco); padding: .15rem .45rem; border-radius: 6px; }

/* Home práctica */
.inicio-home { padding-top: 3.5rem; }
.titulo-home {
  font-family: "Fraunces", serif; font-weight: 400;
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0;
  font-size: clamp(1.7rem, 6vw, 2.2rem); letter-spacing: -.02em;
  margin-bottom: 1.8rem; color: var(--tinta);
}

/* Páginas de cuenta / ayuda */
.cuenta-tarjeta { background: var(--blanco); border: 1.5px solid var(--beige-300); border-radius: 24px; padding: 1.6rem; text-align: left; margin: 1.5rem 0; }
.cuenta-dato { margin-bottom: 1.1rem; }
.cuenta-dato:last-child { margin-bottom: 0; }
.cuenta-dato .et { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gris); font-weight: 600; display: block; margin-bottom: .2rem; }
.cuenta-dato .val { font-size: 1.05rem; word-break: break-word; }

/* ===== Acciones / botones ===== */
.acciones { display: flex; flex-direction: column; gap: 1rem; }
.accion {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  font-family: "DM Sans", sans-serif; font-size: 1rem; font-weight: 600;
  padding: .85rem 1.4rem; border-radius: 999px; border: none;
  cursor: pointer; text-decoration: none; color: var(--tinta);
  transition: box-shadow .14s var(--ease), background-color .14s var(--ease),
              border-color .14s var(--ease), transform .24s var(--ease);
}
.accion svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

/* Primario: gradiente de marca animado */
.accion-principal {
  color: var(--blanco);
  background-color: var(--naranja);
  background-image: linear-gradient(100deg, var(--naranja-700) 0%, var(--naranja) 38%, var(--naranja-300) 72%, var(--rosa-500) 130%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  box-shadow: var(--sombra-brand);
  animation: vaiven 9s var(--ease) infinite alternate;
}
@keyframes vaiven { to { background-position: 100% 0%; } }
.accion-principal:hover { box-shadow: 0 20px 44px -12px rgba(255,95,21,.45); }
@media (prefers-reduced-motion: reduce) { .accion-principal { animation: none; } }

.accion-secundaria { background: var(--blanco); border: 1.5px solid var(--beige-300); }
.accion-secundaria:hover { border-color: var(--naranja); color: var(--naranja-700); }
.accion-suave { background: transparent; color: var(--gris); border: 1.5px solid var(--beige-300); }
.accion-suave:hover { border-color: var(--naranja); color: var(--naranja-700); }
.accion-parar { background: var(--tinta); color: var(--blanco); width: 100%; margin-top: 1.5rem; }
.accion-borrar { background: transparent; color: var(--naranja-700); border: 1.5px solid var(--beige-300); width: 100%; margin-top: .5rem; }
.accion-borrar:hover { border-color: var(--naranja-700); background: var(--naranja-100); }
.accion:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; animation: none; }
.volver { display: inline-flex; margin-top: 2rem; padding: .8rem 1.4rem; font-size: 1rem; }

/* ===== Pantalla de entrada (login) — gradiente a pantalla completa ===== */
.pagina-login { color: var(--tinta); }
.pagina-login .cabecera { position: relative; z-index: 1; }
.pagina-login .marca { color: var(--blanco); }
.pagina-login .logo-arbitrade { color: var(--blanco); opacity: .9; }
.login-hero {
  min-height: calc(100vh - 64px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1.5rem 4rem;
}
.login-hero .titular { color: var(--blanco); font-weight: 700; font-size: clamp(3rem, 14vw, 5rem); }
.login-hero .entradilla { color: rgba(255,255,255,.92); }
.login-hero .accion-principal { background: var(--blanco); color: var(--naranja-700); animation: none; box-shadow: var(--sombra-md); }
.login-hero .accion-principal:hover { box-shadow: 0 18px 40px -10px rgba(56,25,26,.35); }
.login-hero .nota { color: rgba(255,255,255,.85); }

/* ===== Grabando ===== */
.grabando { text-align: center; padding-top: 2rem; }
.punto-rojo {
  width: 18px; height: 18px; border-radius: 50%; background: var(--naranja);
  margin: 0 auto 1rem; animation: latido 1.4s var(--ease) infinite;
}
@keyframes latido { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.78); } }
.grabando-texto { font-size: 1.1rem; color: var(--gris); }
.cronometro {
  font-family: "Fraunces", serif; font-weight: 400; font-size: 3.6rem;
  font-variation-settings: "opsz" 144, "SOFT" 30; font-variant-numeric: tabular-nums; margin: .4rem 0;
}

/* ===== Modales (sólidos cream, sin frosted glass) ===== */
.modal { position: fixed; inset: 0; background: rgba(34,16,17,.5); display: none; align-items: center; justify-content: center; padding: 1.5rem; z-index: 10; }
.modal.abierto { display: flex; }
.modal-caja { background: var(--beige-50); border-radius: 24px; padding: 2rem; max-width: 27rem; width: 100%; box-shadow: var(--sombra-md); }
.modal-caja-centrada { text-align: center; }
.modal-titulo { font-family: "Fraunces", serif; font-weight: 700; font-size: 1.7rem; font-variation-settings: "opsz" 72,"SOFT" 40; margin-bottom: .75rem; }
.modal-texto { color: var(--gris); line-height: 1.55; }
.check { display: flex; gap: .7rem; align-items: flex-start; margin: 1.5rem 0; cursor: pointer; line-height: 1.45; }
.check input { margin-top: .2rem; width: 1.2rem; height: 1.2rem; accent-color: var(--naranja); flex-shrink: 0; }
.modal-botones { display: flex; gap: .75rem; }
.modal-botones .accion { flex: 1; font-size: 1rem; padding: 1rem; }

/* ===== Spinner / OK ===== */
.spinner { width: 42px; height: 42px; margin: 0 auto 1.2rem; border: 4px solid var(--beige-100); border-top-color: var(--naranja); border-radius: 50%; animation: girar .8s linear infinite; }
.spinner-grande { width: 56px; height: 56px; border-width: 5px; margin-bottom: 1.5rem; }
@keyframes girar { to { transform: rotate(360deg); } }
.ok-circulo { width: 64px; height: 64px; margin: 0 auto 1.5rem; background: var(--naranja); color: var(--blanco); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra-brand); }
.ok-circulo svg { width: 32px; height: 32px; }

/* ===== Revisión ===== */
.revisar { text-align: left; }
.titular-revisar { text-align: center; font-size: clamp(2rem, 7vw, 2.8rem); margin-top: 1rem; }
.entradilla-revisar { text-align: center; margin-bottom: 2rem; }
.campo { display: block; margin-bottom: 1.6rem; }
.campo-etiqueta { display: block; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gris); margin-bottom: .5rem; }
.campo-etiqueta small { font-weight: 400; text-transform: none; letter-spacing: 0; }
textarea, .revisar input[type="text"], .revisar input[type="email"], .revisar input[type="date"], .revisar input:not([type]), .buscador input {
  width: 100%; font-family: "DM Sans", sans-serif; font-size: 1rem; color: var(--tinta);
  background: var(--blanco); border: 1.5px solid var(--beige-300); border-radius: 16px; padding: .8rem .9rem; resize: vertical;
}
textarea:focus, .revisar input:focus, .buscador input:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 2px var(--naranja-100); }
.tarea-fila { background: var(--blanco); border: 1.5px solid var(--beige-300); border-radius: 16px; padding: .9rem; margin-bottom: .7rem; }
.tarea-fila .t-desc { border: none; border-bottom: 1.5px solid var(--beige-300); border-radius: 0; padding: .4rem 0; margin-bottom: .5rem; font-weight: 500; }
.tarea-fila .t-desc:focus { border-bottom-color: var(--naranja); box-shadow: none; }
.tarea-meta { display: flex; gap: .5rem; align-items: center; }
.tarea-meta input { flex: 1; padding: .5rem .6rem; font-size: .9rem; }
.quitar-tarea, .quitar-compartido { background: none; border: none; color: var(--gris); cursor: pointer; padding: .3rem .4rem; flex: 0 0 auto; display: inline-flex; }
.quitar-tarea svg, .quitar-compartido svg { width: 18px; height: 18px; }
.quitar-tarea:hover, .quitar-compartido:hover { color: var(--naranja); }
.anadir { width: 100%; font-size: .95rem; padding: .8rem; margin-top: .3rem; }
.check-inline { margin: .3rem 0 .9rem; }
.acciones-revisar { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.acciones-revisar .accion-principal { flex: 0 0 auto; }
.estado-guardado { font-size: .95rem; color: var(--gris); }
.estado-guardado.ok { color: var(--naranja-700); font-weight: 600; }
.estado-guardado.mal { color: var(--naranja-700); }

/* Cajas de acciones (Google / Compartir) */
.m4-acciones, .compartir { margin-top: 1.8rem; padding: 1.3rem; background: var(--blanco); border: 1.5px solid var(--beige-300); border-radius: 24px; }
.m4-acciones .accion { width: 100%; margin: .3rem 0 .4rem; }
.m4-acciones .estado-guardado { display: block; margin-bottom: .7rem; }
.nota-arriba { margin: 0 0 1rem; }
.chips-compartidos { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.chip-compartido { display: inline-flex; align-items: center; gap: .35rem; background: var(--beige-50); border: 1px solid var(--beige-300); border-radius: 999px; padding: .3rem .4rem .3rem .8rem; font-size: .85rem; }

.detalle-error { color: var(--naranja-700); word-break: break-word; }
.lectura { line-height: 1.55; }
.lista-lectura { margin-left: 1.1rem; line-height: 1.6; }
.lista-lectura li { margin-bottom: .3rem; }
.transcripcion { margin-top: 2rem; border-top: 1px solid var(--beige-300); padding-top: 1rem; }
.transcripcion summary { cursor: pointer; color: var(--gris); font-size: .9rem; font-weight: 500; }
.transcripcion p { margin-top: .8rem; color: var(--gris); font-size: .92rem; line-height: 1.6; }
.zona-peligro { margin-top: 2rem; border-top: 1px solid var(--beige-300); padding-top: 1.2rem; text-align: center; }

/* ===== Historial ===== */
.titular-historial { text-align: center; font-size: clamp(2rem, 7vw, 2.8rem); margin: 1rem 0 1.5rem; }
.buscador { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.buscador input { flex: 1; }
.buscar-btn { flex: 0 0 auto; padding: .8rem 1.3rem; font-size: 1rem; }
.lista-reuniones { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.reunion-enlace { display: flex; flex-direction: column; gap: .5rem; background: var(--blanco); border: 1.5px solid var(--beige-300); border-radius: 16px; padding: 1rem 1.1rem; text-decoration: none; color: var(--tinta); box-shadow: var(--sombra-sm); transition: box-shadow .24s var(--ease), transform .24s var(--ease); }
.reunion-enlace:hover { box-shadow: var(--sombra-md); transform: translateY(-3px); }
.reunion-titulo { font-weight: 500; line-height: 1.35; }
.reunion-meta { display: flex; align-items: center; gap: .7rem; }
.reunion-fecha { color: var(--gris); font-size: .85rem; }
.chip { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: .22rem .6rem; border-radius: 999px; color: var(--blanco); background: var(--gris); }
.chip-listo { background: #60A022; }
.chip-procesando, .chip-recibido, .chip-nueva { background: var(--naranja); }
.chip-error { background: var(--naranja-700); }
.chip-compartida { background: var(--rosa-500); }

/* ===== Avisos ===== */
.aviso-error { background: var(--naranja-100); color: var(--naranja-700); border: 1px solid var(--naranja-300); border-radius: 16px; padding: .8rem 1rem; margin: 0 auto 1.5rem; max-width: 27rem; font-size: .95rem; }