:root{
  /* Colores base (rojo corporativo) */
  --portal-primary:       #e11d48; /* rojo */
  --portal-primary-dark:  #be123c; /* rojo más oscuro */
  --portal-accent:        #22c55e; /* verde puntito */
  --portal-bg:            #ffffff; /* fondo del panel */
  --portal-border:        #e5e7eb; /* borde panel */
  --text-color:           #111827;
  --muted:                #6b7280;
}

/* (opcional) tipografía base para que se vea más limpio) */
html, body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text-color);
}



.ia-sidebar {position: fixed; top: 0; bottom: 0; width: 330px; z-index: 10000; background: var(--portal-bg); border-left: 1px solid var(--portal-border); padding: 16px; overflow: auto; box-shadow: -2px 0 12px rgba(0,0,0,.12); transform: translateX(0); transition: transform .25s ease, box-shadow .25s ease;}
.ia-sidebar.right { right: 0; }
.ia-sidebar.left { left: 0; border-left: 0; border-right: 1px solid var(--portal-border); box-shadow: 2px 0 12px rgba(0,0,0,.12); }
.ia-sidebar.closed { transform: translateX(100%); box-shadow: none; }
.ia-sidebar.left.closed { transform: translateX(-100%); }
/* Botón flotante de cierre en el borde del sidebar */
.ia-close-fab { position:absolute; top:5px; left:8px; width:10px; height:20px; border-radius:999px; background: var(--portal-primary); color:#fff; border:1px solid var(--portal-primary-dark); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size:14px; line-height:1; }
.ia-close-fab:hover { filter: brightness(.95); }
.btn-portal { width:100%; margin:6px 0; padding:10px 12px; border-radius:6px; cursor:pointer; font-weight:600; color:#fff; border:1px solid var(--portal-primary-dark); background: linear-gradient(180deg, var(--portal-primary) 0%, var(--portal-primary-dark) 100%); }
.btn-portal:hover { filter:brightness(.95); }
.ia-output { margin-top:12px; font-size:14px; line-height:1.6; }
.hint { font-size:12px; color:#666; margin-top:6px; }

/* Botón flotante para abrir cuando el sidebar está cerrado */
.ia-open-btn { position: fixed; top: 14px; right: 14px; z-index: 10001; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--portal-primary-dark); background: linear-gradient(180deg, var(--portal-primary) 0%, var(--portal-primary-dark) 100%); color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); display: none; align-items: center; justify-content: center; }
.ia-open-btn.show { display: inline-flex; }

/* Card flotante con acciones */
.ia-card { position: fixed; top: 30%; right: 14px; z-index: 10001; width: 260px; background: var(--portal-bg); border: 1px solid var(--portal-border); border-radius: 8px; padding: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.ia-card .btn-portal { width: 100%; }