/* =========================================================
   PROFEAPP - styles.css
   GENERAL OPTIMIZADO
   ========================================================= */

   :root{
    --bg-body:#f3f4f6;
    --bg-card:#ffffff;
    --bg-sidebar:#111827;
    --bg-sidebar-hover:#1f2937;
  
    --primary:#009ec2;
    --primary-hover:#008bab;
    --primary-soft:#d6f4ff;
  
    --text-main:#111827;
    --text-muted:#6b7280;
    --border-soft:#e5e7eb;
  
    --present:#dcfce7;
    --present-text:#166534;
    --late:#fef3c7;
    --late-text:#92400e;
    --absent:#fee2e2;
    --absent-text:#991b1b;
  
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:24px;
  }
  
  /* RESET */
  *{
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
  
  html,
  body{
    overflow-x:hidden;
  }
  
  body{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg-body);
    color:var(--text-main);
    font-weight:400;
  }
  
  a{
    color:inherit;
    text-decoration:none;
  }
  
  button,
  input,
  select,
  textarea{
    font-family:inherit;
  }
  
  button{
    font-weight:500;
  }
  
  img,
  svg,
  canvas,
  video,
  iframe{
    max-width:100%;
    height:auto;
  }
  
  /* TIPOGRAFÍA GENERAL LIMPIA */
  h1,
  h2,
  h3,
  h4,
  .card-title,
  .section-title,
  .course-title,
  .student-name-main,
  .monthly-student-name{
    font-weight:600;
    letter-spacing:-0.01em;
  }
  
  p,
  span,
  td,
  th,
  label,
  input,
  select,
  textarea{
    font-weight:400;
  }
  
  th{
    font-weight:500;
  }
  
  /* LAYOUT */
  .app{
    display:flex;
    min-height:100vh;
  }
  
  /* SIDEBAR */
  .sidebar{
    width:260px;
    flex:0 0 260px;
    background:var(--bg-sidebar);
    color:#f9fafb;
    padding:20px 18px;
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  
  .logo{
    cursor:pointer;
    padding:4px 4px 8px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(15,23,42,0.7);
    display:inline-block;
  }
  
  .logo-img{
    display:block;
    max-width:180px;
    height:auto;
  }
  
  .sidebar-section-title{
    font-size:0.75rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#9ca3af;
    margin-bottom:6px;
    font-weight:500;
  }
  
  .sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  
  .sidebar-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:10px;
    cursor:pointer;
    font-size:0.9rem;
    color:#e5e7eb;
    border:1px solid transparent;
    font-weight:400;
  }
  
  .sidebar-link:hover{
    background:var(--bg-sidebar-hover);
  }
  
  .sidebar-link.active{
    background:#1f2937;
    border-color:rgba(0,158,194,0.45);
    color:#f9fafb;
  }
  
  .sidebar-link-icon{
    font-size:1.1rem;
    width:22px;
    text-align:center;
  }
  
  .sidebar-footer{
    margin-top:auto;
    font-size:0.8rem;
    color:#9ca3af;
  }
  
  /* MAIN */
  .main{
    flex:1;
    min-width:0;
    padding:22px 26px;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  
  .main-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  
  .main-header-left h1{
    font-size:1.3rem;
    font-weight:600;
  }
  
  .main-header-left p{
    font-size:0.85rem;
    color:var(--text-muted);
    margin-top:3px;
  }
  
  .main-header-right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  
  /* CARDS */
  .card,
  .section{
    background:var(--bg-card);
    border-radius:var(--radius-xl);
    padding:18px 18px 16px;
    border:1px solid var(--border-soft);
    box-shadow:0 14px 30px rgba(15,23,42,0.03);
  }
  
  .card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  
  .card-title{
    font-size:0.95rem;
    font-weight:600;
  }
  
  .card-subtitle,
  .section-sub{
    font-size:0.8rem;
    color:var(--text-muted);
    margin-top:2px;
  }
  
  .empty{
    font-size:0.8rem;
    color:var(--text-muted);
  }
  
  /* PILLS / TAGS */
  .pill,
  .tag,
  .tag-course,
  .tag-pill,
  .summary-pill,
  .chip,
  .chip-blue{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-weight:400;
    white-space:nowrap;
  }
  
  .pill{
    font-size:0.8rem;
    padding:6px 10px;
    background:#e5e7eb;
    color:#374151;
  }
  
  .tag,
  .tag-course{
    font-size:0.72rem;
    padding:3px 8px;
    background:#fef3c7;
    color:#92400e;
  }
  
  .tag-course-primary,
  .summary-pill,
  .chip-blue{
    background:var(--primary-soft);
    color:var(--primary);
  }
  
  /* AVATAR */
  .avatar{
    width:34px;
    height:34px;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:500;
    font-size:0.9rem;
  }
  
  /* BOTONES GLOBALES */
  .btn-primary,
  .btn-main,
  .att-btn.primary,
  .btn-secondary-light{
    background:var(--primary);
    color:#fff;
    border:1px solid var(--primary);
  }
  
  .btn-primary,
  .btn-secondary,
  .btn-main,
  .btn-secondary-light,
  .btn-outline,
  .btn-danger,
  .btn-mini,
  .btn-small,
  .att-btn,
  .att-note-btn,
  .view-btn,
  .filter-btn,
  .pill-secondary{
    border-radius:999px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
    transition:all .18s ease;
    font-weight:500;
  }
  
  .btn-primary{
    padding:9px 16px;
    font-size:.85rem;
    border:none;
  }
  
  .btn-primary:hover,
  .btn-main:hover,
  .att-btn.primary:hover,
  .btn-secondary-light:hover{
    background:var(--primary-hover);
    border-color:var(--primary-hover);
  }
  
  .btn-secondary,
  .att-note-btn,
  .btn-small{
    background:var(--primary-soft);
    color:var(--primary);
    border:1px solid transparent;
  }
  
  .btn-secondary{
    padding:9px 14px;
    font-size:.8rem;
  }
  
  .btn-main{
    padding:7px 14px;
    font-size:0.8rem;
    box-shadow:0 8px 18px rgba(0,0,0,0.08);
  }
  
  .btn-outline{
    border:1px solid var(--primary);
    color:var(--primary);
    background:transparent;
    padding:8px 14px;
  }
  
  .btn-danger,
  .btn-danger-light{
    color:#dc2626;
    background:transparent;
    border:none;
  }
  
  .btn-danger:hover,
  .btn-danger-light:hover{
    background:#fee2e2;
  }
  
  /* BOTÓN VOLVER */
  .btn-volver,
  #btnVolver,
  #btnVolverCurso{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid var(--primary);
    color:var(--primary);
    font-size:0.85rem;
    font-weight:500;
    cursor:pointer;
    transition:all .18s ease;
  }
  
  .btn-volver:hover,
  #btnVolver:hover,
  #btnVolverCurso:hover{
    background:var(--primary);
    color:#ffffff;
    box-shadow:0 6px 14px rgba(0,158,194,0.18);
  }
  
  /* FORMS */
  .form{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  
  .form-row{
    display:grid;
    grid-template-columns:170px minmax(0,1fr);
    gap:10px 14px;
    align-items:center;
  }
  
  .label,
  .form-row label{
    display:block;
    font-size:0.85rem;
    color:var(--text-main);
    font-weight:500;
    margin-bottom:6px;
  }
  
  .field,
  .input,
  .search-input,
  .student-search,
  .att-input,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="date"],
  input[type="time"],
  input[type="month"],
  select,
  textarea{
    width:100%;
    min-height:34px;
    padding:7px 10px;
    border-radius:12px;
    border:1px solid var(--border-soft);
    background:#fff;
    color:var(--text-main);
    font-size:0.85rem;
    outline:none;
    font-weight:400;
  }
  
  .search-input,
  .student-search,
  .att-input{
    border-radius:999px;
  }
  
  textarea{
    height:auto;
    min-height:90px;
    resize:vertical;
    padding:10px;
  }
  
  .field:focus,
  .input:focus,
  .search-input:focus,
  .student-search:focus,
  .att-input:focus,
  input:focus,
  select:focus,
  textarea:focus{
    border-color:rgba(0,158,194,0.55);
    box-shadow:0 0 0 4px rgba(0,158,194,0.10);
  }
  
  ::placeholder{
    color:#9ca3af;
  }
  
  /* TABLAS */
  .table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  
  table{
    width:100%;
    border-collapse:collapse;
    font-size:.85rem;
  }
  
  th,
  td{
    padding:8px 10px;
    border-bottom:1px solid var(--border-soft);
    text-align:left;
    vertical-align:middle;
  }
  
  thead{
    background:#f9fafb;
  }
  
  th{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-muted);
  }
  
  /* ESTADOS */
  .status-msg{
    margin-top:10px;
    font-size:0.85rem;
    color:var(--text-muted);
  }
  
  .status-ok{
    color:var(--present-text);
  }
  
  .status-error{
    color:var(--absent-text);
  }
  
  .status-pill{
    font-size:0.72rem;
    padding:3px 7px;
    border-radius:999px;
    white-space:nowrap;
  }
  
  .status-warn{
    background:var(--late);
    color:var(--late-text);
  }
  
  .status-bad{
    background:var(--absent);
    color:var(--absent-text);
  }
  
  /* HOME */
  .grid-main{
    display:grid;
    grid-template-columns:minmax(0,2.2fr) minmax(0,1.4fr);
    gap:18px;
    align-items:flex-start;
  }
  
  .today-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:6px;
  }
  
  .class-card{
    border-radius:16px;
    border:1px solid var(--border-soft);
    padding:10px 12px;
    display:grid;
    grid-template-columns:70px minmax(0,1.5fr) minmax(0,1.5fr) auto;
    align-items:center;
    gap:10px;
    background:#f9fafb;
  }
  
  .class-time{
    font-weight:500;
    font-size:0.9rem;
  }
  
  .class-time span,
  .class-info-sub{
    display:block;
    font-size:0.75rem;
    color:var(--text-muted);
  }
  
  .class-info-main{
    font-size:0.88rem;
    font-weight:500;
  }
  
  .class-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  
  /* CURSO */
  .title-block h1{
    font-size:1.3rem;
    font-weight:600;
  }
  
  .title-block p{
    font-size:.85rem;
    color:var(--text-muted);
    margin-top:3px;
  }
  
  .back-link{
    font-size:.8rem;
    color:var(--text-muted);
    cursor:pointer;
    margin-bottom:6px;
  }
  
  .course-data-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:6px 24px;
    font-size:.85rem;
    margin-bottom:14px;
  }
  
  .course-data-label{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-muted);
  }
  
  .course-data-value{
    font-weight:400;
  }
  
  .btn-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:6px;
  }
  
  .students-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
  }
  
  .students-info{
    font-size:.8rem;
    color:var(--text-muted);
  }
  
  .student-name{
    font-weight:500;
    cursor:pointer;
  }
  
  .student-name:hover{
    text-decoration:underline;
  }
  
  .student-dni{
    font-size:.75rem;
    color:var(--text-muted);
  }
  
  /* AGENDA */
  .sections{
    max-width:900px;
    margin:0 auto 24px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  
  .section-title{
    font-size:1rem;
    font-weight:600;
    margin-bottom:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }
  
  .task{
    background:#f9fafb;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--border-soft);
    margin-bottom:8px;
    font-size:.88rem;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
  }
  
  .task small{
    font-size:.78rem;
    color:var(--text-muted);
  }
  
  .task-main{
    flex:1;
    min-width:0;
  }
  
  .task-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-end;
  }
  
  /* MIS CURSOS */
  .toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
    gap:12px;
    flex-wrap:wrap;
  }
  
  .search-input{
    flex:1;
    min-width:220px;
  }
  
  .courses-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  
  .courses-list .course-item{
    position:relative;
    display:grid;
    grid-template-columns:6px minmax(0,1fr) auto;
    grid-template-areas:"strip main right";
    column-gap:16px;
    align-items:start;
    padding:14px 18px;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border-soft);
    box-shadow:0 6px 16px rgba(15,23,42,0.04);
  }
  
  .courses-list .course-color-strip{
    grid-area:strip;
    display:block;
    width:6px;
    min-width:6px;
    height:100%;
    min-height:84px;
    align-self:stretch;
    border-radius:999px;
    margin:0;
  }
  
  .courses-list .course-main{
    grid-area:main;
    min-width:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  
  .courses-list .course-right{
    grid-area:right;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    min-width:auto;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
  }
  
  .courses-list .course-actions{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
  }
  
  .course-title-line{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    flex-wrap:wrap;
  }
  
  .course-title{
    font-weight:600;
    font-size:.95rem;
    color:#111827;
  }
  
  .course-subtitle{
    font-size:.8rem;
    color:#64748b;
  }
  
  .course-subtitle-secondary{
    font-size:0.86rem;
    font-weight:500;
    color:#334155;
    margin-top:4px;
  }
  
  .tags-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:4px;
  }
  
  .small-label{
    font-size:.72rem;
    color:#64748b;
  }
  
  .small-strong{
    font-size:.8rem;
    font-weight:500;
    color:#111827;
  }
  
  .btn-edit-light{
    background:transparent;
    color:var(--primary);
    border:1px solid var(--primary);
    border-radius:999px;
    padding:8px 14px;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
  }
  
  /* PERFIL ALUMNO */
  .layout-grid{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(0,1.8fr);
    gap:16px;
    align-items:flex-start;
  }
  
  .student-header{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:10px;
  }
  
  .student-avatar-big{
    width:54px;
    height:54px;
    border-radius:999px;
    background:var(--primary-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:500;
    font-size:1.1rem;
    color:var(--primary);
  }
  
  .student-name-main{
    font-size:1rem;
    font-weight:600;
  }
  
  .student-course{
    font-size:0.8rem;
    color:var(--text-muted);
    margin-top:2px;
  }
  
  .info-list{
    margin-top:10px;
    font-size:0.82rem;
  }
  
  .info-row{
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:4px 0;
    border-bottom:1px dashed #e5e7eb;
  }
  
  .info-label{
    color:var(--text-muted);
  }
  
  .info-value{
    font-weight:400;
  }
  
  /* ASISTENCIA */
  .att-toolbar,
  .att-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 12px;
  }
  
  .att-toolbar{
    margin-top:10px;
  }
  
  .att-label{
    font-size:0.82rem;
    color:var(--text-muted);
  }
  
  .att-btn{
    height:32px;
    padding:0 12px;
    border:1px solid var(--border-soft);
    background:#fff;
    font-size:0.82rem;
  }
  
  .att-state{
    display:inline-flex;
    gap:6px;
    flex-wrap:wrap;
  }
  
  .att-state button{
    height:28px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid var(--border-soft);
    background:#fff;
    cursor:pointer;
    font-size:0.78rem;
    font-weight:500;
  }
  
  .att-state button.is-present{
    background:var(--present);
    color:var(--present-text);
    border-color:transparent;
  }
  
  .att-state button.is-late{
    background:var(--late);
    color:var(--late-text);
    border-color:transparent;
  }
  
  .att-state button.is-absent{
    background:var(--absent);
    color:var(--absent-text);
    border-color:transparent;
  }
  
  .att-note-btn{
    height:28px;
    padding:0 10px;
    font-size:0.78rem;
  }
  
  /* ASISTENCIA MENSUAL */
  .monthly-table,
  .summary-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
  }
  
  .monthly-table th,
  .monthly-table td,
  .summary-table th,
  .summary-table td{
    font-weight:400;
  }
  
  .monthly-table thead th,
  .summary-table thead th{
    font-weight:500;
    letter-spacing:.03em;
  }
  
  .monthly-student-name{
    font-weight:500;
    color:#0f172a;
    line-height:1.25;
    letter-spacing:-0.01em;
  }
  
  .monthly-student-extra{
    display:none;
  }
  
  .stat-number{
    font-weight:600;
  }
  
  .stat-label{
    font-weight:400;
  }
  
  .view-btn,
  .filter-btn{
    border:1px solid #dbe4ef;
    background:#fff;
    color:#0f172a;
    padding:10px 14px;
    font-size:14px;
  }
  
  .view-btn.active,
  .filter-btn.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    box-shadow:0 8px 18px rgba(0,158,194,.16);
  }
  
  .m-badge,
  .day-chip{
    font-weight:500;
  }
  
  .no-absences,
  .summary-total{
    font-weight:500;
  }
  
  /* RESPONSIVE */
  @media (max-width:1100px){
    .grid-main{
      grid-template-columns:1fr;
    }
  
    .main{
      padding:18px 18px 24px;
    }
  
    .card{
      padding:16px 16px 14px;
    }
  }
  
  @media (max-width:960px){
    .app{
      flex-direction:column;
    }
  
    .sidebar{
      width:100%;
      flex:0 0 auto;
      flex-direction:row;
      align-items:center;
      flex-wrap:wrap;
      gap:10px 12px;
      padding:14px 14px 12px;
    }
  
    .logo-img{
      max-width:120px;
    }
  
    .sidebar-section-title{
      width:100%;
      margin-bottom:0;
    }
  
    .sidebar-nav{
      flex-direction:row;
      flex-wrap:wrap;
      gap:8px;
      width:100%;
    }
  
    .sidebar-footer{
      width:100%;
      margin-top:6px;
      font-size:0.75rem;
    }
  
    .layout-grid,
    .form-grid{
      grid-template-columns:1fr;
    }
  
    .class-card{
      grid-template-columns:1fr;
      align-items:flex-start;
    }
  
    .courses-list .course-item{
      grid-template-columns:6px minmax(0,1fr);
      grid-template-areas:
        "strip main"
        "strip right";
      row-gap:10px;
      column-gap:12px;
      padding:14px 14px 14px 12px;
    }
  
    .courses-list .course-right{
      width:100%;
      justify-content:flex-start;
    }
  
    .courses-list .course-actions{
      justify-content:flex-start;
      flex-wrap:wrap;
    }
  }
  
  @media (max-width:640px){
    .sidebar{
      padding:12px 10px;
      gap:8px;
    }
  
    .logo{
      width:100%;
      display:flex;
      justify-content:center;
    }
  
    .logo-img{
      max-width:110px;
    }
  
    .sidebar-nav{
      flex-direction:column;
      gap:6px;
    }
  
    .sidebar-link{
      width:100%;
      justify-content:flex-start;
      padding:10px 12px;
      font-size:0.95rem;
    }
  
    .main{
      padding:14px 10px 20px;
      gap:14px;
    }
  
    .main-header{
      flex-direction:column;
      align-items:flex-start;
    }
  
    .main-header-right{
      width:100%;
      gap:8px;
      justify-content:space-between;
    }
  
    .main-header-left h1,
    .title-block h1{
      font-size:1.15rem;
    }
  
    .pill{
      flex:1;
      text-align:center;
    }
  
    .card{
      padding:14px 12px;
      border-radius:16px;
    }
  
    .btn-row{
      flex-direction:column;
    }
  
    .btn-primary,
    .btn-secondary,
    .btn-main,
    .btn-secondary-light,
    .btn-outline{
      width:100%;
      justify-content:center;
    }
  
    .form-row{
      grid-template-columns:1fr;
      gap:6px;
    }
  
    table{
      display:block;
      overflow-x:auto;
      white-space:nowrap;
    }
  
    th,
    td{
      padding:8px 8px;
      font-size:0.8rem;
    }
  
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="date"],
    input[type="time"],
    input[type="month"],
    select,
    textarea,
    .field,
    .input{
      font-size:16px;
    }
  }
  
  @media (max-width:420px){
    .main{
      padding:12px 8px 18px;
    }
  
    .card{
      padding:12px 10px;
      border-radius:14px;
    }
  
    .sidebar{
      padding:10px 8px;
    }
  
    .sidebar-link{
      font-size:0.9rem;
      padding:9px 10px;
    }
  
    .course-title,
    .student-name-main{
      font-size:0.9rem;
    }
  
    .icon-button,
    .avatar{
      width:32px;
      height:32px;
    }
  }


  /* =========================================================
   ASISTENCIA MENSUAL
   ========================================================= */

