/* ── Opiniones de la app (26-sep-2026) ───────────────────────────────────
   La burbuja "Tu opinión" (abajo a la derecha), el aviso que aparece solo
   una vez al mes, el formulario de estrellas y la sección Comentarios del
   admin. Quitar su <link> esconde el aspecto; la lógica sigue en index.html. */

.burbuja-opinion{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:8px; padding:10px 16px 10px 12px;
  border-radius:99px; border:1px solid rgba(185,165,255,.28);
  background:rgba(14,10,34,.78); color:#eeedf5; cursor:pointer;
  font:400 10.5px Jost, sans-serif; letter-spacing:.22em; text-transform:uppercase;
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9), 0 0 24px -8px rgba(185,165,255,.35);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.burbuja-opinion:hover{ transform:translateY(-2px); border-color:rgba(185,165,255,.5); box-shadow:0 18px 40px -18px rgba(0,0,0,.9), 0 0 30px -6px rgba(185,165,255,.55) }
.bo-estrella{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:12px; letter-spacing:0;
  color:#1a1030; background:linear-gradient(135deg, #d3c5ff, #5ff2d6) }

.aviso-opinion{
  position:fixed; right:22px; bottom:78px; z-index:61; width:min(340px, calc(100vw - 32px));
  padding:18px 18px 16px; border-radius:20px; border:1px solid rgba(185,165,255,.22);
  background:linear-gradient(180deg, rgba(22,16,50,.95), rgba(10,7,26,.97)); color:#eeedf5;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.95); animation:op-entra .45s cubic-bezier(.2,.8,.2,1) both;
}
.aviso-opinion p{ margin:0 0 14px; font-size:13px; line-height:1.55; color:rgba(238,237,245,.72) }
.aviso-opinion p b{ color:#eeedf5; font-weight:500; font-size:14px }
.aviso-opinion > div{ display:flex; gap:8px; justify-content:flex-end }
.aviso-opinion .btn-luz{ width:auto; padding:10px 18px !important; margin:0 }
.aviso-opinion.sale{ opacity:0; transform:translateY(8px); transition:.3s }
@keyframes op-entra{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* El formulario */
.op-form .campo{ margin-bottom:16px }
.op-form textarea{ width:100%; box-sizing:border-box; resize:vertical; min-height:58px; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(238,237,245,.1); background:rgba(238,237,245,.035); color:#eeedf5; font:300 14px var(--display, sans-serif) }
.op-form textarea:focus{ outline:0; border-color:rgba(185,165,255,.5) }
.op-estrellas{ display:flex; gap:6px }
.op-estrellas button{ background:none; border:0; padding:0 2px; cursor:pointer; font-size:32px; line-height:1; color:rgba(238,237,245,.16); transition:color .15s, transform .15s }
.op-estrellas button:hover{ transform:scale(1.12) }
.op-estrellas button.on{ color:#f3c969; text-shadow:0 0 18px rgba(243,201,105,.45) }
.op-escala{ display:flex; gap:8px }
.op-escala button{ width:44px; height:40px; border-radius:12px; cursor:pointer; border:1px solid rgba(238,237,245,.12); background:rgba(238,237,245,.03); color:rgba(238,237,245,.7); font:400 14px var(--display, sans-serif) }
.op-escala button.on{ border-color:rgba(95,242,214,.6); background:rgba(95,242,214,.12); color:#eeedf5 }
.op-gracias{ text-align:center; padding:26px 8px 18px }
.op-gracias span{ font-size:40px; color:#f3c969; text-shadow:0 0 24px rgba(243,201,105,.5) }
.op-gracias h4{ margin:8px 0 6px; font:200 28px var(--display, sans-serif) }
.op-gracias p{ margin:0; color:rgba(238,237,245,.65); font-size:13.5px }

/* Comentarios (admin) */
.insignia-op{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:99px;
  background:#f3c969; color:#1a1030; font:600 10px Inter, sans-serif; letter-spacing:0; vertical-align:1px }
.op-reparto .op-barra{ display:grid; grid-template-columns:26px 1fr 22px; align-items:center; gap:8px; margin-top:6px; font-size:11px; color:var(--tinta-tenue) }
.op-reparto .op-barra i{ display:block; height:5px; min-width:2px; border-radius:99px; background:linear-gradient(90deg, #f3c969, #d3c5ff) }
.op-reparto .op-barra b{ font-weight:400; text-align:right }
.op-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px }
.op-tarjeta{ padding:18px 20px; border-radius:20px; border:1px solid rgba(238,237,245,.08); background:rgba(238,237,245,.02) }
.op-tarjeta.nueva{ border-color:rgba(243,201,105,.35); background:linear-gradient(180deg, rgba(243,201,105,.06), rgba(238,237,245,.015)) }
.op-tarjeta header{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:10px }
.op-nota{ color:#f3c969; letter-spacing:.08em; font-size:15px }
.op-nota i{ font-style:normal; color:rgba(238,237,245,.15) }
.op-quien{ font-size:13.5px }
.op-fecha{ width:100%; font-size:11px; color:var(--tinta-tenue) }
.op-linea{ margin:0 0 8px; font-size:13px; line-height:1.55; color:rgba(238,237,245,.8) }
.op-linea b{ font-weight:500; color:#eeedf5 }
.op-tarjeta .op-leida{ margin-top:6px; font-size:11px !important }

@media (max-width:860px){
  /* Encima de la barra de navegación de abajo, y solo la estrella. */
  .burbuja-opinion{ right:14px; bottom:96px; padding:8px }
  .burbuja-opinion .bo-texto{ display:none }
  .aviso-opinion{ right:16px; bottom:150px }
  .op-lista{ grid-template-columns:1fr }
}

/* En el panel del admin, solo la estrella: no tapa los botones de las tablas. */
body:not(.lx-alumno) .burbuja-opinion{ padding:8px }
body:not(.lx-alumno) .burbuja-opinion .bo-texto{ display:none }