/** {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.panel.panel-default{box-shadow: 5px 5px 15px #c5c5c5 !important;}*/

/* Base Glass */
.btn-enterprise-glass {
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 5px 18px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  transition: all 0.35s ease;
  background: linear-gradient(135deg, #0055dd, #3390ff); /* fallback */
  cursor: pointer;
}

/* Shine effect */
.btn-enterprise-glass::before {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.35),
    rgba(255,255,255,0)
  );
  transform: skewX(-25deg);
}
.btn-enterprise-glass:hover::before {
  animation: shine 0.8s forwards;
}
@keyframes shine {
  100% { left: 125%; }
}

/* Hover refinado */
.btn-enterprise-glass:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Subrayado elegante */
.btn-enterprise-glass::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: rgba(255,255,255,0.6);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.btn-enterprise-glass:hover::after {
  width: 80%;
}

/* ===== Variantes con degradados intermedios ===== */
.btn-enterprise-glass.btn-primary {
  background: linear-gradient(135deg, #0055dd, #3390ff);
}

.btn-enterprise-glass.btn-danger {
  background: linear-gradient(135deg, #e02b3c, #ff5a6c);
}

.btn-enterprise-glass.btn-warning {
  background: linear-gradient(135deg, #e69500, #ffcc33);
  color: #fff;
}

.btn-enterprise-glass.btn-success {
  background: linear-gradient(135deg, #11997d, #3ddc91);
}

.btn-enterprise-glass.btn-info {
  background: linear-gradient(135deg, #0080dd, #3399ff);
}

.btn-enterprise-glass.btn-default,
.btn-enterprise-glass.btn-secondary {
  background: linear-gradient(135deg, #5c636a, #868e96);
  color: #fff;
  margin-right: 5px;
}


/* Estilo moderno tipo dashboard para tablas */
.table-modern-bs {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: Rubik, sans-serif;
  color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border-radius: 8px;
}

/* Header estilo destacado */
.table-modern-bs thead {
  background: linear-gradient(135deg, #0044cc, #3390ff);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table-modern-bs thead th {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  text-align: left;
}

/* Cuerpo */
.table-modern-bs tbody {
  background: #fff;
}

.table-modern-bs tbody tr {
  transition: background-color 0.3s ease, transform 0.15s ease;
}

.table-modern-bs tbody tr:nth-child(even) {
  background: #f7faff;
}

.table-modern-bs tbody tr:hover {
  background: #e6f2ff;
  transform: translateY(1px);
}

/* Celdas */
.table-modern-bs td {
  padding: 12px 16px;
  border-bottom: 1px solid #e1e8f5;
  font-size: 13px;
  vertical-align: middle;
}

/* Quitar última línea inferior de la tabla */
.table-modern-bs tbody tr:last-child td {
  border-bottom: none;
}

/* Acciones visibles solo al hover */
.table-modern-bs tbody tr:hover td.actions {
  opacity: 1;
}

.actions {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Responsive pequeño */
@media (max-width: 768px) {
  .table-modern-bs,
  .table-modern-bs thead,
  .table-modern-bs tbody,
  .table-modern-bs tr,
  .table-modern-bs td {
    display: block;
    width: 100%;
  }
  .table-modern-bs thead {
    /* ocultar el header tradicional */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table-modern-bs tr {
    margin-bottom: 1rem;
  }
  .table-modern-bs td {
    padding-left: 50%;
    position: relative;
    text-align: left;
  }
  .table-modern-bs td::before {
    content: attr(data-label);
    position: absolute;
    left: 16px;
    width: calc(50% - 32px);
    font-weight: 600;
    color: #555;
  }
}

p.flagPermisos{
margin: 0px;
font-size: 10px;
padding: 0px;
margin-top: -5px;
margin-left: 30px;
}
/* ====== CS Permissions Widget (Flat Light) ====== */
.csw{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#111827;       /* gray-900 */
  --muted:#6b7280;      /* gray-500 */
  --brand:#2563eb;      /* blue-600 */
  --brand-50:#eff6ff;   /* blue-50 */
  --brand-300:#93c5fd;  /* blue-300 */
  --border:#e5e7eb;     /* gray-200 */
  --chip:#f9fafb;       /* gray-50 */
  --radius:12px;

  /* Nuevo: 95% de ancho y centrado + sin overflow horizontal */
  width:98%;
  margin:0 auto;
  overflow-x:hidden;
  user-select: none;        /* estándar */
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge antiguo */
}

#acciones{
display: block;
align-items: normal;
border: none;
width: 100%;
padding: 0px 0px 5px 0px !important;
transition: none;
cursor: auto;
}

#acciones:hover{background:none}

.csw .labelOpt{
color: #929292;
font-size: 12px;
font-style: italic;
}

.csw *{box-sizing:border-box}
.csw .wrap{width:100%;display:flex;flex-direction:column;gap:12px}
.csw .head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.csw .title{font-weight:600}
.csw .subtitle{color:var(--muted);font-size:12px}

/* Layout principal */
.csw .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
.csw .grid.full{grid-template-columns:1fr} /* recipients-only */

/* Tarjetas planas en blanco */
.csw .card{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);overflow:hidden;min-width:0}
.csw .card h3{margin:0;padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px;background:#fff}

/* Bloques internos */
.csw .inner{padding:10px 12px}
.csw .muted{color:var(--muted)}
.csw .count{font-size:12px;color:var(--muted)}
.csw .hidden{display:none !important}

/* Chips de permisos (flat) */
.csw .chips{display:flex;flex-wrap:wrap;gap:8px}
.csw .chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--chip);
  transition:background .15s,border-color .15s,color .15s;
}
.csw .chip input{width:18px;height:18px}
.csw .chip.active{background:var(--brand-50);border-color:var(--brand-300)}
.csw .chip.active span{color:var(--brand);font-weight:600}

/* Tabs (flat) */
.csw .tabs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 8px 0;margin-bottom: 5px;}
.csw .tab{
  border:1px solid var(--border);background:#fff;padding:8px 10px;border-radius:10px;
  cursor:pointer;color:var(--muted);user-select:none;transition:background .15s, color .15s, border-color .15s;
}
.csw .tab:hover{background: linear-gradient(135deg, #0055dd, #3390ff);color: #FFF}
.csw .tab.active{background: linear-gradient(135deg, #0055dd, #3390ff);color:#fff;}

/* Herramientas */
.csw .tools{display:flex;gap:8px;align-items:center;padding:10px 12px 0;flex-wrap:wrap;margin-bottom: 5px;}
.csw .ipt{
  height:38px;padding:0 10px;border-radius:10px;
  border:1px solid #d1d5db;background:#fff;color:var(--text);flex:1;min-width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.csw .ipt.sec{
  height:38px;padding:0 10px;border-radius:10px;
  border:1px solid #d1d5db;background:#fff;color:var(--text);flex:1;min-width:250px;
  transition:border-color .15s, box-shadow .15s;
}
.csw .ipt:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.tools .btn-enterprise-glass{
  padding: 10px 25px !important;
}

/* Opción Profesores Relacionados */
.csw .teachers{display:flex;gap:8px;align-items:center;color:var(--muted)}

/* Lista izquierda */
.csw .list{
  padding:10px 12px;
  display:grid;
  grid-template-columns:repeat(1, minmax(220px, 1fr)); /* antes 260px */
  gap:6px;
  max-height:30vh;
  overflow:auto;
  overflow-x:hidden; /* <- añade esto */
}
.csw .row{
  display:flex;gap:10px;align-items:center;border:1px solid var(--border);
  background:#fff;padding:8px;border-radius:10px;transition:background .15s,border-color .15s;
  cursor:pointer; /* Para indicar que el row es clickable */
  width: 99%;
  margin: 0px auto;
}
.csw .row:hover{background:#f9fafb}
.csw .row input{width:18px;height:18px}
.csw .row .grow{flex:1;min-width:0}
.csw .row .name{font-weight:600;word-break:break-word}
.csw .row .id{font-size:8px;color:#b4b4b4;word-break:break-all}
.csw .row .act{display:flex;gap:8px}

/* Panel derecha: detalle */
.csw .kv{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;margin-bottom:8px}
.csw .toggle{display:flex;align-items:center;gap:12px}
.csw .toggle input{width:18px;height:18px}
.csw .hint{font-size:12px;color:var(--muted);margin-top:8px}
.csw .divider{height:1px;background:var(--border);margin:10px 0}
.csw .noSel{padding:4px 0;color:var(--muted)}

/* Footer */
.csw .footer{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.csw .left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.csw .special{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.csw .special .ipt{width:260px}
.csw .error{color:#b91c1c;font-size:12px}

/* Recipients-only: oculta lápiz y aspecto link */
.csw .grid.full .row .act{ display: none; }
.csw .grid.full .row .name.link{ cursor: default; }

/* Responsivo */
@media (max-width:1100px){
  .csw .grid{grid-template-columns:1fr}
  .csw .list{max-height:30vh}
}

.badge {
  display:inline-block;
  min-width:18px;
  padding:2px 6px;
  margin-left:3px;
  border-radius:12px;
  background:#007bff;
  color:#fff;
  font-size:10px;
  line-height:1;
  text-align:center;
}