.monthly-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.monthly-toolbar-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.monthly-toolbar-right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.monthly-label{
  font-size:14px;
  font-weight:500;
  color:#374151;
}

.monthly-input{
  min-width:180px;
}

.monthly-status{
  margin-bottom:14px;
  color:#6b7280;
  font-size:14px;
}

.monthly-controls{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:16px;
}

.view-toggle,
.filter-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.search-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.student-search{
  width:100%;
  max-width:340px;
}

.stats-row{
  display:grid;
  grid-template-columns:repeat(5, minmax(120px, 1fr));
  gap:10px;
  margin-bottom:16px;
}

.stat-card{
  border:1px solid var(--border-soft);
  border-radius:18px;
  background:#fff;
  padding:12px 14px;
}

.stat-number{
  font-size:22px;
  line-height:1;
  font-weight:600;
  color:#0f172a;
  margin-bottom:5px;
}

.stat-label{
  font-size:13px;
  color:#64748b;
  font-weight:400;
}

.monthly-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:#fff;
}

.monthly-table{
  width:100%;
  min-width:1100px;
  border-collapse:separate;
  border-spacing:0;
}

.monthly-table th,
.monthly-table td{
  border-bottom:1px solid #eef2f7;
  border-right:1px solid #eef2f7;
  padding:10px 8px;
  text-align:center;
  font-size:14px;
  background:#fff;
  font-weight:400;
}

.monthly-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#f8fafc;
  color:#64748b;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:12px;
}

.monthly-table th:first-child,
.monthly-table td:first-child{
  position:sticky;
  left:0;
  z-index:2;
  background:#fff;
  text-align:left;
}

.monthly-table thead th:first-child{
  z-index:4;
  background:#f8fafc;
}

.monthly-table tr:last-child td{
  border-bottom:none;
}

.monthly-table th:last-child,
.monthly-table td:last-child{
  border-right:none;
}

.monthly-student{
  min-width:220px;
}

.monthly-student-name{
  font-weight:500;
  font-size:14px;
  color:#111827;
  line-height:1.25;
  letter-spacing:0;
}

.monthly-student-extra{
  display:none;
}

.monthly-day{
  min-width:48px;
}

.monthly-total{
  min-width:72px;
  font-weight:500;
  background:#f8fafc !important;
  color:#0f172a;
}

.m-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  font-weight:500;
  font-size:12px;
  border:1px solid #e5e7eb;
  background:#f3f4f6;
  color:#6b7280;
}

.m-present{
  background:var(--present);
  color:var(--present-text);
  border-color:#bbf7d0;
}

.m-late{
  background:var(--late);
  color:var(--late-text);
  border-color:#fde68a;
}

.m-absent{
  background:var(--absent);
  color:var(--absent-text);
  border-color:#fecaca;
}

.m-empty{
  background:#f3f4f6;
  color:#9ca3af;
  border-color:#e5e7eb;
}

.summary-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:780px;
}

.summary-table th,
.summary-table td{
  border-bottom:1px solid #eef2f7;
  padding:13px 14px;
  background:#fff;
  font-size:14px;
  text-align:left;
  font-weight:400;
}

