@charset "utf-8";
/* CSS Document */

/* Fullschool css */

	body {
      font-size: 0.85rem;
      font-family: "Segoe UI", Roboto, Arial, sans-serif;
      background-color: #f8f9fa;
    }
	
	.topbar {
      background-color: #fff;
      border-bottom: 1px solid #e5e7eb;
      padding: 0.5rem 1rem;
    }

    .content {
	  margin-left: 240px; /* ancho expandido */
	  transition: margin-left 0.2s;
	}
	/* .content { padding: 1rem; } */

	/* Sidebar */
    .sidebar {
	  height: calc(100vh - 56px); /* Para que no se esconda detrás de la navbar */
	  top: 60px;                  /* Lo empuja hacia abajo */
	  position: fixed;            /* Fijo al lado izquierdo */
	  left: 0;
	  background-color: #38bdf8; 
	  transition: width 0.3s;
	  overflow-x: hidden;
	  white-space: nowrap;
	  color: #fff;
	}

    .sidebar.expanded { width: 240px; }
    .sidebar.collapsed { width: 60px; }

    .sidebar .nav-link {
      color: #e0e7ff;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      transition: all 0.2s;
		border-radius: 6px;
    }

    .sidebar .nav-link:hover {
      background-color: #1e40af;
      color: #fff;
    }

    .sidebar .nav-link i {
      font-size: 1rem;
      margin-right: 5px;
    }
    .sidebar.collapsed .nav-link span { display: none; }
   /* .sidebar.collapsed .collapse { display: none; } */

    /* Subniveles */
    .submenu .nav-link { padding-left: 0.5rem; font-size: 0.8rem; color: #fff; cursor: pointer; }
    .submenu .nav-link:hover { color: #fff; background-color: #2563eb;}

	.subsubmenu .nav-link { padding-left: 1rem; font-size: 0.78rem; color: #c7d2fe; cursor: pointer;}
    .subsubmenu .nav-link:hover { color: #fff; background-color: #1d4ed8;}

	.sidebar.collapsed ~ .content {
	  margin-left: 60px; /* ancho colapsado */
	}
	  
	  /* Tooltips en sidebar colapsado */
    .sidebar.collapsed .nav-link {
      justify-content: left;
    }
    .sidebar.collapsed .nav-link i {
      margin-right: 0;
    }


/* Modifica el comportamiento del help en los formularios*/
		/* Estilo inicial del help */
		.form-help { 
			font-size: 0.75rem; 
			line-height: 1.2; 
			color: #6c757d; 
			max-height: 0;       /* colapsado inicialmente */
			opacity: 0;          /* invisible */
			overflow: hidden;    /* oculta el contenido colapsado */
			transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; 
			padding-top: 0;      /* sin padding inicial */
		}

		/* Mostrar help cuando el input/select tenga foco */
		.mb-3:focus-within .form-help { 
			opacity: 1;
			max-height: 200px;  /* suficiente para el contenido */
			padding-top: 0.25rem; /* un poco de espacio arriba del texto */
		}