.summary-table thead th{
  background:#f8fafc;
  color:#64748b;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.summary-days{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-items:center;
  min-height:32px;
}

.day-chip{
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:500;
  border:1px solid transparent;
}

.day-chip.absent{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fecaca;
}

.day-chip.late{
  background:#fef3c7;
  color:#92400e;
  border-color:#fde68a;
  font-size:11px;
}

.no-absences{
  color:#16a34a;
  font-weight:500;
  font-size:13px;
}

.summary-total{
  width:110px;
  text-align:center !important;
  font-weight:500;
  color:#0f172a;
}

.summary-total.ok{
  color:#16a34a;
}

.monthly-empty{
  padding:24px;
  color:#6b7280;
  font-size:14px;
}

@media (max-width:900px){
  .monthly-student{
    min-width:180px;
  }

  .stats-row{
    grid-template-columns:repeat(2, 1fr);
  }

  .student-search{
    max-width:none;
  }
}



/* =========================================================
   AGENDA - COMPLETO
   ========================================================= */

   .agenda-layout{
    display:grid;
    grid-template-columns:minmax(360px,560px) minmax(360px,1fr);
    gap:20px;
    align-items:start;
  }
  
  .agenda-panel,
  .calendar-panel{
    background:#fff;
    border:1px solid var(--border-soft);
    border-radius:24px;
    box-shadow:0 10px 24px rgba(15,23,42,0.04);
  }
  
  .calendar-panel{
    padding:20px;
  }
  
  .agenda-panel{
    padding:18px;
  }
  
  .calendar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
  }
  
  .calendar-title{
    font-size:1rem;
    font-weight:600;
    color:var(--text-main);
    text-transform:lowercase;
  }
  
  .calendar-tools{
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  .calendar-tools button,
  .btn-light{
    border:1px solid var(--border-soft);
    background:#fff;
    color:var(--text-main);
    border-radius:999px;
    padding:8px 13px;
    font-size:.85rem;
    font-weight:500;
    cursor:pointer;
  }
  
  .calendar-weekdays,
  .calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
  }
  
  .calendar-weekdays{
    margin-bottom:10px;
  }
  
  .calendar-weekday{
    text-align:center;
    color:var(--text-muted);
    font-size:.85rem;
    font-weight:500;
    padding:6px 0;
  }
  
  .calendar-day{
    min-height:70px;
    background:#fff;
    border:1px solid var(--border-soft);
    border-radius:16px;
    padding:9px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
    transition:.16s ease;
  }
  
  .calendar-day:hover{
    background:#f8fdff;
    border-color:rgba(0,158,194,.35);
  }
  
  .calendar-day.other-month{
    background:#f3f4f6;
    opacity:.65;
  }
  
  .calendar-day.selected{
    border:1.5px solid var(--primary);
    background:#f0fbff;
    box-shadow:0 0 0 3px rgba(0,158,194,.08);
  }
  
  .calendar-day-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:6px;
  }
  
  .calendar-day-number{
    font-size:.9rem;
    font-weight:500;
    color:var(--text-main);
    line-height:1;
  }
  
  .calendar-day-badge{
    min-width:20px;
    height:20px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:.72rem;
    font-weight:500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
  }
  
  .calendar-dots{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    min-height:12px;
    align-items:center;
  }
  
  .calendar-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    display:inline-block;
  }
  
  .dot-tarea{ background:#10b981; }
  .dot-fechaImportante{ background:#ec4899; }
  .dot-evaluacion{ background:#3b82f6; }
  .dot-recordatorio{ background:#f59e0b; }
  .dot-proximaClase{ background:#8b5cf6; }
  
  .agenda-column{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  
  .panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
  }
  
  .panel-title{
    margin:0;
    font-size:1.05rem;
    font-weight:600;
    color:var(--text-main);
  }
  
  .panel-count{
    font-size:.9rem;
    font-weight:400;
    color:var(--text-muted);
  }
  
  .selected-box{
    border:1px solid var(--border-soft);
    background:#f8fbff;
    border-radius:18px;
    padding:14px 16px;
    margin-bottom:14px;
  }
  
  .selected-kicker{
    color:var(--primary);
    font-size:.78rem;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:5px;
  }
  
  .selected-date{
    color:var(--text-main);
    font-size:.95rem;
    font-weight:500;
    line-height:1.25;
    text-transform:capitalize;
    margin-bottom:4px;
  }
  
  .selected-sub{
    color:var(--text-muted);
    font-size:.88rem;
    font-weight:400;
  }
  
  .stack{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  
  .empty-soft{
    border:1px dashed #dbe3ee;
    background:#fbfcfe;
    border-radius:18px;
    padding:18px;
    color:var(--text-muted);
    font-weight:400;
  }
  
  .agenda-item{
    background:#fff;
    border:1px solid var(--border-soft);
    border-radius:18px;
    padding:14px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:14px;
    position:relative;
    overflow:hidden;
  }
  
  .agenda-item::before{
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:4px;
    border-radius:999px;
    background:#cbd5e1;
  }
  
  .agenda-item.tipo-tarea::before{ background:#10b981; }
  .agenda-item.tipo-fechaImportante::before{ background:#ec4899; }
  .agenda-item.tipo-evaluacion::before{ background:#3b82f6; }
  .agenda-item.tipo-recordatorio::before{ background:#f59e0b; }
  .agenda-item.tipo-proximaClase::before{ background:#8b5cf6; }
  
  .agenda-main{
    min-width:0;
    padding-left:4px;
  }
  
  .agenda-item-title{
    margin:0 0 8px;
    color:var(--text-main);
    font-size:.95rem;
    line-height:1.2;
    font-weight:500;
  }
  
  .chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
  }
  
  .chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:.78rem;
    line-height:1;
    font-weight:400;
    border:1px solid transparent;
    white-space:nowrap;
  }
  
  .chip-type-tarea{
    background:#dcfce7;
    color:#166534;
    border-color:#bbf7d0;
  }
  
  .chip-type-fechaImportante{
    background:#fce7f3;
    color:#be185d;
    border-color:#f9a8d4;
  }
  
  .chip-type-evaluacion{
    background:#eaf2ff;
    color:#1d4ed8;
    border-color:#bfdbfe;
  }
  
  .chip-type-recordatorio{
    background:#fef3c7;
    color:#b45309;
    border-color:#fde68a;
  }
  
  .chip-type-proximaClase{
    background:#ede9fe;
    color:#6d28d9;
    border-color:#d8b4fe;
  }
  
  .chip-priority-alta{
    background:#fee2e2;
    color:#b91c1c;
    border-color:#fecaca;
  }
  
  .chip-priority-media{
    background:#fef3c7;
    color:#92400e;
    border-color:#fde68a;
  }
  
  .chip-priority-baja{
    background:#dcfce7;
    color:#166534;
    border-color:#bbf7d0;
  }
  
  .chip-state-pendiente{
    background:#e0f2fe;
    color:#0369a1;
    border-color:#bae6fd;
  }
  
  .chip-state-completado{
    background:#dcfce7;
    color:#166534;
    border-color:#bbf7d0;
  }
  
  .chip-curso{
    background:#f8fafc;
    color:#475569;
    border-color:#e2e8f0;
  }
  
  .agenda-meta{
    display:flex;
    flex-direction:column;
    gap:6px;
    color:var(--text-muted);
    font-size:.86rem;
    line-height:1.35;
  }
  
  .agenda-fecha{
    font-weight:400;
    color:#5f7186;
  }
  
  .agenda-detalle{
    color:#64748b;
    word-break:break-word;
  }
  
  .agenda-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:130px;
  }
  
  .agenda-actions button{
    border:1px solid var(--border-soft);
    background:#fff;
    color:var(--text-main);
    border-radius:999px;
    padding:8px 12px;
    font-size:.8rem;
    font-weight:500;
    cursor:pointer;
  }
  
  .btn-primary-soft{
    background:var(--primary-soft) !important;
    color:var(--primary) !important;
    border-color:transparent !important;
  }
  
  .btn-danger-soft{
    background:#fef2f2 !important;
    color:#dc2626 !important;
    border-color:#fecaca !important;
  }
  
  .day-footer{
    margin-top:14px;
    border:1px solid var(--primary-soft);
    background:var(--primary-soft);
    color:var(--primary);
    border-radius:16px;
    padding:12px 14px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:10px;
  }
  
  .agenda-form-card{
    margin-bottom:18px;
    padding:18px;
  }
  
  .agenda-form-card .form{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  
  .agenda-form-card .form-row{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:24px;
    align-items:center;
  }
  
  .agenda-form-card label{
    color:var(--text-main);
    font-weight:500;
    margin:0;
    display:block;
    font-size:.9rem;
  }
  
  .agenda-form-card .field,
  .agenda-form-card textarea,
  .agenda-form-card select{
    width:100%;
    border:1px solid var(--border-soft);
    background:#fff;
    color:var(--text-main);
    border-radius:14px;
    padding:10px 12px;
    font-size:.9rem;
    outline:none;
    font-family:inherit;
  }
  
  .agenda-form-card .field,
  .agenda-form-card select{
    height:42px;
  }
  
  .agenda-form-card textarea{
    min-height:90px;
    resize:vertical;
  }
  
  .agenda-form-card .btn-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:8px;
    padding-left:164px;
  }
  
  @media (max-width:1120px){
    .agenda-layout{
      grid-template-columns:1fr;
    }
  }
  
  @media (max-width:760px){
    .calendar-day{
      min-height:64px;
      padding:8px;
    }
  
    .agenda-item{
      grid-template-columns:1fr;
    }
  
    .agenda-actions{
      min-width:0;
      flex-direction:row;
      flex-wrap:wrap;
    }
  
    .agenda-actions button{
      flex:1 1 140px;
    }
  
    .agenda-form-card .form-row{
      grid-template-columns:1fr;
      gap:6px;
    }
  
    .agenda-form-card .btn-row{
      padding-left:0;
    }
  }



  /* =========================================================
   CURSO
   ========================================================= */

.student-name{
  cursor:pointer;
  font-weight:500;
  color:#0f172a;
  transition:.18s ease;
}

.student-name:hover{
  color:var(--primary);
  text-decoration:underline;
}

.att-mini{
  font-size:12px;
  color:#6b7280;
  margin-top:2px;
}

.att-table-wrap{
  overflow:auto;
  width:100%;
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:#fff;
}

.att-table{
  width:100%;
  min-width:1080px;
  border-collapse:separate;
  border-spacing:0;
}

.att-table th,
.att-table td{
  vertical-align:middle;
  border-bottom:1px solid #eef2f7;
  padding:10px 8px;
  font-size:14px;
  background:#fff;
  font-weight:400;
}

.att-table tr:last-child td{
  border-bottom:none;
}

.att-table thead th{
  background:#f8fafc;
  color:#64748b;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:12px;
}

.att-mini{
  display:none;
}

.att-summary{
  margin-top:12px;
  font-size:14px;
  color:#6b7280;
  font-weight:400;
}

.student-track{
  min-width:190px;
  display:grid;
  gap:7px;
}

.track-text,
.track-empty{
  font-size:12.5px;
  color:#64748b;
  line-height:1.25;
  font-weight:400;
}

.eval-track{
  min-width:230px;
  display:grid;
  gap:6px;
}

.eval-badges{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}

.eval-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:5px 7px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#64748b;
}

.eval-badge.low{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fca5a5;
}

.eval-badge.mid{
  background:#fef3c7;
  color:#92400e;
  border-color:#fcd34d;
}

.eval-badge.ok{
  background:#dbeafe;
  color:#1d4ed8;
  border-color:#93c5fd;
}

.eval-note{
  font-size:12.5px;
  color:#64748b;
  line-height:1.25;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:10px;
}

.metric-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid #e5edf8;
  border-radius:18px;
  padding:16px;
  box-shadow:0 8px 24px rgba(15,23,42,0.04);
  min-height:100px;
}

.metric-label{
  font-size:13px;
  color:#64748b;
  font-weight:400;
  margin-bottom:10px;
}

.metric-value{
  font-size:2rem;
  line-height:1;
  font-weight:600;
  color:#0f172a;
  margin-bottom:8px;
}

.metric-help{
  font-size:13px;
  color:#64748b;
  line-height:1.35;
}

.panel-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:16px;
  margin-top:16px;
  align-items:start;
}

.mini-panel{
  border:1px solid #e5edf8;
  border-radius:18px;
  background:#fff;
  padding:14px;
  box-shadow:0 8px 24px rgba(15,23,42,0.04);
}

.mini-panel-title{
  font-size:1rem;
  font-weight:600;
  color:#0f172a;
  margin-bottom:5px;
}

.mini-panel-subtitle{
  font-size:13px;
  color:#64748b;
  margin-bottom:12px;
  line-height:1.35;
}

.alert-list,
.focus-list{
  display:grid;
  gap:9px;
}

.alert-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:11px 12px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #eef2f7;
}

.alert-icon{
  font-size:17px;
  line-height:1;
  margin-top:1px;
}

.alert-text{
  font-size:14px;
  color:#334155;
  line-height:1.35;
}

.focus-section{
  display:grid;
  gap:8px;
}

.focus-section + .focus-section{
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid #eef2f7;
}

.focus-heading{
  font-size:12px;
  font-weight:500;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.focus-btn{
  border:1px solid #eef2f7;
  background:#f8fafc;
  border-radius:12px;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  width:100%;
}

.focus-btn:hover{
  background:#eefaff;
  border-color:var(--primary-soft);
}

.focus-name{
  font-size:14px;
  color:#0f172a;
  font-weight:500;
  line-height:1.25;
}

.focus-reason{
  margin-top:3px;
  font-size:12.5px;
  color:#64748b;
  line-height:1.25;
}

.empty-panel-text{
  font-size:14px;
  color:#64748b;
  background:#f8fafc;
  border:1px dashed #dbe3ef;
  border-radius:12px;
  padding:11px 12px;
}

.dashboard-note{
  margin-top:14px;
  font-size:13px;
  color:#64748b;
  background:#f8fafc;
  border:1px solid #eef2f7;
  border-radius:12px;
  padding:10px 12px;
  line-height:1.35;
}

.row-actions{
  position:relative;
  display:inline-flex;
  justify-content:center;
}

.btn-more{
  border:none;
  background:transparent;
  color:#94a3b8;
  width:30px;
  height:30px;
  border-radius:10px;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn-more:hover{
  background:#f1f5f9;
  color:var(--primary);
}

.actions-menu{
  display:none;
  position:absolute;
  right:0;
  top:34px;
  min-width:150px;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(15,23,42,0.12);
  z-index:20;
  overflow:hidden;
}

.actions-menu.show{
  display:grid;
}

.actions-menu button{
  border:none;
  background:#fff;
  padding:10px 12px;
  text-align:left;
  font-size:13px;
  color:#334155;
  cursor:pointer;
  font-weight:400;
}

.actions-menu button:hover{
  background:#f8fafc;
  color:var(--primary);
}

/* MODAL EDITAR ALUMNO */

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;
}

.modal-backdrop.show{
  display:flex;
}

.modal-backdrop.open{
  display:flex;
}
.modal-card{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  overflow:hidden;
}

.modal-header{
  padding:20px 22px 10px;
  border-bottom:1px solid #eef2f7;
}

.modal-title{
  margin:0;
  font-size:1.2rem;
  font-weight:600;
  color:#0f172a;
}

.modal-subtitle{
  margin-top:6px;
  font-size:.95rem;
  color:#64748b;
}

.modal-body{
  padding:20px 22px;
  display:grid;
  gap:14px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.form-group{
  display:grid;
  gap:6px;
}

.form-group.full{
  grid-column:1 / -1;
}

.form-group label{
  font-size:.9rem;
  font-weight:500;
  color:#334155;
}

.form-group input{
  width:100%;
  border:1px solid #dbe3ef;
  border-radius:12px;
  padding:12px 14px;
  font-size:.98rem;
  outline:none;
  background:#fff;
}

.form-group input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(0,158,194,0.08);
}

.modal-actions{
  padding:0 22px 22px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.modal-actions .btn-secondary,
.modal-actions .btn-primary{
  min-width:120px;
}

.feedback-msg{
  font-size:.92rem;
  color:#16a34a;
  font-weight:500;
  min-height:20px;
}

@media (max-width:1100px){
  .dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .panel-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .dashboard-grid{
    grid-template-columns:1fr;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .modal-card{
    max-width:100%;
    border-radius:16px;
  }

  .modal-actions{
    flex-direction:column-reverse;
  }

  .modal-actions .btn-secondary,
  .modal-actions .btn-primary{
    width:100%;
  }
}




/* =========================================================
   PERFIL ALUMNO
   ========================================================= */

   .main-header-right{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  
  .layout-grid{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(0,1.8fr);
    gap:16px;
    align-items:flex-start;
  }
  
  .student-header{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:10px;
  }
  
  .student-avatar-big{
    width:54px;
    height:54px;
    border-radius:999px;
    background:var(--primary-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:500;
    font-size:1.1rem;
    color:var(--primary);
  }
  
  .student-name-main{
    font-size:1rem;
    font-weight:600;
    color:#111827;
  }
  
  .student-course{
    font-size:0.8rem;
    color:var(--text-muted);
    margin-top:2px;
  }
  
  .student-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:6px;
  }
  
  .tag-pill{
    font-size:0.72rem;
    padding:3px 8px;
    border-radius:999px;
    background:#f3f4f6;
    color:#374151;
    font-weight:400;
  }
  
  .info-list{
    margin-top:10px;
    font-size:0.82rem;
  }
  
  .info-row{
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:4px 0;
    border-bottom:1px dashed #e5e7eb;
  }
  
  .info-label{
    color:var(--text-muted);
  }
  
  .info-value{
    font-weight:400;
    text-align:right;
  }
  
  .summary-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
  }
  
  .summary-item{
    border-radius:14px;
    padding:10px;
    border:1px solid var(--border-soft);
    background:#f9fafb;
  }
  
  .summary-label{
    font-size:0.7rem;
    color:var(--text-muted);
    margin-bottom:4px;
    font-weight:400;
  }
  
  .summary-value{
    font-size:0.95rem;
    font-weight:500;
    color:#111827;
  }
  
  .summary-badge{
    margin-top:3px;
    font-size:0.7rem;
    padding:3px 7px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    display:inline-flex;
    font-weight:400;
  }
  
  .list-small{
    margin-top:8px;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:0.78rem;
  }
  
  .list-item{
    padding:7px 9px;
    border-radius:12px;
    border:1px solid var(--border-soft);
    background:#f9fafb;
    display:flex;
    justify-content:space-between;
    gap:10px;
  }
  
  .list-item small{
    color:var(--text-muted);
    font-weight:400;
  }
  
  .observations-box{
    margin-top:8px;
    font-size:0.8rem;
    border-radius:12px;
    border:1px solid var(--border-soft);
    background:#f9fafb;
    padding:8px 9px;
    max-height:150px;
    overflow:auto;
    line-height:1.35;
  }
  
  .obs-item{
    margin-bottom:6px;
  }
  
  .obs-item strong{
    font-size:0.78rem;
    font-weight:500;
  }
  
  .mt-14{
    margin-top:14px;
  }
  
  @media (max-width:960px){
    .layout-grid{
      grid-template-columns:1fr;
    }
  }
  
  @media (max-width:640px){
    .student-header{
      align-items:flex-start;
    }
  
    .student-avatar-big{
      width:48px;
      height:48px;
      font-size:1rem;
    }
  
    .summary-grid{
      grid-template-columns:1fr;
    }
  
    .info-row{
      flex-direction:column;
      align-items:flex-start;
      gap:2px;
    }
  
    .info-value{
      text-align:left;
    }
  }



  /* =========================================================
   REGISTRO DE CLASE
   ========================================================= */

.reg-toolbar{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:18px;
}

.reg-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:end;
}

.reg-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
  flex:1;
}

.reg-field label{
  font-size:13px;
  font-weight:500;
  color:#374151;
}

/* Inputs */

.reg-field input,
.reg-field select{
  width:100%;
  height:36px;
  padding:7px 12px;
  border:1px solid var(--border-soft);
  border-radius:12px;
  background:#fff;
  font-size:14px;
  font-weight:400;
}

/* Select flechita */

.reg-field select{
  padding:7px 36px 7px 12px;
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 10px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* Ayuda */

.reg-help{
  font-size:13px;
  color:#6b7280;
}

/* Nota asistencia */

.attendance-note{
  display:flex;
  gap:8px;
  align-items:center;
  background:#f8fafc;
  border:1px solid var(--border-soft);
  color:#475569;
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
}

/* TABLA */

.reg-table-wrap{
  overflow:auto;
  width:100%;
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:#fff;
}

.reg-table{
  width:100%;
  min-width:1080px;
  border-collapse:separate;
  border-spacing:0;
}

.reg-table th,
.reg-table td{
  border-bottom:1px solid #eef2f7;
  border-right:1px solid #eef2f7;
  padding:10px 8px;
  font-size:14px;
  background:#fff;
  font-weight:400;
}

.reg-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#f8fafc;
  color:#64748b;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:12px;
}

.reg-table th:last-child,
.reg-table td:last-child{
  border-right:none;
}

.reg-table tr:last-child td{
  border-bottom:none;
}

/* Inputs dentro tabla */

.reg-table input,
.reg-table select{
  width:100%;
  min-width:90px;
  padding:8px 10px;
  border:1px solid var(--border-soft);
  border-radius:10px;
  font-size:13px;
}

/* Columnas */

.reg-table .col-obs input{min-width:180px;}
.reg-table .col-alumno{min-width:220px;}
.reg-table .col-asistencia{min-width:130px;}

/* Nombre alumno */

.reg-table .student-name{
  cursor:pointer;
  font-weight:500;
  color:#0f172a;
}

/* Pills asistencia */

.attendance-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:500;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#64748b;
}

.attendance-pill.present{
  background:var(--present);
  color:var(--present-text);
}

.attendance-pill.late{
  background:var(--late);
  color:var(--late-text);
}

.attendance-pill.absent{
  background:var(--absent);
  color:var(--absent-text);
}

.attendance-pill.none{
  color:#94a3b8;
}

/* Acciones */

.reg-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.reg-status{
  font-size:14px;
  color:#6b7280;
  margin-top:10px;
}

/* Responsive */

@media (max-width:1100px){
  .reg-table .col-alumno{
    min-width:190px;
  }
}



/* =========================================================
   REGISTRO DE CLASE - BARRA STICKY GUARDAR
   ========================================================= */

   .reg-sticky-save{
    position:sticky;
    top:12px;
    z-index:30;
  
    display:flex;
    justify-content:flex-end;
    gap:10px;
  
    margin-bottom:14px;
    padding:10px;
  
    background:rgba(243,244,246,0.86);
    backdrop-filter:blur(8px);
    border:1px solid var(--border-soft);
    border-radius:18px;
  }



  /* =========================================================
   ASISTENCIA PROFEAPP
   ========================================================= */

.att-table-wrap{
  overflow:auto;
  width:100%;
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:#fff;
}

.att-table{
  width:100%;
  min-width:980px;
  border-collapse:separate;
  border-spacing:0;
}

.att-table th,
.att-table td{
  vertical-align:middle;
  border-bottom:1px solid #eef2f7;
  padding:10px 8px;
  font-size:14px;
  background:#fff;
  font-weight:400;
}

.att-table thead th{
  background:#f8fafc;
  color:#64748b;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:12px;
}

.att-table tr:last-child td{
  border-bottom:none;
}

.att-table input{
  width:100%;
  min-width:160px;
  padding:8px 10px;
  border:1px solid var(--border-soft);
  border-radius:10px;
  background:#fff;
  font-size:13px;
}

.att-mini{
  display:none;
}

.att-state{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.att-state button{
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background:#fff;
  cursor:pointer;
  font-size:0.78rem;
  font-weight:500;
}

.att-state button.is-present{
  background:var(--present);
  color:var(--present-text);
  border-color:transparent;
}

.att-state button.is-late{
  background:var(--late);
  color:var(--late-text);
  border-color:transparent;
}

.att-state button.is-absent{
  background:var(--absent);
  color:var(--absent-text);
  border-color:transparent;
}



/* =========================================================
   CARGAR ALUMNOS
   ========================================================= */

   .layout{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:16px;
  }
  
  @media (max-width:1000px){
    .layout{
      grid-template-columns:1fr;
    }
  }
  
  /* TABLA */
  
  table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
  }
  
  thead th{
    background:#f8fafc;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:#64748b;
    font-weight:500;
    padding:10px 8px;
  }
  
  tbody td{
    padding:10px 8px;
    border-bottom:1px solid #eef2f7;
    font-size:14px;
  }
  
  tbody tr:last-child td{
    border-bottom:none;
  }
  
  /* FORM */
  
  .input, textarea{
    border:1px solid var(--border-soft);
    border-radius:12px;
    padding:10px;
    font-size:14px;
    width:100%;
  }
  
  textarea{
    min-height:80px;
  }
  
  /* BOTÓN 
  
  .btn-primary{
    background:var(--primary);
    border:none;
    color:#fff;
    padding:10px 14px;
    border-radius:14px;
    font-weight:500;
  }
*/






  /* =========================================================
   FIX HOME INDEX - LETRA LIVIANA + BOTONES LIMPIOS
   PEGAR AL FINAL
========================================================= */

.main .today-list .class-card,
.grid-main .today-list .class-card{
  background:#f9fafb !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  box-shadow:none !important;
  padding:10px 12px !important;
}

.main .today-list .class-time,
.main .today-list .class-info-main,
.grid-main .today-list .class-time,
.grid-main .today-list .class-info-main{
  font-weight:500 !important;
  color:#0f172a !important;
  letter-spacing:-0.15px !important;
}

.main .today-list .class-info-main,
.grid-main .today-list .class-info-main{
  font-size:14px !important;
}

.main .today-list .class-time,
.grid-main .today-list .class-time{
  font-size:13px !important;
}

.main .today-list .class-info-sub,
.main .today-list .class-time span,
.grid-main .today-list .class-info-sub,
.grid-main .today-list .class-time span{
  font-weight:400 !important;
  font-size:12px !important;
  color:#64748b !important;
}

/* BOTONES DEL HOME */
.main .today-list button,
.grid-main .today-list button,
.main .today-list .btn-secondary,
.main .today-list .btn-outline,
.grid-main .today-list .btn-secondary,
.grid-main .today-list .btn-outline{
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
  color:#0f172a !important;
  box-shadow:none !important;
  border-radius:999px !important;
  padding:6px 10px !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.1 !important;
}

.main .today-list button:hover,
.grid-main .today-list button:hover{
  background:#f3f4f6 !important;
  border-color:#d1d5db !important;
}

/* TEXTOS LATERALES MÁS LIVIANOS */
.grid-main .card-title,
.grid-main .section-title,
.grid-main h2,
.grid-main h3{
  font-weight:500 !important;
}

.grid-main strong,
.grid-main b{
  font-weight:500 !important;
}



  /* =========================================================
   AJUSTE FINO BOTONES HEADER PERFIL
========================================================= */

.main-header-right button{
  gap:6px;
}

/* =========================================================
   FIX CENTRADO BOTONES HEADER PERFIL
========================================================= */

.main-header-right button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center;
  line-height:1;
}

/* =========================================================
   PERFIL ALUMNO - HEADER BOTONES UNIFORMES
========================================================= */

.main-header-right > button{
  height:34px !important;
  min-height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;

  font-size:13px !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

/* FIX DEFINITIVO BOTONES PERFIL ALUMNO */

#btnInforme,
#btnEditarAlumno,
#btnEliminarAlumno,
#btnVolverCurso{
  height:34px !important;
  min-height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:none !important;
  vertical-align:middle !important;
}

#btnEliminarAlumno{
  background:#fff !important;
  color:#dc2626 !important;
  border:1px solid #ef4444 !important;
}

#btnEliminarAlumno:hover{
  background:#fee2e2 !important;
  color:#b91c1c !important;
}



/* =========================================================
   FIX CHIPS (PENDIENTE / TARDE / DEBE / AUSENTE)
========================================================= */

.list-item{
  display:flex;
  align-items:center !important;
  justify-content:space-between;
}

.status-pill{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:26px;
  min-width:70px;
  padding:0 10px;

  border-radius:999px;
  font-size:12px;
  line-height:1;
}

.status-ok{
  background:#dcfce7;
  color:#166534;
}

/* =========================================================
   FIX COLORES ESTADOS (PRIORIDAD FINAL)
========================================================= */

.status-ok{
  background:#dcfce7 !important;
  color:#166534 !important;
}

.status-warn{
  background:#fef3c7 !important;
  color:#92400e !important;
}

.status-bad{
  background:#fee2e2 !important;
  color:#991b1b !important;
}

#btnCargar{
  background:#0ea5e9;
  color:white;
  border:none;
}

#btnCargar:hover{
  background:#0284c7;
}






/* =========================================================
   FIX AGENDA - COLORES Y CHIPS
   Pegar al final de styles.css
========================================================= */

.agenda-layout .chip,
.agenda-panel .chip,
.calendar-panel .chip{
  width:auto !important;
  white-space:nowrap !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:500 !important;
  padding:4px 10px !important;
}

/* Tipos de eventos */
.agenda-layout .chip-type-tarea{
  background:#dcfce7 !important;
  color:#166534 !important;
  border:1px solid #bbf7d0 !important;
}

.agenda-layout .chip-type-fechaImportante{
  background:#fce7f3 !important;
  color:#be185d !important;
  border:1px solid #f9a8d4 !important;
}

.agenda-layout .chip-type-evaluacion{
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  border:1px solid #bfdbfe !important;
}

.agenda-layout .chip-type-recordatorio{
  background:#fef3c7 !important;
  color:#92400e !important;
  border:1px solid #fde68a !important;
}

.agenda-layout .chip-type-proximaClase{
  background:#ede9fe !important;
  color:#6d28d9 !important;
  border:1px solid #d8b4fe !important;
}

/* Prioridad */
.agenda-layout .chip-priority-alta{
  background:#fee2e2 !important;
  color:#991b1b !important;
  border:1px solid #fecaca !important;
}

.agenda-layout .chip-priority-media{
  background:#fef3c7 !important;
  color:#92400e !important;
  border:1px solid #fde68a !important;
}

.agenda-layout .chip-priority-baja{
  background:#dcfce7 !important;
  color:#166534 !important;
  border:1px solid #bbf7d0 !important;
}

/* Estado */
.agenda-layout .chip-state-pendiente{
  background:#e0f2fe !important;
  color:#0369a1 !important;
  border:1px solid #bae6fd !important;
}

.agenda-layout .chip-state-completado{
  background:#dcfce7 !important;
  color:#166534 !important;
  border:1px solid #bbf7d0 !important;
}

/* Curso */
.agenda-layout .chip-curso{
  background:#f8fafc !important;
  color:#475569 !important;
  border:1px solid #e2e8f0 !important;
}

/* Evita que el fix viejo de .chip las vuelva amarillas */
.agenda-layout .course-tag,
.agenda-layout .curso-tag,
.agenda-layout .tag{
  background:initial;
}

/* =========================================================
   FIX AGENDA - CALENDARIO MÁS PROLIJO
   Pegar al final de styles.css
========================================================= */

.agenda-page .sections{
  max-width:980px !important;
  margin:0 auto 24px !important;
}

.agenda-page .agenda-layout{
  display:grid !important;
  grid-template-columns: minmax(420px, 470px) minmax(340px, 1fr) !important;
  gap:20px !important;
  align-items:start !important;
}

.agenda-page .calendar-panel{
  padding:18px !important;
  border-radius:22px !important;
}

.agenda-page .calendar-weekdays,
.agenda-page .calendar-grid{
  display:grid !important;
  grid-template-columns:repeat(7, 1fr) !important;
  gap:8px !important;
}

.agenda-page .calendar-weekday{
  font-size:12px !important;
  font-weight:500 !important;
  color:#64748b !important;
  text-align:center !important;
  padding:4px 0 !important;
}

.agenda-page .calendar-day{
  min-height:58px !important;
  height:58px !important;
  padding:8px !important;
  border-radius:14px !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:none !important;
}

.agenda-page .calendar-day.other-month{
  background:#f3f4f6 !important;
  opacity:.65 !important;
}

.agenda-page .calendar-day.selected{
  border:1.5px solid #009ec2 !important;
  background:#f0fbff !important;
  box-shadow:0 0 0 3px rgba(0,158,194,.08) !important;
}

.agenda-page .calendar-day-number{
  font-size:13px !important;
  font-weight:500 !important;
  color:#111827 !important;
}

.agenda-page .calendar-day-badge{
  min-width:18px !important;
  height:18px !important;
  padding:0 5px !important;
  font-size:11px !important;
  background:#d6f4ff !important;
  color:#009ec2 !important;
}

.agenda-page .calendar-dots{
  min-height:8px !important;
  gap:4px !important;
}

.agenda-page .calendar-dot{
  width:6px !important;
  height:6px !important;
}

/* Tarjetas de eventos más compactas */
.agenda-page .agenda-panel{
  border-radius:22px !important;
  padding:16px !important;
}

.agenda-page .agenda-item{
  grid-template-columns:1fr 118px !important;
  gap:12px !important;
  padding:13px 12px 13px 14px !important;
  border-radius:16px !important;
}

.agenda-page .agenda-actions{
  min-width:112px !important;
}

.agenda-page .agenda-actions button{
  min-height:30px !important;
  padding:7px 10px !important;
  font-size:12px !important;
}

/* Mantener colores correctos de chips dentro de Agenda */
.agenda-page .agenda-layout .chip{
  width:auto !important;
  white-space:nowrap !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:500 !important;
  padding:4px 10px !important;
}

.agenda-page .chip-type-tarea{
  background:#dcfce7 !important;
  color:#166534 !important;
  border:1px solid #bbf7d0 !important;
}

.agenda-page .chip-type-fechaImportante{
  background:#fce7f3 !important;
  color:#be185d !important;
  border:1px solid #f9a8d4 !important;
}

.agenda-page .chip-type-evaluacion{
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  border:1px solid #bfdbfe !important;
}

.agenda-page .chip-type-recordatorio{
  background:#fef3c7 !important;
  color:#92400e !important;
  border:1px solid #fde68a !important;
}

.agenda-page .chip-type-proximaClase{
  background:#ede9fe !important;
  color:#6d28d9 !important;
  border:1px solid #d8b4fe !important;
}

.agenda-page .chip-priority-alta{
  background:#fee2e2 !important;
  color:#991b1b !important;
  border:1px solid #fecaca !important;
}

.agenda-page .chip-priority-media{
  background:#fef3c7 !important;
  color:#92400e !important;
  border:1px solid #fde68a !important;
}

.agenda-page .chip-priority-baja{
  background:#dcfce7 !important;
  color:#166534 !important;
  border:1px solid #bbf7d0 !important;
}

.agenda-page .chip-state-pendiente{
  background:#e0f2fe !important;
  color:#0369a1 !important;
  border:1px solid #bae6fd !important;
}

.agenda-page .chip-state-completado{
  background:#dcfce7 !important;
  color:#166534 !important;
  border:1px solid #bbf7d0 !important;
}

.agenda-page .chip-curso{
  background:#f8fafc !important;
  color:#475569 !important;
  border:1px solid #e2e8f0 !important;
}

/* Responsive */
@media(max-width:1120px){
  .agenda-page .agenda-layout{
    grid-template-columns:1fr !important;
  }

  .agenda-page .sections{
    max-width:760px !important;
  }
}

@media(max-width:640px){
  .agenda-page .calendar-day{
    min-height:52px !important;
    height:52px !important;
    padding:6px !important;
  }

  .agenda-page .calendar-weekdays,
  .agenda-page .calendar-grid{
    gap:6px !important;
  }

  .agenda-page .agenda-item{
    grid-template-columns:1fr !important;
  }

  .agenda-page .agenda-actions{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    min-width:0 !important;
  }

  .agenda-page .agenda-actions button{
    flex:1 1 120px !important;
  }
}





/* =========================================================
   PROFEAPP - MOBILE FINAL LAYER
   Ajuste responsive general sin tocar lógica
   Pegar al FINAL de styles.css
   ========================================================= */

   html,
   body{
     width:100%;
     max-width:100%;
   }
   
   body{
     min-width:0;
     overscroll-behavior-x:none;
   }
   
   .app,
   .main,
   .card,
   .section,
   .main-header,
   .main-header-left,
   .main-header-right,
   .card-header,
   .toolbar,
   .course-main,
   .course-info,
   .curso-info,
   .class-info,
   .agenda-layout,
   .agenda-panel,
   .calendar-panel,
   .layout-grid,
   .grid-main,
   .layout,
   .reg-toolbar,
   .reg-row,
   .reg-field{
     min-width:0 !important;
   }
   
   .table-wrap,
   .att-table-wrap,
   .reg-table-wrap,
   .monthly-wrap{
     max-width:100% !important;
     overflow-x:auto !important;
     overflow-y:hidden;
     -webkit-overflow-scrolling:touch;
   }
   
   .table-wrap > table,
   .att-table,
   .reg-table,
   .monthly-table,
   .summary-table{
     display:table !important;
   }
   
   .main img,
   .card img,
   .section img{
     max-width:100%;
     height:auto;
   }
   
   /* Evita que el fix global de class-card rompa las clases del inicio */
   .today-list .class-card{
     width:100% !important;
     display:grid !important;
     grid-template-columns:72px minmax(0,1.2fr) minmax(0,1fr) auto !important;
     align-items:center !important;
     justify-content:normal !important;
     gap:10px !important;
     padding:10px 12px !important;
     border-radius:16px !important;
     overflow:hidden !important;
   }
   
   .today-list .class-actions{
     min-width:0 !important;
     width:auto !important;
     margin-left:0 !important;
     justify-content:flex-end !important;
     flex-wrap:wrap !important;
   }
   
   .today-list .class-actions button,
   .today-list .class-actions a{
     min-width:0 !important;
     width:auto !important;
     height:32px !important;
   }
   
   /* =========================================================
      MOBILE GENERAL
      ========================================================= */
   
   @media (max-width:768px){
     .app{
       display:block !important;
       min-height:100dvh;
     }
   
     .sidebar{
       position:sticky !important;
       top:0;
       z-index:1000;
       width:100% !important;
       max-width:100vw !important;
       height:auto !important;
       flex:0 0 auto !important;
       flex-direction:row !important;
       align-items:center !important;
       flex-wrap:nowrap !important;
       gap:8px !important;
       padding:9px 9px !important;
       overflow:hidden !important;
       box-shadow:0 10px 24px rgba(15,23,42,0.18);
     }
   
     .logo{
       width:auto !important;
       flex:0 0 auto !important;
       display:flex !important;
       align-items:center !important;
       justify-content:center !important;
       padding:4px 7px !important;
       border-radius:14px !important;
     }
   
     .logo-img{
       max-width:88px !important;
     }
   
     .sidebar-section-title,
     .sidebar-footer{
       display:none !important;
     }
   
     .sidebar-nav{
       width:auto !important;
       flex:1 1 auto !important;
       min-width:0 !important;
       display:flex !important;
       flex-direction:row !important;
       flex-wrap:nowrap !important;
       gap:6px !important;
       overflow-x:auto !important;
       overflow-y:hidden !important;
       -webkit-overflow-scrolling:touch;
       scrollbar-width:none;
       padding:1px 0;
     }
   
     .sidebar-nav::-webkit-scrollbar{
       display:none;
     }
   
     .sidebar-link{
       width:auto !important;
       flex:0 0 auto !important;
       justify-content:center !important;
       gap:6px !important;
       padding:8px 10px !important;
       border-radius:999px !important;
       font-size:12.5px !important;
       line-height:1 !important;
       background:rgba(255,255,255,0.04);
     }
   
     .sidebar-link-icon{
       width:auto !important;
       font-size:14px !important;
       line-height:1 !important;
     }
   
     .sidebar-link span{
       white-space:nowrap !important;
     }
   
     .main{
       width:100% !important;
       max-width:100vw !important;
       padding:12px 10px 22px !important;
       gap:12px !important;
     }
   
     .main-header{
       width:100% !important;
       flex-direction:column !important;
       align-items:stretch !important;
       gap:10px !important;
     }
   
     .main-header-left h1,
     .title-block h1{
       font-size:1.08rem !important;
       line-height:1.2 !important;
     }
   
     .main-header-left p,
     .title-block p{
       font-size:.78rem !important;
       line-height:1.35 !important;
     }
   
     .main-header-right{
       width:100% !important;
       display:grid !important;
       grid-template-columns:repeat(2,minmax(0,1fr)) !important;
       gap:8px !important;
     }
   
     .main-header-right > button,
     .main-header-right > a,
     .main-header-right .btn-primary,
     .main-header-right .btn-secondary,
     .main-header-right .btn-outline,
     .main-header-right .btn-volver,
     #btnInforme,
     #btnEditarAlumno,
     #btnEliminarAlumno,
     #btnVolverCurso{
       width:100% !important;
       min-width:0 !important;
       height:36px !important;
       min-height:36px !important;
       padding:0 10px !important;
       font-size:12.5px !important;
       line-height:1 !important;
     }
   
     .card,
     .section,
     .agenda-panel,
     .calendar-panel{
       width:100% !important;
       border-radius:18px !important;
       padding:14px 12px !important;
       box-shadow:0 8px 22px rgba(15,23,42,0.035) !important;
     }
   
     .card-header,
     .panel-head,
     .section-title,
     .students-header{
       align-items:flex-start !important;
       gap:8px !important;
     }
   
     .card-title,
     .panel-title,
     .section-title{
       font-size:.96rem !important;
       line-height:1.2 !important;
     }
   
     .card-subtitle,
     .section-sub,
     .empty,
     .students-info{
       font-size:.78rem !important;
       line-height:1.35 !important;
     }
   
     .grid-main,
     .layout-grid,
     .layout,
     .agenda-layout,
     .panel-grid{
       grid-template-columns:1fr !important;
       gap:12px !important;
     }
   
     .btn-row,
     .reg-actions,
     .toolbar,
     .monthly-toolbar,
     .monthly-toolbar-right,
     .monthly-controls,
     .search-row{
       width:100% !important;
       gap:8px !important;
     }
   
     .btn-row .btn-primary,
     .btn-row .btn-secondary,
     .btn-row .btn-main,
     .btn-row .btn-outline,
     .reg-actions .btn-primary,
     .reg-actions .btn-secondary,
     .toolbar .btn-primary,
     .toolbar .btn-secondary{
       width:100% !important;
       min-width:0 !important;
     }
   
     .search-input,
     .student-search,
     .monthly-input{
       width:100% !important;
       max-width:none !important;
       min-width:0 !important;
     }
   
     .form-row,
     .agenda-form-card .form-row{
       grid-template-columns:1fr !important;
       gap:6px !important;
     }
   
     .agenda-form-card .btn-row{
       padding-left:0 !important;
     }
   
     input[type="text"],
     input[type="number"],
     input[type="email"],
     input[type="date"],
     input[type="time"],
     input[type="month"],
     select,
     textarea,
     .field,
     .input,
     .search-input,
     .student-search,
     .att-input{
       min-width:0 !important;
       font-size:16px !important;
     }
   
     .modal-backdrop{
       padding:10px !important;
       align-items:flex-end !important;
     }
   
     .modal-card{
       max-width:100% !important;
       max-height:calc(100dvh - 20px) !important;
       overflow:auto !important;
       border-radius:18px 18px 14px 14px !important;
     }
   
     .modal-body,
     .modal-header,
     .modal-actions{
       padding-left:16px !important;
       padding-right:16px !important;
     }
   }
   
   /* =========================================================
      MOBILE HOME / INICIO
      ========================================================= */
   
   @media (max-width:768px){
     .today-list{
       gap:9px !important;
     }
   
     .today-list .class-card{
       grid-template-columns:1fr !important;
       align-items:flex-start !important;
       padding:12px !important;
       gap:7px !important;
     }
   
     .today-list .class-time,
     .today-list .class-info-main{
       width:100% !important;
     }
   
     .today-list .class-actions{
       width:100% !important;
       display:grid !important;
       grid-template-columns:repeat(2,minmax(0,1fr)) !important;
       gap:7px !important;
     }
   
     .today-list .class-actions button,
     .today-list .class-actions a{
       width:100% !important;
       min-width:0 !important;
       height:34px !important;
       justify-content:center !important;
     }
   
     .stats-row{
       grid-template-columns:repeat(2,minmax(0,1fr)) !important;
       gap:8px !important;
     }
   
     .stat-card,
     .metric-card{
       border-radius:16px !important;
       padding:12px !important;
       min-height:auto !important;
     }
   
     .stat-number,
     .metric-value{
       font-size:1.45rem !important;
     }
   }
   
   @media (max-width:420px){
     .stats-row{
       grid-template-columns:1fr !important;
     }
   }
   



   
   /* =========================================================
      MOBILE CURSO / ASISTENCIA / REGISTRO
      ========================================================= */
   
   @media (max-width:768px){
     .course-data-grid{
       grid-template-columns:1fr !important;
       gap:8px !important;
     }
   
     .dashboard-grid{
       grid-template-columns:1fr !important;
       gap:10px !important;
     }
   
     .att-toolbar,
     .att-row,
     .reg-row{
       width:100% !important;
       flex-direction:column !important;
       align-items:stretch !important;
       gap:9px !important;
     }
   
     .reg-field{
       width:100% !important;
       min-width:0 !important;
       flex:1 1 auto !important;
     }
   
     .attendance-note{
       align-items:flex-start !important;
       line-height:1.35 !important;
     }
   
     .att-table{
       min-width:760px !important;
     }
   
     .reg-table{
       min-width:860px !important;
     }
   
     .monthly-table{
       min-width:840px !important;
     }
   
     .summary-table{
       min-width:680px !important;
     }
   
     .att-table th,
     .att-table td,
     .reg-table th,
     .reg-table td,
     .monthly-table th,
     .monthly-table td,
     .summary-table th,
     .summary-table td{
       padding:8px 7px !important;
       font-size:12.5px !important;
     }
   
     .att-state{
       gap:4px !important;
       flex-wrap:nowrap !important;
     }
   
     .att-state button{
       height:28px !important;
       padding:0 8px !important;
       font-size:12px !important;
     }
   
     .reg-table input,
     .reg-table select,
     .att-table input{
       font-size:13px !important;
       min-width:80px !important;
     }
   
     .reg-sticky-save{
       position:sticky !important;
       top:auto !important;
       bottom:8px !important;
       z-index:50 !important;
       justify-content:stretch !important;
       display:grid !important;
       grid-template-columns:1fr !important;
       padding:8px !important;
     }
   
     .reg-sticky-save button{
       width:100% !important;
     }
   }
   
   /* =========================================================
      MOBILE AGENDA
      ========================================================= */
   
   @media (max-width:768px){
     .agenda-page .sections,
     .sections{
       width:100% !important;
       max-width:100% !important;
       margin:0 !important;
       gap:12px !important;
     }
   
     .agenda-page .agenda-layout,
     .agenda-layout{
       grid-template-columns:1fr !important;
       gap:12px !important;
     }
   
     .calendar-head{
       flex-direction:column !important;
       align-items:stretch !important;
       gap:10px !important;
     }
   
     .calendar-title{
       font-size:.95rem !important;
       text-align:center !important;
     }
   
     .calendar-tools{
       width:100% !important;
       display:grid !important;
       grid-template-columns:1fr 1fr 1fr !important;
       gap:6px !important;
     }
   
     .calendar-tools button,
     .btn-light{
       width:100% !important;
       min-width:0 !important;
       padding:8px 6px !important;
       font-size:12px !important;
     }
   
     .calendar-weekdays,
     .calendar-grid,
     .agenda-page .calendar-weekdays,
     .agenda-page .calendar-grid{
       gap:4px !important;
     }
   
     .calendar-weekday,
     .agenda-page .calendar-weekday{
       font-size:10.5px !important;
       padding:2px 0 !important;
     }
   
     .calendar-day,
     .agenda-page .calendar-day{
       min-height:43px !important;
       height:43px !important;
       padding:5px !important;
       border-radius:10px !important;
     }
   
     .calendar-day-number,
     .agenda-page .calendar-day-number{
       font-size:12px !important;
     }
   
     .calendar-day-badge,
     .agenda-page .calendar-day-badge{
       min-width:15px !important;
       height:15px !important;
       padding:0 4px !important;
       font-size:9px !important;
     }
   
     .calendar-dots,
     .agenda-page .calendar-dots{
       min-height:6px !important;
       gap:3px !important;
     }
   
     .calendar-dot,
     .agenda-page .calendar-dot{
       width:5px !important;
       height:5px !important;
     }
   
     .selected-box{
       padding:12px !important;
       border-radius:16px !important;
     }
   
     .agenda-item,
     .agenda-page .agenda-item{
       grid-template-columns:1fr !important;
       gap:10px !important;
       padding:12px 11px 12px 14px !important;
       border-radius:16px !important;
     }
   
     .agenda-actions,
     .agenda-page .agenda-actions{
       width:100% !important;
       min-width:0 !important;
       display:grid !important;
       grid-template-columns:repeat(2,minmax(0,1fr)) !important;
       gap:7px !important;
     }
   
     .agenda-actions button,
     .agenda-page .agenda-actions button{
       width:100% !important;
       min-width:0 !important;
       height:32px !important;
       padding:0 8px !important;
       font-size:12px !important;
     }
   
     .chips{
       gap:5px !important;
     }
   
     .agenda-layout .chip,
     .agenda-panel .chip,
     .calendar-panel .chip,
     .agenda-page .agenda-layout .chip{
       max-width:100% !important;
       white-space:normal !important;
       line-height:1.15 !important;
       font-size:11.5px !important;
       padding:4px 8px !important;
     }
   }
   
   @media (max-width:380px){
     .calendar-day,
     .agenda-page .calendar-day{
       min-height:38px !important;
       height:38px !important;
       padding:4px !important;
     }
   
     .calendar-day-badge,
     .agenda-page .calendar-day-badge{
       display:none !important;
     }
   
     .agenda-actions,
     .agenda-page .agenda-actions{
       grid-template-columns:1fr !important;
     }
   }
   
   /* =========================================================
      MOBILE PERFIL ALUMNO / ALUMNOS
      ========================================================= */
   
   @media (max-width:768px){
     .student-header{
       align-items:flex-start !important;
     }
   
     .student-avatar-big{
       width:46px !important;
       height:46px !important;
       flex:0 0 46px !important;
     }
   
     .summary-grid{
       grid-template-columns:1fr !important;
       gap:8px !important;
     }
   
     .info-row,
     .list-item{
       gap:4px !important;
     }
   
     .list-item{
       align-items:flex-start !important;
       flex-direction:column !important;
     }
   
     .status-pill{
       align-self:flex-start !important;
     }
   }
   
   /* =========================================================
      MOBILE ULTRA CHICO
      ========================================================= */
   
   @media (max-width:360px){
     .main{
       padding-left:8px !important;
       padding-right:8px !important;
     }
   
     .main-header-right{
       grid-template-columns:1fr !important;
     }
   
     .sidebar-link{
       font-size:12px !important;
       padding:8px 9px !important;
     }
   }

   /* =========================================================
   CURSO.HTML - FIX MOBILE TABLA ASISTENCIA
   Hace la tabla usable en celular sin tocar lógica
   ========================================================= */

@media (max-width:768px){

  /* Contenedor de asistencia */
  .att-table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:16px !important;
    position:relative !important;
  }

  /* Tabla más angosta que antes */
  .att-table{
    min-width:680px !important;
    width:680px !important;
    table-layout:fixed !important;
  }

  .att-table th,
  .att-table td{
    padding:9px 7px !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  /* Primera columna fija: alumno */
  .att-table th:first-child,
  .att-table td:first-child{
    position:sticky !important;
    left:0 !important;
    z-index:4 !important;
    background:#ffffff !important;
    width:135px !important;
    min-width:135px !important;
    max-width:135px !important;
    box-shadow:8px 0 12px rgba(15,23,42,0.05) !important;
  }

  .att-table thead th:first-child{
    z-index:6 !important;
    background:#f8fafc !important;
  }

  /* Nombre del alumno más legible */
  .att-table .student-name,
  .att-table td:first-child{
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
    font-size:12px !important;
    font-weight:500 !important;
    color:#0f172a !important;
  }

  /* Columna asistencia */
  .att-table th:nth-child(2),
  .att-table td:nth-child(2){
    width:120px !important;
    min-width:120px !important;
    text-align:center !important;
  }

  .att-state{
    display:flex !important;
    justify-content:center !important;
    gap:4px !important;
    flex-wrap:nowrap !important;
  }

  .att-state button{
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    padding:0 !important;
    font-size:11.5px !important;
    border-radius:999px !important;
  }

  /* Seguimiento */
  .att-table th:nth-child(3),
  .att-table td:nth-child(3){
    width:170px !important;
    min-width:170px !important;
  }

  .student-track{
    min-width:0 !important;
    gap:4px !important;
  }

  .track-text,
  .track-empty{
    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  /* Trayectoria */
  .att-table th:nth-child(4),
  .att-table td:nth-child(4){
    width:190px !important;
    min-width:190px !important;
  }

  .eval-track{
    min-width:0 !important;
    gap:5px !important;
  }

  .eval-badges{
    gap:4px !important;
  }

  .eval-badge{
    min-width:44px !important;
    padding:5px 6px !important;
    font-size:11.5px !important;
  }

  .eval-note{
    font-size:11.5px !important;
    line-height:1.25 !important;
  }

  /* Si hay columna de acciones, que no agrande demasiado */
  .att-table th:last-child,
  .att-table td:last-child{
    width:60px !important;
    min-width:60px !important;
  }

  /* Barra inferior de resumen */
  .att-summary{
    font-size:12.5px !important;
    line-height:1.35 !important;
    padding:2px 2px 0 !important;
  }
}

/* =========================================================
   CURSO.HTML - MOBILE ASISTENCIA EN TARJETAS
   Anula la tabla horizontal en celular
   Pegar al FINAL del styles.css
   ========================================================= */

   @media (max-width:768px){

    /* El contenedor ya no debe generar barra horizontal */
    .att-table-wrap{
      overflow:visible !important;
      border:none !important;
      background:transparent !important;
      border-radius:0 !important;
      width:100% !important;
      max-width:100% !important;
    }
  
    /* Convertimos tabla en bloque */
    .att-table,
    .att-table thead,
    .att-table tbody,
    .att-table tr,
    .att-table th,
    .att-table td{
      display:block !important;
      width:100% !important;
      min-width:0 !important;
      max-width:100% !important;
      position:static !important;
      box-shadow:none !important;
    }
  
    .att-table{
      min-width:0 !important;
      table-layout:auto !important;
      border-collapse:separate !important;
      border-spacing:0 !important;
      background:transparent !important;
    }
  
    /* Ocultamos encabezado de tabla */
    .att-table thead{
      display:none !important;
    }
  
    .att-table tbody{
      display:flex !important;
      flex-direction:column !important;
      gap:10px !important;
    }
  
    /* Cada alumno es una tarjeta */
    .att-table tr{
      background:#ffffff !important;
      border:1px solid #e5e7eb !important;
      border-radius:18px !important;
      padding:12px !important;
      box-shadow:0 8px 20px rgba(15,23,42,0.04) !important;
      overflow:hidden !important;
    }
  
    .att-table td{
      border:none !important;
      background:transparent !important;
      padding:8px 0 !important;
      font-size:13px !important;
      line-height:1.35 !important;
      text-align:left !important;
    }
  
    .att-table td + td{
      border-top:1px solid #eef2f7 !important;
    }
  
    /* Etiquetas mobile */
    .att-table td::before{
      display:block !important;
      margin-bottom:5px !important;
      font-size:10.5px !important;
      font-weight:600 !important;
      text-transform:uppercase !important;
      letter-spacing:.04em !important;
      color:#64748b !important;
    }
  
    .att-table td:nth-child(1)::before{
      content:"Alumno";
    }
  
    .att-table td:nth-child(2)::before{
      content:"Asistencia";
    }
  
    .att-table td:nth-child(3)::before{
      content:"Seguimiento";
    }
  
    .att-table td:nth-child(4)::before{
      content:"Trayectoria";
    }
  
    .att-table td:nth-child(5)::before{
      content:"Acciones";
    }
  
    /* Alumno */
    .att-table .student-name,
    .att-table td:first-child{
      font-size:14px !important;
      font-weight:600 !important;
      color:#0f172a !important;
      white-space:normal !important;
      overflow-wrap:anywhere !important;
    }
  
    /* Botones P T A */
    .att-state{
      display:flex !important;
      justify-content:flex-start !important;
      gap:8px !important;
      flex-wrap:wrap !important;
    }
  
    .att-state button{
      width:36px !important;
      min-width:36px !important;
      height:32px !important;
      padding:0 !important;
      font-size:12px !important;
      border-radius:999px !important;
    }
  
    /* Seguimiento */
    .student-track{
      display:block !important;
      min-width:0 !important;
    }
  
    .track-text,
    .track-empty{
      font-size:12.5px !important;
      line-height:1.35 !important;
      color:#64748b !important;
    }
  
    /* Trayectoria */
    .eval-track{
      display:flex !important;
      flex-direction:column !important;
      gap:6px !important;
      min-width:0 !important;
    }
  
    .eval-badges{
      display:flex !important;
      flex-wrap:wrap !important;
      gap:6px !important;
    }
  
    .eval-badge{
      min-width:0 !important;
      width:auto !important;
      padding:6px 9px !important;
      font-size:12px !important;
    }
  
    .eval-note{
      font-size:12.5px !important;
      line-height:1.35 !important;
    }
  
    /* Botón de acciones si existe */
    .row-actions{
      justify-content:flex-start !important;
    }
  
    .actions-menu{
      left:0 !important;
      right:auto !important;
    }
  
    /* Resumen de abajo */
    .att-summary{
      font-size:12.5px !important;
      line-height:1.35 !important;
      padding:8px 2px 0 !important;
    }
  }


  /* PRUEBA DE CARGA MOBILE 
@media (max-width:768px){
  body::before{
    content:"CSS MOBILE OK";
    position:fixed;
    top:80px;
    left:10px;
    z-index:999999;
    background:#009ec2;
    color:white;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
  }
}*/


/* =========================================================
   PROFEAPP - MENU HAMBURGUESA MOBILE
   ========================================================= */

   .mobile-menu-toggle,
   .mobile-menu-backdrop{
     display:none;
   }
   
   @media (max-width:768px){
   
     .app{
       display:block !important;
     }
   
     .sidebar{
       position:fixed !important;
       top:0 !important;
       left:0 !important;
       right:0 !important;
       z-index:1000 !important;
   
       width:100% !important;
       height:58px !important;
       min-height:58px !important;
   
       display:flex !important;
       flex-direction:row !important;
       align-items:center !important;
       justify-content:space-between !important;
   
       padding:8px 12px !important;
       gap:10px !important;
   
       background:#111827 !important;
       box-shadow:0 8px 20px rgba(15,23,42,0.18) !important;
       overflow:visible !important;
     }
   
     .logo{
       width:auto !important;
       padding:3px 6px !important;
       border-radius:12px !important;
       display:flex !important;
       align-items:center !important;
     }
   
     .logo-img{
       max-width:78px !important;
       max-height:40px !important;
       object-fit:contain !important;
     }
   
     .mobile-menu-toggle{
       display:inline-flex !important;
       align-items:center !important;
       justify-content:center !important;
   
       width:40px !important;
       height:40px !important;
   
       border:none !important;
       border-radius:999px !important;
   
       background:#1f2937 !important;
       color:#ffffff !important;
   
       font-size:22px !important;
       line-height:1 !important;
       cursor:pointer !important;
     }
   
     .sidebar-section-title,
     .sidebar-footer{
       display:none !important;
     }
   
     .sidebar-nav{
       position:fixed !important;
       top:58px !important;
       left:0 !important;
       bottom:0 !important;
       z-index:1002 !important;
   
       width:260px !important;
       max-width:82vw !important;
       height:calc(100dvh - 58px) !important;
   
       display:flex !important;
       flex-direction:column !important;
       align-items:stretch !important;
   
       gap:6px !important;
       padding:14px 12px !important;
   
       background:#111827 !important;
       border-top:1px solid rgba(255,255,255,0.08) !important;
       box-shadow:12px 0 30px rgba(15,23,42,0.28) !important;
   
       overflow-y:auto !important;
       overflow-x:hidden !important;
   
       transform:translateX(-105%) !important;
       transition:transform .22s ease !important;
     }
   
     body.mobile-menu-open .sidebar-nav{
       transform:translateX(0) !important;
     }
   
     .sidebar-link{
       width:100% !important;
       justify-content:flex-start !important;
   
       padding:12px 13px !important;
       border-radius:14px !important;
   
       font-size:14px !important;
       line-height:1 !important;
   
       background:transparent !important;
     }
   
     .sidebar-link-icon{
       width:24px !important;
       font-size:16px !important;
     }
   
     .mobile-menu-backdrop{
       display:none;
       position:fixed;
       inset:58px 0 0 0;
       z-index:1001;
       background:rgba(15,23,42,0.38);
     }
   
     body.mobile-menu-open .mobile-menu-backdrop{
       display:block;
     }
   
     .main{
       padding-top:74px !important;
     }
   }


  /* =========================================================
   MIS CURSOS - AJUSTE FINAL MOBILE LIMPIO
   Tarjetas estables + botones en columna
========================================================= */

@media (max-width:768px){

  #coursesList,
  .courses-list{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  #coursesList .course-item,
  .courses-list .course-item{
    position:relative !important;
    display:block !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    padding:14px 12px 14px 18px !important;
    border-radius:18px !important;

    background:#ffffff !important;
    border:1px solid #e5e7eb !important;
    box-shadow:0 8px 22px rgba(15,23,42,0.045) !important;

    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  #coursesList .course-color-strip,
  .courses-list .course-color-strip{
    position:absolute !important;
    left:0 !important;
    top:12px !important;
    bottom:12px !important;

    width:5px !important;
    min-width:5px !important;
    height:auto !important;

    border-radius:0 999px 999px 0 !important;
    margin:0 !important;
  }

  #coursesList .course-main,
  .courses-list .course-main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;

    padding:0 !important;
    margin:0 !important;
  }

  #coursesList .course-title-line,
  .courses-list .course-title-line{
    display:block !important;
    width:100% !important;
  }

  #coursesList .course-title,
  .courses-list .course-title{
    display:block !important;
    width:100% !important;

    font-size:15px !important;
    line-height:1.25 !important;
    font-weight:600 !important;
    color:#0f172a !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  #coursesList .course-subtitle,
  .courses-list .course-subtitle,
  #coursesList .course-subtitle-secondary,
  .courses-list .course-subtitle-secondary,
  #coursesList .small-label,
  .courses-list .small-label{
    font-size:12.5px !important;
    line-height:1.35 !important;
    color:#64748b !important;
  }

  #coursesList .tags-row,
  .courses-list .tags-row{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    margin-top:8px !important;
  }

  #coursesList .tag,
  .courses-list .tag{
    max-width:100% !important;
    width:auto !important;

    display:inline-flex !important;
    align-items:center !important;

    padding:4px 9px !important;
    border-radius:999px !important;

    background:#fef3c7 !important;
    color:#92400e !important;

    font-size:12px !important;
    font-weight:500 !important;
    line-height:1.15 !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  #coursesList .course-right,
  .courses-list .course-right{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:block !important;

    padding:0 !important;
    margin:12px 0 0 !important;

    background:transparent !important;
    border:0 !important;
  }

  #coursesList .course-actions,
  .courses-list .course-actions{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;

    padding:0 !important;
    margin:0 !important;
  }

  #coursesList .course-actions button,
  .courses-list .course-actions button,
  #coursesList .course-actions a,
  .courses-list .course-actions a{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:38px !important;
    min-height:38px !important;

    padding:0 12px !important;
    border-radius:999px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;

    font-size:13px !important;
    font-weight:500 !important;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;

    overflow:visible !important;
    text-overflow:clip !important;
    box-sizing:border-box !important;
  }

  #coursesList .course-actions .btn-secondary-light,
  .courses-list .course-actions .btn-secondary-light{
    background:#009ec2 !important;
    color:#ffffff !important;
    border:1px solid #009ec2 !important;
  }

  #coursesList .course-actions .btn-edit-light,
  .courses-list .course-actions .btn-edit-light{
    background:#ffffff !important;
    color:#009ec2 !important;
    border:1px solid #009ec2 !important;
  }

  #coursesList .course-actions .btn-danger-light,
  .courses-list .course-actions .btn-danger-light{
    background:#ffffff !important;
    color:#ef4444 !important;
    border:1px solid #ef4444 !important;
  }

  #coursesList .course-actions .btn-icon,
  .courses-list .course-actions .btn-icon{
    flex:0 0 auto !important;
    font-size:12px !important;
    line-height:1 !important;
  }
}

/* =========================================================
   PROFEAPP - CELULAR HORIZONTAL
   Mantiene menú hamburguesa y layout mobile en landscape
========================================================= */

@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:1024px){

  .app{
    display:block !important;
    min-height:100dvh !important;
  }

  .sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:2000 !important;

    width:100% !important;
    max-width:100vw !important;
    height:70px !important;
    min-height:70px !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;

    gap:10px !important;
    padding:8px 14px !important;

    background:#111827 !important;
    box-shadow:0 8px 20px rgba(15,23,42,.18) !important;
    overflow:visible !important;
  }

  .logo{
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;
    height:54px !important;
    flex:0 0 150px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    padding:3px 6px !important;
    border-radius:12px !important;
    overflow:visible !important;
  }

  .logo-img{
    width:132px !important;
    min-width:132px !important;
    max-width:132px !important;
    height:auto !important;
    max-height:52px !important;
    object-fit:contain !important;
    display:block !important;
  }

  .mobile-menu-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:42px !important;
    min-width:42px !important;
    height:42px !important;

    border:none !important;
    border-radius:999px !important;

    background:#1f2937 !important;
    color:#ffffff !important;

    font-size:23px !important;
    line-height:1 !important;
    cursor:pointer !important;

    margin-left:auto !important;
    position:relative !important;
    z-index:2200 !important;
    pointer-events:auto !important;
  }

  .sidebar-section-title,
  .sidebar-footer{
    display:none !important;
  }

  .sidebar-nav{
    position:fixed !important;
    top:70px !important;
    left:0 !important;
    bottom:0 !important;
    z-index:2100 !important;

    width:270px !important;
    max-width:82vw !important;
    height:calc(100dvh - 70px) !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    gap:6px !important;
    padding:14px 12px !important;
    margin:0 !important;

    background:#111827 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    box-shadow:12px 0 30px rgba(15,23,42,.28) !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    transform:translateX(-105%) !important;
    transition:transform .22s ease !important;
    pointer-events:auto !important;
  }

  body.mobile-menu-open .sidebar-nav{
    transform:translateX(0) !important;
  }

  .sidebar-link{
    width:100% !important;
    flex:0 0 auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:10px !important;
    padding:12px 13px !important;
    border-radius:14px !important;

    font-size:14px !important;
    line-height:1 !important;

    background:transparent !important;
    white-space:normal !important;

    cursor:pointer !important;
    pointer-events:auto !important;
    user-select:none !important;
  }

  .sidebar-link:hover{
    background:#1f2937 !important;
  }

  .sidebar-link-icon{
    width:24px !important;
    min-width:24px !important;
    font-size:16px !important;
    line-height:1 !important;
    text-align:center !important;
  }

  .mobile-menu-backdrop{
    display:none;
    position:fixed;
    inset:70px 0 0 0;
    z-index:1900;
    background:rgba(15,23,42,.38);
    pointer-events:auto;
  }

  body.mobile-menu-open .mobile-menu-backdrop{
    display:block;
  }

  .main{
    width:100% !important;
    max-width:100vw !important;
    padding-top:86px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .main-header{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  .main-header-right{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .card,
  .section{
    width:100% !important;
    max-width:100% !important;
  }

  /* Mis cursos también se mantiene como mobile */
  #coursesList .course-actions,
  .courses-list .course-actions{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  #coursesList .course-actions button,
  .courses-list .course-actions button{
    width:100% !important;
    min-width:0 !important;
    height:38px !important;
  }
}